shield_lock
JinDaGe
← Back to skills
extension
Category: Development & EngineeringNo API key required

ui-to-figma

Analyze the CSS, Tailwind settings, and components of an existing project to grasp design tokens, then visually improve the UI and send it to Figma via the Figma MCP server. This workflow skill is characterized not just by UI improvements but by enhancements that are 'consistent with the project's design system.' It proposes new colors or spacing without hardcoding them, staying within the scope of existing tokens and naming conventions. Use cases include: - 'Look at the UI and send it to Figma,' 'Improve the design of this page and reflect it in Figma' - 'Analyze the UI and create a design proposal in Figma' - When there's a need for UI improvement in a web application and design integration with Figma - When users say things like 'ui-to-figma,' 'send the UI to Figma,' 'improve the design and send it to Figma' Prerequisites: Availability of Playwright (webapp-testing skill) and the Figma MCP server.

personAuthor: jakexiaohubgithub
open_in_newRepositorydownloadDownload package

UI to Figma ワークフロー

既存プロジェクトのデザイン言語を読み取った上でUI改善をFigmaに連携する、4ステップのワークフロー。

このスキルの核心: 外側から見た見た目の改善ではなく、tailwind.config.js やCSS変数・既存コンポーネントを先に解析し、プロジェクトのカラーパレット・スペーシングスケール・命名規則に整合した改善を行う。

  1. Setup — design-tokens.md があれば読む。なければソースを解析して生成する
  2. Capture — PlaywrightでUIをキャプチャ
  3. Improve — 視覚＋デザイントークン両方に基づいた整合性のある改善をコードに反映
  4. Export — Figma MCPサーバーでFigmaにデザインを送る

Step 1: Setup — デザイントークンの取得

最初に design-tokens.md がプロジェクトルートに存在するか確認する。

design-tokens.md が存在する場合

そのファイルを読むだけでよい。Step 2へ進む。

design-tokens.md が存在しない場合（初回のみ）

ソースを解析して design-tokens.md を自動生成する。

1. スタイル定義ファイルを探して読む

Glob で以下を探す（存在するものを全て読む）:
- tailwind.config.{js,ts,cjs}
- src/styles/*.css, app/styles/*.css, styles/*.css
- src/tokens.{ts,js}, src/theme.{ts,js}, src/design-tokens.{ts,js}
- **/*.css (CSS変数 --xxx: が定義されているもの)

2. コンポーネントのスタイリング手法を把握する

Glob で src/components/**/*.{tsx,jsx,vue,svelte} を数ファイルサンプリングして読む
→ Tailwind / CSS Modules / styled-components / inline styles のどれを使っているか判定

3. 読んだ内容から design-tokens.md を生成してプロジェクトルートに保存する

生成するファイルのフォーマット:

# Design Tokens — {プロジェクト名}
最終更新: {日付}

## カラーパレット
| トークン名 | 値 | 用途 |
|-----------|-----|------|
| primary   | #4F46E5 | ブランドカラー |
| gray-600  | #4B5563 | テキスト |
...

## スペーシングスケール
Tailwindデフォルト / カスタム: 4px基準 ...

## タイポグラフィ
| 用途 | クラス or 変数 | サイズ |
|------|--------------|-------|
| 見出しH1 | text-3xl font-bold | 30px |
...

## スタイリング方針
- 手法: {Tailwind / CSS Modules / styled-components}
- カラーは必ず上記トークン名を使う
- px直書き禁止 / Tailwindスケールを使う
- 既存コンポーネント: {Button, Card, Input ...}

注意: design-tokens.md はプロジェクトに継続的に使うファイル。 プロジェクトのデザインが変わったら「design-tokens.mdを再生成して」と指示する。

Step 2: UIのキャプチャ

Playwrightでスクリーンショットを取得し、視覚的な問題を把握する。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1440, "height": 900})
    page.goto("http://localhost:PORT")
    page.wait_for_load_state("networkidle")
    page.screenshot(path="/tmp/ui_before.png", full_page=True)
    browser.close()

スクリーンショットで以下を視覚的に評価する:

  • 視覚的階層: 情報の優先度が明確か
  • 余白・間隔: 一貫したスペーシングか
  • カラーパレット: 統一感・コントラスト比（WCAG AA: 4.5:1 以上）
  • タイポグラフィ: フォントサイズ・ウェイトの整合性
  • レスポンシブ: モバイル・タブレット対応状況

Step 3: UI改善の実装

Step1のデザイントークンとStep2の視覚分析を両方踏まえて改善する。 design-tokens.md に定義されたトークン名・クラス・変数のみ使う。新しい値をハードコードしない。

改善の優先順位

  1. アクセシビリティ違反（クリティカル）
  2. 視認性・一貫性の問題（高）
  3. スペーシング・タイポグラフィ最適化（中）
  4. 微細なビジュアル調整（低）

実装前の整合性チェック

  • 色を追加する → design-tokens.md のカラーパレットにある名前を使っているか？
  • 間隔を変える → design-tokens.md のスペーシングスケールに沿っているか？
  • 新コンポーネントを作る → design-tokens.md の既存コンポーネント一覧と命名が合っているか？

改善後に再スクリーンショットを取得して差分を確認する:

page.screenshot(path="/tmp/ui_after.png", full_page=True)

Step 4: Figmaへのエクスポート

Figma MCPサーバー（implement-designスキル）を使ってデザインを送る。

  1. design-tokens.md のカラー・フォント・スペーシングをFigmaスタイルとして登録
  2. 改善後UIのレイアウトをFigmaフレームとして作成
  3. コンポーネントとスタイルを適用して反映

Figma MCP APIの詳細は references/figma-mcp.md を参照。

design-tokens.md の再生成

プロジェクトのデザインが変わったとき:

「design-tokens.mdを再生成して」
→ Step 1の初回フローを再実行してファイルを上書き

トラブルシューティング

| 問題 | 対処 | |------|------| | Playwrightが動かない | pip install playwright && playwright install chromium | | Figma MCPが見つからない | references/figma-mcp.md のセットアップを確認 | | スクリーンショットが空白 | page.wait_for_load_state("networkidle") を追加 | | design-tokens.mdの内容が古い | 「design-tokens.mdを再生成して」と指示する |