← 一覧へ
🎨 デザインCC / Codex 両対応難易度: 初心者
プロトタイプ作成 prototype
アイデアをカタチに、素早く試そう！
これは何？
プロトタイプは、デザインやロジックに関する疑問を解決するための使い捨てのコードです。UIの見た目や状態モデルの妥当性を素早く確認したい時に役立ちます。プロトタイプを作ることで、紙の上では難しい問題も実際に動かしながら解決できます。
これでできること
- UIの見た目をいくつかのバリエーションで試す
- 状態モデルの妥当性をインタラクティブに検証する
- デザインの疑問を素早く解決する
- ロジックの難しさを実際に動かして確認する
こんな時に便利
新しいUIデザインを試したい時
状態遷移モデルが正しいか確認したい時
デザインのアイデアを素早く検証したい時
ロジックが想定通りに動くか確認したい時
使い方
まず、解決したい疑問を明確にします。UIの見た目を試すのか、それともロジックを検証するのか、目的に応じてプロトタイプの形を決めましょう。プロトタイプは使い捨てであることを意識し、素早く作って試すことがポイントです。
使用例（こう頼んでみよう）
「このUIのデザインを3つのバリエーションで試して」「この状態遷移モデルが正しいか、インタラクティブに確認して」「新しいロジックの妥当性を素早く検証して」必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/mattpocock/skills/tree/main/skills/engineering/prototype手動で置く
Claude Code →
~/.claude/skills/prototype/Codex →
~/.agents/skills/prototype/使いこなしのコツ
- プロトタイプは使い捨てであることを意識し、完璧を目指さないようにしましょう
- 解決したい疑問を明確にすることで、プロトタイプの形が決まります
- プロトタイプを使い終わったら、必要な知見を記録して削除することを忘れずに