コード生成上級
デザイントークンを Tailwind クラスへ一括変換
CSS 変数や Figma Tokens を Tailwind config と utility class に展開するプロンプト。
監修: 平原尚樹
株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)
監修: 酒井歩乃加
早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆
こんな課題を解決
デザインシステムのトークンが CSS 変数で定義されているが、コンポーネント側では bg-[#0AA5D4] のような直書きが残っている。トークン化を徹底したい。
プロンプト
Claude Code に入力
tokens.css と Tailwind の設定を統合し、ハードコードされた色・スペーシングをトークン参照に置き換えてください。
## 入力
- packages/ui/src/tokens.css に :root の CSS 変数定義あり
- apps/*/app/ 配下で bg-[#hex] / text-[#hex] / px-[Npx] が散在
## 手順
1. tokens.css をパースして color / spacing / radius / font の 4 カテゴリに分類
2. tailwind.config.ts の theme.extend に対応するキーを追加（例 brand, teal, navy）
3. apps/ 配下を grep で走査し、ハードコード値を bg-brand / px-4 などのトークン class に置換
4. 該当トークンが無い色は提案セクションにまとめてレビュー依頼
## ガードレール
- ピクセル数が token に無い場合は近い値に丸めず提案にとどめる
- 既存の :root --xxx 命名は変更しない
- 変換後に bun run build と Storybook の差分を確認実行結果の例
Claude Code が以下を返します。 - tailwind.config.ts diff（colors.brand など追加） - 置換件数 213 件（bg-[#0AA5D4] → bg-brand など） - 未マッチ色 5 件のレビュー依頼リスト - Storybook での目視確認手順
コツ・ポイント
- 1 PR で全部やるとレビュー不能になるので、色 → spacing の順で分割
- shadcn/ui を採用している場合は globals.css のレイヤとの衝突に注意
- ダークモード変数があるなら同時にトークン化する
- Figma Tokens プラグインと同期している場合は出力を Claude に渡す