Agent skill · design visual · aiskillstore
figma-to-tailwind
Figma MCPで取得したデザイン変数をTailwind CSS標準クラスに変換する。Figma MCPのコード生成後やデザイン実装時に自動起動。
Why this skill is useful
Provides a specific mapping and conversion process from Figma design variables to Tailwind CSS classes, which the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Figma Variables → Tailwind CSS 変換スキル このスキルは、Figma MCPで取得したデザイン変数（Variables）を、Tailwind CSS標準クラスに自動変換するためのガイドです。 いつ使用するか 以下の状況で、このスキルを自動的に適用してください： 1. Figma MCPでデザインを取得した後 mcpfigma-mcpgetdesigncontextやmcpfigma-mcpgetvariabledefsを実行した直後 Figma MCPが生成したコードにvar(--spacing-)やvar(--width-)などの変数が含まれている場合 2. デザイン実装中 コンポーネントのスタイリング時 レイアウト調整時 Figma変数を使用しているコードを発見した場合 3. コードレビュー時 px-[var(--spacing-4)]のようなFigma変数の直接使用を発見した場合 インラインスタイルでstyle={{ fontSize: 'var(--h4-font-size)' }}のような記述を発見した場合 変換手順 ステップ1: マッピングファイルを確認 frontend/lib/figma-tailwind-map.tsを参照して、Figma変数がTailwind標準クラスに変換可能か確認します。 ステップ2: 変換ルールの適用 スペーシング（spacing） 変換マッピング: spacing/1 → 1 (4px) spacing/2 → 2 (8px) spacing/3 → 3 (12px) spacing/4 → 4 (16px) spacing/1-5 → 1.5 (6px) ※カスタム spacing/2-5 → 2.5 (10px) ※カスタム サイズ（width/height） ボーダー半径（border-radius） タイポグラフィ（typography） 実装済みのカスタムクラス:（tailwind.config.tsで定義済み） text-h4: 24px/32px/bold text-h5: 20px/28px/bold text-title: 18px/28px/bold text-body1: 16px/24px/normal text-body2: 14px/20px/normal text-body3: 12px/16px/normal 注意: 新規デザイン変換時は必ずFigma MCPのHEX/px値を確認し、既存クラスと比較すること。名前の類似性だけで判断しない。 ステップ3: カラーの扱い カラーはFigma MCPから届くHEX値を確認して、適切に変換します。 重要な原則: 名前の類似性だけで判断しない - 必ずHEX値を確認する Figma MCPからはHEX形式で届くので、既存のshadcn/ui変数(HSL形式)と比較 同じ色なら既存の変数を使用（例: bg-primary） 異なる色ならtailwind.config.tsにカスタム定義を追加 ステップ4: 標準にない値の対応 マッピングにない値を発見した場合： 1. tailwind.config.tsに追加 2. figma-tailwind-map.tsに追加 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/figma-to-tailwind