デザイントークンをClaude Designから抽出してコードに落とし込む話

Claude Designで「いい感じのUI」を作った後、いざコード実装しようとすると「あれ、このカラーコードって何番だっけ？」という状況になったことが何度もある。デザインとコードが乖離していくやつだ。

これを解決したのが、デザイントークンを明示的に抽出するプロンプトを挟む習慣だった。試行錯誤した記録を書いておく。

デザイントークンとは何か（今さら確認）

デザイントークンとは、color-primary: #3B82F6 とか spacing-md: 16px のように「デザインの決定事項を変数として名前付きで管理するもの」だ。Tailwindの設定ファイルやvariables.cssに落とし込むアレ。

これをClaude Designのデザイン生成フローに組み込めると、「生成→トークン抽出→コード実装」の流れがスムーズになる。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

最初にやった失敗

最初は「デザイントークンを出してください」と一言添えていた。出てくるのはこういうやつ：

primary: #3B82F6
secondary: #10B981
background: #FFFFFF

悪くはないが、使い物にならなかった。理由は2つ。

1. セマンティックな名前じゃない。secondaryってどこに使うやつ？ button-hoverなのかbadge-textなのか分からない。

2. 余白・フォントサイズが入ってこない。色しか出てこなくて、スペーシングのシステムが空白になる。

効いたプロンプトパターン

今は以下の形式でトークン出力を指定している：

上記デザインで使用したデザイントークンを以下のJSON形式で出力してください：

{
  "colors": {
    "brand": { "primary": "...", "secondary": "..." },
    "ui": { "background": "...", "surface": "...", "border": "..." },
    "text": { "primary": "...", "secondary": "...", "disabled": "..." },
    "feedback": { "success": "...", "warning": "...", "error": "..." }
  },
  "spacing": { "xs": "...", "sm": "...", "md": "...", "lg": "...", "xl": "..." },
  "typography": {
    "size": { "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "..." },
    "weight": { "normal": "...", "medium": "...", "bold": "..." }
  },
  "radius": { "sm": "...", "md": "...", "lg": "...", "full": "..." }
}

構造を先に示すことで、Claude Designが「このデザインから抽出すべき値はこれだ」と正しく解釈してくれるようになった。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

Tailwindに組み込む流れ

抽出したJSONをそのままtailwind.config.jsのtheme.extendに入れるだけ：

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: '#3B82F6',
          secondary: '#10B981',
        },
        ui: {
          background: '#F9FAFB',
          surface: '#FFFFFF',
          border: '#E5E7EB',
        },
        // ...
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '16px',
      },
    },
  },
}

これでtext-brand-primaryとかbg-ui-surfaceという意味のあるクラス名が使えるようになる。

まだ解決していない問題

正直に言うと、ダークモード対応のトークンが自動では出てこない。color-scheme: darkで反転する前提のトークン設計を求めると、Claude Designが「ライトモード版のみ」しか生成しないことが多い。

今のところの回避策は、デザイン生成を2回やること：「ライトモード版を作る→そのまま「ダークモード版に変換して同じトークン構造で出力してください」と続けて頼む」という2段階フロー。面倒だが今のところ一番安定している。

やってみる価値はある

デザイントークン抽出をフローに入れてから、実装者（自分含む）が「このカラーどこから来た？」と迷う時間が激減した。デザインを更新したときも、トークンだけ差し替えれば全体に反映される。

Claude Designでデザインを作って即コード、という流れを本気でやるなら、このステップを省略しない方がいい。