AI製UIを「AIっぽく」しない4つの手札：frontend-design・Taste Skill・DESIGN.md・shadcn/ui

「AIに作らせるとどれも同じ顔になる」問題に、いま現場はどう対処しているのか。Anthropicのfrontend-designスキル、Taste Skill、DESIGN.md、shadcn/uiの4つを、役割別に整理しました。

なぜ「指示を足す」より「仕組みで縛る」のか

「モダンに」「おしゃれに」といった曖昧な指示では、中央ぞろえのヒーロー＋3カラムカード＋フッターという“AIっぽい”構成に収束しがちです。最近は、プロンプトを長くするのではなく、スキル・デザインルールのファイル・既存コンポーネントで出力の幅を先に決める手法が主流になっています。コミュニティでも「最初の出力はワイヤーフレームと考え、2周目でタイポ・色・余白を詰める」という運用が語られています。

4つの手札と使いどころ

手札	役割	向く場面
frontend-design（Anthropic公式スキル）	実装前に美的方向性を決めさせ、書体・配色・構図を個性的にする	新規LPやコンポーネントを一から作る
Taste Skill	レイアウト・タイポ・モーション・余白を数値寄りのルールで指定。ミニマル／ブルータリスト等の派生あり	狙うトーンが決まっている／既存サイトの見直し
DESIGN.md	色・書体・余白・角丸などのトークンと使い分けの理由を1つのMarkdownにまとめる	ツールやエージェントをまたいで見た目を揃える
shadcn/ui	コードを自分のプロジェクトに取り込む土台コンポーネント	破綻しない骨格を先に用意し、見た目だけ上書きする

frontend-design：作る前に「方向性」を宣言させる

Anthropicのskillsリポジトリに含まれるfrontend-designは、コードを書く前にブルータリズム、エディトリアル、ラグジュアリーなど具体的な美的方向性を選ばせ、書体や色の物語、中央ぞろえ一辺倒でない構図へ誘導します。公開されているスキル内容では、題材・対象ユーザー・ページの唯一の役割を先に明示させる点が特徴です。インストール例は npx skills add anthropics/skills --skill frontend-design です。

Taste Skill：トーンを選んで「らしさ」を固定

Taste Skillは、メインのdesign-taste-frontendに加え、minimalist-ui、industrial-brutalist-ui、high-end-visual-designといった派生と、既存コードを監査して直すredesign-existing-projectsを含むスキル群です。MITライセンスで、Claude Code・Cursor・Codexなどで使えます。画像生成で参照ボードを作ってから実装させる流れ（image-to-code）も用意されています。

DESIGN.md：デザインの「好み」をAIに読ませる

DESIGN.mdは、Google Labsが提唱するオープン形式で、先頭のYAMLに色・書体・余白・角丸といったトークン、本文に「いつ・なぜ使うか」を書く1枚のMarkdownです。デザインシステムのMCPが実際のコンポーネントAPIを渡すのに対し、DESIGN.mdは別スタックや生成系ツールにも持ち運べるのが利点とされています（Headwayの解説）。DesignMDのようなライブラリには実在ブランドのDESIGN.mdが多数公開されており、コピーしてプロンプト冒頭に貼る使い方ができます。ただし他社ブランドの見た目をそのまま模倣しないよう、あくまで構造の参考にとどめましょう。

shadcn/ui：骨格は既製品、味付けだけ自分で

shadcn/uiはnpmパッケージではなく、CLIでソースを取り込んで自分のものとして編集する方式です。テーマ変数（CSS variables）を差し替えるだけで雰囲気を変えられ、ShadcnblocksのようにDESIGN.mdのテーマ指針を提供するレジストリも出ています。Cult UIはシェーダーヒーローなど凝った表現を同じレジストリ方式で配布しています。

実践レシピ（金曜の手順）

1. 用途と対象を一文で決める（例：「個人写真家の予約LP」）。
2. トーンを1つ選び、Taste Skillの派生かfrontend-designで方向性を宣言させる。
3. 色・書体・余白をDESIGN.mdに書き出し、以降のプロンプトで常に参照させる。
4. 骨格はshadcn/uiで組み、テーマ変数だけ上書きする。
5. 1回目は「ワイヤーフレーム」と割り切り、2回目でタイポ・色・余白を調整する。
6. 最後にwebapp-testingなどで実際に画面を確認させる。

プロンプト例

目的: 個人写真家の予約LP。対象: 30代の結婚前カップル。
方向性: エディトリアル／余白多め／セリフ見出し。
制約: DESIGN.mdのトークンのみ使用。中央ぞろえ3カード構成は禁止。
まず方向性と配色・書体の理由を3行で宣言してから実装して。

---

主な情報源

• Claude Design Skills: Top Picks (Skillselion)
• Frontend Design Skill (ClaudeSkills)
• Leonxlnx/taste-skill (GitHub)
• DESIGN.md vs. Design System MCP (Headway)
• DESIGN.md Integrations
• Shadcnblocks Changelog
• r/ClaudeAI: How are people getting Claude to build beautiful UIs

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。