AI Skills.

AI Skills › Design设计設計デザイン › figma-to-react

figma-to-react

by gbasin · Design skill作者：gbasin · 设计技能作者：gbasin · 設計技能作者：gbasin · デザインスキル

A Claude Code plugin that converts Figma designs into pixel-perfect TypeScript React components with Tailwind CSS. It uses Figma MCP output verbatim to preserve exact layout and styling, downloads and deduplicates assets by content hash, extracts CSS variables as tokens, and validates the result with automated screenshot comparison and iterative fixes. It requires the Figma MCP server and a React + Tailwind project.一款 Claude Code 插件，把 Figma 设计转换成像素级精确的 TypeScript React 组件（Tailwind CSS）。它逐字使用 Figma MCP 的输出以保留精确的布局和样式，按内容哈希下载并去重素材，自动提取 CSS 变量作为设计 token，并通过自动截图对比加反复修正来验证结果。需要 Figma MCP 服务器和一个 React + Tailwind 项目。一款 Claude Code 外掛，把 Figma 設計轉換成像素級精確的 TypeScript React 元件（Tailwind CSS）。它逐字使用 Figma MCP 的輸出以保留精確的版面和樣式，按內容雜湊下載並去重素材，自動擷取 CSS 變數作為設計 token，並透過自動截圖比對加反覆修正來驗證結果。需要 Figma MCP 伺服器和一個 React + Tailwind 專案。Figma デザインをピクセルパーフェクトな TypeScript React コンポーネント（Tailwind CSS）に変換する Claude Code プラグイン。Figma MCP の出力をそのまま使い、レイアウトとスタイルを正確に保ち、アセットをコンテンツハッシュでダウンロード・重複除去し、CSS 変数をトークンとして抽出する。自動スクリーンショット比較と反復修正で結果を検証する。Figma MCP サーバーと React + Tailwind プロジェクトが必要。

Quick start快速上手快速上手クイックスタート

What it does

figma-to-react is a Claude Code plugin that converts Figma designs into pixel-perfect TypeScript React components with Tailwind CSS. It is built for linear Figma screen flows, with exact assets, iOS-native animations, and automated visual verification in its broader description.

How it works

It uses Figma MCP output verbatim to preserve exact layout and styling, extracts CSS variables as tokens, downloads assets and deduplicates them by content hash, and renames them to semantic names. Generation runs per screen in parallel through sub-agents, then a screenshot comparison loop applies targeted fixes until the diff is small enough or the pass limit is reached.

How to use it

  • Add the marketplace with 
    /plugin marketplace add gbasin/figma-to-react
    install with 
    /plugin install figma-to-react
    and restart Claude Code to activate hooks.
  • Then prompt with a Figma flow link, for example asking it to convert a given Figma flow to React, or invoke the skill directly with 
    /figma-to-react
  • Confirm the detected config when presented, and supply any missing dimensions when prompted during dimension coverage validation.

Key points

  • Prerequisites are an authenticated Figma MCP server, a React plus Tailwind CSS project using Vite, Next.js, or CRA, and tools the skill auto-installs: Bun, ImageMagick, oxlint, and Playwright.
  • Visual validation passes when the screenshot diff is 5 percent or less, with a maximum of 10 passes; if there is no improvement, it reverts and tries a different approach.
  • Output lands in flow folders with screen components and a demo page, plus flow assets and a tokens CSS file.

它是做什么的

figma-to-react 是一款 Claude Code 插件，能把 Figma 设计转换为像素级精确的 TypeScript React 组件并使用 Tailwind CSS。它面向线性的 Figma 页面流程，附带精确素材、iOS 原生动效和自动化视觉验证。

它怎么工作

它逐字使用 Figma MCP 的输出以保留精确布局和样式，把 CSS 变量提取为设计令牌，下载素材并按内容哈希去重，再重命名为语义化名称。生成按页面并行地通过子智能体进行，随后截图比对循环会做针对性修复，直到差异足够小或达到轮次上限。

怎么用

  • 添加市场：
    /plugin marketplace add gbasin/figma-to-react
    安装：
    /plugin install figma-to-react
    重启 Claude Code 以激活钩子。
  • 然后用 Figma 流程链接发起提示，例如请它把指定 Figma 流程转换为 React，或直接用 
    /figma-to-react
    调用技能。
  • 出现检测到的配置时请确认，并在维度覆盖验证提示缺失尺寸时补充。

关键要点

  • 前提条件包括已认证的 Figma MCP 服务器、使用 Vite、Next.js 或 CRA 的 React 加 Tailwind CSS 项目，以及技能自动安装的工具：Bun、ImageMagick、oxlint 和 Playwright。
  • 视觉验证在截图差异为 5% 或更低时通过，最多 10 轮；若无改进，则回滚并尝试其他方法。
  • 输出位于流程文件夹中，包含页面组件和演示页，以及流程素材和令牌 CSS 文件。

它是做什麼的

figma-to-react 是一款 Claude Code 外掛，能把 Figma 設計轉換為像素級精確的 TypeScript React 元件並使用 Tailwind CSS。它面向線性的 Figma 頁面流程，附帶精確素材、iOS 原生動效與自動化視覺驗證。

它怎麼運作

它逐字使用 Figma MCP 的輸出以保留精確版面與樣式，把 CSS 變數擷取為設計代幣，下載素材並按內容雜湊去重，再重新命名為語義化名稱。產生按頁面平行地透過子智慧體進行，隨後截圖比對循環會做針對性修復，直到差異足夠小或達到輪次上限。

怎麼用

  • 加入市集：
    /plugin marketplace add gbasin/figma-to-react
    安裝：
    /plugin install figma-to-react
    重新啟動 Claude Code 以啟用鉤子。
  • 然後用 Figma 流程連結發起提示，例如請它把指定 Figma 流程轉換為 React，或直接用 
    /figma-to-react
    呼叫技能。
  • 出現偵測到的設定時請確認，並在維度覆蓋驗證提示缺少尺寸時補充。

關鍵要點

  • 前提條件包括已認證的 Figma MCP 伺服器、使用 Vite、Next.js 或 CRA 的 React 加 Tailwind CSS 專案，以及技能自動安裝的工具：Bun、ImageMagick、oxlint 與 Playwright。
  • 視覺驗證在截圖差異為 5% 或更低時通過，最多 10 輪；若無改進，則回復並嘗試其他方法。
  • 輸出位於流程資料夾中，包含頁面元件與展示頁，以及流程素材與代幣 CSS 檔案。

何をするのか

figma-to-react は、Figma デザインをピクセル単位で正確な TypeScript React コンポーネントへ Tailwind CSS とともに変換する Claude Code プラグインだ。直線的な Figma 画面フロー向けで、正確なアセット、iOS ネイティブのアニメーション、自動の視覚検証を掲げる。

仕組み

Figma MCP の出力をそのまま使い、正確なレイアウトとスタイルを保つ。CSS 変数をトークンとして抽出し、アセットをダウンロードしてコンテンツハッシュで重複除去し、意味のある名前へ改名する。生成は画面ごとにサブエージェントで並列に行い、その後スクリーンショット比較ループが対象を絞った修正を加え、差分が十分小さいかパス上限に達するまで続ける。

使い方

  • /plugin marketplace add gbasin/figma-to-react
    でマーケットプレイスを追加し、
    /plugin install figma-to-react
    でインストールして、フック有効化のため Claude Code を再起動する。
  • その後、Figma フローのリンクで依頼する。例は指定フローを React へ変換することだ。または 
    /figma-to-react
    でスキルを直接呼ぶ。
  • 提示された検出設定を確認し、寸法カバレッジ検証で不足分を聞かれたら補う。

押さえておきたい点

  • 前提は、認証済みの Figma MCP サーバー、Vite、Next.js、または CRA を使う React と Tailwind CSS のプロジェクト、そしてスキルが自動で入れる Bun、ImageMagick、oxlint、Playwright だ。
  • 視覚検証はスクリーンショット差分が 5% 以下のときに通り、最大 10 パスだ。改善が無ければ元に戻して別の方法を試す。
  • 出力はフローフォルダに入る。画面コンポーネントとデモページに加え、フローアセットとトークン CSS ファイルを含む。

Supported platforms支持的平台支援的平台対応プラットフォーム

Claude Code

Notes备注備註備考

Requires Figma MCP server and a React + Tailwind project.需要 Figma MCP 服务器和一个 React + Tailwind 项目。需要 Figma MCP 伺服器和一個 React + Tailwind 專案。Figma MCP サーバーと React + Tailwind プロジェクトが必要。

More Design skills更多设计技能更多設計技能その他のデザインスキル

View all →查看全部 →查看全部 →すべて見る →

ui-ux-pro-max-skill

142k
by作者：作者：作者： nextlevelbuilder

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. Its v2.0 Design System Generator draws on 79 searchable UI styles, 192 palettes, 74 font pairings, and 192 industry reasoning rules to produce polished interfaces instead of generic layouts. It works with Claude Code and other major coding agents.为多平台构建专业 UI/UX 提供设计智能的 AI 技能。其 v2.0 设计系统生成器基于 79 种可检索 UI 风格、192 套配色、74 组字体搭配和 192 条行业推理规则，产出精致的界面而不是通用布局。支持 Claude Code 及其他主流编码智能体。為多平台建構專業 UI/UX 提供設計智慧的 AI 技能。其 v2.0 設計系統產生器基於 79 種可檢索 UI 風格、192 套配色、74 組字體搭配和 192 條產業推理規則，產出精緻的介面而不是通用版面。支援 Claude Code 及其他主流編碼智慧體。複数プラットフォームでプロ仕様の UI/UX を構築するためのデザインインテリジェンスを提供する AI スキル。v2.0 Design System Generator は、検索可能な UI スタイル 79 種、パレット 192 種、フォントの組み合わせ 74 組、業界推論ルール 192 件を活用し、汎用的なレイアウトではなく磨き上げたインターフェースを生み出す。Claude Code やその他の主要なコーディングエージェントで使える。

Design设计設計デザインClaude CodeCursorWindsurfAntigravity+19 more+19 个更多+19 個更多+19 件
npm install -g ui-ux-pro-max-cli && uipro init --ai <agent>

awesome-design-md

124k
by作者：作者：作者： VoltAgent

A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集，已收录 70 多个真实品牌系统，包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目，编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch，合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集，已收錄 70 多個真實品牌系統，包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案，編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch，合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。

Design设计設計デザインGeneric
Copy a DESIGN.md file into your project root (no installer; file-drop usage)

taste-skill

105k
by作者：作者：作者： Leonxlnx

Agent skills that give coding agents taste: art direction, reference images, and a browser check instead of generic AI pages. Rather than accepting the first generic layout, the skill pushes the agent to pick a direction, ground it in references, and verify the result in a real browser. Version 2 holds a single skill, design-taste-frontend; older skills moved to taste-skill-classics and imagegen-skills.给编码智能体品味的智能体技能：艺术指导、参考图和浏览器检查，而不是千篇一律的 AI 页面。它不让智能体接受第一个通用布局，而是推动智能体选定方向、用参考图 grounding，并在真实浏览器里验证结果。v2 只有一个技能 design-taste-frontend，旧技能已移到 taste-skill-classics 和 imagegen-skills。給編碼智慧體品味的智慧體技能：藝術指導、參考圖和瀏覽器檢查，而不是千篇一律的 AI 頁面。它不讓智慧體接受第一個通用版面，而是推動智慧體選定方向、用參考圖 grounding，並在真實瀏覽器裡驗證結果。v2 只有一個技能 design-taste-frontend，舊技能已移到 taste-skill-classics 和 imagegen-skills。コーディングエージェントにセンスを与えるスキル。アートディレクション、リファレンス画像、ブラウザチェックによって、汎用的な AI ページを避ける。最初に出た汎用レイアウトを受け入れるのではなく、方向を選び、リファレンスに根付かせ、実際のブラウザで結果を検証するようエージェントを促す。バージョン 2 は design-taste-frontend の 1 件のみで、旧スキルは taste-skill-classics と imagegen-skills に移った。

Design设计設計デザインClaude CodeCodexGeneric
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"