Claude Code 
OpenDesign OpenDesignでClaude Codeを使ってインターフェースをデザインする方法：制約としてのCLAUDE.mdとFrontend Designスキル、ブリーフからレビュー済みファイルまでの1つのワークスペース設定タスク、そしてFigmaとの往復がどこで止まるか。
Claude Code への3つの入口
このウォークスルーでは、ブリーフ、参照資料、デザインルール、そしてレビュー対象となる HTML 成果物を扱います。
このガイドを読む セットアップ新規インストールから、UI を生成しブラウザで確認できる Claude Code セッションまでの完全な道筋。
セットアップに進む 比較Codex と Cursor と並べたときに Claude Code のデザイン上の強みがどこにあるか、そして別のエージェントのほうが適しているのはどんなときか。
比較を見るClaude Code デザインウォークスルー
このウォークスルーでは、1件の仕事を引き継ぎまで追います。Claude Code に渡すブリーフと制約、返ってくる成果物、そして承認前にあなたに残る確認項目です。以下のインターフェースはこのページ用に作られた例示であり、実際の Claude Code セッションのキャプチャではありません。
ブリーフ小規模な SaaS チーム向けにワークスペース設定エリアをデザインする：一般、メンバー、通知、請求。値は CLAUDE.md のトークンから取得し、手作業で調整した例外は作らない。デスクトップとスマートフォンの両方で成立すること。
data-od-id フックを持つ、単一の自己完結型 HTML ファイルあなたがブリーフを書き、デザインシステムを選び、受け入れ基準を定めます。
Claude Code がレイアウトを計画し、HTML、CSS、JavaScript を書き、依頼に応じて修正します。
OpenDesign がデザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクトファイルとして保持します。
引き継ぎの前に、視覚的階層、8px グリッド上のスペーシング、両方のブレークポイント、そしてすべてのインタラクションを確認します。
サブナビゲーション、フォーム、アクションは 8px グリッドに揃っている。固定の保存バーがフィールドを覆うことはない。
グループ見出しはラベルより強いウェイトを持つ。アクセントは有効なトグルにのみ現れる。
モバイル幅では、サブナビゲーションがセグメント切り替えに変わる。トグルは 44px のヒットエリアを保つ。保存ボタンは全幅に広がる。
各フィールドを Tab で移動し、1つのコントロールを切り替え、その後キャンセルして未保存の変更プロンプトを確認する。
適合性
互換性
このページでは、Claude Code が OpenDesign デスクトップアプリ経由で接続されているものとして扱います。公開されている参照情報は 2026年9月6日に確認しました。
Claude Code は Anthropic のエージェント型コマンドラインツールです。自然言語でタスクを記述すると、そのタスクが完了するまでプロジェクト内のコードを読み、書き、実行します。Anthropic のホスト型製品である Claude Design とは別物です。その選択については Claude Design の比較 で扱っています。このページは OpenDesign を通じて Claude Code でインターフェースをデザインすることについてであり、Claude Code 自体のインターフェースについてではありません。OpenDesign の セットアップノート に利用可能なエージェントが一覧されています。
Anthropic API キー（BYOK）または Claude サブスクリプション。Anthropic API キー（BYOK）または Claude サブスクリプションで認証します — 当社を通じてプロキシされるものはありません。このページでは割り当て量や価格を約束しません。
ターミナル CLI、VS Code / Cursor / JetBrains 拡張、デスクトップアプリ、Web として利用できます。デスクトップ版についてはダウンロードページを参照してください。ソースのクイックスタートにある Node.js と pnpm の要件は、ソースから実行する場合に重要であり、デスクトップパッケージをインストールする場合には関係しません。互換性のある Claude Code の最低バージョン：ここでは未確認です。
インストール済みのバージョンに表示される接続手順に従い、控えめなタスクを試してください。Claude Code がそれを完了し、成果物が開くことを確認します。エージェントをダウンロードしただけでは、接続が機能していることの証明にはなりません。
デスクトップアプリから始める
まずダウンロードから始め、インストールしたバージョンの Claude Code セットアップを完了し、控えめな結果を検証します。この道筋をたどるのに OpenDesign をソースからビルドする必要はありません。
お使いのマシンに合ったパッケージを選び、インストールして、デスクトップアプリを開きます。
OpenDesignをダウンロードインストールしたバージョンに付属する Claude Code の手順に従います。Anthropic API キー（BYOK）または Claude サブスクリプションで認証します — 当社を通じてプロキシされるものはありません。
anthropics/skills — frontend-designスキル# 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公開ガイドの Claude Code セットアップノートから引用。最新のコマンドはベンダーのドキュメントで確認してください。
最初のブリーフは控えめにしておくと、1回の修正を含むループ全体を評価できます。
プロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールに従うこと。デスクトップ幅とモバイル幅で確認すること。
OpenDesign をソースから実行するには、代わりに 技術クイックスタート を使ってください。
Claude Code のデザインワークフロー
ワークスペース設定のタスク1件を、ブリーフから検証済みファイルまで追跡します。各ステップで、あなたが引き渡すもの、Claude Code が行うこと、OpenDesign が寄与するもの、そしてあなたが確認するものを示します。
平易な言葉で3〜6行。対象ユーザー、画面の役割、プラットフォームを明示します。
デザインシステムと、いくつかの厳格なルール。その組み合わせが、ブランドに沿った出力とありきたりな見た目を分けます。
Claude Code は自己完結型の HTML ファイルを生成します：レイアウト、スタイル、インタラクション、安定したフック。
ファイルは指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが評価されます。
data-od-id を公開します。プレビュー内の要素を指定して変更をリクエストします。各リビジョンは新しいファイルとして保存され、何かが黙って上書きされることはありません。
リソース
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-officialclaude "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."