デザインのための Claude Code。

Claude Code とは実際に何か

Claude Code は Anthropic のエージェント型コーディングツールです。コードベースを読み、ファイルを編集し、コマンドを実行し、開発ツールと連携します — 単に行を補完するのではなく、自然言語のタスクから計画・記述・検証を行います。

同じエンジンを共有する複数の面で提供されます: ターミナル CLI、VS Code・Cursor・JetBrains 向けの IDE 拡張機能、ビジュアルな差分レビューを備えたデスクトップアプリ、そして長時間実行タスク向けの Web 体験。あなたの CLAUDE.md ファイル、設定、MCP サーバーはそのすべてに引き継がれます。

• 指示ファイル: Claude Code はセッション開始時にプロジェクトルートの CLAUDE.md ファイルを読み込みます — デザインの規約、tokens、レビューのチェックリストを記述する自然な場所です。
• Skills: Agent Skills は、繰り返し使う指示・スクリプト・リソースをパッケージ化し、Claude がオンデマンドで読み込みます。Anthropic 公式の Frontend Design skill によるセンスの付与も含まれます。
• 計画とサブエージェント: 実行前に計画を立て、タスクの異なる部分を並行して進めるサブエージェントを生成できます。これにより大規模な UI リファクタリングの一貫性が保たれます。

• ベンダー: Anthropic
• 認証情報: Anthropic API キー（BYOK、Console 経由）または Claude サブスクリプション（Pro / Max）
• 提供面: ターミナル CLI、VS Code / Cursor / JetBrains 拡張機能、デスクトップアプリ、Web

なぜ Claude Code はデザインが得意なのか

コーディングエージェントの中でも、Claude Code はフロントエンド作業のセンスに定評があります。それにはいくつかの理由があります。

• 曖昧でなく具体的な判断: Claude Code は、曖昧にごまかすのではなく具体的な選択 — 正確な hex 値、余白スケール、タイプランプ、コンポーネント階層 — にコミットする傾向があります。これこそが本物のインターフェースとプレースホルダーを分けるものです。
• コードベースを踏まえた推論: 大きな作業コンテキストを活かして多数のファイルにまたがる UI を一度にリファクタリングし、その場限りのスタイルを発明するのではなく、既存のコンポーネントや tokens を再利用します。
• 公式のフロントエンド skill: Anthropic は Frontend Design skill を提供しており、Claude にまずデザインの方向性を書かせ、ありきたりなシステムフォントや予測可能な紫のグラデーションから意図的に距離を取らせます。

教訓は Anthropic が自社モデルについて語るのと同じです: Claude はデフォルトではセンスを持っていません — 放っておけば Web デザインの統計的な中心（Inter、紫のグラデーション、柔らかい影）へと収束します。制約を与えたときに良いデザインを生み出します。Open Design はまさにそれらの入力をパッケージ化しており、だからこそ両者は噛み合うのです（詳細は後述）。

デザイン作業のために Claude Code をゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる Claude Code までの全行程はこちらです。

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• デザインルールを記述する: tokens、プリミティブ、規約を CLAUDE.md に書き、Claude にそれを参照させましょう。そうすれば出力がありきたりな見た目に落ち着かず、ブランドに沿ったものになります。
• ブラウザ検証を追加する: Playwright や Chrome MCP を接続し、Claude が実際のブラウザで描画して、ビルドが通ることだけを確認するのではなく、ブレークポイントをまたいで出力を検証するようにします。

CLAUDE.md と Skills のワークフロー

Claude Code で最も効果の高いデザインのループは、本物のリファレンスとあなたのデザインコンテキストを与え、UI が一致するまで反復することです — CLAUDE.md と Skills が制約を運んでくれるので、プロンプトごとに説明し直す必要がありません。

1. 手元にある最も明確なビジュアルリファレンスから始めましょう — そして 1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
2. プロンプトでは具体的に。曖昧なプロンプトは、強力なエージェントを使ってもありきたりな UI を生みます。
3. デザインシステムと規約を CLAUDE.md に保ち、tokens と正規のプリミティブがどこにあるかを Claude に伝えます。
4. Frontend Design skill を追加し、コードを書く前に Claude が本物の美的方向性にコミットするようにします。
5. ブラウザ検証を接続し、Claude が描画し、ブレークポイントへリサイズし、リファレンスと照合し直す — 単にビルドが通ることを確認するだけにしないようにします。

リファレンス画像をセッションに投入し、具体的な制約を添えてプロンプトを出します:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

並行して dev サーバーを動かし、プロンプトを小さく焦点を絞って保ち、良い反復はコミットし、悪い反復は元に戻す（戻したことを Claude に伝える）ことで、各パスがクリーンなベースの上に積み上がるようにします。大きなリファクタリングではプランモードを使い、ファイルが変更される前にアプローチをレビューできるようにします。

Claude Code + Figma: デザイン ↔ コードの往復

2026 年 2 月、Anthropic と Figma は Figma MCP サーバーを介した第一級の双方向連携を提供しました。これは両方向で機能します。

• デザイン → コード: Figma でフレームを選択するか、リンクを Claude Code に貼り付けてデザインコンテキストを取り込み、既存のコンポーネントライブラリを使って実装するよう依頼します。Code Connect が出力を実際のコンポーネントと整合させます。
• コード → デザイン: 機能をブラウザで構築・プレビューし、「これを Figma に送って」と言えば、動作中の UI を編集可能な Figma レイヤーとして取り込みます — 画面全体でも、選択した要素だけでも可能です。

claude plugin install figma@claude-plugins-official で一度インストールすれば使えます（Dev Mode MCP には有料の Figma プランが必要です）。同じ Figma MCP は Claude Code、Codex、Cursor、VS Code で利用でき — まさに Open Design が編成するために作られた、ポータブルでマルチエージェントな機能です。

デザインにおける Claude Code vs Codex vs Cursor

デザイン作業に唯一の勝者は存在しません — 各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると:

コミュニティで繰り返される結論は、センスは人間から生まれるということです: 3 つとも、skills・リファレンス・制約がなければありきたりな美意識へと落ち着きます。それこそが解くべき本当の問題であり — それはモデルの形ではなく、デザインツールの形をしています。

落とし穴、そして「AI スロップ」っぽい見た目を避ける方法

Claude Code のセンスへの定評をもってしても、AI 生成デザインへの最もよくある不満は、ありきたりに見えるというものです — Inter フォント、白地に紫のグラデーション、柔らかい影、過大な角丸、「いかにも AI が作りました」と叫ぶような美意識。Anthropic 自身もこれを分布的収束のせいだとしています: 無難な選択が Web の学習データを支配しているのです。ほかにも、モバイルレイアウトの崩れや、指示が UI のコピーに漏れ出す問題が報告されています。

• Frontend Design skill をインストールする: Claude に本物の方向性へコミットさせ、AI が使いすぎているフォントやグラデーションを明示的に避けさせます。
• ブラウザ検証を有効化する: Claude にブレークポイントをまたいで描画と自己チェックをさせ、レイアウトがモバイルで黙って崩れないようにします。
• tokens とリファレンスを供給する: 本物のデザイン tokens とリファレンスのスクリーンショットは、出力品質に対する最大の単一のレバーです。
• ルールを CLAUDE.md に記述する: 「ヒーローカードなし、書体は最大 2 つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読む場所に置きます。

どの対策も、エージェントに厳選されたデザインコンテキストを与えることが要だと気づくでしょう。そのコンテキストをプロジェクトごとに手作業で維持する手間こそ、Open Design が取り除くものです。

Open Design の中で Claude Code を使ってデザインする

Open Design は、上記のワークフローが繰り返し求めてくるオープンソースのデザインレイヤーです。Claude Code を第一級のアダプターとして扱い、厳選された skill とデザインシステムのライブラリ、構造化されたレンダーパイプライン、ローカルなデスクトップ UI でそれを包みます — そのため、Claude Code を優れたものにするデザインコンテキストが、毎回手作業で組み立てるのではなく、最初の実行から揃っています。

1. Open Design をインストールし、エージェントとして Claude Code を選びます。
2. Anthropic API キー（BYOK）または Claude サブスクリプションで認証します — 認証情報はあなたのマシンに留まり、私たちを経由してプロキシされることは決してありません。
3. デザインシステムと skill を選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
4. あらゆる成果物と DESIGN.md ファイルは、ホスト型クラウドではなくあなた自身のリポジトリに置かれます。

同じ Claude Code エージェント、同じキー — それに加えて、それを取り巻く本物でポータブルなオープンソースのデザインワークフロー。ローカルファーストで Apache-2.0 なので、あなたの作業も認証情報も、マシンの外へ出ることはありません。

よくある質問

1. 01 Claude Code はデザイン作業に向いていますか？ +

   はい — フロントエンドのセンスが最も優れたコーディングエージェントとして広く評価されており、hex 値、余白、タイプスケールについて具体的でコードベースを踏まえた判断を下します。Frontend Design skill、デザインシステム、本物のリファレンス画像をコンテキストに与えれば、本番品質でレスポンシブな UI を生み出し、ブラウザで検証できます。そのコンテキストがなければありきたりな見た目に落ち着きがちで、それこそ Open Design が埋めるギャップです。

2. 02 Claude Code でデザインするには Claude サブスクリプションが必要ですか？ +

   Anthropic API キー（BYOK、Console 経由）か Claude サブスクリプション（Pro / Max）のどちらでも使えます。いずれの場合も Open Design があなたの認証情報をプロキシすることはありません — それらはあなたのマシン上のエージェントが直接使います。

3. 03 フロントエンドデザインには Claude Code と Codex のどちらがよいですか？ +

   どちらも強力です。Claude Code は具体的でコードベースを踏まえたデザイン判断とフロントエンドの推論で知られ、Codex は高いビジュアルの仕上がりを持ち、委任されたサンドボックス化ビルドに優れます。多くのチームが両方を使います — Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

4. 04 Claude Code を Figma に接続するには？ +

   claude plugin install figma@claude-plugins-official で公式の Figma プラグインをインストールします。その後、デザインコンテキストを使って Figma フレームをコードで実装でき、「これを Figma に送って」で動作中の UI を編集可能な Figma フレームへ戻せます。Dev Mode MCP には有料の Figma プランが必要です。

5. 05 Skills と CLAUDE.md とは何ですか？ +

   CLAUDE.md はプロジェクトルートにある markdown ファイルで、Claude Code がセッション開始時に読み込みます — デザインの規約を記述する場所です。Skills は繰り返し使う指示とリソースをパッケージ化し、Claude がオンデマンドで読み込みます。Anthropic 公式の Frontend Design skill も含まれます。Open Design は両方の厳選されたライブラリを提供するので、プロジェクトごとのセットアップを省けます。

6. 06 ありきたりな「AI スロップ」の美意識を避けるには？ +

   Frontend Design skill をインストールし、本物のデザイン tokens とリファレンスのスクリーンショットを供給し、ブランドルールを CLAUDE.md に記述し、ブラウザ検証を有効にします。Open Design はこれらを厳選されたライブラリとして提供するので、プロジェクトごとのセットアップを省けます。

7. 07 Open Design は Anthropic と提携していますか？ +

   いいえ。Claude Code は Anthropic の製品であり、Open Design はそれを第一級のアダプターとしてサポートする、独立したオープンソースプロジェクトです。Claude と Claude Code は Anthropic の商標です。

8. 08 私のファイルと認証情報は安全ですか？ +

   はい — Open Design はローカルファーストで Apache-2.0 です。あなたのファイル、成果物、DESIGN.md はあなた自身のリポジトリに留まり、Anthropic の認証情報はあなたのエージェントが直接使い、Open Design のサーバーを経由してルーティングされることは決してありません。