使用 TemPad Dev MCP 作為設計證據的唯一來源（程式碼快照、結構、資產、令牌、程式碼產生配置），從 Figma 選擇或提供的 nodeId 實作整合就緒的 UI 程式碼。首先偵測目標儲存庫堆疊和約定，然後將 TemPad Dev 的類似 Tailwind 的 JSX/Vue IR 轉換為專案本機程式碼，而無需新增新的依賴項。切勿猜測關鍵款式或尺寸。如果所需證據缺失/矛盾或資產無法根據回購政策進行處理，請停止或運送安全基地，並明確警告和遺漏。
透過命令列快速安裝 figma-design-to-code AI 技能到你的開發環境
來源：ecomfe/tempad-dev。
This skill requires TemPad Dev MCP. If tempad-dev: tools are unavailable/inactive/unauthorized, stop and tell the user to install TemPad Dev MCP and ensure it is activated in the TemPad Dev panel in the Figma design file.
TemPad Dev outputs Tailwind-like IR in either JSX or Vue. Treat MCP outputs as design facts. Never guess key styles.
Never invent: colors, typography (size/weight/line-height/letter-spacing), spacing, radius, borders, shadows, gradients, opacity/overlays, blur.
使用 TemPad Dev MCP 作為設計證據的唯一來源（程式碼快照、結構、資產、令牌、程式碼產生配置），從 Figma 選擇或提供的 nodeId 實作整合就緒的 UI 程式碼。首先偵測目標儲存庫堆疊和約定，然後將 TemPad Dev 的類似 Tailwind 的 JSX/Vue IR 轉換為專案本機程式碼，而無需新增新的依賴項。切勿猜測關鍵款式或尺寸。如果所需證據缺失/矛盾或資產無法根據回購政策進行處理，請停止或運送安全基地，並明確警告和遺漏。 來源：ecomfe/tempad-dev。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code使用 TemPad Dev MCP 作為設計證據的唯一來源（程式碼快照、結構、資產、令牌、程式碼產生配置），從 Figma 選擇或提供的 nodeId 實作整合就緒的 UI 程式碼。首先偵測目標儲存庫堆疊和約定，然後將 TemPad Dev 的類似 Tailwind 的 JSX/Vue IR 轉換為專案本機程式碼，而無需新增新的依賴項。切勿猜測關鍵款式或尺寸。如果所需證據缺失/矛盾或資產無法根據回購政策進行處理，請停止或運送安全基地，並明確警告和遺漏。 來源：ecomfe/tempad-dev。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/ecomfe/tempad-dev