prototypeとは｜Emil Kowalski skillsで案を3つ比べる
「販売ページの最初の画面を、案を3つ並べて決めたい」——そう思ってAIに頼んでも、1案しか出てこない、出ても似た案ばかり、という経験はないでしょうか。
結論から言うと、prototype（プロトタイプ）は、頼んだ画面の部品について「方向の違う案」を3つ作り、1つのHTMLファイルの中でスイッチを押して全画面で見比べられるようにするスキルです。Emil Kowalski（エミル・コワルスキー）氏が公開している15本のスキル集「emilkowalski/skills」の中の1本で、「emil kowalski skills」で調べて最初に突き当たる中身がこれです。私たちが試したところ、案の「軸」はきちんと分かれ、3案とも触れる動きまでついてきました。一方で、スキルなしより約3倍の時間がかかりました。
株式会社Fyveは、Claude Codeのスキルを実際に入れ、架空の会社（手作り家具を売る従業員12名の会社）の仕事で試した結果だけを書いています。この記事は、その会社の新商品「ダイニングチェア」の販売ページで、prototype に最初の画面を3案頼んだ記録です。
prototypeとは｜15本ある Emil Kowalski skills の中の何をする1本か
emilkowalski/skills は、画面の動きや見た目を整えるための手引き（スキル）を15本まとめたリポジトリ（GitHubに公開されているファイル置き場）です。作者のEmil Kowalski氏は、VercelやLinearで働いた経験をもとに作ったと説明しています。2026年10月21日時点のスター数は48,089、ライセンスはMITで、最後の更新は2026年10月11日です。
15本のうち、README には次のような説明が並んでいます（説明の要約であり、私たちが試したのは prototype だけです）。
- animate / animate-expo：動き（アニメーション）を一から作る。後者はスマホアプリ向け
- review-animations / improve-animations：作った動きを厳しく点検する／直す計画を出す
- find-animation-opportunities / animation-performance / animation-vocabulary：動かすべき場所の発見、カクつきの修正、AIへの動きの伝え方
- emil-design-eng / apple-design / mobile-native：画面づくりの考え方、Appleの設計思想、スマホらしい操作感
- pick-ui-library / ask-sonner / break-ui / write-swift：部品の選び方、通知部品の使い方、長い名前や空のデータで画面を壊してみる点検、Swiftの書き方
- prototype：同じ画面部品の別バージョンを複数作り、切り替えて見比べる（この記事の主役）
prototype の SKILL.md（スキルの説明書）は、自分の役割を1つに絞っています。「トースト（小さな通知）」「料金カード」「長押しで消すボタン」のような、画面の1か所を描写すると、方向の違うバージョンを複数作って、切り替え画面の裏に並べる、というものです。既存の画面の点検や、使う部品の選定は別のスキルの担当だと明記されています。
仕事での使い道｜案を並べて決めたい場面
prototype が向くのは、「見た目の案を複数見比べて決めたい」場面です。SKILL.md には「LPの」と書いてあるわけではありませんが、説明の内容から、中小企業の仕事では次のような場面に当てはまると考えられます（ここは私たちの見立てです）。
- 新商品の販売ページで、最初に見える部分（ファーストビュー）を3案から選ぶ
- 料金表のカードを、見やすさの方向違いで比べる
- 問い合わせや予約ボタンのまわりの見せ方を比べる
出力はWebの画面（HTML）です。紙のポスターやチラシの案出しには向きません。prototype は、載せるものが決まったあとの「どの見せ方にするか」を見比べる道具です。「何を載せるか」の考え方は、次の記事が扱っています。
入れ方｜README にある手順
README に書かれている入れ方は、次の1行です。
npx skills@latest add emilkowalski/skillsnpx は、Node.js（アプリを動かす土台）に付いてくるコマンドです。ターミナル（黒い画面）でこの1行を実行します。リポジトリ全体を指定しているので、15本がまとめて入る形だと思われますが、私たちはこの手順を実行していません。
私たちは、普段使っている環境を汚さないために、リポジトリを取得して prototype のフォルダだけを作業用のフォルダの .claude/skills/prototype/ にコピーして試しました。中身は SKILL.md（説明書）と PICKER.md（切り替えスイッチの部品の仕様）の2ファイルです。つまり、npx で入れたときの動き（入る場所、他の14本が一緒に入るか）は試していません。
Claude Codeにこう頼む
prototype は、SKILL.md の冒頭で「明示的に呼んだときだけ動く」と設定されています（disable-model-invocation: true）。普通の日本語で頼んでも自動では呼ばれないので、スキル名を書いて呼び出します。
/prototype 新商品ダイニングチェアの販売ページの、最初に見える部分。案は3つ。SKILL.md の「呼び方の表」には、次の指定が書かれています。
- 案の数を増やす：説明のあとに
x5と付けると5案（上限5案） - もう一巡：
riff 案の名前で、その案の方向を軸にした新しい3案を作り直す - 選んで本番へ：
keep 案の名前で、その案を本番のファイルに組み込み、比べるための画面を消す
なお、説明を何も付けずに /prototype だけを打つと、SKILL.md の指定で「準備できています」という趣旨の1文だけが返ります。
試した結果｜架空の会社のダイニングチェアの販売ページで
依頼の材料は、依頼メモ（色の指定、入れたい要素、入れないもの）と会社の概要の2ファイルです。メモには、2026年11月発売予定、36,000円（税込）、色は生成り・オーク茶・くすんだ緑、「日本一」などの根拠のない表現と他社比較は入れない、といった条件が書いてあります。実際に出した依頼と、返ってきた答えが下の画面です（パスは伏せています）。
かかった時間は155秒、使用量の換算額（Claude Codeが出す目安）は約$0.43でした。出来上がったのは、index.html というファイル1つです。ブラウザで開くと、画面の下に黒い丸いスイッチが出て、1・2・3のキーか左右の矢印で案を切り替えられます。切り替えは一瞬で、案は全画面で表示されます。R のキーで入場の動きをもう一度再生できます。
3案の中身
- 案1「静かな分割」：左に文字と価格と予約ボタン、右に椅子。座面の「木製／ファブリック」を切り替えると、椅子の座面の絵が変わる。もっとも標準的な形
- 案2「食卓の情景」：椅子をテーブルのある部屋の全画面の絵の中に置く。椅子の3か所にある丸い印を押すと、「背もたれの角度」「座面の厚み」「素材とつくり」の説明が出る
- 案3「名札と縦書き」：縦書きのコピーと、名前入りの札が主役。入力欄に名前を打つと、その場で札に反映される（6文字まで）
3案とも「11月発売予定」、36,000円（税込）、予約ボタンが入っており、「日本一」のような表現や他社比較はありませんでした。色も依頼メモの指定どおりです。返事には案ごとの「向く場面」と「弱点」の表もついていて、どれが良いかは言っていませんでした。これは SKILL.md の「あらかじめ好みの案を言わない」という指定どおりです。
私たちが自分で確かめたこと
返事の中でClaude Codeは、「切り替えキーとクリック操作はコードを読んだだけで、実際には押していません。スマホ幅も確認できていません」と書いていました。そこで私たち自身が、パソコン幅のブラウザで次を確認しました。
- 1・2・3のキー、左矢印、Rのキーが動いた。URLの末尾に
?v=2のように案の番号が入り、開き直しても同じ案から始まる - 案2の丸い印を押すと説明の吹き出しが出た（下の画面）
- 案3の入力欄に「さくら」と打つと入力が受け付けられた
- ブラウザのエラー表示はなかった
うまくいかなかった点もありました。
- 椅子は絵です：写真が無いため、AIがベクター画像（SVG）で描いた椅子が入ります。見た目は写真を入れると変わります。脚の描き方などが簡素で、本番にそのまま出せる絵ではありません
- 案2の「● をタップ」という案内の文字が、画面の右上に離れて置かれていて、何のことか分かりにくい
- スマホ幅（390px）で見ると、切り替えスイッチの文字が縦に折れ曲がりました。スイッチは PICKER.md で「見た目を一字一句そのまま使え」と決められているため、案の名前が日本語で長いと崩れます。案の名前は短くした方がよさそうです（これは私たちの推測で、短い名前では試していません）
ほかの手段との違い｜スキルなしで同じ依頼を出した場合
読者がいちばん知りたいのは「入れると何が変わるか」だと思うので、スキルを入れていない環境で、同じ内容の依頼（スキル名の呼び出しだけ除く）を1回出して比べました。実行記録にスキルの呼び出しがないことも確かめています。
スキルなしだと、49秒、使用量の目安は約$0.15で、3案が出てきました。答えのコピーも悪くなく、Bの「暗色・中央に椅子」は印象の違う案でした。ただし、次の違いがありました。
- 案ごとに別々のファイルで、まとめの一覧ページには縮小した画面が並ぶだけ。1案ずつ全画面で見るには、別のファイルを開く
- AとCがどちらも「椅子の絵と文字を左右に並べる」同じ構成で、案どうしが似ていた
- ブラウザで開いたが表示の確認はしていない、と答えの中で書いていた。実際にCの見出しは、最後の「で。」だけが次の行に落ちていた
- 案Cの「拭き取りやすい」という木の座面の説明は、AIの推測だと答えの中で断っていた（この点は良かった）
下の図に、2回の実行を並べます。
1回ずつの実行なので、毎回この差になるとは言えません。ただ、出力トークン（AIが書いた文字の量の単位）は約6,500から約20,200へ増えていて、作り込みが増えたぶん時間も使用量も増えた、という傾向は読み取れます。差は「見た目のきれいさ」より、「案の軸が違うか」「1か所で切り替えて見られるか」「画面で確認したか」に出ました。
スキル名を言わずに頼んだ場合
スキル名を言わない1回目も試しました。SKILL.md の設定どおり、スキルとしては呼び出されませんでした。ただ、作業フォルダの中を見て SKILL.md を見つけ、自分で読んで同じ形（切り替えスイッチつきの1画面）で作りました。138秒、約$0.39です。普段の環境ではスキルの置き場所が違うので、同じ動きになるとは限りません。ここでの確実な事実は「名前なしでは、スキルとして発動しない設定になっている」ことだけです。
prototypeの流れ
SKILL.md に書かれた流れは、次のとおりです。
特徴は、1回の依頼で扱うのが「1つの部品だけ」と決められていることです。「ダッシュボード全体」のような依頼は、いちばん効く1か所に絞るように言われます。案の数は標準で3、上限は5です。SKILL.md には「色違い・文章違いだけの案は同じ案とみなして、本当に違う案に差し替える」とも書いてあり、案どうしを似せないための歯止めになっています。
中身の安全確認｜何を外に送り、何を実行するか
入れる前に、リポジトリの中身を読んで確かめました。
- ファイルの種類：リポジトリの中は、15本ぶんのMarkdown（文章のファイル）と、README、LICENSE、中身が空のファイル1つだけでした。実行するスクリプト（プログラム）は含まれていません
- 外部への送信：prototype の2ファイルに、curl や wget のような通信命令、URLへの送信指示、認証情報（鍵やパスワード）を扱う記述はありませんでした。SKILL.md には
allowed-tools（勝手に使えるようにする道具の指定）もありません - やること：書かれているのは「AIにこの手順で画面を作らせる」という指示だけです。ただし AI は、作った画面のファイルをあなたのフォルダに書き込みます。実際の依頼でも、確認用に画面を撮るためブラウザ（ヘッドレスChrome）を動かしました
確認したのは prototype の2ファイルです。ほかの14本は、ファイルの種類（Markdownのみ）を確認しただけで、中身は1本ずつ読んでいません。また、既存のWebサイトのファイルがあるフォルダで使うと、「選んだ案を本番に入れる」段階で、あなたのコードを書き換えます。選ぶ前は専用の置き場だけに作るのがルールですが、書き換えの前に変更を元に戻せる状態（gitの保存など）にしておくのが安全です。
prototypeが向かない場面
- 紙のチラシやポスターの案出し（出力はWebの画面です）
- 1案だけ急いで作りたいとき。比べる準備に時間と使用量がかかります
- 案のベースになる写真・ロゴ・文章が決まっていないとき。今回のように椅子が絵のままだと、見え方の比較が実際の写真を入れたときと変わります
- 画面をまったく触らない人。出力は HTML なので、開く先のブラウザと、必要に応じて本番サイトへ反映する担当が要ります
- ページ全体をまとめて頼みたいとき。1回に扱えるのは1か所（ファーストビューなど）です
まとめ｜入れる前のチェックリスト
- □ 見たいのは「画面の1か所の見せ方の違い」か（Webの画面。紙のものは対象外）
- □ 入れ方は
npx skills@latest add emilkowalski/skills。15本まとめて入るかは未確認 - □ スキル名を書いて呼ぶ（
/prototype＋ 画面の説明。名前なしでは発動しない設定） - □ 時間と使用量は、スキルなしの約3倍を見ておく（今回の1回ずつの比較）
- □ 案の名前は短くする（スマホ幅でスイッチの文字が縦に折れたため。短い名前は未検証）
- □ 椅子や写真は仮の絵。本番では写真に差し替える前提で見る
- □ 選ぶのは自分。気に入った案は
keep 案の名前で本番へ。書き換え前に元へ戻せる状態にしておく - □ 試せていないこと：npx での導入、他の14本、
x5・riff・keepの動き、スマホ幅での案そのものの出来
スキルを探すところから始めたい方は、次の記事も参考になります。
AIが作る画面の見た目を引き締める別の道具としては、次の記事も参考になります。
「デザイン・販促物を作る」のスキルは、ほかに2本を同じ架空の会社の材料で試しています。
仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP10
31本を実際に入れて、スキルなしと比べた結果つき（全28ページ）
スキルを入れても、Claude が急に賢くなるわけではありませんでした。31本を架空の会社の仕事で試し、同じ依頼をスキルなしでも検証して比べたうえで、導入する価値があった10本を仕事別にまとめています。
- 文章・スライド・図・数字・調べもの・契約書など、仕事別の10本
- 1本ごとに、スキルなしと比べた時間・費用・出来
- 実物の画面と、Claude Code にそのまま貼れる頼み方
- 外した5本の理由と、入れる前に確かめる4つのこと
メールアドレス登録で他にも様々な資料を閲覧できます
＋9PDF 18点・合計468ページ ＋ すぐ使えるzip素材 3点
どれも登録後の受け取りページから、まとめてダウンロードできます。
毎週配信の無料ニュースレター「AIネイティブ超研究」の購読特典です。メール登録後すぐ、受け取りページのご案内が届きます。そこにはこの資料に加えて、過去の特典もすべてまとめて置いてあります。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。