设计到代码管道：从 URL 中提取副本，从图像中提取设计标记，然后构建 React 组件或 HTML 预览变体。使用场合：从网站提取内容、提取设计系统、生成前端代码、预览设计变体、通过 MCP 发送到 Figma。當使用者想要從參考 URL 或螢幕截圖建立頁面、重新設計現有網站、建立視覺原型或從設計產生程式碼時也可以使用。觸發「提取副本」、「提取設計」、「建構前端」、「生成變體」、「匯出設計」、「傳送到Figma」、「從參考建置」、「重新設計」、「創建原型」。
透過命令列快速安裝 design-builder AI 技能到你的開發環境
來源：adeonir/agents-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/agents-skills。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/adeonir/agents-skills --skill design-builder设计到代码管道：从 URL 中提取副本，从图像中提取设计标记，然后构建 React 组件或 HTML 预览变体。使用场合：从网站提取内容、提取设计系统、生成前端代码、预览设计变体、通过 MCP 发送到 Figma。當使用者想要從參考 URL 或螢幕截圖建立頁面、重新設計現有網站、建立視覺原型或從設計產生程式碼時也可以使用。觸發「提取副本」、「提取設計」、「建構前端」、「生成變體」、「匯出設計」、「傳送到Figma」、「從參考建置」、「重新設計」、「創建原型」。 來源：adeonir/agents-skills。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/adeonir/agents-skills --skill design-builder 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/adeonir/agents-skills