你是否曾为快速验证一个 App 界面想法而反复打开浏览器、登录 claude.ai/design、上传提示词、等待渲染、再下载 HTML？baoyu-design 就是为此而生——它把 Claude 官方设计引擎「Claude Design」完整打包成一个可离线运行的智能体技能（Agent Skill），让你在 Cursor、Claude Code、Codex 或任何支持文件操作的本地 AI 编程助手内，直接调用专业级 UI 设计能力。所有产出（原型、线框图、落地页、PPT 式演示稿）均为单文件 HTML，不依赖网络、不上传数据、不额外订阅，真正实现「设计即代码，所见即所存」。
核心功能
- 本地化 Claude Design 引擎：完全复刻 claude.ai/design 的视觉生成逻辑，无需访问官网，断网也能生成高质量 UI
- 全场景界面输出：一句话描述即可生成响应式网页、移动端 App 界面、管理后台仪表盘、产品介绍落地页、甚至可交互的演示文稿（Deck）
- 开箱即用的 HTML 交付物：所有结果以自包含的单 HTML 文件输出，含内联 CSS/JS、SVG 图标和基础交互逻辑，双击即可预览，拖入项目即用
- 深度集成主流 AI 编程环境：原生适配 Cursor（推荐）、Claude Code、Codex、Claude Desktop 等本地智能体，通过简单指令触发设计流程
- 精准控制设计风格与结构：支持指定框架（如 Tailwind、ShadCN）、设备类型（iOS/Android/Web）、深色模式、组件粒度（从 wireframe 到高保真 mockup）
- 完全私有、零数据外泄：全部处理在本地完成，提示词、设计过程、HTML 文件均不出设备，敏感项目、企业内部原型的理想选择
适合哪些人用
这款工具特别适合追求效率与隐私的产品经理、前端工程师、独立开发者和 UI 快速验证者：如果你经常需要在需求评审前快速产出可点击原型；如果你反感将未发布的设计稿上传至第三方平台；如果你已在使用 Cursor 或 Claude Code 并希望把设计能力无缝嵌入开发流；或者你正为技术文档、开源项目 README 配套制作直观的界面示意图——那么 baoyu-design 就是你缺失的那一块拼图。
快速上手
安装极其轻量：只需将 baoyu-design 文件夹克隆或下载到本地，然后在支持 Agent Skill 的编辑器中加载该目录即可（例如 Cursor 中点击「Skills」→「Add Local Skill」→ 选择解压后的文件夹）。之后在任意代码文件中输入类似「请为我的笔记应用设计一个 macOS Reader 界面，带深色模式切换和 PDF 预览区」的自然语言指令，AI 即会调用 baoyu-design 生成完整 HTML，并自动插入当前文件或保存为新文件。详细配置与 Prompt 技巧可参考项目内置的中文 README.zh-CN.md。
项目信息
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-containe
JavaScript｜423 ⭐｜MIT 开源协议｜GitHub 项目地址
它让最前沿的 AI 设计能力真正回归开发者桌面——不是另一个 SaaS 工具，而是一段可审计、可定制、永远属于你的本地设计协作者。
