設計到程式碼管道（從 URL 中提取副本，從圖像中提取設計標記，然後建立 React 元件或 HTML 預覽變體）。從網站提取內容、提取設計系統、生成前端程式碼、預覽設計變體、透過 MCP 發送到 Figma 時使用。當使用者想要從參考 URL 或螢幕截圖建立頁面、重新設計現有網站、建立視覺原型或從設計產生程式碼時也可以使用。觸發「提取副本」、「提取設計」、「建構前端」、「生成變體」、「匯出設計」、「傳送到Figma」、「從參考建置」、「重新設計」、「創建原型」。
透過命令列快速安裝 design-builder AI 技能到你的開發環境
來源：adeonir/agent-skills。
Each step is independent. Can run isolated or chained. Discovery is always the first step -- never skip it.
If found: read and extract purpose, audience, tone, and key features. Skip to the relevant trigger operation.
If the user answers "I don't know" to any question, mark as TBD and move forward. Summarize understanding before proceeding.
設計到程式碼管道（從 URL 中提取副本，從圖像中提取設計標記，然後建立 React 元件或 HTML 預覽變體）。從網站提取內容、提取設計系統、生成前端程式碼、預覽設計變體、透過 MCP 發送到 Figma 時使用。當使用者想要從參考 URL 或螢幕截圖建立頁面、重新設計現有網站、建立視覺原型或從設計產生程式碼時也可以使用。觸發「提取副本」、「提取設計」、「建構前端」、「生成變體」、「匯出設計」、「傳送到Figma」、「從參考建置」、「重新設計」、「創建原型」。 來源：adeonir/agent-skills。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/adeonir/agent-skills --skill design-builder設計到程式碼管道（從 URL 中提取副本，從圖像中提取設計標記，然後建立 React 元件或 HTML 預覽變體）。從網站提取內容、提取設計系統、生成前端程式碼、預覽設計變體、透過 MCP 發送到 Figma 時使用。當使用者想要從參考 URL 或螢幕截圖建立頁面、重新設計現有網站、建立視覺原型或從設計產生程式碼時也可以使用。觸發「提取副本」、「提取設計」、「建構前端」、「生成變體」、「匯出設計」、「傳送到Figma」、「從參考建置」、「重新設計」、「創建原型」。 來源：adeonir/agent-skills。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/adeonir/agent-skills --skill design-builder 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/adeonir/agent-skills