jpskill.com
📦 その他 コミュニティ

prototype

本格的な開発に入る前に、データモデルや状態遷移、UIデザインなどの設計アイデアを実際に動く形で試し、問題点や改善点を見つけやすくするSkill。

📜 元の英語説明(参考)

Build a throwaway prototype to flush out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".

🇯🇵 日本人クリエイター向け解説

一言でいうと

本格的な開発に入る前に、データモデルや状態遷移、UIデザインなどの設計アイデアを実際に動く形で試し、問題点や改善点を見つけやすくするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o prototype.zip https://jpskill.com/download/19630.zip && unzip -o prototype.zip && rm prototype.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19630.zip -OutFile "$d\prototype.zip"; Expand-Archive "$d\prototype.zip" -DestinationPath $d -Force; ri "$d\prototype.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して prototype.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → prototype フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

プロトタイプ

プロトタイプとは、質問に答えるための一時的なコードです。質問によってその形が決まります。

ブランチを選ぶ

ユーザーのプロンプト、周囲のコード、またはユーザーが近くにいる場合は質問することで、どの質問に答えているのかを特定します。

  • 「このロジック/状態モデルは適切か?」LOGIC.md。紙の上では推論が難しいケースを状態マシンに通す、小さなインタラクティブなターミナルアプリを構築します。
  • 「これはどのように見えるべきか?」UI.md。単一のルートで、URL検索パラメーターとフローティングボトムバーで切り替え可能な、根本的に異なるいくつかのUIバリエーションを生成します。

この2つのブランチは非常に異なる成果物を生み出します。これを間違えると、プロトタイプ全体が無駄になります。質問が本当に曖昧で、ユーザーに連絡が取れない場合は、周囲のコードにより適したブランチ(バックエンドモジュール → ロジック、ページまたはコンポーネント → UI)をデフォルトとし、プロトタイプの上部にその仮定を明記してください。

両方に適用されるルール

  1. 最初から使い捨てであり、そのように明確にマークする。 プロトタイプコードは、実際に使用される場所(プロトタイプ対象のモジュールやページの隣)の近くに配置し、コンテキストが明確になるようにします。ただし、カジュアルな読者がそれが本番コードではなくプロトタイプであることがわかるように命名してください。使い捨てのUIルートについては、プロジェクトがすでに使用しているルーティング規則に従い、新しいトップレベル構造を発明しないでください。
  2. 実行コマンドは1つ。 プロジェクトの既存のタスクランナーがサポートしているものであれば何でも構いません — pnpm <name>python <path>bun <path>など。ユーザーは考えずにそれを起動できる必要があります。
  3. デフォルトでは永続化しない。 状態はメモリに存在します。永続化はプロトタイプが検証しているものであり、それに依存すべきではありません。質問が明示的にデータベースを含む場合は、「PROTOTYPE — wipe me」という明確な名前のスクラッチDBまたはローカルファイルをヒットしてください。
  4. 洗練はスキップする。 テストなし、プロトタイプを実行可能にする以上のエラー処理なし、抽象化なし。目的は、何かを素早く学び、そして削除することです。
  5. 状態を表に出す。 すべてのアクション(ロジック)の後、またはすべてのバリアント切り替え(UI)の後に、関連する完全な状態を印刷またはレンダリングし、ユーザーが何が変更されたかを確認できるようにします。
  6. 完了したら削除または吸収する。 プロトタイプが質問に答えたら、それを削除するか、検証された決定を実際のコードに組み込むかしてください — リポジトリに腐らせておかないでください。

完了時

プロトタイプから保持する価値があるのは、答えだけです。その答えを、それが答えていた質問とともに、耐久性のある場所(コミットメッセージ、ADR、issue、またはプロトタイプの隣のNOTES.md)に記録してください。ユーザーが近くにいる場合は、その記録は簡単な会話で済みます。そうでない場合は、プロトタイプを削除する前に、彼ら(または次のパスであなた)が判断を記入できるようにプレースホルダーを残してください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Prototype

A prototype is throwaway code that answers a question. The question decides the shape.

Pick a branch

Identify which question is being answered — from the user's prompt, the surrounding code, or by asking if the user is around:

  • "Does this logic / state model feel right?"LOGIC.md. Build a tiny interactive terminal app that pushes the state machine through cases that are hard to reason about on paper.
  • "What should this look like?"UI.md. Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar.

The two branches produce very different artifacts — getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype.

Rules that apply to both

  1. Throwaway from day one, and clearly marked as such. Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious — but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure.
  2. One command to run. Whatever the project's existing task runner supports — pnpm <name>, python <path>, bun <path>, etc. The user must be able to start it without thinking.
  3. No persistence by default. State lives in memory. Persistence is the thing the prototype is checking, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE — wipe me" name.
  4. Skip the polish. No tests, no error handling beyond what makes the prototype runnable, no abstractions. The point is to learn something fast and then delete it.
  5. Surface the state. After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed.
  6. Delete or absorb when done. When the prototype has answered its question, either delete it or fold the validated decision into the real code — don't leave it rotting in the repo.

When done

The answer is the only thing worth keeping from a prototype. Capture it somewhere durable (commit message, ADR, issue, or a NOTES.md next to the prototype) along with the question it was answering. If the user is around, that capture is a quick conversation; if not, leave the placeholder so they (or you, on the next pass) can fill in the verdict before deleting the prototype.