baoyu-design 本地设计工具终极指南在编辑器中创建专业UI原型【免费下载链接】baoyu-designRun 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 4.8.项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-designbaoyu-design 是一个革命性的开源项目它让你能够在本地 AI 代理上运行 Claude Design 的强大设计引擎。通过这个工具你可以直接在编辑器中创建精美的 UI 原型、交互式设计、幻灯片和线框图并将它们生成为独立的 HTML 文件完全摆脱对 claude.ai/design 网站的依赖。为什么选择本地部署的设计工具3个核心优势完全掌控设计流程所有设计工作都在本地完成无需上传到云端服务器。你的设计文件、素材和项目数据完全由你掌控确保敏感信息的绝对安全。无缝集成工作流直接在编辑器中操作无需在不同应用间切换。设计、代码编写和预览可以在同一个环境中完成大幅提升工作效率。无限制的迭代能力由于输出是纯 HTML 文件你可以利用代理的内置浏览器预览和元素注释工具。只需指向实时预览中的元素说出想要的更改代理就会编辑底层源代码。跨平台兼容性baoyu-design 支持多种流行的本地代理环境包括Cursor IDEClaude CodeCodex Agent以及任何具备文件操作能力的代理快速上手5分钟开始设计安装步骤使用 Vercel Labs 的skillsCLI 工具可以快速安装 baoyu-design# 克隆仓库 git clone https://gitcode.com/gh_mirrors/ba/baoyu-design # 安装到当前项目自动检测你的代理 npx skills add JimLiu/baoyu-design或者直接全局安装适用于所有项目npx skills add JimLiu/baoyu-design -g开始你的第一个设计项目安装完成后只需用简单的语言描述设计需求为电商应用设计一个高保真的商品详情页面包含图片轮播和购买按钮。代理会自动引导你完成整个设计流程从需求澄清到最终输出。所有生成的文件都会保存在designs/project/目录中你可以随时预览和修改。核心功能详解1. 完整的设计系统支持baoyu-design 不仅支持一次性原型设计还能将整个项目与设计系统保持一致。这意味着你可以创建品牌标记、字体和组件的版本化捆绑从 Figma.fig文件导入现有设计系统确保所有屏幕都使用系统的真实标记、类型、间距和组件维护项目的视觉一致性2. 丰富的内置技能库项目提供了超过 30 个专业的内置设计技能涵盖各种设计场景UI 设计与原型制作高保真界面设计交互式原型开发移动应用设计线框图制作演示文稿与文档幻灯片演示制作演讲备注生成文档和简历设计研究报告排版导入与导出能力Figma 文件离线解码GitHub 仓库导入现有 HTML/CSS 转换多种格式导出支持3. 强大的设计上下文导入真实的上下文胜过描述。baoyu-design 提供了三种强大的导入功能Figma 文件离线解码将任何 Figma 文件导出为.fig格式代理可以在你的机器上直接解码无需 Figma 账户或 API 令牌。GitHub 仓库导入将 GitHub 仓库 URL 作为设计源代理会智能地浏览仓库结构只检出需要的文件路径。现有 HTML/CSS 转换将保存的页面或本地代码库作为设计参考代理会读取真实的样式表提取精确的设计值。实际应用场景场景一快速创建产品原型假设你需要为新产品创建概念验证原型描述你的产品理念代理会询问关键的设计上下文基于现有设计系统或创建新的设计系统生成交互式 HTML 原型通过 localhost 实时预览和迭代场景二设计系统迁移如果你需要将现有的 Figma 设计系统迁移到代码中导出 Figma 文件为.fig格式使用 baoyu-design 导入并解码自动生成 React 组件和样式系统创建可复用的设计系统文档场景三多平台设计适配为同一个应用设计不同平台的界面创建基础设计系统为 Web、移动端和桌面端分别设计保持品牌一致性同时适配平台特性生成独立的 HTML 文件用于演示和开发技术架构与工作流程项目结构baoyu-design 采用模块化设计主要组件包括skills/baoyu-design/ ├── SKILL.md # 技能入口点 ├── system-prompt.md # 设计方法学和工艺标准 ├── built-in-skills/ # 专业设计技能库 ├── starter-components/ # 预构建组件支架 └── agents/ # 核心处理引擎设计工作流程需求澄清代理通过提问明确设计目标和约束条件上下文收集导入设计素材、参考系统或现有代码原型构建使用预构建组件和设计系统创建界面预览验证通过本地服务器实时预览设计效果迭代优化基于反馈快速修改和优化设计输出交付生成独立的 HTML 文件支持多种导出格式最佳实践指南模型选择建议虽然 baoyu-design 可以在多种模型上运行但为了获得最佳效果建议使用Claude Opus 4.8提供最强大的设计理解和执行能力其他功能强大的模型也可获得良好效果设计上下文的重要性为了获得最佳设计质量建议提供真实的设计上下文截图、UI 工具包、Figma 文件或代码库如果没有现成的设计上下文可以要求代理协助收集相关参考从真实上下文开始是获得高质量设计结果的最大杠杆版本控制与协作所有设计输出都保存在designs/目录中你可以使用 Git 进行版本控制团队协作时共享设计系统基于现有设计创建分支进行实验导出为多种格式用于演示和开发常见问题解答Q: 需要什么先决条件A: 你需要一个本地代理如 Cursor、Claude Code 或 CodexNode.js 用于运行安装程序Python 3 用于本地预览服务器。Q: 如何预览生成的设计A: 代理通常会为你启动预览服务器。你也可以手动运行python3 -m http.server 4311 --directory designs然后在浏览器中访问http://localhost:4311/project/file.htmlQ: 支持哪些导出格式A: 支持 HTML、PDF、PPTX可编辑、PPTX截图、MP4 视频等多种格式还可以直接发送到 Figma 或 Canva。Q: 如何处理设计系统的更新A: 设计系统以版本化的方式绑定到项目你可以随时刷新系统以拉取更新添加新的系统或交换主要系统。开始你的设计之旅baoyu-design 将专业的设计能力带到了你的本地开发环境中。无论你是需要快速创建产品原型、构建完整的设计系统还是将现有设计迁移到代码中这个工具都能提供强大的支持。通过将 AI 辅助设计与本地开发环境相结合baoyu-design 为设计师和开发者提供了一个全新的工作方式。你可以在保持完全控制的同时享受 AI 带来的效率和创造力提升。现在就开始探索 baoyu-design 的强大功能将你的设计想法快速转化为可交互的原型吧【免费下载链接】baoyu-designRun 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 4.8.项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考