前言¶
把設計稿交給 AI「整頁直譯」成前端代碼，常見結果是佈局錯位、組件邊界混亂、和設計稿對不上。頁面越複雜——多模塊、重複組件、響應式約束——一次性生成的代碼越難修。下面介紹 SkillHub 社區 Skill figma2code（@user_3141f90e/figma2code，v1.0.0）：用「先規劃、再分模塊還原」的流程，在已連接 Figma 或 Mastergo MCP 的前提下，引導 Agent 分階段產出代碼，並留下 PLAN.md、COMPONENTS.md 兩份導航文檔，便於對照設計稿逐塊覈對。
這是什麼¶
figma2code 是 SkillHub 上分類爲 dev-programming 的社區 Skill，發佈者爲 user_3141f90e，標籤標明 requires_api_key=false，無需額外 API Key。它面向「設計稿轉代碼」「Figma to code」「Mastergo 轉代碼」「還原 UI」等需求，核心不是替代 MCP 讀稿，而是在讀稿能力之上，規定 全局規劃 → 組件樹梳理 → 逐模塊還原 → 整體拼接 四步，避免一把梭整頁生成。
官方入口：
- SkillHub 頁面：https://www.skillhub.cn/skills/user_3141f90e/figma2code
- API 座標：https://api.skillhub.cn/user_3141f90e/figma2code
核心功能¶
依據官方簡介，本 Skill 已覈實的能力包括：
- 工作流分階段推進：按全局規劃、組件樹梳理、逐模塊還原、整體拼接四個階段執行，而不是單次提示詞覆蓋整頁。
- 多技術棧輸出：支持將設計稿還原爲 HTML/CSS、React、Vue、小程序、uni-app、Taro、Flutter、SwiftUI 等（具體棧由你在對話中指定）。
- 過程文檔：執行過程中產出
PLAN.md（整體規劃）與COMPONENTS.md（組件樹與模塊劃分），方便後續改稿和對照設計。 - 觸發場景內置：當用戶提到複雜頁面還原度低、一次性還原效果不好、或表達對 Cursor / Claude / GPT 還原結果不滿時，Skill 會引導採用上述流程，而不是直接手寫整頁。
前提：需已連接 Figma 或 Mastergo 的 MCP，由 MCP 提供設計稿節點與樣式信息；本 Skill 負責組織還原步驟與代碼結構。
安裝與啓用¶
安裝方式遵循 SkillHub 官方說明：先按 SkillHub 安裝與優先源配置 準備 CLI，再安裝本 Skill 到當前 Agent 的 skills 目錄。
1、檢查是否已安裝 skillhub：
command -v skillhub && skillhub --version
2、若未安裝，可使用官方腳本（完整安裝或僅 CLI，按需選擇）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
3、安裝 figma2code 時，必須用 --dir 指向當前環境的 skills 目錄，否則默認裝到 ./skills/ 可能不會被 Agent 加載：
skillhub install user_3141f90e/figma2code --dir <你的 skills 目錄>
常用客戶端 skills 路徑（來自 SkillHub 安裝文檔）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
也可在對話中讓 Agent 按官方提示安裝：
請根據 https://skillhub.cn/install/skillhub.md，安裝 @user_3141f90e/figma2code。
安裝後按你所用客戶端的要求重啓或刷新 Skill 列表，再在對話中引用設計稿鏈接或節點，並說明目標框架（例如 React + Tailwind）。
典型用法¶
官方未提供單獨的可複製「示例項目」，典型用法來自 Skill 自述的工作流，可復現步驟如下。
1、確認 Figma 或 Mastergo MCP 已連接，並能讀取目標頁面或 Frame。
2、在對話中說明需求，例如：把某 Figma 鏈接中的首頁還原爲 Vue 3 組件，頁面含導航、列表、底部欄等多個模塊。
3、讓 Agent 啓用 figma2code，按四階段執行：先寫 PLAN.md 劃定模塊與還原順序；再寫 COMPONENTS.md 梳理組件樹與複用關係；然後逐模塊生成代碼；最後拼接入口與樣式，做整體對齊。
4、每完成一個模塊，對照設計稿檢查間距、字體、顏色；再進入下一模塊，避免整頁一次性大改。
適合在對話裏明確寫出：目標技術棧、是否響應式、哪些 Frame/頁面範圍需要還原。
適用場景與注意¶
更適合：
- 多模塊、有重複組件的複雜頁面；
- 需要響應式或之前「一次性還原」效果不佳的稿；
- 已配置 Figma / Mastergo MCP，希望提高還原度而非從零猜佈局。
限制與注意：
- 未連接設計工具 MCP 時，Skill 假設不成立，需先完成 MCP 配置。
- 本 Skill 組織流程與文檔，不替代設計稿數據質量；圖層命名混亂仍會增加梳理成本。
- SkillHub 頁面顯示版本爲 v1.0.0；社區來源（
community），維護節奏以 SkillHub 與發佈者更新爲準。
結尾¶
figma2code 的價值在於把「設計稿轉代碼」從單次生成改成可覈對的分階段還原，並用 PLAN.md、COMPONENTS.md 固定上下文。若你正在處理 Figma / Mastergo 複雜頁且對 AI 直出代碼不滿意，可在配置好 MCP 後從 SkillHub 安裝 @user_3141f90e/figma2code 試用。
官方地址：https://www.skillhub.cn/skills/user_3141f90e/figma2code
