Claude Design(Anthropic Labs)— 2026-04 リリース解説と Claude Code への引き継ぎ活用

# Project: <project-name> — Claude Design Handoff 受け入れ側

このプロジェクトは **Claude Design** が生成した handoff bundle を受け取り、
Claude Code が実コードに落とすまでをカバーする受け手側です。

## Stack

- Framework: Astro (or your frontend of choice)
- Language: TypeScript (strict)
- CSS: CSS custom properties + `src/styles/tokens.css`
- Skill: **frontend-design**(Claude Code plugin marketplace から導入済み)

## Handoff を受け取ったときの手順

1. **`docs/HANDOFF/` に bundle を展開**
   - screens.html / tokens.json / components/ 等が含まれている想定
2. **`docs/DESIGN_SYSTEM.md` と bundle の差分を確認**
   - 変わったのは token か、コンポーネントか、スクリーンレイアウトか
3. **`src/styles/tokens.css` を bundle の token に更新**
   - 既存の hand-written な値を消さない。衝突したら DESIGN_SYSTEM.md を真として採用
4. **`frontend-design` skill が効いた状態で実装**
   - Inter / Roboto / Arial を使わない
   - 紫グラデ on 白、均質な角丸カード並列、generic な AI look を避ける
   - 単純な繰り返しに堕ちる前に、フォント・余白・アクセントで個性を出す
5. **アクセシビリティ** は実装時に埋める
   - focus-visible / color contrast / prefers-reduced-motion を忘れない

## 禁止事項

- bundle 内の静的 HTML をそのままビルドに混ぜ込まない(Astro / React コンポーネント化してから)
- 「生成された見た目を 100% そのまま」にこだわらない。実装適合性 > ピクセル同一
- Claude Design 側に「実装」を聞かない(Claude Design は見た目を作る側)
- Claude Code 側に「見た目の根拠」を新規創作させない(見た目は DESIGN_SYSTEM.md を真とする)

## 依存追加ポリシー

- 新規 UI ライブラリ(shadcn / Radix / Material 等)を足す前に必ず相談
- frontend-design skill の原則に反する依存(Material などデザインが強く出るもの)は避ける

## References

- Claude Design bundle: `docs/HANDOFF/`
- デザインシステム定義: `docs/DESIGN_SYSTEM.md`
- 生成ブリーフ: `docs/DESIGN_BRIEF.md`
- frontend-design skill: plugin marketplace `anthropics/claude-code`

# claude-design-handoff-starter

**Claude Design**(Anthropic Labs、2026-04-17 リリース)の handoff bundle を受け取り、
**Claude Code + frontend-design skill** で実コードに落とすための最小テンプレート。
[記事本文](https://r43lab.com/blog/claude-design-intro) と対になるプロジェクト雛形です。

## ワークフロー

```
┌─ Claude Design ──────────────┐       ┌─ Claude Code (このリポジトリ) ─┐
│ チャット × キャンバス         │       │ frontend-design skill 装着     │
│ ・DESIGN_BRIEF を投げる       │ →     │ CLAUDE.md が handoff の受け手  │
│ ・コードベース読ませて system 化 │ bundle │ docs/DESIGN_SYSTEM.md 更新 │
│ ・handoff bundle を export    │       │ src/styles/tokens.css へ反映  │
└───────────────────────────────┘       └────────────────────────────────┘
```

## Quick start

1. このテンプレートを新規プロジェクトにコピー
2. `CLAUDE.md` の `<project name>` などを自プロジェクト用に書き換え
3. **frontend-design skill** を Claude Code に入れる
   ```bash
   # Claude Code の plugin marketplace 経由
   /plugin marketplace add anthropics/claude-code
   /plugin install frontend-design
   ```
4. `docs/DESIGN_BRIEF_TEMPLATE.md` をコピーして `docs/DESIGN_BRIEF.md` を作成、内容を埋める
5. その内容を **Claude Design** に投げる(コードベースも読み込ませる)
6. Claude Design が出した bundle を `docs/HANDOFF/` に展開
7. Claude Code を起動して「`docs/HANDOFF/` の bundle を統合して」と依頼する — CLAUDE.md の手順が効く

## ファイル構成

- `CLAUDE.md` — Claude Code が handoff を受けるときのルール (プロジェクト憲法)
- `docs/DESIGN_BRIEF_TEMPLATE.md` — Claude Design に投げるプロンプト雛形
- `docs/DESIGN_SYSTEM.md` — Claude Design の抽出結果を記録するプレースホルダ
- `docs/HANDOFF.md` — bundle 受け取り時の手順
- `src/styles/tokens.css` — デザイントークンの受け皿 (Claude Code が埋める)
- `package.json` / `tsconfig.json` — minimal Astro ベースの骨格 (好みで差し替え可)

## 守るべき原則

- **「見た目」は Claude Design、「実装」は Claude Code** — 境界を越えて両方に同じことをさせない
- **デザインシステムはソースオブトゥルース** — bundle から来た token は手で上書きせず、必要なら DESIGN_SYSTEM.md を直して再 handoff
- **frontend-design skill は受け手側に入れる** — Claude Design 側には入れない(両者が独立に判断するとコンフリクト)

## 関連リンク

- [Claude Design — Anthropic News](https://www.anthropic.com/news/claude-design-anthropic-labs)
- [Get started with Claude Design — Help Center](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)
- [frontend-design skill (anthropics/claude-code)](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design)

# Design Brief: <feature-name>

このファイルを複製して `docs/DESIGN_BRIEF.md` を作り、Claude Design に投げるプロンプトとして使います。
Claude Design 側で **コードベースも添付**すると、デザインシステム抽出が効いてトークンが揃います。

---

## 目的 (What / Why)

この画面(または資料)で解決したいこと、1-3 行。
<!-- 例: 新規ユーザー向けのランディングページを作る。既存サイトと同じトーンで、Pro プランへの CTA を主軸に。 -->

## ターゲット

- 想定ユーザー: <誰>
- 文脈: <いつ、どの画面の後で見るか>
- 主デバイス: desktop / mobile / 両対応

## 画面 / 資料リスト

- [ ] Landing (hero + features + pricing + footer)
- [ ] Pricing (3 tier + FAQ)
- [ ] Dashboard (空 state / データあり / エラーの 3 パターン)

## Brand / Design System

既存のブランド要素があれば指定。無ければ "extract from codebase" でコードベースから抽出させる。

- **抽出元**: `./src/`, `./design-system/`, 既存 Web キャプチャ `./captures/home.png`
- **Primary color**: <hex or "derive from codebase">
- **Secondary / Accent**: <…>
- **Typography**: Display / Body に希望がある場合のみ指定(なければ抽出に任せる)
- **角丸**: 0-2px / 4-8px / 12px+ のどれ寄りか
- **モノスペース利用可否**: あり / なし
- **ダーク / ライト**: 両対応 / ダーク優先 / ライト優先

## 非目的 (Out of scope)

- [ ] 多言語対応は今回外す、後続
- [ ] 管理画面 / 内部 UI は今回外す
- [ ] 動画 / shader の凝った演出は今回外す(別 brief で依頼)

## 成果物

- スクリーン 3 枚(desktop + mobile 差分含む)
- デザインシステム `tokens.json`(色 / タイポ / spacing / radius)
- Claude Code 向け **handoff bundle**(HTML + CSS + components/)

## トーン

- 目指す方向: terminal / editorial / playful / brutalist / minimalist / luxury など
- 避けたいもの: Inter + 白背景 + 紫グラデ、角丸の大きい均質カード列

## 参考

- インスピレーション: <URLs or 画像>
- 避けたい競合: <URLs>

# Design System(Claude Design 抽出の受け皿)

Claude Design が handoff bundle で持ってきたトークン・コンポーネント定義を、
**人間が読んで確認したうえで** ここに反映します。
ここが真、`src/styles/tokens.css` はこの定義を機械翻訳した結果、という順序にします。

---

## 1. Foundation

### Color

| Token | Light | Dark | 用途 |
|---|---|---|---|
| `--bg-base` | `#ffffff` | `#0c1117` | 画面背景 |
| `--bg-elevated` | `#f7f7f7` | `#141b24` | カード / panel |
| `--fg-primary` | `#1a1a1a` | `#e8ecf1` | 本文 |
| `--fg-secondary` | `#525252` | `#9aa4b2` | サブテキスト |
| `--accent-primary` | `#???` | `#???` | 主要 CTA |
| `--accent-secondary` | `#???` | `#???` | 補助 |
| `--semantic-success` | `#???` | `#???` | 成功 |
| `--semantic-warn` | `#???` | `#???` | 注意 |
| `--semantic-danger` | `#???` | `#???` | エラー |

### Typography

- **Display**: <font-family>、ウェイト 600 / 700
- **Body**: <font-family>、ウェイト 400 / 500
- **Mono** (必要なら): <font-family>
- **型スケール**: modular ratio 1.25 / 1.2 / 等比
- **行間**: body 1.75, heading 1.2

### Spacing / Radius / Shadow

- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 (px)
- Radius scale: 0 / 2 / 4 / 8 / 12 (px) — どれを既定にするか明示
- Shadow: 使わない / hairline 1px / 弱 4px / 強 16px

## 2. Component

各コンポーネントの props とバリアントを明記。
Claude Code 側で実装するときの契約になります。

### Button
- 形: primary / secondary / ghost / destructive
- サイズ: sm / md / lg
- 状態: default / hover / active / focus-visible / disabled
- アイコン: 左 / 右 / なし

### Input / Select / Textarea
- 枠: filled / outlined
- 状態: default / focus / error / disabled
- ラベル: 上 / 内包 (float label)

### Card
- padding: 1rem / 1.5rem
- 枠線: あり / なし
- 影: なし / 弱

### Modal / Dialog
- 背景: overlay の透明度
- 閉じる: ESC / 背景クリック / 明示ボタン

## 3. Pattern

- Hero: 左右 2 カラム / センタリング / 背景つき
- Pricing: 3 tier 横並び / 単列 with toggle
- Nav: sticky / relative / hamburger breakpoint
- Form: inline / stacked

## 変更履歴

| 日付 | 変更 | 契機 |
|---|---|---|
| 2026-04-24 | 初期抽出 | Claude Design handoff v1 |

# Handoff — Claude Design bundle の受け入れ手順

Claude Design がエクスポートした bundle(ZIP / HTML + CSS + components)を、
このリポジトリに取り込むときの作業順です。

## 想定ディレクトリ(受け入れ後)

```
docs/
  HANDOFF/
    v1/
      screens/
        landing.html
        pricing.html
        dashboard.html
      components/
        button.html
        card.html
        input.html
      tokens.json          # 色・タイポ・spacing 等
      assets/              # 画像・アイコン・フォント
      README.md            # Claude Design 側の自動生成メモ
```

バージョンを切って(`v1/`, `v2/`, …)過去の handoff を破壊しないように保ちます。

## 手順

### 1. bundle を受け取り展開

```bash
mkdir -p docs/HANDOFF/v1
unzip ~/Downloads/claude-design-bundle.zip -d docs/HANDOFF/v1
```

### 2. 中身をざっと目視チェック

- `README.md`: Claude Design が添えたメモ(意図と成果物の一覧)
- `tokens.json`: 真の色 / タイポ / spacing。これが `docs/DESIGN_SYSTEM.md` の根拠になる
- `screens/*.html`: 各画面の静的 HTML(components を include している)
- `components/*.html`: 単体コンポーネントの static render

### 3. Claude Code に依頼するメッセージの雛形

```markdown
`docs/HANDOFF/v1/` の bundle を統合してください。手順は以下のとおり:

1. `docs/HANDOFF/v1/tokens.json` を `docs/DESIGN_SYSTEM.md` と突き合わせる
   - 新規 token → DESIGN_SYSTEM.md に追記してから tokens.css へ反映
   - 既存 token の値変更 → DESIGN_SYSTEM.md を真として採用、tokens.css を更新
2. `docs/HANDOFF/v1/screens/` を Astro ページ(`src/pages/`)に分解
   - static HTML をそのままコピーせず、ヘッダ/フッタ等を Astro component に括る
   - インタラクション(hover / focus / disabled)を実装で補う
3. `docs/HANDOFF/v1/components/` の各コンポーネントを `src/components/` に実装
   - DESIGN_SYSTEM.md のコンポーネント契約に沿って props を決める
   - frontend-design skill の原則(generic AI look を避ける)を保つ
4. 実装終了後、`docs/DESIGN_SYSTEM.md` の「変更履歴」に 1 行追加
```

### 4. 検証

- `pnpm dev`(または npm / bun)でローカル起動
- 主要画面 3 つを 1 回ずつ手動で確認
- Lighthouse でアクセシビリティ 95+ を維持しているか(bundle 直移植で落ちやすい)
- ダーク / ライト両方が壊れていないか

### 5. 次回に備える

DESIGN_SYSTEM.md を更新したら、**次回の Design Brief を書くときに「抽出元として DESIGN_SYSTEM.md を優先」** と書いて Claude Design に渡す。
2 周目以降、ブランド抽出の精度が安定します。

{
  "name": "claude-design-handoff-starter",
  "private": true,
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^5.17.1"
  },
  "devDependencies": {
    "typescript": "^6.0.3"
  }
}

/* tokens.css — Claude Design から抽出したデザイントークンの受け皿
 *
 * このファイルの値は docs/DESIGN_SYSTEM.md を真とし、
 * Claude Design handoff bundle の tokens.json を機械翻訳した結果。
 * 手で直すなら、まず DESIGN_SYSTEM.md を更新してからこちらを再生成する。
 */

:root {
  /* ── font families ─────────────────────────────── */
  --font-display: /* DESIGN_SYSTEM.md § Typography.Display */ "system-ui", sans-serif;
  --font-body:    /* DESIGN_SYSTEM.md § Typography.Body    */ "system-ui", sans-serif;
  --font-mono:    /* 任意 */ "JetBrains Mono", ui-monospace, monospace;

  /* ── type scale (modular 1.25) ─────────────────── */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.563rem;
  --fs-3xl:  1.953rem;
  --fs-4xl:  2.441rem;

  /* ── line heights ──────────────────────────────── */
  --lh-tight:   1.2;
  --lh-body:    1.75;
  --lh-heading: 1.25;

  /* ── spacing (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) ─ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── radius ────────────────────────────────────── */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;

  /* ── motion ────────────────────────────────────── */
  --ease-out-sharp: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
}

/* ── Light (default) ──────────────────────────────── */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg-base:       /* FIXME from handoff tokens.json */ #ffffff;
  --bg-elevated:   /* FIXME */ #f7f7f7;

  --fg-primary:    /* FIXME */ #1a1a1a;
  --fg-secondary:  /* FIXME */ #525252;

  --accent-primary:    /* FIXME - ブランドの primary */ #0066ff;
  --accent-secondary:  /* FIXME */ #9aa4b2;

  --semantic-success: /* FIXME */ #2e8b57;
  --semantic-warn:    /* FIXME */ #c77700;
  --semantic-danger:  /* FIXME */ #d0342c;

  --border:        /* FIXME */ #e5e5e5;
  --border-strong: /* FIXME */ #cccccc;
}

/* ── Dark ─────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:       /* FIXME */ #0c1117;
  --bg-elevated:   /* FIXME */ #141b24;

  --fg-primary:    /* FIXME */ #e8ecf1;
  --fg-secondary:  /* FIXME */ #9aa4b2;

  --accent-primary:    /* FIXME */ #79b4d4;
  --accent-secondary:  /* FIXME */ #80b58a;

  --semantic-success: /* FIXME */ #80b58a;
  --semantic-warn:    /* FIXME */ #e5c07b;
  --semantic-danger:  /* FIXME */ #d47b8f;

  --border:        /* FIXME */ #2a3342;
  --border-strong: /* FIXME */ #3d4756;
}

/* 共通ベース */
html {
  font-family: var(--font-body);
  line-height: var(--lh-body);
  background: var(--bg-base);
  color: var(--fg-primary);
}

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}