AIで作るWeb画面のテンプレート感を減らすTaste Skillの使い方

AIへ「モダンな製品ページを作って」と頼むと、中央に大きな見出しがあり、その下に丸いボタン、さらに同じ大きさのカードが三枚並ぶ画面になりがちです。配色や文章を変えても構図が同じなら、別の製品へ差し替えても成立する画面に見えます。

AIは、依頼に書かれていないことを自分で補います。最初に何を目立たせるか、写真をどれくらい大きくするか、余白を広く取るか。指定がなければ、よく使われる無難な構図が選ばれます。

Taste Skillは、Codex、Claude Code、Cursorなどのコーディングエージェントへ読ませるデザイン指示書の集まりです。エージェントはコードを作る前にデザインの方針を決め、よくある構図を理由なく繰り返さないようにします。135

2026年9月5日に保存済みの適用後ページをブラウザで開き、「製品を見る」を押すと、製品詳細へ移らず同じページに残りました。URLの末尾へ付いたのは#だけで、画面にある六つのリンクもすべて同じ仮のリンク先でした。これは構図を比べるために作った試作です。実際に商品を探して購入できるサイトの完成例には使えません。

写真と文章を固定した比較から判断できるのは、構図と見せ方の変化までです。デザインの指示を採用した後には、リンク先、フォームの送信後、入力エラーなど、次の操作が終わる場所を実画面で確かめます。今回のように見た目の検討で止める場合も、動かない部分を先に共有すると、制作の完了条件を取り違えずに済みます。

標準スキルのdesign-taste-frontendは、作るページの種類、最初に伝える内容、既存のロゴや色、参考にしたい画面、使いやすさの条件を先に確認します。たとえば、購入を検討する担当者へ価格と導入条件を伝える製品ページと、素材の質感を見せる消費者向けページでは、写真や文章の大きさまで同じにする理由はありません。23

そのうえで、構図、動き、情報量を1から10の範囲で決めます。

三つの数字は高いほどよいわけではありません。商品写真を大きく見せたいなら構図の変化量を上げ、落ち着いて文章を読ませたいなら動きは抑えます。企業向けの製品ページなら、見た目の意外性より、価格や導入条件の見つけやすさを優先する場合もあります。

標準スキルには、青紫の光を何にでも使わない、均等な三枚カードを繰り返さない、実際の製品画面に見せかけた空の枠を作らない、といった規則も含まれます。すべてを禁止するためではなく、ページの内容に合う構図を選び直すための規則です。3

画面のどこが変わるかを見比べるため、コーヒー器具の製品ページを二つ作りました。写真、文章、リンクは変えず、片方だけに標準スキルの方針を適用しています。

標準スキルを使った画面では、製品写真が画面の約半分まで広がり、文章より製品そのものが先に目へ入ります。ただし、この比較だけで読みやすさや購入率が上がったとは判断できません。採用するかどうかは、最初に伝えたい内容が見つけやすくなったかで決めます。

Taste Skillには、コードを作るスキルと、実装前の参考画像を作るスキルがあります。最初から全部を組み合わせず、いま作りたいものに合う一つで十分です。1

迷う場合の第一候補はdesign-taste-frontendです。既存サイトでは、見た目だけを変えるつもりでも、ナビゲーション名、リンク先、フォーム項目まで変わると、そのWebページを使う人が困ります。既存機能を守りながら直すなら、現在の画面を先に確認するredesign-existing-projectsが合います。

標準のdesign-taste-frontendは、現在v2の実験版です。同じインストール名のまま内容が更新されます。以前のv1と同じ動きを保ちたい場合は、design-taste-frontend-v1を選びます。14

標準v2が扱うのは、ランディングページ、作品紹介サイト、既存サイトの再設計までです。ただし、既存のリンクやフォームなどの機能を守る必要がある場合は、専用のredesign-existing-projectsを選びます。数字を比較する確認画面、データ表、入力が何段階も続く製品画面は標準v2の対象外です。こうした画面では、非対称な構図より、必要な数字と次の操作がすぐ見つかる情報設計を優先してください。3

初めて使うときは、サイト全体ではなく、対象ページを開いて最初に見える一画面だけを作り直す方法が分かりやすいです。ランディングページならファーストビューが該当します。文章、写真、ロゴ、リンク先、フォーム項目を変えないと決めておけば、Taste Skillが変えた構図を見比べやすくなります。

標準スキルは、公式READMEにある次のコマンドで追加できます。1

npx skills add https://github.com/Leonxlnx/taste-skill \
  --skill "design-taste-frontend"

依頼文には、ページを見る人、最初に伝えること、変えてはいけないもの、作り直す範囲を書きます。

design-taste-frontendを使い、このランディングページの最初の一画面を再設計してください。
このページは、請求書作成ソフトを初めて検討する小規模事業者向けです。
最初に「請求書を10分で作れる」と伝えてください。
ロゴ、文章、写真、リンク先、フォーム項目は変えません。
コードを書く前に、構図、動き、情報量をどう設定するか説明してください。

「いい感じに」「高級感を出して」だけでは、AIが足りない条件を補い、別のテンプレートへ寄ることがあります。誰が見るページで、何を先に伝え、何を残すかまで書くと、修正の理由を確認できます。

Taste Skillを使っても、完成した画面の確認は必要です。今回の比較でも、適用直後は大見出しが三行になり、写真とのバランスが崩れました。文章欄の幅と文字サイズを調整し、二行へ収めています。

確認するのは、見た目の好みだけではありません。

1. 最初に伝えたい内容が、写真や装飾に埋もれていないか
2. 見出し、本文、ボタンを無理なく読めるか
3. スマートフォンでも文章と写真の順序が自然か
4. 元のリンク、ナビゲーション、フォーム項目が残っているか
5. 動きを減らす端末設定でも、内容と操作が失われないか

Taste Skillを使い続ける基準は、派手な画面になったかではありません。ページで最初に伝える内容が明確になり、写真を大きくした理由や動きを抑えた理由を説明できるなら、次の修正でも同じ方針を保てます。目的とのつながりを説明できない場合は、AIのよくある型を別の型へ置き換えただけです。