元記事: UIの試作品をClaude Codeで作る、prototypeスキルの使い方（cccskills）
スキルのページ: prototype
この記事の結論
prototypeは、操作して試せる使い捨ての試作品をClaude Codeなどのエージェントに作らせるスキルです。
実装の前に画面案や処理の流れを確かめたい開発者やデザイナーに向いています。
記事の前半では、出来上がる試作品の形とインストール方法を紹介します。
後半は依頼文の例と、試作品を扱うときの注意点です。
依頼文を1つ送ると、操作して確かめられる試作品が届きます。
たとえば処理の流れを確かめたいときの依頼文は、次のとおりです。
注文の状態が「下書き→確認待ち→確定→キャンセル」と移る処理を考えています。
この状態の持ち方で問題がないか、操作できるHTMLで試させてください。
エージェントが作るのは、ダブルクリックで開ける単一のHTMLファイルです。
画面には、自由に押せる操作ボタンと、タブで切り替える手順付きの説明が並びます。
手順付きの説明は、紙の上では見落としやすいケースまで状態を進めるためのもの。
ボタンを押すたびに画面に出るのは、関連する状態のすべてです。
何を押すと何が変わったかが一目で分かり、エンジニアでない人にも操作を任せられます。
依頼の意図があいまいなまま作った場合は、どう解釈したかが試作品の冒頭に書かれます。
画面の見た目を相談した場合は、出来上がるものの形が変わります。
1つの画面に方向性の大きく異なる複数のUI案が作られ、URLのパラメーターか画面下に浮かぶバーで切り替える形です。
案を切り替えるたびに状態も表示されるので、見た目と中身を並べて確かめられます。
prototypeは、設計上の疑問に答えるための使い捨てのコードを作るスキルです。
確かめたいことの種類によって、作られるものが2通りに分かれます。
| 確かめたいこと | 作られるもの | 操作のしかた |
|---|---|---|
| 処理や状態の持ち方が自然か | 共有できる単一のHTMLファイル | 自由に押せるボタンと、タブで切り替える手順付きの説明 |
| 画面をどう見せるか | 1つの画面に並ぶ、方向性の大きく異なる複数のUI案 | URLのパラメーターか、画面下に浮かぶバーで切り替え |
どちらを作るかは、依頼文や周りのコードから判断されます。
利用者がその場にいれば、エージェントから確認が入るでしょう。
確認できないときは、バックエンドのモジュールなら処理の試作、ページや部品なら画面の試作が既定です。
試作品は、検証したいモジュールやページのすぐ隣に置かれます。
名前も、ひと目で試作品だと分かるものを付ける決まりです。
画面の試作では、プロジェクトの既存のルーティング（URLと画面の対応づけ）に従い、新しい構成は持ち込みません。
画面の試作は、プロジェクトのタスクランナーから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の試作品は、実際に動くコードです。
処理の試作ではボタンで状態を動かせ、画面の試作では既存プロジェクトの中で複数案を切り替えられます。
見た目だけでなく、操作後の状態まで確かめられる点が違います。
使えません。
テストや仕上げを省いた使い捨てのコードとして作られるからです。
検証できた判断だけを本番のコードに反映し、試作品は試作用ブランチに残します。
依頼文や周りのコードから判断されるため、必ずしも指定は要りません。
判断がつかないときは、エージェントから確認が入ります。
確認できずに作った場合は、どう解釈したかが試作品の冒頭に書かれます。
prototypeは、画面案や状態の変化を実装前に確かめたい人のためのスキルです。
処理の試作なら操作できる単一のHTMLが、画面の試作なら複数案を切り替えられる画面が作られます。
試作品は使い捨てとして扱われ、検証した判断と結論は後から参照できる形で残ります。
導入前にSKILL.mdを読み、cccskillsのページから入手してください。
この記事は cccskills の読みもの「UIの試作品をClaude Codeで作る、prototypeスキルの使い方」の転載です。
スキルの詳細とインストール方法は cccskills の prototype のページ にあります。