Claudeで作るUIを「それっぽいAI生成物」で終わらせず、狙って“おしゃれ”に仕上げるための最新動向を3つ紹介する。公式ツール「Claude Design」の登場、コミュニティ製デザインスキル「Impeccable」の進化、そしてコンポーネント設計そのものを整えるVercel Labsのスキルという、レイヤーの異なる3つのアプローチだ。
Anthropicが公式に「Claude Design」を投入
Anthropic Labsは「Claude Design」を発表した。会話形式でデザイン・インタラクティブなプロトタイプ・スライド・ワンページャーなどの“見栄えのする成果物”を作れる新プロダクトで、有料プラン向けにベータ提供が始まっている。特徴は次の3点。
- 幅広いインポート元:テキストプロンプトのほか、画像・DOCX/PPTX/XLSXのアップロード、既存コードベースの参照、さらにWebキャプチャで実サイトの要素を直接取り込める。
- チームのデザインシステムを自動適用:コードベースやブランド資料を読み込ませておくと、配色・タイポグラフィ・コンポーネントを毎回自動で当てはめてくれる。管理者は組織を単一のデザインシステムに固定することも可能。
- 細かい調整と外部連携:要素へのインラインコメント、直接編集、スライダーでの微調整に加え、Adobe・Canva・Gamma・Lovable・Miro・Replit・Vercel・Wixなど既存ツールとの連携も用意される。
Web上のclaude.ai/designやClaude Desktopのサイドバーから使えるほか、Claude Codeのセッション内から/designでデザインプロジェクトの作成・編集・同期も行える。詳しい使い方はClaude Help CenterのガイドやClaude Academyのチュートリアルにまとまっている。プロトタイプをClaude Designで作り、実装をClaude Codeに渡す、という分業の型ができつつある。
コミュニティ製スキル「Impeccable」がv3.5に進化
Anthropic公式のfrontend-designスキルを起点に生まれたImpeccableが、v3.5へアップデートされた。作者のPaul Bakaus氏によれば主な変更点は次の通り。
- アンチパターン検出エンジンを刷新:jsdomベースから実際のCSSカスケード解決に切り替え、約20倍高速化。CLIや拡張機能だけでなく、スキル内にインラインで組み込めるほど軽量になった。
- ルール数が41に拡張:デフォルトのInterフォント、紫→青のグラデーション、カードの中にカードを入れる構造、色付き背景にグレー文字、見出しの上に丸いアイコンタイルを置く、といった“AIっぽさ”の典型パターンを機械的に検出する。
- 自己更新:1日1回スキル自体が最新版かチェックし、更新を提案してくれる。
- 対応ハーネスの広さ:Claude Code・Codex・Cursor・GitHub Copilot・Grok Buildなど主要なコーディングエージェント向けに、同じルールセットをハーネスごとに再コンパイルして提供している。
導入はnpx impeccable installのあと、エージェント内で/impeccable initを実行するだけ。詳細はimpeccable.styleを参照してほしい。
見た目だけでなく「壊れないUI」を作る――Vercel Labsのコンポーネント設計スキル
ビジュアルの“おしゃれさ”とは別のレイヤーで注目したいのが、Vercel Labs agent-skillsに含まれるComposition Patternsスキルだ。AIが生成しがちな「isCompact・showHeader・isRounded・hasBorder・isHighlighted」のような真偽値propの乱立(いわゆるboolean prop地獄)を、コンパウンドコンポーネントや状態のリフトアップ、内部合成のパターンに置き換えるよう導くスキルだ。見た目のスタイルではなく、コンポーネントAPIの設計品質に踏み込む点がユニークで、デザインシステムを長期運用するチームほど効いてくる。
同じくVercel LabsのWeb Design Guidelines(アクセシビリティ・UXルール100件以上の監査)、React Best Practices(パフォーマンスルール57件)と組み合わせて使われることが多い。
3つのアプローチの使い分け
| ツール／スキル | レイヤー | 向いている場面 |
|---|---|---|
| Claude Design | ビジュアル成果物の生成 | プロトタイプ・スライド・企画資料を非デザイナーが素早く形にする |
| Impeccable | コーディング中の見た目監査 | Claude Codeなどで実装しながら“AIっぽさ”を機械的に排除する |
| Vercel Composition Patterns | コンポーネント設計 | デザインシステムやコンポーネントライブラリを崩れにくく保つ |
「プロンプト1本でおしゃれになる魔法」は依然として存在しない。むしろ今週見えてきたのは、成果物のレイヤー(Claude Design)・実装中の監査レイヤー(Impeccable)・構造のレイヤー(Composition Patterns)という三段構えで“仕組み化”する流れだ。既存のDESIGN.mdやshadcn/uiベースの運用に、必要な層だけ足していくのが現実的な導入順だろう。
主な情報源
- Introducing Claude Design by Anthropic Labs（Anthropic公式）
- Get started with Claude Design（Claude Help Center）
- Anthropic just launched Claude Design（VentureBeat）
- pbakaus/impeccable（GitHub）
- vercel-labs/agent-skills（GitHub）
- 14 Best Claude Code Skills for Developers in 2026（Firecrawl）
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。