Design with Claude Code

Claude Code を使った UI プロトタイピングのテンプレートとスキル集。

Blog: 開発スピードを上げたくてClaude Code中心のデザイン環境を組んでみた — このテンプレートが生まれた背景と実際のワークフローを紹介しています。

誰のためのテンプレート？

Claude Code でプロトタイプを作りたいデザイナー・PdM 向けです。

• コードが書けなくても OK — Claude Code が全部書いてくれます
• 「ボタンを赤くして」「余白を広げて」のような自然言語でデザインを進められます
• Figma → 実装の間の「翻訳コスト」をなくし、実コードでプロトタイプを作れます

こんな人におすすめ

• デザイン案を素早くURLで共有して、チームからフィードバックをもらいたい
• 複数パターンを作って横並び比較したい
• プロトタイプから実装仕様書・QAチェックリストまでワンストップで仕上げたい

前提条件

Tip: node -v と claude --version で確認できます。

Quick Start

# 1. リポジトリをクローン
git clone https://github.com/Sota-Mikami/design-with-claude-code.git
cd design-with-claude-code/

# 2. スキルを導入（Claude Code にワークフローを教える）
mkdir -p ~/.claude/skills
cp -r skills ~/.claude/skills/vibe-design

# 3. テンプレートをコピーして開発開始
cp -r template/ ../my-prototype/
cd ../my-prototype/
npm install

# 4. 開発サーバー起動
npm run dev
# -> http://localhost:3000

# 5. 別のターミナルを開いて、同じディレクトリで Claude Code を起動
cd ../my-prototype/
claude
# 会話例:
#   「ユーザー一覧画面のプロトタイプを作って」
#   「タブを追加して、フィルター機能をつけて」
#   「パターンBとしてカード表示バージョンも作って」

できること

• 会話でUIプロトタイプを作成 — ワイヤーフレームからリッチプロトタイプまで
• 複数パターンを一括生成 — Compare パネルで横並び比較
• 画面遷移マップの自動生成 — React Flow でビジュアライズ
• スクリーンショットの自動撮影 — Playwright で全画面一括キャプチャ
• 実装指示書・QAチェックリストの生成 — プロトタイプからそのまま
• GitHub Pages でデプロイ & URL共有 — push するだけ

ワークフロー — Claude Code との会話で進める

セットアップが終わったら、あとは基本的に Claude Code と会話するだけ です。 各ステップで実際にどう話しかけるかを紹介します。

Step 1: ワイヤーフレーム（グレースケールで構造を固める）

まずは色をつけず、情報設計とレイアウトだけを固めます。

💬 「求人一覧画面のプロトタイプを作って。まずはワイヤーフレームで」
💬 「カード型で一覧を表示して、検索バーとカテゴリフィルターをつけて」
💬 「カードの情報は、タイトル・会社名・勤務地・給与レンジ・タグ」
💬 「余白がちょっと狭い、もう少しゆったりさせて」
💬 「フィルターを横スクロールのチップにして」

テンプレートにはグレースケール専用トークン（--wf-*）が用意されています。 Claude Code は自動的にこのトークンでワイヤーフレームを作ります。

Step 2: リッチプロトタイプ（ブランドカラー適用）

構造が固まったら、ブランドカラーを適用します。

💬 「ワイヤーフレーム良さそう！ブランドカラーを適用して」
💬 「プライマリカラーは #2563EB にして」
💬 「ホバー時のアニメーションもつけて、ふわっと変わる感じで」
💬 「フォントを Noto Sans JP に変えて」

--wf-* トークンが --color-primary 等のブランドトークンに自動で差し替わります。

Step 3: 複数パターンの比較

デザインの方向性で迷ったら、パターンを並べて比較します。

💬 「詳細画面のレイアウト、2パターン作って比較したい」
💬 「パターンA: 左にサムネ、右にテキスト。パターンB: 上に大きく画像、下にテキスト」
💬 「リストのレビュー表示、カード型とタイムライン型の2パターン出して」
💬 「ローディング状態と、検索結果0件の空状態も作って」

Patterns / Variants が自動で Compare パネルに登録されます。ブラウザで /map を開くと全体像が見えます。

Step 4: 画面マップ

screens.ts に画面を定義すると、React Flow で画面遷移図が自動生成されます。

💬 「画面マップを更新して。一覧→詳細→応募フォームの遷移を追加」
💬 「スクリーンショットを全画面撮り直して」

Step 5: デプロイ & URL 共有

💬 「このプロトタイプをデプロイして、URL を共有したい」
💬 「GitHub Pages でデプロイして」

Claude Code がリポ作成 → push → Pages 設定まで一括でやってくれます。 詳細な手動手順は デプロイ & URL共有 セクションを参照。

Step 6: 実装指示書 & QA

💬 「この画面の実装指示書を /spec に書いて」
💬 「コンポーネントの Props とインタラクション仕様をテーブルで整理して」
💬 「QA チェックリストを /qa に作って。P0〜P2 で優先度分けて」

日常的な指示の例

ワークフローのステップに関係なく、いつでも使える指示です。

💬 「ボタンの色をもっと濃くして」
💬 「このセクションの余白を広げて」
💬 「モバイルで見たときにカードが1カラムになるようにして」
💬 「このテーブル、行数が多いときにスクロールできるようにして」
💬 「ヘッダーを固定して、スクロールしても見えるようにして」
💬 「ダミーテキストじゃなくて、実際のコピーに近い文言にして」
💬 「この画面のスクショ撮って」

Compare パネル

ProtoNav の 「Compare (N)」ボタン でドロワーが開き、States / Variants / Patterns を横並び比較できます。 ページ遷移に自動追従するので、画面を切り替えても比較対象が更新されます。

State / Variant / Pattern の使い分け

判断基準: アプリ内にトグルUI（ボタン・タブ等）があれば State。なければ Pattern。

テンプレートに含まれるサンプル

テンプレートには Cafe Explorer というサンプルアプリが入っています。 States / Variants / Patterns の実装パターンを具体的なコードで確認できます。 新規プロトタイプでは中身を差し替えて使ってください。

• カフェ一覧（グリッド/リスト表示、検索、フィルタ）
• カフェ詳細（メニュー/レビュータブ、カード型 vs タイムライン型レビュー）
• 各画面のローディング・空状態バリアント
• 10枚のサンプルスクリーンショット

一覧（グリッド）	一覧（リスト）	詳細

ディレクトリ構成

.
├── template/          # プロトタイプテンプレート（コピーして使う）
│   ├── DESIGN.md              # デザインシステム定義（Claude Code が最初に読む）
│   ├── src/app/
│   │   ├── globals.css       # デザイントークン（Indigo系サンプル）
│   │   ├── data.ts           # サンプルデータ（カフェ情報）
│   │   ├── page.tsx          # カフェ一覧（グリッド/リスト切替）
│   │   ├── cafe/page.tsx     # カフェ詳細（メニュー/レビュー）
│   │   ├── password-gate.tsx  # パスワード保護 + メタ情報表示
│   │   ├── proto-nav.tsx     # ナビバー + Compare ボタン
│   │   ├── base-path.ts      # GitHub Pages basePath ユーティリティ
│   │   ├── map/              # 画面マップ（React Flow）
│   │   ├── spec/             # 実装指示書（サンプル記入済み）
│   │   └── qa/               # QAチェックリスト（サンプル記入済み）
│   ├── scripts/              # スクリーンショット自動撮影
│   ├── public/screenshots/   # サンプルスクリーンショット（10枚）
│   ├── .github/workflows/    # GitHub Pages 自動デプロイ
│   ├── Dockerfile            # Docker デプロイ用（参考）
│   └── nginx.conf
├── skills/            # Claude Code スキルファイル
│   ├── SKILL.md              # メインワークフロー
│   ├── SCREEN_MAP_GUIDE.md   # 画面マップの使い方
│   └── SPEC_GUIDE.md         # 仕様書・QAの書き方
└── README.md

技術スタック

デプロイ & URL共有

プロトタイプを URL で共有するまでの手順です。

一番簡単な方法: Claude Code に頼む。

💬 「このプロトタイプを GitHub Pages でデプロイして、URL を教えて」
💬 「Private リポで my-org/proto-onboarding って名前で」

Claude Code がリポ作成 → push → Pages 設定まで一括でやってくれます。 以下は手動で行う場合や、仕組みを理解したい場合の手順です。

前提: GitHub CLI

デプロイ手順では GitHub CLI (gh) を使います。

# インストール確認
gh --version

# 未インストールの場合
brew install gh        # macOS
# インストール後、ログイン
gh auth login

Step 1: GitHub リポジトリを作成

gh repo create your-org/proto-feature-name --private --source=. --push

このコマンドで以下が一度に実行されます:

• GitHub 上に Private リポジトリを作成
• ローカルの git を初期化（未初期化の場合）
• コードを push

手動で行う場合: github.com/new からリポを作成し、表示される手順に従って push してください。

Step 2: GitHub Pages を有効化

1. GitHub のリポジトリページを開く（gh browse で開けます）
2. Settings > Pages に移動
3. Source を "GitHub Actions" に変更して保存

Step 3: 再度 push してデプロイ

# Pages 有効化後、ワークフローを再実行
git commit --allow-empty -m "Trigger deploy"
git push

push すると GitHub Actions が自動でビルド & デプロイします。 1〜2分後に以下の URL でアクセスできます:

https://your-org.github.io/proto-feature-name/

確認方法: リポの Actions タブで、ワークフローが緑（成功）になっていれば OK です。

パスワード保護

プロトタイプにパスワードを設定して、URLを知っていても認証なしでは閲覧できないようにできます。

.env.local に NEXT_PUBLIC_PROTO_PASSWORD を設定するだけで有効になります。

# template/.env.local
NEXT_PUBLIC_PROTO_PASSWORD=my-secret-pass

パスワード画面	エラー表示

• パスワードが空（未設定）の場合は認証なしでそのまま表示されます
• セッション中は一度認証すれば再入力不要です（sessionStorage で管理）
• GitHub Actions でデプロイする場合は、リポの Settings > Secrets に環境変数を追加してください

メタ情報の設定

プロトタイプのタイトル・説明・作者を環境変数で設定できます。パスワード画面やブラウザのタブタイトルに反映されます。

# template/.env.local
NEXT_PUBLIC_PROTO_TITLE=My Prototype
NEXT_PUBLIC_PROTO_DESCRIPTION=Onboarding flow redesign
NEXT_PUBLIC_PROTO_AUTHOR=Sota

.env.local.example にテンプレートが用意されています。cp .env.local.example .env.local でコピーして使ってください。

アクセス制御に関する注意

GitHub Pages のサイトはリポが Private でも URL を知っていれば誰でもアクセスできます（GitHub Team プランの場合）。 プロトタイプレベルなら問題ないことが多いですが、公開前の施策など機密性の高い内容を扱う場合は注意してください。

対策の例:

• 機密性の高いプロトタイプは Private リポ + Enterprise Cloud を使う
• NEXT_PUBLIC_PROTO_PASSWORD を設定してパスワード保護を追加する
• URL を推測しにくい名前にする（proto-abc123 など）

更新するとき

💬 「変更をデプロイして」

Claude Code が commit → push を実行し、GitHub Actions が自動で再デプロイします。

補足: 複数プロトタイプの管理

基本は 1プロトタイプ = 1リポ がシンプルでおすすめです。

チームでプロトタイプの数が増えてきたら、1つのリポに複数ブランチを作って集約管理する方法もあります。ブランチごとに GitHub Pages の URL が分かれるので、main は README だけ置いておき、各プロトタイプをブランチで管理するイメージです。まずは 1 リポ = 1 プロトタイプで始めて、必要に感じたら検討してください。

参考: Docker

テンプレートには Dockerfile + nginx.conf も含まれています。 自前サーバー + Coolify や Fly.io 等でホスティングする場合はこちらを使ってください。

テンプレート更新の取り込み方

このテンプレートは継続的に改善されています。新機能やバグ修正がリリースされたとき、既存のプロジェクトに取り込む方法です。

更新の検知

GitHub の Watch 機能でリリース通知を受け取れます:

1. このリポジトリの右上にある Watch ボタンをクリック
2. Custom → Releases にチェックを入れて保存
3. 新しいリリースが公開されると GitHub からメール通知が届きます

更新の取り込み手順

# 1. テンプレートをリモートに追加（初回のみ）
cd your-prototype/
git remote add template https://github.com/Sota-Mikami/design-with-claude-code.git

# 2. 最新のテンプレートを取得
git fetch template

# 3. 差分を確認
git diff HEAD..template/main -- template/

# 4a. 特定のファイルだけ取り込む（おすすめ）
git checkout template/main -- template/src/app/password-gate.tsx
git checkout template/main -- template/next.config.ts

# 4b. または Claude Code に任せる
#   💬 「template リモートの最新変更を確認して、必要なものを取り込んで」

Tip: 大きな変更がある場合は、Release ページの変更内容を読んでから取り込むファイルを選ぶのがおすすめです。

デザイントークンのカスタマイズ

template/src/app/globals.css の CSS 変数を自社のデザインシステムに合わせて書き換えてください。

@theme {
  --color-primary: #YOUR_BRAND_COLOR;
  --color-primary-hover: #YOUR_HOVER_COLOR;
  /* ... */
}

テンプレートのサンプルは Indigo 系（#5C6AC4）を使用しています。

自分のチーム用にカスタマイズする

チームに合わせたカスタマイズも、Claude Code に頼むだけで完了します。

1. DESIGN.md — デザインの「ルールブック」

Claude Code が最初に読むファイルです。ここに書いた制約に従ってプロトタイプが生成されます。

💬 「DESIGN.md にうちのデザインシステムのルールをまとめて。
   プライマリカラーは #2563EB、角丸は8px統一、
   グラデーションとアニメーション背景は禁止で」

2. globals.css — カラー・スペーシング・フォント

💬 「プライマリカラーを #2563EB のブルー系に変更して。
   hover と press の色も合わせて調整して」
💬 「フォントを Noto Sans JP に変えて」
💬 「角丸を全体的に大きくして、やわらかい印象にして」

3. SKILL.md — ワークフローのカスタマイズ

💬 「SKILL.md の AI Constraints に『shadcn/ui のコンポーネントを優先的に使う』を追加して」
💬 「ワークフローに Step 7 として『スクショを見て UX 改善点を3つ提案する』を追加して」

4. サンプルコンテンツの差し替え

💬 「このカフェアプリの中身を、求人検索アプリに作り変えて」
💬 「サンプルデータも求人っぽいダミーデータに差し替えて」

5. ナビゲーションの構成

💬 「ナビバーから QA のリンクを外して」
💬 「ナビに『デザインガイド』っていうページを追加して」

すぐに試せる拡張

テンプレートの基本機能に加えて、Claude Code に「〜を追加して」と頼むだけで導入できます。

今後の展望

このテンプレートはまだ進化の途中です。 以下は今後実現できそうなアイデアのリストです。開発者が実装するかもしれないし、あなたが Claude Code に頼んで先に作ってしまっても OK です。

コラボレーション

• プロトタイプ上のコメント機能 — Liveblocks + Supabase で、画面の任意の場所にピン留めコメント。スレッド形式のリプライ、メールベースのアクセス制御
• Slack 連携 — デプロイ完了時に Slack チャンネルへ URL を自動投稿。フィードバックもスレッドで集約
• フィードバックフォーム埋め込み — プロトタイプ内にフォームを設置し、Notion や Google Sheets にレスポンスを自動記録

品質・自動化

• QA チェックの自動化 — Playwright でユーザーフロー（ボタンクリック → 画面遷移 → 表示確認）を自動テスト。手動 QA の前に主要パスを検証
• アクセシビリティ自動チェック — axe-core 等でプロトタイプ段階から WCAG 準拠を検証
• レスポンシブ自動キャプチャ — モバイル / タブレット / デスクトップの 3 サイズでスクショを一括撮影・比較
• デザインレビュー AI — スクリーンショットを Claude に見せて UX の改善提案を自動生成

デザインシステム連携

• Figma トークン同期 — Figma の Variables / Design Tokens を globals.css に自動反映
• Storybook 自動生成 — プロトタイプのコンポーネントから Storybook を自動生成し、開発チームに共有
• ダークモード — globals.css にダーク用トークンを追加し、prefers-color-scheme で切り替え

ワークフロー拡張

• A/B テスト — 複数パターンを個別 URL でデプロイし、実ユーザーでどちらが良いかテスト
• パスワード保護 — 実装済み。.env.local で NEXT_PUBLIC_PROTO_PASSWORD を設定するだけ
• 実データ接続 — Supabase や REST API と繋いで、ダミーではなく実際のデータでプロトタイプを動かす

アイデアや要望があれば Issue でお気軽にどうぞ。

スキルの仕組み

Claude Code の「スキル」は、特定のワークフローを Markdown で定義したものです。 ~/.claude/skills/ に配置すると、会話の中で自動的にそのワークフローに従って動きます。

トリガーワード

以下の言葉を会話で使うとスキルが自動発動します:

デザイン / プロトタイプ / モックアップ / UI設計 / ワイヤーフレーム / 実装指示書 / 仕様書 / QA / テストケース

スキルファイル

FAQ

Q: コードが書けなくても使える？

はい。Claude Code が全部書いてくれます。「ボタンを赤くして」「余白を広げて」のような自然言語の指示で十分です。出力されたコードの基本的な構造を理解しておくと、より的確な指示が出せるようになります。

Q: Figma と併用できる？

できます。Figma MCP を使えば、Figma のデザインを読み込んでコードに変換できます。

Q: デザイントークンは自社のものに差し替えられる？

はい。globals.css の CSS 変数を書き換えるだけです。

Q: チーム全体で使うには？

テンプレートをクローンして、スキルファイル（skills/）をチームで共有してください。globals.css にチームのデザイントークンを設定すれば、全員が同じ基盤で作業できます。

License

MIT