前言¶
前端或全棧同學在接設計稿時，常見路徑是：在 Figma 裏量尺寸、導出切圖，再手寫 HTML/CSS 對齊視覺。過程重複、細節多，和「讓模型按稿生成頁面」之間往往還缺一層穩定流程——既要能讀到 Figma 裏的結構與資源，又要能對照參考圖控制還原度。下面介紹 SkillHub 社區 Skill figma轉高保真html，它把「Figma MCP 拉數據 + 參考截圖 + 生成 HTML」寫進 Agent 的工作流，在對話裏用自然語言或鏈接即可觸發。
這是什麼¶
figma轉高保真html（座標 @user_24c316b5/figma-to-html，版本 1.0.0）是 SkillHub 上的社區 Skill，分類爲 dev-programming，發佈者爲 user_24c316b5。官方說明中的定位是：將 Figma 設計稿轉換爲高保真 HTML 頁面；通過 Figma MCP 獲取設計數據與圖片資源，並結合用戶提供的參考截圖，生成響應式 HTML 文件。頁面標註 requires_api_key=false，表示 Skill 元數據未要求單獨配置 API Key（實際使用 Figma MCP 時，仍須在你當前 Agent 環境中完成 Figma MCP 的接入與授權，以官方 MCP 文檔爲準）。
- SkillHub 展示頁：https://www.skillhub.cn/skills/user_24c316b5/figma-to-html
- API 入口：https://api.skillhub.cn/user_24c316b5/figma-to-html
核心功能¶
依據 SkillHub 頁面與已抓取資料，可覈實的能力如下。
- 設計稿轉頁面：以 Figma 爲數據源，輸出高保真、可落地的 HTML（含響應式佈局取向）。
- Figma MCP 集成：Skill 說明中明確依賴 Figma MCP 工具讀取設計結構與圖片資源，而不是僅根據文字描述臆造佈局。
- 參考截圖輔助：可結合你提供的參考截圖，用於對齊視覺細節。
- 對話觸發：當用戶提到特定關鍵詞、或給出 Figma 鏈接並要求生成 HTML 時，Agent 應按 Skill 指引啓用該流程。
官方列出的觸發表述包括：figma 轉 html、figma 還原、figma to html、設計稿轉頁面、還原設計稿、figma 切圖，以及提供 Figma 鏈接並要求生成 HTML 的場景。
安裝與啓用¶
Skill 基於通用 SKILL.md 格式。SkillHub 給出的安裝方式是：讓 AI 按統一安裝文檔操作，或本地用 skillhub CLI 安裝到當前 Agent 的 skills 目錄（裝錯目錄會導致 Agent 識別不到，需重啓或刷新後生效）。
方式一：提示詞安裝（官方頁面推薦）¶
將下面提示發給已支持 Skill 的 AI 客戶端（如 Cursor、Claude Code 等）：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_24c316b5/figma-to-html`。
Agent 會按文檔檢查 skillhub CLI，並把 Skill 安裝到對應環境的 skills 目錄。
方式二：CLI 安裝¶
先確認是否已安裝 SkillHub CLI：
command -v skillhub && skillhub --version
未安裝時，可按 SkillHub 安裝文檔執行完整安裝（示例爲官方文檔中的推薦命令）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安裝本 Skill 時，必須用 --dir 指向當前 Agent 的 skills 目錄。文檔中的常見路徑示例：
| 客戶端 | skills 目錄（示例） |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
安裝命令形式如下（將 <skills 目錄> 替換爲上表對應路徑）：
skillhub install @user_24c316b5/figma-to-html --dir <skills 目錄>
也可先搜索再安裝：
skillhub search figma-to-html
skillhub install @user_24c316b5/figma-to-html --dir <skills 目錄>
安裝完成後，按你所用客戶端的要求重啓或刷新 Agent，使新 Skill 被加載。
Figma MCP¶
本 Skill 的工作流依賴 Figma MCP 拉取設計稿與資源。請在 Cursor 或其他客戶端中先配置並啓用 Figma MCP（連接方式以 Figma MCP 官方說明爲準）；未配置時，Skill 中描述的「獲取設計數據和圖片資源」步驟無法執行。
典型用法¶
下面步驟可在對話中復現，與官方簡介一致。
- 確認已安裝
@user_24c316b5/figma-to-html，且 Agent 已加載該 Skill。 - 確認 Figma MCP 可用，並對目標文件具備訪問權限。
- 在對話中提供 Figma 設計鏈接，並說明要生成 HTML；或使用官方列出的觸發語，例如：
請用 figma 轉 html：這是設計稿鏈接 https://www.figma.com/design/……，生成響應式 HTML 頁面。
- 若有視覺對齊需求，附上 參考截圖（整頁或關鍵模塊），並說明需要優先還原的區域（間距、字體、顏色等）。
- 讓 Agent 按 Skill 流程：通過 Figma MCP 讀取結構與資源 → 生成 HTML 文件 → 你在本地打開預覽，按需迭代修改。
生成物一般爲可直接保存的 HTML（及 Skill 執行過程中引用的資源路徑）；具體文件名與目錄以當次 Agent 輸出爲準。
適用場景與注意¶
適合誰
- 需要把 Figma 稿快速落成可預覽 HTML 的前端、全棧或獨立開發者。
- 已在使用 Cursor 等支持 Skills + MCP 的環境，願意用對話驅動還原而非純手搓靜態頁。
限制與注意
- 高保真程度受 Figma 稿複雜度、MCP 可讀範圍以及你是否提供參考截圖影響；複雜交互或組件庫級設計可能需要多輪迭代。
- Skill 描述側重 HTML 頁面 產出，是否包含完整 CSS 框架、是否拆分組件，取決於當次對話與 Agent 實現，不宜默認等同於生產級組件庫代碼。
- SkillHub 統計（以已抓取資料爲準）：評分 100000，下載 4139，安裝 124；數據會隨平臺更新變化，以 SkillHub 頁面爲準。
- 設計稿涉及版權與團隊規範時，請僅在有權使用的文件上調用 Figma 鏈接與 MCP。
結尾¶
figma轉高保真html 把「Figma MCP 取數 + 參考圖對齊 + 生成響應式 HTML」固化成 Agent Skill，適合在已有 Figma 鏈接、希望減少重複切圖與量稿時間的場景。安裝與優先源說明見 SkillHub 安裝文檔；Skill 詳情與安裝提示見 SkillHub 展示頁。
