【Claude Code /design skill】ターミナルからUIデザインを生成・実装まで一気通貫できる新スキルを徹底解説
- /design skillは、Anthropicが2026年8月18日にリサーチプレビューとして公開した、Claude Code向けの新スキル
- Claude DesignのアートボードワークフローをCLIおよびDesktopアプリから直接呼び出せる仕組み
- 生成したデザイン案をそのままClaude Codeで実装へ移行でき、Pro・Max・Team・Enterpriseプランで利用可能
2026年8月18日、AnthropicがClaude Codeの新スキル「/design skill」をリサーチプレビューとして公開しました！
「デザインを作って、選んで、そのまま実装する」という一連の流れを、ターミナルやDesktopアプリから離れずに完結させられるのが特徴です。Claude Designのアートボードワークフローが、ついにCLIの世界へやってきた形になります。この記事では、/design skillの概要や仕組み、使い方、料金体系から業界別の活用シーンまで徹底的に解説します。
＼生成AIを活用して業務プロセスを自動化／
このたびWEELは、2026年8月26日（水）・27日（木）に新宿住友ビル 三角広場で開催される「AI博覧会 Summer 2026」に出展することになりました。
さらに、弊社代表取締役社長の田村洋樹が、8月27日（木）14時40分からA会場で実施するカンファレンスに登壇いたします！
/design skillとは？
/design skillは、2026年8月18日にAnthropicが公開した、Claude Codeの中で動作するリサーチプレビュー段階のデザイン機能です。
ひと言で説明すると、これまで「claude.ai/design」からアクセスしていたClaude Designのアートボードワークフローを、ターミナル（CLI）やDesktopアプリの中から直接利用できるスキルになります。Claude Codeのセッション内で /design と入力するだけで、UIデザインの複数案がアーティファクトとして生成され、気に入ったものを選んだうえで、そのままClaude Codeに実装を指示するところまで一気通貫で進められます。
開発者にとっては「デザインのためだけにブラウザのClaude Designを開き、ハンドオフバンドルを経由してClaude Codeへ戻す」というステップを省略できる点が大きなメリットでしょう。2026年4月にリリースされたClaude Designと、6月に追加された /design-sync コマンドを経て、デザインと実装の距離をさらに縮める最新のアップデートとして位置づけられます。
/design skillの仕組み
/design skillは、Claude DesignとClaude Codeを内部的に連携させるブリッジとして動作します。
ユーザーがClaude Code上で /design コマンドを実行すると、Claude Designの基盤であるClaude Opus 4.7のビジョンモデルが呼び出されます。ここで複数のUIアートボード案がアーティファクトとして生成され、ユーザーはそれぞれの案を確認・比較して好みのデザインを選択します。
選択されたデザインは、Claude Code側のコンテキストにシームレスに引き渡されます。そこからはClaude Codeが対象プロジェクトのコードベースを参照しながら、選択したデザインに沿ったHTML・CSS・React等のフロントエンドコードを生成する流れです。
従来のワークフローではClaude Designで作成したデザインを「ハンドオフバンドル」として書き出し、それをClaude Code側で取り込む手順が必要でした。/design skillではこの受け渡し工程が自動化され、ターミナルを離れることなくデザインから実装まで完結する設計になっています。
/design skillの特徴
/design skillがこれまでのデザイン関連機能と大きく異なるのは、「デザイン生成」と「コード実装」のギャップを最小化した点にあります。
まず、アートボードの複数案生成が標準的なワークフローとして組み込まれています。Claude Designでは1案ずつ指示を重ねて調整する形が基本でしたが、/design skillでは最初から複数の方向性を提示し、比較検討できる設計です。デザインの探索フェーズをターミナル上で効率よく進められます。
次に、Claude Designの基盤モデルであるClaude Opus 4.7のビジョン能力を活用している点も見逃せません。コードベースとの接続により、プロジェクトの既存コンポーネントやカラーパレット、タイポグラフィを考慮したデザインが生成されやすく、「生成されたUIが実際のプロダクトと乖離する」問題を軽減してくれます。
/design skillの安全性・制約
/design skillはClaude Designと同様、リサーチプレビュー（研究段階のベータ版）という位置づけで提供されています。
Anthropicの利用規約およびAcceptable Use Policyが適用され、生成されるデザインの内容も安全性フィルターの対象です。また、Claude Code経由で接続したコードベースのデータはAnthropicのモデルトレーニングには使用されないことが公式に明記されています。
制約としては、あくまでリサーチプレビューであるため、仕様変更や一時的な機能制限が発生する可能性がある点に注意が必要でしょう。また、利用には有料プラン（Pro以上）が必須で、生成量はClaude Designと共通の使用量上限に含まれます。
/design skillの料金
/design skillは、Claude Codeの機能拡張として追加料金なしで利用できます。必要なのは対応するClaude有料プランへの加入のみで、/design skillの利用によって別途課金されることはありません。
| プラン名 | 月額料金 | /design skill利用 | 備考 |
|---|---|---|---|
| Free | 無料 | ❌ | Claude Codeの利用自体が不可 |
| Pro | 月額20ドル | ⭕️ | Claude Designと共通の使用量上限 |
| Max | 月額100ドル〜 | ⭕️ | より多くのトークン上限を確保 |
| Team | 1ユーザーあたり月額30ドル | ⭕️ | チーム向けの管理機能付き |
| Enterprise | 要問い合わせ | ⭕️ | デフォルトではオフ設定 |
/design skillのライセンス
/design skillはClaude APIおよびClaude Codeの利用規約に準拠したクローズドなサービスとして提供されています。オープンソースのスキルとは異なり、Anthropicの管理下で動作するプロプライエタリ機能です。
| 利用用途 | 可否 | 備考 |
|---|---|---|
| 商用利用 | ⭕️ | API利用規約の範囲内 |
| 改変 | ❌ | クローズドな内部スキルのため不可 |
| 再配布 | ❌ | Anthropicの管理下で提供 |
| 特許利用 | – | 該当なし |
| 私的利用 | ⭕️ | Acceptable Use Policyの範囲内 |
/design skillの使い方
/design skillを使うための具体的なステップを紹介します。操作はシンプルで、初めてClaude Codeを触る方でも数分で試すことが可能です。
Claude Codeを最新バージョンにアップデート
まず、/design skillを使うにはClaude Codeの最新バージョンが必要です。ターミナルで以下のコマンドを実行して、アップデートを行ってください。
npm update -g @anthropic-ai/claude-code
アップデート後、Claude Codeを起動して新しいセッションを開始します。
claude/design コマンドでデザインを生成
Claude Codeのセッション内で /design コマンドを実行します。続けて、どのようなUIを作りたいのかを自然言語で伝えてください。
/design SaaS向けのダッシュボード画面を作りたい。サイドバーナビゲーション付きで、メインエリアにはKPIカードとグラフを配置してほしい
Claudeが複数のアートボード案をアーティファクトとして生成します。それぞれのデザインを確認し、方向性の合うものを選択しましょう。
選択したデザインを微調整する
選択したデザイン案に対して、チャット上でさらに修正指示を加えられます。
例えば、「配色をもう少し落ち着いたトーンに変更して」「KPIカードのレイアウトを2列から3列にして」といった指示を出すと、Claudeがデザインを更新してくれます。
デザインをコードとして実装
デザインが固まったら、そのままClaude Codeに実装を指示します。プロジェクトのコードベースを参照しながら、ReactやHTML/CSS等のフロントエンドコードを生成してくれます。
既存のデザインシステムやコンポーネントライブラリがある場合は、事前に /design-sync でClaude Designにデザインシステムを同期しておくと、より一貫性のあるコードが出力されるのでおすすめです。
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp上記コマンドでClaude Design MCPサーバーを接続しておけば、より深い連携が実現します。
【業界別】/design skillの活用シーン
/design skillは「デザイナーではないがUIを作る必要がある」場面で真価を発揮します。業界ごとの具体的な活用イメージを紹介します。
SaaS・Webサービス開発
スタートアップのエンジニアが、プロダクトのMVPやプロトタイプをデザイナー不在の状態でも高品質に立ち上げられるのが大きな強みです。/design skillで複数のUI案を生成し、社内レビューを経てすぐにReactコンポーネントへ落とし込むワークフローが実現します。
生成AIを搭載したSaaSについて、詳しく知りたい方は以下の記事も参考にしてみてください。
社内システム・業務改善
情報システム部門が社内向けダッシュボードや管理画面を構築する際、これまで外注やデザイナーの工数を確保していた初期デザインフェーズの時間を大幅に短縮できます。Claude Codeのセッション内で完結するため、社外にデータを出す必要もありません。
生成AIによるシステム開発について、詳しく知りたい方は以下の記事も参考にしてみてください。
教育・研修
プログラミング学習の現場では、UIデザインのハードルがフロントエンド開発の障壁となりがちです。/design skillによってデザイン工程を学習コストなしでスキップし、ロジックの学習に集中できる環境が整います。
教育業界における生成AI活用について、詳しく知りたい方は以下の記事も参考にしてみてください。
【課題別】/design skillが解決できること
次に、/design skillが解決できる業務課題を具体的に紹介します。
デザイナーとエンジニア間のハンドオフ工数を削減
従来はFigmaやClaude Designで作ったデザインを仕様書にまとめ、エンジニアに引き渡す工程が必要でした。/design skillではデザインと実装が同一セッション内で行われるため、この受け渡しコストがほぼゼロになります。
「AIっぽいUI」からの脱却
Claude Codeがデフォルトで生成するUIは、Interフォントに紫グラデーションという没個性的なデザインに偏りがちです。/design skillはClaude Designの審美眼を組み込んでおり、意図を持ったデザイン方向性でUIを生成してくれます。frontend-design skillとの併用でさらに品質が向上するでしょう。
プロトタイプ作成のスピード向上
アイデア段階から動くプロトタイプまでの距離が劇的に縮まります。PMやファウンダーが「こんなアプリを作りたい」と伝えるだけで、数分後には操作可能なプロトタイプが手に入ります。ユーザーテストやステークホルダーへのデモを素早く回せるようになる点は、プロダクト開発全体の速度向上につながります。
/design skillを使ってみた
それでは実際に、/design skillの実力を検証していきます。
ダッシュボードUIの生成と実装
今回は「プロジェクト管理ツールのダッシュボード画面」を/design skillで作ってみました。
プロンプトはこちら
/design プロジェクト管理ツールのダッシュボードを作成してほしい。左サイドバーにナビゲーション、メインエリアにタスクの進捗カード・担当者別の稼働状況グラフ・直近のアクティビティフィードを配置。カラーはダークモードで、モダンかつ落ち着いた印象に。まず「方向性」と「作りかた」の2ステップで対話的にヒアリングが走りました。
方向性の選択では「A: 深藍×ティール（高密度・実務寄り）」「B: 墨グラファイト×琥珀（余白広め・エディトリアル）」「C: カーボン×ライム（ブルータリスト・罫線ベース）」の3案が提示されました。それぞれASCIIワイヤーフレーム付きで配色コード（oklch値）やフォント候補まで明示されており、単なる色見本ではなくデザイン意図ごと比較できる構成になっています。
今回はA案（深藍×ティール）のクリックできるプロタイプを選択しました。約14分でアーティファクトとして出力され、ブラウザでそのまま確認できます。
出力結果はこちら
生成されたダッシュボードは「Orbit」というプロダクト名まで自動で付与され、左サイドバーにナビゲーションとプロジェクト一覧、メインエリアにはタスク進捗カード3枚・担当者別の稼働状況グラフ・直近のアクティビティフィードが配置されていました。
特に印象的だったのは、稼働率が100%を超えた担当者に琥珀色の警告アイコンと「超過」ラベルが自動付与されていた点です。「色だけに意味を持たせない」というアクセシビリティの原則まで考慮した設計で、単なる見た目の生成にとどまらない判断力を感じました。
よくある質問
最後に、/design skillに関して、多くの方が疑問に感じるポイントをQ&A形式でまとめました。
/design skillでデザインから実装まで一気通貫の開発を始めよう
/design skillは、Claude CodeとClaude Designの橋渡しをする新しいスキルです。ターミナルから離れずにUIデザインの複数案を生成し、気に入った案をそのままフロントエンドコードへ変換する一連の流れは、デザイナーとエンジニアの境界を溶かす可能性を持っています。
リサーチプレビュー段階ではあるものの、Claude Codeユーザーであればアップデートするだけですぐに試せるため、まずは手元のプロジェクトで体験してみてはいかがでしょうか。「ターミナルでデザインする」という新しい開発体験が、日々のワークフローを大きく変えてくれるかもしれません。
最後に
弊社では、AI導入を検討中の企業向けに、業務効率化や新しい価値創出を支援する情報提供・導入支援を行っています。最新のAIを活用し、効率的な業務改善や高度な分析が可能です。
「生成AIで新しいプロダクトを作りたい」「もっと本格的に生成AIを業務に組み込みたい」とお考えの方は、ぜひ株式会社WEELにご相談ください。
開発実績として、
・新規事業室での「リサーチ」「分析」「事業計画検討」を70％自動化するAIエージェント
・社内お問い合わせの1次回答を自動化するRAG型のチャットボット
・過去事例や最新情報を加味して、10秒で記事のたたき台を作成できるAIプロダクト
・お客様からのメール対応の工数を80％削減したAIメール
・サーバーやAI PCを活用したオンプレでの生成AI活用
・生徒の感情や学習状況を踏まえ、勉強をアシストするAIアシスタント
などの開発実績がございます。
生成AIを活用したプロダクト開発の支援内容は、以下のページでも詳しくご覧いただけます。
➡︎株式会社WEELのサービスを詳しく見る。
アイデア段階でも構いません。まずは無料相談でお気軽にご相談ください。
➡︎生成AIを活用したプロダクト開発・業務効率化について相談する
「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。
セミナー内容や料金については、ご相談ください。
また、大規模言語モデル（LLM）を対象に、言語理解能力、生成能力、応答速度の各側面について比較・検証した資料も配布しております。この機会にぜひご活用ください。
