baoyu-design
将Claude Design设计引擎打包为本地Agent技能，在编辑器内生成高质量UI原型。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：baoyu-design。 它的用途是：将Claude Design设计引擎打包为本地Agent技能，在编辑器内生成高质量UI原型。 完整的 Skill 内容见：https://321skill.com/skills/baoyu-design/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为我们的新SaaS平台设计一个用户仪表盘，需要包含关键指标卡片、最近活动列表和一个简单的图表。”，它会首先询问你关于品牌色、数据源等细节，然后生成一个完整的、可交互的HTML仪表盘原型，并自动在本地浏览器中打开预览。你可以直接指着预览图中的某个组件说“把这个按钮的颜色改成蓝色”，AI便会立即修改对应的源代码。
介绍
baoyu-design 解决了设计师和开发者需要频繁在网页版设计工具和本地开发环境之间切换的问题。它将Claude.ai/design背后的设计引擎打包成一个便携的Agent技能，让你可以直接在Cursor、Claude Code等支持文件的编码智能体中，通过自然语言指令生成精美的UI线框图、交互原型、仪表盘、移动应用界面等，并输出为独立的HTML文件。
使用方式非常简单：将技能安装到你的本地Agent中，然后在编辑器里直接描述你的设计需求。例如，告诉Agent“为我的阅读器Mac应用设计一个主界面”，它便会启动设计流程，通过对话澄清需求、收集上下文，最终生成包含HTML、CSS和图片的完整设计文件，并可直接在本地预览。
这个技能非常适合需要在本地快速迭代产品原型、希望设计资产完全私有化、或追求高效“描述-预览-修改”闭环工作流的角色。无论是独立开发者、产品经理，还是需要快速产出设计稿的前端工程师，都能从中受益。
建议与Claude Opus 4.8等强大模型搭配使用以获得最佳效果。由于输出是标准HTML，你可以充分利用Agent内置的浏览器预览和元素检查工具，通过“指哪改哪”的方式进行高效的二次视觉编辑，这是网页版工具难以实现的紧密迭代循环。
核心特点
核心区别在于它将Claude官方的网页设计能力完整“本地化”，让你在编辑器内获得与claude.ai/design几乎相同的设计产出，同时所有设计文件（HTML/CSS/图片）都保存在你的本地仓库中，完全私有、可版本控制。
注意事项
不适合需要复杂交互动画或后端逻辑集成的重度高保真原型设计。
常见问题
需要联网使用吗？
不需要，设计生成和预览都在本地进行，但调用AI模型需要网络。
支持哪些编辑器或Agent？
支持Cursor、Claude Code、Claude Desktop等任何支持文件操作的编码智能体。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/baoyu-design/raw/index.md 读取 baoyu-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/baoyu-design/raw/index.md（查看排版版本）