mcpField
P
prototype

prototype

github.com/ilteooodデザイン・UI257 回インストール4 日前に更新
リポジトリ

prototype について

Prototype は、特定の設計やロジック上の疑問に答える使い捨てコードの作成を支援するスキルです。単一HTMLファイルのロジックデモ、または切り替え可能な複数のUI案を作り、検証済みの判断を一時的な成果物と分けて記録します。

主な機能

  1. 01ロジックまたはUIの試作方法を選択
  2. 02単一ファイルの対話型ロジックデモを作成
  3. 03単一ルートで切り替え可能なUI案を生成
  4. 04試作状態は原則メモリ内に保持
  5. 05操作や切り替え後に関連状態を表示
  6. 06検証済みの判断をメインブランチ外に記録

活用シーン

  1. 01非開発者と状態機械を検討
  2. 02ページやコンポーネントの異なるデザインを比較
  3. 03操作やロジックの仮説を素早く検証
  4. 04実装に向けて試作と結論を保存

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ilteoood/harness --skill prototype

インストール後、Claude Code で/prototypeを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LOGIC.md
UI.md
agents/
openai.yaml

詳細

プロトタイプ

プロトタイプとは、問いに答えるための使い捨てコードです。形は問いによって決まります。

分岐を選ぶ

ユーザーのプロンプトや周辺のコードを手がかりに、またはユーザーが応答できるなら尋ねて、どの問いに答えるのかを特定します。

  • 「このロジック/状態モデルは適切でしょうか?」 → LOGIC.md。単一の共有可能な HTML ファイルを作成します(自由に操作できるボタンと、タブ付きのガイド付きウォークスルーを用意)。紙上では推論しにくいケースで状態マシンを動かし、開発者でなくても操作できるようにします。
  • 「見た目はどうあるべきでしょうか?」 → UI.md。1 つのルートで大きく異なる UI バリエーションを複数生成し、URL の検索パラメーターと画面下部に固定されたバーで切り替えられるようにします。

2 つの分岐では成果物が大きく異なるため、選択を誤るとプロトタイプ全体が無駄になります。問いが本当に曖昧で、ユーザーに確認できない場合は、周辺のコードにより合う分岐を選びます(バックエンドモジュールならロジック、ページやコンポーネントなら UI)。そして、プロトタイプの先頭にその前提を明記します。

両方に適用されるルール

  1. 初日から使い捨てとして扱い、それと明確にわかるようにします。 実際に使われる場所の近く(プロトタイプ対象のモジュールやページの隣)にコードを配置し、何のためのものかが明らかになるようにします。ただし、ひと目でプロトタイプだとわかる名前を付けます。使い捨ての UI ルートでは、プロジェクトですでに採用されているルーティング規約に従い、新たなトップレベル構造を作らないでください。
  2. すぐに実行できるようにします。 UI プロトタイプは、プロジェクトのタスクランナーから 1 つのコマンドで起動します。例:pnpm <name>、python <path>、bun <path> など。ロジックのデモは、ユーザーがダブルクリックする単一の HTML ファイルにします。どちらの場合も、起動時に考えることは不要です。
  3. デフォルトでは永続化しません。 状態はメモリ内に保持します。プロトタイプが検証する対象が永続化であっても、それに依存させてはいけません。問いにデータベースが明示的に含まれている場合は、一時的な DB または「PROTOTYPE, wipe me」という名前が明確なローカルファイルを使います。
  4. 仕上げに時間をかけません。 テストも、プロトタイプを実行可能にするために必要な範囲を超えるエラー処理も、抽象化も不要です。目的は、すばやく学びを得ることです。
  5. 状態を見えるようにします。 ロジックでは各アクションの後に、UI ではバリエーションを切り替えるたびに、関連する状態全体を出力または表示し、何が変わったかをユーザーが確認できるようにします。
  6. 完了したら記録します。 検証された決定を実際のコードに反映したうえで、プロトタイプ自体を一次資料として記録します。使い捨てブランチにコミットし、main から切り離して、実装イシューにそのブランチへの参照を残します。結論(判断結果と、決着した問い)もイシューまたはコミットに記録します。main ブランチには検証済みの決定だけを残します。

コメント