设计到代码管道（从 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