Anthropicのビジュアル制作ツール「Claude Design」は2026年6月、デザインシステムの取り込みと/design-syncによるClaude Codeとの双方向連携、キャンバス上の直接編集を柱とする大型アップデートを受けました。今回はこの新ワークフローと、あわせて7月に登場したshadcn/uiの周辺ツール2点を取り上げ、ブランドを崩さずに「デザイン→実装」まで一気通貫で進める方法を整理します。
Claude Designとは
Claude Designは、Claudeと対話しながらプロトタイプやスライド、ビジュアル資料を作れるAnthropicのベータ製品です。Claude Pro・Max・Team・Enterpriseの各プランで利用でき、単発のビジュアル生成にとどまらず「ブランドに沿ったアウトプットを継続的に作る」ことに軸足を置いているのが特徴です。
6月アップデートの3本柱
2026年6月17日、Claude Designは大規模なアップデートを受けました。ポイントは次の3つです。
- デザインシステムの取り込み:GitHubリポジトリ、デザインファイル、CSS変数やデザイントークンJSONなどの生データから、既存のブランド定義をインポートできるようになりました。
/design-syncによる双方向連携:Claude Codeのセッション内で/design-syncを実行すると、リポジトリのデザインシステムをClaude Designに取り込めます。逆にClaude Designで組んだコンポーネントをClaude Code側に「実装可能な資産」として渡すことも可能で、双方向に同期が効きます。- キャンバス上の直接編集:生成されたプロトタイプをクリック・リサイズ・並べ替えといった操作でその場に調整できるWYSIWYG編集が加わりました。
あわせて、生成のたびにレイアウトやタイポグラフィ、配色を毎回ゼロから推論し直すことで生じていたトークン消費の多さも改善されたと報じられています。デザインシステムを一度ロックしておけば、ボタンの見た目などを毎回「推測」する必要がなくなるためです。
| 取り込み元 | 内容 | 向いているケース |
|---|---|---|
| GitHubリポジトリ | 本番コードのコンポーネント・トークン定義を直接参照 | すでにコードベースにデザインシステムがある場合 |
| デザインファイル | Figmaなどからのエクスポート | デザイナー主導でシステムを管理している場合 |
| 生トークン | CSS変数、デザイントークンJSON、Storybook設定のアップロード | まだ正式なリポジトリ連携をしていない場合 |
実践:/design-syncでブランドを保つ手順
- Claude Codeのプロジェクトで
/design-syncを実行し、リポジトリ内のトークン・コンポーネントをClaude Designに取り込む。 - Claude Design上でプロトタイプを生成し、キャンバスの直接編集で微調整する（フォント・余白・配色は取り込んだシステムに沿って提案される)。
- 方向性が固まったら、そのままClaude Codeに引き渡す。エンジニアはスクリーンショットから作り直すのではなく、既存のコンポーネント資産の続きとして実装を進められる。
- 実装中に加えた変更は再度
/design-syncでClaude Design側に反映し、次のプロトタイピングにも同じ定義を使い回す。
この往復により、「デザインツールでは綺麗なのに実装すると崩れる」「実装後の修正がデザイン側に反映されない」といった典型的なズレを抑えられます。
周辺ツールもアップデート:shadcn/typeset・@shadcn/helpers
実装側でも、2026年7月にshadcn/uiから2つの新ツールが公開されています。Claude Designで固めたビジュアルを崩さず実装に落とし込む際に役立ちます。
shadcn/typeset:タイポグラフィを1つのCSSに集約
shadcn/typesetは、HTMLやMarkdownをレンダリングした際の見出し・段落・リスト・表・コードのスタイルを1本のCSSファイルにまとめた仕組みです。テーマの値を継承しつつ、コンテナのサイズに応じて自動でスケールします。
<div class="typeset">
<h2>見出し</h2>
<p>本文テキスト...</p>
</div>サイズ・行送り(leading)・フロー(flow)の3つをCSSカスタムプロパティで調整でき、コンテキストごとに複数のtypesetを使い分けられます。DESIGN.mdなどでタイポグラフィのルールを言語化していても、最終的なCSS実装がバラつきがちな問題に対する具体的な受け皿になりそうです。
@shadcn/helpers:UIの前段にあるロジックのテストを楽に
@shadcn/helpersは、細かく実用的なヘルパー関数を集めたパッケージです。第一弾はAI SDKやTanStack AI向けで、モデル呼び出しやAPIルート、実際のネットワークリクエストなしにuseChatのライフサイクルをコード上で再現してテストできます。チャットUIを持つプロダクトのデザインを検証する際、見た目だけでなく状態遷移も含めて素早く確認したい場合に有用です。
frontend-designスキルとの役割分担
Claude CodeでUIを組む際によく使われる公式のfrontend-design skillは、コードに触れる前にデザインの哲学や制約をClaudeに与えるためのSKILL.mdです。一方でClaude Designはビジュアルを対話的に作り込むGUIツールという位置づけで、両者は競合というより補完関係にあります。ラフな方向性はClaude Designでブランドに沿って素早く固め、実装フェーズではfrontend-design skillやDESIGN.mdの制約を効かせながらClaude Codeで組み上げる、という使い分けが現実的です。
主な情報源
- Claude Design | Claude by Anthropic
- Claude Design now stays on brand for daily work | Claude by Anthropic
- Introducing Claude Design by Anthropic Labs
- Get started with Claude Design | Claude Help Center
- Claude Design June 2026: Design System Imports, Claude Code Sync, and the Token Burn Fix — ChatForest
- July 2026 – Introducing shadcn/typeset
- July 2026 – Introducing @shadcn/helpers
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。