Claude Design の画面案を Claude Code にそのまま実装させる — ローカルコードベース連携で往復を畳む

// design/tokens.json — デザインと実装の唯一の正本
{
  "color": {
    "brand":   { "value": "#5B5BD6" },
    "fg":      { "value": "#1A1A2E" },
    "fg-muted":{ "value": "#5C5C70" },
    "bg":      { "value": "#FFFFFF" },
    "bg-subtle":{ "value": "#F5F5FA" },
    "border":  { "value": "#E2E2EC" }
  },
  "radius": { "sm": { "value": "8px" }, "md": { "value": "12px" }, "lg": { "value": "20px" } },
  "space":  { "1": { "value": "4px" }, "2": { "value": "8px" }, "3": { "value": "12px" }, "4": { "value": "16px" }, "6": { "value": "24px" } },
  "font":   { "size-body": { "value": "15px" }, "size-h2": { "value": "22px" }, "line-body": { "value": "1.8" } }
}

// scripts/build-tokens.mjs — tokens.json から CSS 変数を生成する
import { readFileSync, writeFileSync } from "node:fs";
 
const tokens = JSON.parse(readFileSync("design/tokens.json", "utf8"));
const lines = [];
 
// ネストしたトークンを再帰的に "--group-key: value;" へ平坦化する
function walk(node, prefix) {
  for (const [key, val] of Object.entries(node)) {
    if (val && typeof val === "object" && "value" in val) {
      lines.push(`  --${prefix}${key}: ${val.value};`);
    } else if (val && typeof val === "object") {
      walk(val, `${prefix}${key}-`);
    }
  }
}
walk(tokens, "");
 
const css = `:root {\n${lines.join("\n")}\n}\n`;
writeFileSync("src/styles/tokens.css", css);
console.log(`✅ ${lines.length} 個のトークンを src/styles/tokens.css に出力しました`);

/* src/styles/tokens.css — 生成物。手で編集しない */
:root {
  --color-brand: #5B5BD6;
  --color-fg: #1A1A2E;
  --color-fg-muted: #5C5C70;
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F5F5FA;
  --color-border: #E2E2EC;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --space-1: 4px;
  /* …以下略… */
}

## デザイン規約（実装時の絶対ルール）
 
- 色・余白・角丸・フォントは必ず src/styles/tokens.css の CSS 変数を使う。
  生の 16 進数・px 値をコンポーネントに書かない。
- 角丸はカード=var(--radius-md)、ボタン=var(--radius-sm)、モーダル=var(--radius-lg)。
- 本文は var(--font-size-body) / 行間 var(--font-line-body)。見出し H2 は var(--font-size-h2)。
- 新しい色や余白が必要になったら、コンポーネントに直書きせず design/tokens.json に追加し、
  build-tokens.mjs を再実行してから var() で参照する。
- フォーカスリングは省略しない（var(--color-brand) の 2px outline）。

# Claude Code への受け渡しプロンプト（例）
 
Claude Design で作成したメンバーシップ案内カードを実装してください。
 
制約:
- src/styles/tokens.css の CSS 変数のみ使用（生の色・px 禁止）。
- 既存の <Card> と <Button variant="primary"> を再利用し、新規スタイルを増やさない。
- レイアウトは既存の src/components/cards/PlanCard.tsx の構造に合わせる。
- ダークモードは [data-theme="dark"] の既存変数で自動追従させる。
- アクセシビリティ: ボタンは button 要素、価格は見出しではなく強調テキストで。
 
出力前に、新規に追加した生の色・px 値があれば列挙して報告してください。

// scripts/check-tokens.mjs — コンポーネント内の直書きを検出する
import { readFileSync } from "node:fs";
import { globSync } from "node:fs";
 
const files = globSync("src/components/**/*.{tsx,css}");
const hexRe = /#[0-9a-fA-F]{3,8}\b/;        // 生の 16 進数カラー
const pxRe  = /:\s*\d+px/;                   // 生の px 値（var() 経由でない）
 
let violations = 0;
for (const file of files) {
  const lines = readFileSync(file, "utf8").split("\n");
  lines.forEach((line, i) => {
    if (line.includes("var(--")) return;     // 変数参照はOK
    if (hexRe.test(line) || pxRe.test(line)) {
      console.log(`⚠️ ${file}:${i + 1}  ${line.trim()}`);
      violations++;
    }
  });
}
console.log(violations === 0 ? "✅ 直書きなし" : `🛑 ${violations} 件の直書きを検出`);
process.exit(violations > 0 ? 1 : 0);