2026年6月17日、Anthropic が Claude Design（プロンプトからプロトタイプを作るデザインツール）に大型アップデートを実施しました。注目は、Claude Code との双方向連携。ターミナルに /design と打つだけで、デザインと実装コードを行き来できるようになりました。
「デザイン → 実装」の受け渡しは、これまで開発者にとって地味に面倒な工程でした。今回はそこが地続きになります。さらに、GitHubや既存ファイルからデザインシステムを取り込み、Claudeが自分の出力を準拠チェックして自動修正する機能や、4月版で指摘されていたトークン過剰消費の改善も入りました。
この記事では、何が変わったのかを公式発表ベースで整理し、自分の既存アプリで実際に使ってみた感想まで含めてまとめます。
結論：3行で「何が変わったか」
- ① デザインシステムのインポート：GitHubリポジトリや生ファイルから既存デザインを取り込み、Claudeがそれに準拠しているかを自分でチェックし、見せる前に自動修正。
- ② Claude Code との双方向連携：ターミナルで
/designを実行すると、Claude Code から直接デザインを作成・編集でき、デザイン↔実装のハンドオフがシームレスに（スクショの受け渡しも不要）。 - ③ トークン問題の改善：4月のプレビュー以来の過剰なトークン消費が修正され、使用量上限を共有する形に整理。
「プロトタイプのおもちゃ」から「開発フローに組み込まれる道具」へ——という位置づけの変化が、今回の核心です。
そもそも Claude Design とは
Claude Design は、プロンプト（言葉の指示）からUIのプロトタイプを生成するAnthropicのデザインツールです。2026年4月にプレビューが公開され、プレビュー週だけで100万人以上が利用したと報じられています。位置づけとしては、デザインツールの定番Figmaに挑む存在として注目されました。
今回（6月17日）のアップデートで、単発のプロトタイプ作成にとどまらず、既存のデザイン資産や開発フローと連携する“実務ツール”へと踏み込んだ、という流れです。
新機能①：デザインシステムのインポート
今回の目玉のひとつが、デザインシステムの取り込みです。
- GitHubリポジトリ・デザインファイル・生アップロードから、ひとつ以上のデザインシステムを Claude Design に取り込める。
- 取り込んだ後は、Claudeがそのコンポーネントを使って制作し、出力が自社のデザインシステムに沿っているかを自分でチェック → ユーザーが見る前に自動修正する。
ポイントは、「ブランドの一貫性チェックを人手でやらなくてよくなる」こと。既存の見た目・部品に合わせて作ってくれるので、ゼロから作って後でガイドラインに直す、という手戻りが減ります。
新機能②：Claude Codeとの双方向連携（/design）
このブログ的に一番注目したいのがここです。Claude Design と Claude Code が双方向につながりました。
- ターミナルに
/designと入力すると、Claude Code からそのままデザインの作成・編集ができる。 - 作ったデザインを Claude Code に渡して実装（コード化）へ。スクリーンショットを渡す必要もなし。
- ローカルのコードベースを踏まえるので、生成物に既存プロダクトの要素が反映される。
つまり、「デザイン → 実装」だけでなく「実装 → デザイン」も行き来できる＝コードのラウンドトリップ。デザインと実装を別ツールで往復していた手間が、Claude Code のターミナル内で完結に近づきます。普段 Claude Code で開発している人ほど、恩恵が分かりやすい変更です。
トークン問題の改善と「使用量上限の共有」
4月のプレビュー版では、トークンを過剰に消費する問題が指摘されていました。今回のアップデートでそこが改善され、エラーも出にくくなったとされています。
あわせて、Claude Design は 使用量上限を（他のClaude製品と）共有する形に整理されました。コスト・上限の考え方は、当ブログの【Claude Code 1ヶ月のトークンコストを実測】や、料金まわりの【6月15日の料金変更は延期に】とあわせて押さえておくと、全体像が分かりやすいです。
実際に使ってみた：デザインの無い自作アプリを刷新してみた
このアップデートを、自分が運用している既存の業務用Webアプリ（自作）で試してみました（具体的な画面・数値は伏せます）。結論から言うと——既存システムのデザイン変更が、ものすごく楽になりました。
正直な所感を、やったこと順に。
- 「デザインシステムが無い」状態からでも作ってくれた：私のアプリには、整ったデザインシステムやガイドラインがありませんでした。それでもClaude Designは、ソースコードを読み、さらに実際に動いている画面を（Playwrightで）確認したうえで、現状を踏まえたデザインを作成。「既存の見た目を取り込む」という今回の方向性を、デザイン資産がない側でも実感できました。
- 指示はざっくりでよかった：「日本人ユーザーが好みそうな、シンプルなデザインに」という程度の要望から、ヘッダー違いなど複数の案を出してくれて、見比べて選ぶだけ。デザインの専門知識がなくても進められました。
- 反映（実装）まで自動だった：選んだ案を、コードへの反映（実装）まで自動で実施してくれたのが一番よかった点。「デザイン→実装」を自分で書き写す手間がほぼゼロで、今回の“コードのラウンドトリップ”を実作業で体感できました。
- 総評：細かい微調整の余地はあるものの、「既存システムの見た目を、低コストで一段引き上げる」用途にかなり向いていると感じました。デザインに時間を割けない個人開発者ほど、恩恵が大きいはずです。
一言でいうと——デザインが苦手・時間がない開発者の「既存アプリ刷新」に向いたアップデートでした。実際、紫系のやや主張の強い見た目から、落ち着いた配色のシンプルなUIへ、短時間で作り替えられました。
同じ要領で、グラフを多用する分析画面も同じトーンに刷新できました。1画面だけでなく、アプリ全体で配色やパーツの統一感が出るのが、デザインシステムを踏まえて作る今回のアプローチの利点です。
まとめ
- 2026年6月17日、Claude Design が大型アップデート。①デザインシステム取り込み②Claude Code双方向連携(/design)③トークン消費の改善が柱。
- とくに
/designによるデザイン↔実装のラウンドトリップは、Claude Code で開発する人に直接役立つ変更。 - 「プロトタイプ作成ツール」から「開発フローに組み込まれる実務ツール」へと進化した。
- 実際にデザインシステムが無い自作アプリで試したところ、ソース・稼働画面の確認 → デザイン作成 → 実装反映まで自動で、既存システムの刷新がかなり楽になった（詳細はH2-6）。
Claude Code を中心に開発している人なら、デザイン工程まで同じ環境で回せるようになる意義は大きいはずです。続報や使い込んだ知見が出たら、追記していきます。
あわせて読みたい：
・業務システムのUIをリニューアルした記録｜design 1h・実装 2h・修正 2日（実際の業務システムを本気で刷新した続編・実体験）
・Claude Codeのスキル機能(Skills)入門（/コマンドの仕組み）
・Claude Code 1ヶ月のトークンコストを実測（コスト・使用量の考え方）
・「6月15日の料金変更」は延期に（使用量上限まわりの最新事情）
コメント