Anthropic純正のデザインツール「Claude Design」が登場して3か月。community発のDESIGN.mdやshadcn/uiテーマ調整ツールと組み合わせることで、Claudeで作るUIの「AIっぽさ」をさらに消せるようになってきた。今日は公式ツールの現在地と、すぐ使えるプロンプト術・周辺ツールを整理する。
Claude Design登場から3か月――Anthropic公式ツールの現在地
2026年4月17日、Anthropicの実験部門「Anthropic Labs」がリリースしたClaude Designは、プロンプト・画像・ドキュメント・コードベースからプロトタイプやスライド、ワンページャーを生成できるビジュアル作業空間だ。エンジンはClaude Opus 4.7で、画像処理性能はOpus 4.6比で約3.3倍に向上している。
最大の特徴は、取り込んだデザインシステム（タイポグラフィ・スペーシングトークン・ブランドカラー）に対して生成コードを自動チェックし、逸脱をバックグラウンドで補正する仕組み。つまり「一度だけおしゃれなプロンプトを書く」のではなく、自社のトーン&マナーを常に守らせるための土台として機能する。現在はResearch Previewで、Pro/Max/Team/Enterpriseで利用可能（Free枠は非対応）。TechCrunchの7月の記事では、こうしたデザイン一貫性チェック機能がユーザーの日常的なClaude利用を静かに深めている、という指摘もある。
「名前の付いた方向性」＋ネガティブ制約でAIっぽさを消す
Claude Codeでのデザイン生成についてまとめたSuperdesignのプロンプトガイドが指摘するのは、「指示が曖昧だとAIは学習データの統計的な平均、つまりInterフォント・紫グラデーション・中央寄せの3カード構成に収束する」という点。これを避ける最も安いコストの方法は、エディトリアル／ブルータリズム／テクニカル／ウォームミニマル／ハイコントラストモノのように、狙う方向性を名前で一つに絞り、それをAIに復唱させることだという。
あわせて効くのがネガティブ制約だ。
- Inter・Roboto・Open Sans・Lato・Arialなどのシステムフォントを禁止
- 紫／インディゴ系グラデーションを禁止
- 中央寄せの3カードヒーローを禁止
- 階層は罫線やボックスではなく、文字サイズと余白の差でつける
- ウェイトは400対600ではなく200対800など極端に振る／サイズ差は1.5倍でなく3倍以上つける
フォントの組み合わせ例として本文にBricolage Grotesque、見出しにFraunces、コードにJetBrains Monoといった指定も紹介されている。「きれいにして」ではなく「何を禁止し、何を極端にするか」を書く方が再現性が高い。
CLEARパターンで指示を組み立てる
2026年の「バイブコーディング」系ガイドでは、デザイン依頼のプロンプトを組み立てる型としてCLEARパターン（Context・Language・Examples・Action・Result）がよく挙げられる。
| 要素 | 書く内容 |
|---|---|
| Context | プロジェクトの目的・想定ユーザー・技術スタックを伝える |
| Language | 使用言語・フレームワーク（Tailwind、CSS Modules等）を明記 |
| Examples | 参考にしたい既存デザインやスクリーンショット・ワイヤーフレームを提示 |
| Action | 作ってほしいものを具体的に指示（何を、どこに、どう動かすか） |
| Result | 期待する出力形式（コンポーネント単位か、ページ単位か等）を指定 |
加えて、役割を与える（「あなたは編集デザイナーです」）、大きな一発プロンプトではなく小さく反復する、といった点も繰り返し推奨されている。プロトタイピング段階でラフなワイヤーフレームや画面キャプチャを一緒に渡すと、レイアウトの意図が伝わりやすい。
shadcn/uiの見た目を仕上げる：tweakcnとDESIGN.mdカタログ
tweakcnはshadcn/ui向けのビジュアルテーマエディタで、Tailwind v4のOKLCHカラースペースに対応し、ロゴやブランド画像をアップロードするだけでAIがテーマ案を生成する機能を備える。カラー・タイポグラフィ・角丸・シャドウをその場でプレビューしながら調整し、Tailwind変数としてそのままエクスポートできるため、Claudeが生成したコンポーネントの「配色だけ整える」用途に向く。
また、コミュニティがまとめるawesome-claude-designのようなカタログでは、DESIGN.mdの実例を「エディトリアルミニマル」「ターミナルコア」「シネマティックダーク」「グラス／ソフトフューチャリズム」など9つの美学ファミリーに分類して整理している。方向性を言葉で決めるのが苦手なら、こうしたカタログから近いものを探し、名前とトークンだけ拝借するのも近道だ。
まとめ：公式ツール＋プロンプト術＋周辺ツールの三段構え
| レイヤー | やること | 代表ツール／技法 |
|---|---|---|
| 土台 | デザインシステムを取り込んで一貫性を自動チェック | Claude Design |
| 指示 | 方向性を名前で固定し、ネガティブ制約とCLEARパターンで書く | Superdesignのプロンプトガイド／CLEARパターン |
| 仕上げ | 配色・トークンを整え、実例から拝借する | tweakcn／awesome-claude-design |
公式ツールが土台の一貫性を担保し、プロンプトの型が方向性のブレを防ぎ、周辺ツールが最後の仕上げを担う。この三段構えが、2026年後半の「Claudeでおしゃれに作る」ための現実的な組み合わせと言えそうだ。
主な情報源
- Introducing Claude Design by Anthropic Labs（Anthropic公式）
- Anthropic launches Claude Design（TechCrunch）
- Anthropic’s new Claude feature is quietly selling you on AI（TechCrunch）
- What Is Claude Design?（DataCamp）
- Claude Code Design Prompts（Superdesign）
- awesome-claude-design（GitHub）
- tweakcn – Theme Generator for shadcn/ui
- Vibe Coding Prompt Techniques for Web Development（Strapi）
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人が行っています。