UIの試作品をClaude Codeで作る、prototypeスキルの使い方

使うとこうなる

依頼文を1つ送ると、操作して確かめられる試作品が届きます。たとえば処理の流れを確かめたいときの依頼文は、次のとおりです。

注文の状態が「下書き→確認待ち→確定→キャンセル」と移る処理を考えています。この状態の持ち方で問題がないか、操作できるHTMLで試させてください。

エージェントが作るのは、ダブルクリックで開ける単一のHTMLファイルです。画面には、自由に押せる操作ボタンと、タブで切り替える手順付きの説明が並びます。手順付きの説明は、紙の上では見落としやすいケースまで状態を進めるためのもの。

ボタンを押すたびに画面に出るのは、関連する状態のすべてです。何を押すと何が変わったかが一目で分かり、エンジニアでない人にも操作を任せられます。依頼の意図があいまいなまま作った場合は、どう解釈したかが試作品の冒頭に書かれます。

画面の見た目を相談した場合は、出来上がるものの形が変わります。1つの画面に方向性の大きく異なる複数のUI案が作られ、URLのパラメーターか画面下に浮かぶバーで切り替える形です。案を切り替えるたびに状態も表示されるので、見た目と中身を並べて確かめられます。

prototypeでできること

prototypeは、設計上の疑問に答えるための使い捨てのコードを作るスキルです。確かめたいことの種類によって、作られるものが2通りに分かれます。

確かめたいこと	作られるもの	操作のしかた
処理や状態の持ち方が自然か	共有できる単一のHTMLファイル	自由に押せるボタンと、タブで切り替える手順付きの説明
画面をどう見せるか	1つの画面に並ぶ、方向性の大きく異なる複数のUI案	URLのパラメーターか、画面下に浮かぶバーで切り替え

どちらを作るかは、依頼文や周りのコードから判断されます。利用者がその場にいれば、エージェントから確認が入るでしょう。確認できないときは、バックエンドのモジュールなら処理の試作、ページや部品なら画面の試作が既定です。

試作品は対象のすぐ近くに置かれる

試作品は、検証したいモジュールやページのすぐ隣に置かれます。名前も、ひと目で試作品だと分かるものを付ける決まりです。画面の試作では、プロジェクトの既存のルーティング（URLと画面の対応づけ）に従い、新しい構成は持ち込みません。

起動はコマンド1つ

画面の試作は、プロジェクトのタスクランナーから1つのコマンドで起動します。pnpm <name>やbun <path>のような形です。処理の試作はHTMLファイルなので、ダブルクリックで開くだけで動きます。

判断を記録して終える

検証できた判断は本番のコードに反映し、試作品そのものは試作用のブランチに残します。 メインブランチには試作品を入れず、実装課題（issue）にそのブランチへの参照を書き添える流れです。何を確かめてどう結論したかも課題かコミットに記録されるため、後から判断の根拠をたどれます。

インストール方法

インストールには次のコマンドを使います。実行時には、Claude CodeやCodexなど、入れる先のエージェントを選べます。

npx skills add https://github.com/mattpocock/skills --skill prototype

エージェントに入れてもらう場合は、次の文面をそのまま送ってください。中身の確認から配置までを任せられます。

次の Agent Skill をインストールしてください。
https://github.com/mattpocock/skills/tree/main/skills/engineering/prototype

まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/prototype/、Codex なら ~/.agents/skills/prototype/ に配置してください。

置き場所は、すべてのプロジェクトで使うか、特定のプロジェクトだけで使うかで選びます。

エージェント	すべてのプロジェクトで使う	特定のプロジェクトだけで使う
Claude Code	~/.claude/skills/prototype/	プロジェクトの .claude/skills/prototype/
Codex	~/.agents/skills/prototype/	プロジェクトの .agents/skills/prototype/

prototypeは、GitHubのリポジトリmattpocock/skillsに含まれるスキルの1つです。原文は英語で、配布元のページからSKILL.mdを読めます。

使い方の例

複雑な状態変化を確かめる

会員登録の流れで、メール認証の前にプランを変えた場合の状態を確かめたいです。状態の持ち方を、操作できるHTMLで試作してください。

返ってくるのは、自由操作のボタンと手順付きの説明を備えたHTMLファイルです。手順付きの説明に沿って操作すれば、判断に迷うケースまで状態を進められます。各操作の後に状態全体が表示されるので、想定外の変化にもすぐ気付けるでしょう。

画面案を並べて比べる

設定画面の見た目を決めかねています。方向性の大きく違う案をいくつか作り、切り替えて比べられるようにしてください。

既存のプロジェクトの中に、複数のUI案を持つ試作用の画面が1つ作られます。画面下に浮かぶバーかURLのパラメーターで案を切り替え、違いをその場で見比べられます。起動に必要なのは、プロジェクトのタスクランナーのコマンド1つだけです。

非エンジニアに見てもらう

返品受付の状態の流れを、企画担当に操作してもらって意見を聞きたいです。ブラウザで開くだけで試せるHTMLにしてください。

処理の試作は単一のHTMLファイルなので、ファイルを渡せば相手はダブルクリックで開けます。操作のたびに状態が表示され、コードを読まない人でも変化を追える作りです。意見がまとまって結論が出たら、その判断を課題やコミットに記録するところまで頼めます。

注意点

試作品は使い捨てで、本番のコードとは分けて扱います。 テストは書かれず、エラー処理も動かすのに必要な分だけです。抽象化もしないため、試作品のコードを本番へそのまま流用する使い方には向きません。

データは原則としてメモリ内に保持されます。保存の仕組みそのものが、検証の対象になりうるからです。データベースが論点の場合だけ、使い捨てのDBか、「PROTOTYPE, wipe me」のように消してよいと分かる名前のローカルファイルが使われます。

試作品の保存先は、メインブランチ外の試作用ブランチです。記録先としてGitのブランチと実装課題を使う前提なので、運用に合うかを先に確かめておきましょう。

ライセンスはMITです。入れる前にSKILL.mdと3つの付属ファイルを読み、外部への送信や認証情報の読み取りがないかを確かめてください。

関連スキル

同じmattpocock/skillsリポジトリには、prototypeの前後で使えるスキルがあります。

domain-modelingは、業務用語や概念の境界を、具体例とコードの照合で明確にするスキルです。状態の名前や意味が定まっていないときは、試作の前に用語をそろえる用途で使えます。重要な設計判断の理由も、必要に応じて残せます。

codebase-designの役割は、呼び出し側が覚える使い方を小さく保つモジュール設計の支援です。試作で状態の持ち方が決まった後、本番のモジュールをどう組むかを検討する場面に合うスキルです。

ask-mattは、状況に合う関連スキルと使う順序を案内する相談役です。試作から実装へ進む手順に迷ったときの入口になります。

まとめ

prototypeは、画面案や状態の変化を実装前に確かめたい人のためのスキルです。処理の試作なら操作できる単一のHTMLが、画面の試作なら複数案を切り替えられる画面が作られます。試作品は使い捨てとして扱われ、検証した判断と結論は後から参照できる形で残ります。導入前にSKILL.mdを読み、cccskillsのページから入手してください。