Figma to HTML Conversion Skill

converting-figma-to-html

Provides expertise in converting Figma designs to HTML/CSS using Figma MCP tools, with data attributes for content tracking and comprehensive analysis. Use when converting Figma designs to web code.

majiayu000/claude-skill-registry·0installs663starsDesign

SKILL.md

Full skill instructions

Figma to HTML Conversion Skill

Figma MCPツールを使用してFigmaデザインからHTML/CSSを生成し、コンテンツ分析を行うための専門知識を提供するスキルです。

概要

このスキルは以下のタスクをサポートします：

Figmaデータ取得: Figma MCPツールを使用してデザイン情報を取得
HTML/CSS生成: Tailwind CSSベースのレスポンシブHTMLを生成
data属性埋め込み: トレーサビリティとコンテンツ管理のための属性を付与
コンテンツ分析: 静的/動的コンテンツの分類（識別のみ）
プレビュー生成: デバイスフレーム付きプレビューHTML（オプション）

禁止事項

以下は絶対に行わないこと：

API仕様の提案（エンドポイント、リクエスト/レスポンス形式）
データモデル設計の提案（エンティティ、スキーマ、型定義）
バックエンド実装に関する提案

コンテンツ分析では「このUIに動的データが必要」という事実の識別のみを行います。

クイックスタート

基本的な使い方

以下のFigma URLからHTML/CSSを生成してください：
https://figma.com/design/XXXXX/Project?node-id=1234-5678

エージェントは自動的に：

Figmaデータを取得（screenshot, design_context, metadata）
data属性付きHTMLを生成
コンテンツ分析ドキュメントを作成
プレビューHTML（オプション）を生成

生成されるファイル

単一画面の場合:

.outputs/{screen-name}/
├── index.html              # メインHTML（data属性付き）
├── index-{state}.html      # 状態バリエーション（該当する場合）
├── spec.md                 # 画面仕様書
├── mapping-overlay.js      # マッピング可視化
└── preview.html            # プレビュー（オプション）

複数画面の場合（画面ごとにディレクトリ分離）:

.outputs/
├── {screen-a}/
│   ├── index.html
│   ├── index-empty.html    # 同一画面の状態バリエーション
│   ├── spec.md
│   └── mapping-overlay.js
├── {screen-b}/
│   ├── index.html
│   ├── spec.md
│   └── mapping-overlay.js
└── ...

{screen-name} はFigmaの画面名から生成した短い識別名（例: homework-modal）

注意:

spec.md 内の static/dynamic 分類は仮決定です。実装時にレビューしてください。

複数フレームは「同一画面の状態バリエーション」か「別画面」かを判定し、適切な構造で出力します。

詳細ガイド

詳細な情報は以下のファイルを参照してください：

ワークフロー

workflow.md: Figma MCPツールの実行順序と各ステップの詳細

Step 1: Figmaデータ取得（screenshot, design_context, metadata）
Step 2: HTML生成ルール（Tailwind CSS、data属性、レイアウト）
Step 3: spec.md 更新（構造・スタイル、コンテンツ分析セクション）
Step 4: 品質チェック（ビジュアル確認、属性確認）

変換ガイドライン

conversion-guidelines.md: 変換時の判断基準と処理ルール

アイコン・画像アセットの処理
レイアウト・配置の処理（Flexbox/Grid優先）
デザイントークンの処理
OSネイティブUI要素の除外
コンテンツ分類体系

クイックリファレンス

quick-reference.md: よく使うパターンと命名規則

必須data属性一覧
data-figma-content-XXX 命名例
HTML構造パターン
Tailwindクラス早見表

テンプレート

assets/: 各種テンプレートファイル

html-output.html: HTMLテンプレート（変数付き）
preview.html: プレビュー用ラッパー
../../templates/screen-spec.md: 画面仕様書テンプレート

主要な機能

1. data属性による追跡

画面レベル属性（ルート要素）

ルート要素（<body>または主要コンテナ）には画面識別用の属性を付与：

属性	用途	例
`data-figma-node`	FigmaルートノードID	`"2350:6396"`
`data-figma-filekey`	FigmaファイルキーID	`"fLUFVpvmfpCJBrgzYHi5PB"`
`data-figma-name`	Figmaでの画面名	`"チュートリアル"`
`data-figma-url`	Figmaへのリンク	`"https://www.figma.com/design/..."`
`data-screen-id`	画面識別ID（ハイフン区切り）	`"tutorial"`
`data-screen-name`	画面表示名	`"チュートリアル"`

要素レベル属性

全ての主要要素に以下の属性を付与：

属性	用途	例
`data-figma-node`	FigmaノードID	`"5070:65342"`
`data-figma-name`	Figmaでのレイヤー名	`"Button/Primary"`
`data-figma-tokens`	デザイントークン（まとめて）	`"background: darkblue"`
`data-figma-token-*`	デザイントークン（個別、推奨）	下記参照
`data-figma-icon-svg`	アイコンノードID（getImages用）	`"3428:18627"`
`data-figma-interaction`	インタラクション定義	`"tap:navigate:/course/1"`
`data-figma-states`	サポートするUI状態	`"default,hover,active,disabled"`
`data-figma-navigate`	画面遷移先	`"/course/detail"`
`data-state`	現在のUI状態	`"default"`, `"disabled"`, `"loading"`, `"selected"`

デザイントークン属性 (data-figma-token-*)

Figmaのデザイントークンをプロパティ別に個別の属性で保持する推奨形式：

属性	用途	値の例
`data-figma-token-bg`	背景色トークン	`"Background/Main/Default"`
`data-figma-token-color`	テキスト色/アイコン色トークン	`"Text/Default/Default"`, `"Icon/Main/Default"`
`data-figma-token-font`	フォントトークン	`"JP/16 - Bold"`
`data-figma-token-radius`	角丸トークン	`"Radius/200"`
`data-figma-token-padding`	パディングトークン	`"Space/200"`
`data-figma-token-gap`	ギャップトークン	`"Space/150"`
`data-figma-token-height`	高さトークン	`"56px"`
`data-figma-token-border`	ボーダートークン	`"Border/Main/Default"`
`data-figma-token-size`	サイズトークン（アイコン等）	`"24px"`, `"32px"`

例（画面ルート）:

<body data-figma-node="2350:6396"
      data-figma-filekey="fLUFVpvmfpCJBrgzYHi5PB"
      data-figma-name="チュートリアル"
      data-figma-url="https://www.figma.com/design/fLUFVpvmfpCJBrgzYHi5PB?node-id=2350:6396"
      data-screen-id="tutorial"
      data-screen-name="チュートリアル"
      class="...">

例（ボタン要素）:

<button data-figma-node="2350:6410"
        data-figma-token-bg="Background/Main/Default"
        data-figma-token-color="Text/Default/On"
        data-figma-token-font="JP/18 - Bold"
        data-figma-token-radius="Radius/Full"
        data-figma-token-height="56px"
        data-figma-states="default,hover,active,disabled"
        data-figma-interaction="tap:navigate:next-step"
        data-state="default"
        class="w-full h-14 bg-bg-main-default text-text-default-on font-bold rounded-full">
  次へ
</button>

例（アイコン要素）:

<span data-figma-node="2350:6420"
      data-figma-token-color="Icon/Main/Default"
      data-figma-token-size="24px"
      data-figma-icon-svg="3428:18627"
      class="w-6 h-6 text-icon-main-default">
  <svg viewBox="0 0 24 24"><!-- placeholder --></svg>
</span>

2. コンテンツ分類

HTMLの各コンテンツを以下のカテゴリで整理：

分類	説明	例
`static`	固定ラベル・UI文言	ボタン名、ナビゲーション
`dynamic`	ユーザー/時間で変化	数値、日付、ユーザー名
`dynamic_list`	件数可変リスト	講座一覧、通知一覧
`config`	画面設定で変わる要素	ページネーション状態
`asset`	静的アセット	SVGアイコン、ロゴ
`user_asset`	ユーザーアップロード画像	プロフィール画像

3. コンテンツ分類属性の埋め込み

分類結果をHTML要素に data 属性として埋め込み、後続のAPI連携フェーズで活用：

属性	用途	例
`data-figma-content-id`	一意識別子（snake_case）	`"badge_text"`
`data-figma-content-type`	コンテンツ種別	`"text"`, `"icon"`, `"ui_state"`
`data-figma-content-classification`	分類	`"static"`, `"dynamic"`, `"asset"`
`data-figma-content-data-type`	データ型	`"string"`, `"number"`, `"svg"`
`data-figma-content-value`	Figmaでの表示値	`"テスト運用版"`
`data-figma-content-notes`	補足説明	`"最終ステップでは「はじめる」"`

埋め込み例:

<span data-figma-node="2350:6414"
      data-figma-content-id="badge_text"
      data-figma-content-type="text"
      data-figma-content-value="テスト運用版"
      data-figma-content-classification="static"
      data-figma-content-data-type="string">テスト運用版</span>

4. レスポンシブ対応

Tailwind CSS（CDN経由）を使用
モバイルファースト（max-w-[375px]等）
Flexbox/Gridで相対的レイアウト
absolute/fixed は最小限に

Tailwind CDN + Inline Config パターン

standalone HTML 生成時は、Figma トークンを Tailwind config に埋め込む：

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          // Figma Semantic Tokens
          'text-default': {
            'default': '#24243f',
            'secondary': '#67717a',
            'on': '#ffffff',
          },
          'bg-main': {
            'default': '#0070e0',
            'secondary': '#cfe5fc',
          },
        },
        spacing: {
          'space-050': '4px',
          'space-100': '8px',
          'space-200': '16px',
        },
        borderRadius: {
          'radius-100': '8px',
          'radius-200': '16px',
          'radius-full': '9999px',
        },
        fontFamily: {
          'hiragino': ['"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Meiryo"', 'sans-serif'],
        },
      }
    }
  }
</script>

トークン取得: mcp__figma__get_variable_defs を使用してFigmaから取得

5. アイコン処理

複雑なSVGパスは再現せず、シンプルなプレースホルダーに置換：

<div class="w-6 h-6"
     data-figma-icon-svg="3428:18627"
     data-figma-content-settings-icon>
  <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none">
    <rect x="4" y="4" width="16" height="16" rx="2"
          stroke="currentColor" stroke-width="2"/>
  </svg>
</div>

6. OSネイティブUI除外

以下の要素は自動的に除外：

ステータスバー（時刻、電波、バッテリー）
Dynamic Island
Home Indicator

7. インタラクション属性

インタラクティブな要素には動作を定義する属性を付与：

<article class="course-card"
         data-figma-states="default,hover,active"
         data-figma-interaction="tap:navigate:/course/1"
         data-figma-navigate="/course/1"
         tabindex="0" role="button">
  <h3>講座タイトル</h3>
</article>

インタラクション形式: {trigger}:{action}:{target}

trigger: tap, hover, focus, longpress
action: navigate, show-modal, close-modal, submit, open-dropdown, select, toggle
target: 遷移先パス、モーダルID、ドロップダウンID等

状態値 (data-state): default, hover, active, disabled, loading, selected, expanded

8. 画面遷移属性の埋め込み

spec.md の「インタラクション」「画面フロー」セクションを参照して、HTMLに画面遷移属性を付与：

属性	用途	例
`data-figma-interaction`	インタラクション定義	`"tap:navigate:tutorial"`
`data-figma-navigate`	遷移先パス	`"/{locale}/ask_ai/tutorial"`
`data-figma-states`	サポートするUI状態	`"default,hover,active,disabled"`

遷移パターン例:

<!-- 単純な画面遷移 -->
<button data-figma-interaction="tap:navigate:tutorial"
        data-figma-navigate="/{locale}/ask_ai/tutorial">
  ヘルプ
</button>

<!-- 条件付き遷移（同意状態等） -->
<button data-figma-interaction="tap:conditional-navigate"
        data-figma-navigate="consented:/{locale}/ask_ai|unconsented:consent-modal"
        data-figma-states="default,hover,active">
  スキップ
</button>

<!-- 内部ステップ遷移 -->
<button data-figma-interaction="tap:navigate:next-step"
        data-figma-navigate="tutorial-step-{n+1}"
        data-figma-states="default,hover,active">
  次へ
</button>

<!-- 複合アクション -->
<button data-figma-interaction="tap:open-file-dialog|navigate:trim"
        data-figma-navigate="/{locale}/ask_ai/trim"
        data-figma-states="default,hover,active,loading">
  写真を共有
</button>

遷移先の記述形式:

単純遷移: /{locale}/path/to/screen
条件付き: condition1:path1|condition2:path2
内部遷移: screen-step-{n+1}, previous-screen

9. mapping-overlay.js

コンテンツマッピングとインタラクション可視化のためのオーバーレイスクリプト：

<!-- HTMLの末尾に自動追加 -->
<script src="mapping-overlay.js"></script>
</body>
</html>

機能:

マウスオーバーでコンテンツタイプ（static/dynamic）を表示
画面遷移先・モーダル表示対象を表示
リアルタイムでUI状態（hover/active/focus/selected）を検出・表示
凡例クリックでタイプ別フィルタリング（親子関係を考慮）

ワークフロー（概要）

1. figma:get_screenshot
   └─> デザインのビジュアル参照を取得

2. figma:get_design_context (clientLanguages: "html,css")
   └─> ★最重要：構造・スタイル情報を取得

3. figma:get_metadata（必要に応じて）
   └─> 階層構造の詳細確認

4. HTML生成
   ├─> Tailwind CSSでマークアップ
   ├─> data属性を全要素に付与
   └─> プレースホルダーアイコンを配置

5. コンテンツ分析
   └─> static/dynamic分類を整理

6. コンテンツ分類属性の埋め込み ★新規
   ├─> data-figma-content-id（snake_case識別子）
   ├─> data-figma-content-type（text/icon/ui_state等）
   ├─> data-figma-content-classification（static/dynamic/asset等）
   └─> data-figma-content-data-type（string/number/svg等）

7. 画面遷移属性の埋め込み ★新規
   ├─> spec.md のインタラクション/画面フローを参照
   ├─> data-figma-interaction（トリガー:アクション:ターゲット）
   ├─> data-figma-navigate（遷移先パス）
   └─> data-figma-states（対応UI状態）

8. spec.md 更新
   ├─> 「構造・スタイル」セクション
   ├─> 「コンテンツ分析」セクション
   └─> 完了チェックリストを更新

9. プレビュー生成（オプション）
   └─> デバイスフレーム付きプレビュー

詳細は workflow.md を参照してください。

完了チェックリスト

生成後、以下を確認：

- [ ] Figmaスクリーンショットと見た目が一致
- [ ] 全ての主要要素にdata-figma-node属性がある
- [ ] コンテンツ要素にdata-figma-content-XXX属性がある
- [ ] アイコンにdata-figma-icon-svg属性がある
- [ ] インタラクティブ要素にdata-figma-interaction属性がある
- [ ] 状態変化する要素にdata-figma-states属性がある
- [ ] ステータスバー等のOSネイティブUIが除外されている
- [ ] 画面遷移属性が埋め込まれている（Step 7）
  - data-figma-interaction（トリガー:アクション:ターゲット）
  - data-figma-navigate（遷移先パス）
  - data-figma-states（対応UI状態）
- [ ] コンテンツ分類属性が埋め込まれている（Step 6）
  - data-figma-content-id（snake_case）
  - data-figma-content-type
  - data-figma-content-classification
  - data-figma-content-data-type
- [ ] spec.md の「構造・スタイル」セクションが更新されている
- [ ] spec.md の「コンテンツ分析」セクションが更新されている
- [ ] spec.md の「インタラクション」セクションが更新されている
- [ ] プレビューHTMLが正しく表示される（オプション）

使い方

このスキルは、Figmaデザインを変換するエージェントから参照されます。

スキルの利用

エージェントは以下のステップでこのスキルを活用します：

ワークフローの参照: workflow.md の手順に従う
ガイドラインの適用: conversion-guidelines.md の変換ルールを適用
テンプレートの使用: assets/ のテンプレートを利用してファイル生成
リファレンスの確認: quick-reference.md で命名規則やパターンを確認

必要なツール

Figma MCP: Figmaデザインデータの取得に必須
Read: テンプレートやガイドラインの読み込み
Write: HTML/分析ドキュメントの生成
Glob: 既存ファイルのパターン検索

注意事項

Figma MCP ツール

このエージェントは Figma MCP を使用します。以下を確認してください：

Figma MCP サーバーが起動している
Figma URLが有効である
必要な権限がある

アセットURL

FigmaアセットURLは 7日間で期限切れ になります
本番実装前にアセットをダウンロードまたは再取得が必要です

ブラウザ確認

生成されたHTMLは以下で確認してください：

# プレビューHTMLを開く
open {component_name}_preview.html

# またはメインHTMLを直接開く
open {component_name}.html

参照

workflow.md: 詳細なワークフロー手順
conversion-guidelines.md: 変換ルールの詳細
quick-reference.md: クイックリファレンス
assets/: 各種テンプレート

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/majiayu000/claude-skill-registry --skill converting-figma-to-html

View on GitHub

skills/data/converting-figma-to-html/SKILL.md

More Design skills

View all

Design

brandkit

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

92.7K 345.8K

View

Design

image-to-code

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

92.7K 341.7K

View

Design

imagegen-frontend-web

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K

View

Design

imagegen-frontend-mobile

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K

View

Design

Emil Design Engineering

Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.

43.5K 323.4K

View

Design

impeccable

Frontend design and iteration for production-grade interfaces, from concept to ship.

76.8K 313.3K

View

Design

extract-design-system

Reverse-engineer design tokens from public websites into starter token files for your project.

232 129.9K

View

Design

Animate

Builds an animation from scratch by making the decisions in the order that determines whether it feels right.

43.5K 117.9K

View

Design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

179.7K 114.2K

View

Design

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K

View

Design

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K

View