baoyu-design

来源：GitHub · ⭐ 520 stars

baoyu-design：让 Claude Design 能力脱离云端，本地化运行的新思路

项目简介

在 AI 辅助设计领域，Claude.ai/design 凭借其自然语言生成高质量 UI 的能力赢得了广泛关注。然而，官方服务存在明显的使用门槛：需要订阅、依赖网络连接、设计成果难以本地迭代。JimLiu 开源的 baoyu-design 项目恰好切中了这一痛点——它将 Claude 的设计能力转化为可本地运行的 Agent Skill，让开发者在自己的编辑器环境中就能调用 AI 生成精美的界面原型。

该项目的命名"baoyu"（宝玉）颇具巧思，暗示其如璞玉般将 AI 的设计潜能雕琢成可用之器。截至目前的 520 Stars 虽不算爆款，但反映出社区对"去中心化 AI 设计工具"的真实需求。项目特别针对 Opus 4.8 模型优化，这意味着它在理解复杂设计意图、生成交互细节方面有着超出一般方案的表现力。核心价值在于：将原本封闭在云端的设计工作流，解耦为可嵌入任意开发环境的模块化能力。

核心特性

  • 多编辑器兼容：无缝集成 Cursor、Claude Code 等主流 AI 编程工具，不绑定特定 IDE
  • 自包含 HTML 输出：生成的 mockup、原型、演示文稿均为独立 HTML 文件，零依赖部署
  • 全链路设计覆盖：从低保真线框图（wireframe）到高保真视觉稿，再到可交互原型，支持设计阶段的完整递进
  • Agent Skill 架构：遵循 Skill 规范封装，可被任意支持该协议的 AI Agent 调用，具备良好扩展性
  • 离线优先：所有生成逻辑本地执行，设计资产不经过第三方服务器，保障商业项目的隐私安全

技术实现

baoyu-design 的技术架构体现了"轻量封装、重模型能力"的设计哲学。作为 JavaScript 项目，其核心并非构建庞大的渲染引擎，而是设计了一套高效的 Prompt Engineering 管道，将用户的设计需求精准转译为 Claude Opus 可执行的生成任务。

从技术层面剖析，项目的关键在于三层解耦：

第一层：Skill 接口层。项目实现了 Agent Skill 的标准协议，这意味着它对外暴露的是统一的调用契约，而非耦合特定编辑器的插件。这种抽象使得 Cursor 的 Composer、Claude Code 的 tool use 机制都能以相同方式触发设计能力。源码中可以看到对 skill 对象的标准化定义，包含输入参数的 JSON Schema 约束和输出格式的严格约定。

第二层：Prompt 编排层。这是项目的隐形核心。高质量 UI 生成依赖系统级 Prompt 对模型行为的精确校准——包括设计 token 的命名规范、CSS 架构偏好（如优先 Tailwind 语义类）、响应式断点的处理策略等。baoyu-design 通过模板化的 Prompt 组装，将用户的模糊意图（如"做一个电商详情页"）转化为结构化的设计规格说明，大幅降低模型的发散性。

第三层：产物后处理层。生成的 HTML 并非直接输出，而是经过净化与优化：内联关键 CSS 避免外部请求、压缩 SVG 路径、添加基础的交互 polyfill。这种"自包含"约束倒逼 Prompt 中必须包含"零外部依赖"的显式指令，形成设计-生成-优化的闭环。

值得玩味的是项目对 Opus 4.8 的依赖。该版本在代码生成任务中展现出更强的上下文保持能力，这对于需要维护跨组件设计一致性的场景至关重要——例如确保按钮的 hover 状态与整体配色体系的协调。

快速上手

集成 baoyu-design 到 Cursor 工作流最为直接。首先克隆项目到本地技能目录：

git clone https://github.com/JimLiu/baoyu-design.git ~/.cursor/skills/baoyu-design

随后在 Cursor 的 Composer 中通过 @ 语法唤起 Skill，描述设计需求：

@baoyu-design 创建一个 SaaS 仪表盘的首页原型，包含：
- 左侧导航栏（Dashboard, Analytics, Settings）
- 顶部搜索与用户头像区域
- 主内容区的数据卡片网格（4 个 KPI 指标）
- 配色使用 slate/indigo 体系，暗色模式优先

Skill 将返回可直接保存的 .html 文件。若需在 Claude Code 中使用，可通过 tool 配置引入：

{
  "tools": {
    "baoyu-design": {
      "command": "node ~/.cursor/skills/baoyu-design/index.js",
      "description": "Generate self-contained UI prototypes from design descriptions"
    }
  }
}

进阶用法中，可通过环境变量注入设计系统约束，强制输出符合团队规范的组件结构。

应用场景

场景一：敏捷产品验证。初创团队在概念阶段无需聘请专职设计师，产品经理直接用自然语言描述需求，5 分钟内获得可点击的高保真原型用于用户测试。HTML 格式便于直接部署到临时 URL，收集反馈后快速迭代，消除设计-开发的手动交接成本。

场景二：前端开发的设计参考。开发者接到模糊需求时（如"做一个专业的设置页面"），先调用 baoyu-design 生成视觉基准，再基于实际代码框架重构。这比在 Dribbble 盲目搜索更高效，因为生成物已包含与项目技术栈匹配的 HTML/CSS 结构，可直接作为实现参考。

场景三：技术演讲的演示物料。需要为技术分享快速制作交互式演示？描述幻灯片结构与内容要点，生成自包含 HTML 后直接用浏览器全屏播放，无需 Keynote/PowerPoint 环境，且可嵌入实时代码演示。

总结

baoyu-design 的价值不在于替代专业设计师，而在于将 AI 设计能力的访问民主化——从"订阅制云服务"转变为"可插拔的本地技能"。对于频繁需要快速原型验证的独立开发者、技术型产品经理、以及希望减少设计-开发摩擦的前端工程师，它是值得纳入工具链的实用方案。项目的 520 Stars 背后，反映的是开发者对"AI 能力本地化、工作流自主可控"这一趋势的认同。随着 Agent Skill 协议的普及，这类将云端 AI 能力解构为本地可组装模块的思路，或将成为 AI 工具集成的新范式。