Taste Skillの使い方：インストール手順・プロンプト・作例

Claude CodeやCodex、CursorでWebサイトを作ると、機能は揃っていても、見た目が似通うことがあります。中央に大きな見出し、グラデーションの背景、その下に同じ形のカードが3枚。Taste Skillは、こうした画面のデザインを具体的な指示で整えるためのスキルです。

Leonxlnxが公開するプロジェクトで、レイアウト、文字組み、配色、動き、余白などの指針をSKILL.mdとして提供します。対応するAIコーディングエージェントが、その内容を読みながらページを制作します。公式リポジトリ

ページの作例

Brandon Melvilleの動画では、薬局やクリニック向けのサービス紹介ページが登場します。明るい背景に緑のアクセントを組み合わせ、左側にサービスの価値、右側に業種を伝える大きな画像を配置しています。

出典：Brandon Melvilleの実演、9:05。

Griffin Wooldridgeの実演では、暗い背景のCRM紹介ページを確認できます。見出しと操作ボタン、右側の製品イメージでファーストビューを構成しています。

出典：Griffin Wooldridgeの実演、2:45。画面内の数値はデモページの内容です。

いずれも動画の制作者による作例です。ページの目的に合わせてデザイン上の指示を与え、具体的な実装はAIモデルが行います。

用途に合うスキルを選ぶ

製品のランディングページ、ポートフォリオ、サービス紹介サイトには、基本のフロントエンドスキルから始められます。既存サイトの改善や画像を参考にした実装には、別のスキルが用意されています。

用途	インストール名
ランディングページやポートフォリオの制作	design-taste-frontend
既存の画面を改善	redesign-existing-projects
参考画像からページを実装	image-to-code
GPT/Codex向けの強いデザイン指示を利用	gpt-taste

最初は、今回の作業に合うものを1つ選べば十分です。公式スキル一覧

インストール

プロジェクトのディレクトリでターミナルを開きます。npxを実行できる環境で、次のコマンドを入力してください。

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

インストーラーの案内に従い、使用するエージェントとインストール範囲を選びます。

design-taste-frontendは正確なインストール名です。--skill "taste"では対象が見つからないという報告があります。Issue #28

2026年9月11日時点では、標準で入るのはv2 experimentalです。現在の手順とバージョン情報は公式ドキュメントで確認できます。

使用例

インストール後、次の例を自分の製品情報や参考画像に合わせて変更し、AIに渡します。

design-taste-frontendを使い、個人向け家計簿ツールの日本語ランディングページを作成してください。

対象ユーザー：
複雑なレポートを使わず、日々の支出を記録したい人。

ページの目的：
製品の用途を理解してもらい、「記録を始める」を押してもらうこと。

掲載内容：
一文の紹介、製品スクリーンショット、主な機能3つ、よくある質問、開始ボタン。
提供した事実を使い、利用者数、利用者の声、提携ブランドを創作しないでください。

デザイン：
明るく、わかりやすく、装飾を抑えた方向。
日本語の読みやすさを優先してください。
添付した参考ページの情報階層と余白を参考にしてください。

実装条件：
既存の技術スタックとコンポーネントを使ってください。
スマートフォンとPCに対応し、ボタンとリンクを実際に使える状態にしてください。

「高級感を出して」とだけ伝えるより、読者と目的を具体化すると判断材料が増えます。参考画像には、文字組み、配色、写真と文章の比率など、どこを参考にしたいかも添えると伝わりやすくなります。v2は、こうした要件からデザインの方向を推定する仕組みです。公式説明

既存サイトを改善する場合は、対応するスキルに次のような依頼を渡せます。

redesign-existing-projectsを使い、現在のトップページを改善してください。

最初に既存ページを確認し、文字の階層、セクション間の余白、ボタンの見た目を調整してください。
ブランドカラー、文章、リンク、業務機能は維持してください。
全体をすっきりさせ、スマートフォンで窮屈な箇所を優先してください。

レイアウト・動き・情報密度の調整

基本のスキルには、1〜10で指定する3つのパラメーターがあります。

パラメーター	調整する方向
DESIGN_VARIANCE	レイアウトの変化や実験性
MOTION_INTENSITY	アニメーションの強さ
VISUAL_DENSITY	ページ内の情報密度

数値はデザインの方向を示すもので、品質の点数ではありません。公式の設定説明

自然な文章で修正を依頼することもできます。

現在の配色と内容は維持してください。
ファーストビューの動きを減らし、本文の行間を広げてください。
スマートフォンでスクロールせずに「記録を始める」が見えるようにしてください。

残したい部分と変更したい部分を分けて伝えると、修正結果を見比べやすくなります。

コミュニティの評価

公開されているレビューには、初稿の改善を評価する声があります。蘇米客の比較記事では、同じ製品紹介ページの要件で7つの案を試し、Taste Skillを全体のバランスがよいと評価しています。採点にはAIレビューも含まれ、対象は1つの課題です。比較記事

Griffin Wooldridgeの動画では、インストールから生成結果までを確認できます。標準の生成結果よりよいと評価しつつ、AIらしさが残る部分やアイコンの問題も紹介しています。実演動画、0:49から

Redditでは、参考画像をCodexに渡す方法を高く評価しながらも、画像に近づけるまで3回の修正が必要だったという声があります。一方、Tasteを使った情報サイトに、まだテンプレートらしさを感じたという投稿もあります。画像を使った制作の議論、情報サイトでの使用感

使われたモデル、素材、プロンプトはそれぞれ異なります。普段のWeb制作では、Taste Skillで最初のデザインを組み立て、自分のコンテンツに合わせて整えていく使い方が現実的です。

公式リンク

• Taste Skill公式サイト
• GitHubリポジトリ
• インストール・使用ドキュメント
• 更新履歴