Codex と Claude Code で Taste Skill を使う方法。

Taste Skill は、AI が作った Web サイトを無個性に見せないためのデザインスキルとして、最もよく知られています。2026 年 11 月 4 日にリリースされたバージョン 2.5 は、企業サイトとマーケティングサイト向けの全面的な作り直しです。このチュートリアルでは、必要なもの、Codex と Claude Code へのインストール、制作の流れ、そして使いこなすコツを紹介します。

2026年11月6日更新 · 約 7 分で読めます

Taste Skill 2.5 がすること

Taste Skill は Leonxlnx が公開しているオープンソース（MIT ライセンス）のスキルで、design-taste-frontend としてインストールされます。バージョン 2.5 は、素直なコピー、1 つのデザインシステム、1 画面 1 セクション、左右の端をそろえたレイアウト、本物の写真、本物のブランドアイコン、本物のプロダクト UI で企業サイトを作ります。シェーダー効果とスクロール演出は、ソフトウェア、テック、ゲームのページにだけ使い、エージェントが納品する前に、チェッカーがすべてのページを実際のブラウザで検証します。

必要なもの

Node.js 22 以降。
Chrome、Edge、または Chromium。 特殊な場所にインストールしている場合は、CHROME_PATH を設定します。
任意：ffmpeg。 WebP の写真と、ヒーロー写真のスマートフォン向けトリミングに使います。

何もインストールせず、API キーも要りません。同梱の写真はオフラインで使えますが、写真、フォント、アイコンを追加でダウンロードするにはネットワーク接続が必要です。

インストールする

Codex：

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

そのあと Codex の新しいセッションを始めると、スキルが読み込まれます。

Claude Code：

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

Claude Code では、スキルに taste-skill: という名前空間が付きます。あとでアップグレードするには /plugin update を実行します。

npx skills CLI に対応しているエージェントなら、どれでも：

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

すでに古いバージョンをインストールしている場合は、同じインストールコマンドをもう一度実行してください。インストール名は変わっていません。

Taste Skill でページを作る

エージェントに、企業サイトの制作かリデザインを頼みます。スキルは自動で読み込まれ、素材をプロジェクトにコピーして、スターターページから始めます。このスキルは中身を重視して作られているので、本物の材料を渡しましょう。名前、事業の内容、本物の数字、営業時間、あれば写真です。

企業サイトのブリーフ

[リスボンにある 24 席の小さなシーフードバー、Ostra] のサイトを作ってください。営業は [火曜から土曜の午後 6 時から深夜 0 時]、メニューは [その日の朝の水揚げに合わせて毎日変わり]、予約は [電話番号と Instagram] で受け付けています。Taste Skill を使って、マークアップを書く前にページを画面ごとに計画し、納品する前にチェッカーを実行してください。

どの制作も、同じ手順で進みます。

事業を分類する。 ソフトウェア、ゲーム、テック、プロダクト、サービス、場所のどれかに分け、ページを画面ごとに計画します。
トークンとレイアウトを割り当てる。 スクリプトが、そのページの種類に合う配色と Google Fonts の組み合わせ、そして検証済みの 11 種類のヒーローレイアウトから 1 つを割り当てます。
1 つのシステムから始める。 1440×900 で 1 画面 1 セクション、左右の端をそろえ、固定のナビゲーションバー、最後にフッター。
本物を見せる。 ソフトウェアとテックでは、プロダクト UI の断片とダイアグラム。場所、ショップ、サービスでは、厳選されクレジットが付いた写真。
エフェクトはテックとゲームのために取っておく。 カフェ、ホテル、ショップ、スタジオ、サービスには、WebGL もスクロール演出も使いません。
実際のブラウザで確認する。 幅 1440、1024、768、390 ピクセルで、空のビジュアル、コントラストの低下、ずれたカラム、プレースホルダーのテキストなどを見つけます。

既存のページをリデザインするときも、同じように頼みます。スキルは変更を加える前に、現在のページをブラウザで監査します。

ツールを自分で実行する

ツールはすべて、スキルのフォルダにあるただの Node スクリプトです。知っておきたいのは次の 2 つです。

# Deal a palette and font pairing for a kind of page
node scripts/start.mjs deal --page software

# Check a built page (a URL or a file) against the rules
node scripts/consistency.mjs <url or file> --page software

チェッカーは、ルールごとに PASS、WARN、FAIL を表示するので、ページがまだ違和感のある理由を手早く確かめられます。

ほかの Taste スキルの行き先

リポジトリに残っているスキルは 1 つになりました。以前のスタイル系スキル（high-end-visual-design、minimalist-ui、industrial-brutalist-ui、gpt-taste、stitch-design-taste）は Leonxlnx/taste-skill-classics に、画像から始めるスキル（imagegen-frontend-web、imagegen-frontend-mobile、brandkit、image-to-code）は Leonxlnx/imagegen-skills に移りました。インストール名は変わりません。

npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

ほかのものを使うべきとき

モバイルアプリとダッシュボード。 バージョン 2.5 は Web サイト向けです。アプリの画面には、Impeccable と UI UX Pro Max を参照するか、デザインシステムライブラリのアプリ向けシステムから始めましょう。
既存のブランド。 Taste Skill は独自の配色とフォントを割り当てます。ブランドにすでにあるなら、DESIGN.md に書いて、それを守るようエージェントに伝えてください。
方向性を選びたい。 1 回の制作で割り当てられるのは、配色 1 つ、フォントの組み合わせ 1 つ、ヒーローレイアウト 1 つです。複数の見た目を比べたいなら、最初の画面を 2〜3 案頼んで、横に並べて見ましょう。

よくある質問

Taste Skill は無料ですか？

はい。MIT ライセンスのオープンソースです。作者は、スキルとデザインエージェントを組み込んだ、無料のオープンソースのデスクトップアプリ TasteCode も公開しています。

Taste Skill は React や Next.js で使えますか？

はい。作られた素の HTML をそのまま公開してもいいですし、同じトークン、セクションのレイアウト、チェックを React、Next.js、Vue、Svelte、Astro、Tailwind に移植するようエージェントに頼むこともできます。

なぜ Taste Skill に Chrome が必要なのですか？

チェッカーは、コードを信用するのではなく、各ページをヘッドレス Chrome で 4 つの幅で表示し、コントラストや整列などのルールを検証します。