JimLiu/baoyu-design
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.
解决的问题
baoyu-design 允许用户在自己的编码代理(如 Cursor、Claude Code 或 Codex)中本地运行 claude.ai/design 背后的设计引擎。它无需额外的网站订阅或手动上传步骤,即可在本地开发环境中直接创建精美的 UI 原型、交互式原型、线框图和幻灯片演示文稿,所有成果均保留在用户的代码仓库中。
如何工作
该项目以可移植的「代理技能」形式实现,包含 Markdown 文件和 JSX/JS 模板。它基于系统提示中定义的核心方法论和工艺标准,由代理根据设计任务加载。随后,代理会识别具体环境(如 Cursor 或 Claude Code),并应用相应的工具映射来处理问题、预览和验证。
输出成果以本地 HTTP 服务器提供的自包含 HTML 文件形式生成。这使得用户可以通过在实时浏览器预览中点击元素,并指示代理修改底层源代码,从而迭代优化设计。
适用人群
使用 AI 编码代理并希望在不离开编辑器的前提下,将专业级 UI/UX 设计能力直接集成到工作流中的开发者和设计师。
主要亮点
- 广泛的設計能力:支持高保真设计、交互式原型、线框图、着陆页、移动应用和幻灯片演示文稿。
- 设计系统集成:可创建、导入(包括离线解码 Figma
.fig文件)和应用版本化设计系统,确保项目间视觉一致性。 - 高级幻灯片演示:生成支持复杂构建动画的 HTML 幻灯片,可通过本地 CLI 导出为可编辑的原生 PowerPoint (.pptx) 文件。
- 本地优先工作流:所有输出均存储在项目仓库中,支持版本控制并可轻松导出。
- 代理无关性:通过
skillsCLI 与 Cursor、Claude Code、Codex 等多种代理兼容。
相关
- 项目
- 项目
- 项目
- 项目
- 项目