JimLiu/baoyu-design

# baoyu-design **在你自己的本地 agent 上运行 Claude Design —— Cursor、Claude Code、Claude Desktop，或任何具备文件处理能力的编程 agent。** [English](README.md) · [简体中文](README.zh-CN.md) · [更新日志](CHANGELOG.md)    `baoyu-design` 将 **Claude Design** —— [claude.ai/design](https://claude.ai/design) 背后的设计引擎 —— 打包为一个便携的 **Agent Skill**。将其放入本地 agent 中，你就可以直接在编辑器内获得该网站的大部分功能：精美的 UI 模型、交互式原型、线框图、落地页、仪表盘、移动端应用以及幻灯片 —— 所有这些都以独立的 HTML 格式生成。 无需访问网站，无需单独订阅，无需上传步骤。你机器上的 agent 会完成所有工作，并且每个产出物都会保存在你的代码库中。 ## 截图 在 Cursor、Codex、Claude 和 Claude Design 中使用了相同的 Reader Mac App 提示词。 | Cursor | Codex | Claude | Claude Design | |---|---|---|---| | | | | |

用于所有截图的提示词

``` Build a Reader Mac app that helps me read and save articles better. All data is stored locally. ## 信息收集 1. Manual adding Support manually adding different types of information: - URL: enter a URL and automatically fetch content and images - Attachments: upload PDFs, videos, and images - Markdown editing: like publishing a blog post, enter the title, body, and cover image - Other 2. Automatic subscriptions - RSS feeds - Social media accounts: X, Weibo, YouTube - Other ## 编辑与组织 1. Tags Every item can have tags. 2. Categories and folders Create tree-structured folders and place content in different categories. 3. Favorites Users can click to favorite an item. 4. Editing Every item can be edited with a built-in Markdown editor. ## AI 辅助 1. Automatic translation Support translation across different languages. 2. Summaries and abstracts Generate summaries for captured content. 3. Derivative creation Create new work based on one or more pieces of content. 4. Integrated AI Chat Use AI Chat to call AI Agents that help process content. ```

## 为什么在本地运行 - **摆脱网站的束缚。** 你无需离开编辑器，即可获得 `claude.ai/design` 的绝大多数功能 —— 相同的方法论、相同的工艺标准、相同的输出格式。 - **搭配 Opus 4.8 效果最佳。** 该 skill 是一份冗长且要求严格的设计任务书；模型越强大，结果越好。将其与 **Claude Opus 4.8** 搭配可获得最佳输出，并且在其他性能强大的模型上也能很好地运行。 - **通过指指点点进行迭代，而不是靠描述。** 因为交付物是在 `localhost` 上提供的纯 HTML，你可以依赖 agent 内置的浏览器预览和元素标注工具（Cursor Browser / DevTools、Claude Preview 或 Codex Browser）。在实时预览中指着一个按钮，说出你想要更改的内容，agent 就会编辑底层源代码 —— 这是一种在网站上难以实现的、紧密且视觉化的二次编辑循环。 - **一切都是你的。** 输出文件会生成在 `designs//` 中，作为独立的 HTML，你可以对其进行版本控制、分支化、导出或发布。 ## 它可以制作什么 该 skill 驱动了一个完整的设计流程 —— 澄清性问题 -> 收集设计上下文 -> 生成一个或多个 HTML 交付物 -> 预览和验证。它内置了一系列丰富的 **built-in skills** 和一套现成的组件框架。 | 领域 | 内置 skills | |---|---| | **核心设计** | 高保真设计 · 交互式原型 · 线框图 · 前端美学方向 | | **演示文稿** | 制作演示文稿 · 演讲者备注 | | **移动端与动效** | 移动端原型 · 动画视频 · 音效 | | **设计系统** | 创建设计系统 · 使用设计系统 · 设计系统预览 · 设计组件 (`.dc.html`) · 可调参数化 | | **导入源** | Figma `.fig` (离线解码) · GitHub repo · 现有的 HTML/CSS | | **导出与交付** | 独立 HTML · PDF · PPTX (可编辑) · PPTX (截图) · 发送至 Figma · 发送至 Canva · 交付给 Claude Code | | **AI 资产与集成** | Gemini 图像生成 · 从原型中调用 Claude · 读取 PDF | **启动组件** (位于 [`starter-components/`](skills/baoyu-design/starter-components/)) 使 agent 无需手动构建基础结构：iOS / Android / macOS / 浏览器框架、平移缩放设计画布、幻灯片展示舞台、时间轴动画引擎、调整面板以及可填充的图像槽。 ## 工作原理 该 skill 是纯 Markdown 加上少量 JSX/JS 脚手架 —— 无需构建步骤，无需运行时。 ``` skills/baoyu-design/ ├── SKILL.md # Entry point — orchestrates the whole flow ├── system-prompt.md # The design methodology & craft standards (source of truth) ├── references/ │ ├── claude.md # Tool map for Claude Code │ ├── cursor.md # Tool map for Cursor │ └── codex.md # Tool map for Codex Agent ├── built-in-skills/ # Specialized prompts (decks, mobile, import, export, …) └── starter-components/ # Device frames, deck stage, canvas, animation engine, … ``` 当你请求进行设计时，agent 会读取 `SKILL.md`，从 `system-prompt.md` 加载核心方法论，检测它是在 Cursor、Claude Code、Codex Agent 还是通用的具备文件处理能力的平台中运行，并在存在匹配项时读取相应的参考文档。然后，它只会引入任务所需的内置 skill。这种拆分确保了工艺规则与具体平台无关，同时每个环境会自行解析用于*提问*、*预览*、*截图*和*验证*的工具。 ## 快速开始 ### 前置条件 - 一个本地 agent —— **[Cursor](https://cursor.com)**、**[Claude Code](https://claude.com/claude-code)**、**[Codex](https://developers.openai.com/codex/)**，或安装程序支持的 70 多种 agent 中的任何一种（Cline、Roo Code、GitHub Copilot 等）。Cursor、Claude Code 和 Codex 在 skill 内部拥有顶级的工具参考。 - 为获得最佳效果，请选择 **Claude Opus 4.8** 作为模型。 - **Node.js**（用于运行下面的 `npx` 安装程序）。**Python 3** 对于本地预览服务器也很方便。 ### 安装 **推荐 —— `skills` CLI。** [`npx skills`](https://github.com/vercel-labs/skills)（来自 Vercel Labs）会读取此代码库，找到 `skills/baoyu-design/`，并将其放入检测到的任何 agent 对应的正确文件夹中： ``` # 安装到当前项目（自动检测您的 agent） npx skills add JimLiu/baoyu-design # …或者全局安装，适用于每个项目 npx skills add JimLiu/baoyu-design -g # 明确指定特定的 agent npx skills add JimLiu/baoyu-design --agent claude-code npx skills add JimLiu/baoyu-design --agent cursor npx skills add JimLiu/baoyu-design --agent codex # 只需首先列出 repo 中的内容 npx skills add JimLiu/baoyu-design --list ``` 对于 Claude Code，它会安装到 `.claude/skills/`；对于 Cursor/Codex 类的 agent，会安装到 `.agents/skills/`（添加 `-g` 可进行 `~/` 层级的用户安装）。 **替代方案 —— 将代码库 URL 交给你的 agent。** 不想安装任何东西？将 URL 粘贴到聊天中，让 agent 自己获取该 skill： Agent 会克隆或获取代码库，加载 `SKILL.md`，然后继续执行 —— 非常适合一次性使用。 ### 使用它 一旦 skill 安装完成（或获取完成），只需用自然语言描述一个设计任务 —— 它会根据自身描述自动激活： 在 Claude Code 中，你也可以使用 `/baoyu-design` 显式触发它；在 Codex 中，当 skills 可用时，提及 `$baoyu-design` 即可。Agent 会提出几个澄清性问题，在 `designs/` 下构建 HTML，并通过 `localhost` 进行预览。**在实时预览中指着任何元素并说出要更改的内容** —— agent 会编辑底层源代码，实现快速、视觉化的二次修改。 ### 预览服务器 交付物通过 HTTP 进行预览（多文件原型无法从 `file://` 加载）。Agent 通常会为你启动此服务；要手动运行它： ``` python3 -m http.server 4311 --directory designs # 然后打开 http://localhost:4311//.html ``` ## 设计系统 除了单次性的模型外，该 skill 还能将整个项目维系在一个 **设计系统** 上 —— 这是一个版本化的捆绑包，包含品牌的 token、字体、组件和完整的 UI kit。这些系统与你的项目一起位于 `designs/` 目录下：你可以使用 *创建设计系统* 内置 skill 编写一个，放入一个预构建的系统，或者从 Figma `.fig` 文件中导入一个（见下一节）。一旦系统存在，两种流程就可以让任何项目使用它。 ### 导入现有的设计系统 当你开始一项设计时，agent 会询问**保存位置**以及**要使用哪个（些）设计系统** —— 它会发现 `designs/` 下的每个系统并将它们列出，因此你可以不选（自由设计）、选一个或选多个。预先指定一个，它就会跳过菜单： 对于你选择的每个系统，agent 会将一个**独立的、锁定版本的副本**同步到你项目中的 `_ds//` 下，将其 CSS 和组件包接入页面，并在项目的 `_d_meta.json` 中记录绑定关系。这个本地副本是保持项目可移植性和可复现性的关键 —— 任何东西都不会超出文件夹范围，而且重新运行导入是你以后拉取更新的方式。选择多个系统时，其中一个会成为**主要系统** —— 它拥有整体外观的主导权，并在发生任何 token 冲突时获胜，而其他系统则提供特定的组件。 ### 使用导入的设计系统 一旦系统被绑定，它就充当一个**具有约束力的视觉契约**，而不是一个松散的建议：每个屏幕都是由系统的真实 token、字体、间距和组件构建的，agent 不会凭空捏造系统外的颜色或样式。如果系统附带了**起点** —— 现成的屏幕或组件 —— 你就可以从一个起点开始新设计，而不是从零开始。 这种绑定会伴随项目一起存在。稍后重新打开它，agent 会读取 `_d_meta.json`，重新加载系统，并继续保持原有风格进行设计 —— 无需重新选择。在此基础上，你可以**刷新**系统以拉取更新、**添加**另一个系统、**交换**主要系统，或者完全**移除**一个系统。 ## 导入设计源 真实的上下文胜过描述。三种内置的导入 skill 可以将你已有的材料转化为 agent 直接使用的设计基本事实： - **Figma `.fig` 文件 —— 完全离线解码。** 将任何 Figma 文件导出为 `.fig`（或获取一个社区 kit），将其指向 agent，内置的解码器就会直接在你的机器上读取它 —— 无需 Figma 账号、API token 或 MCP server。Agent 会盘点页面、组件和变量，与你确认范围，然后要么挑选组件作为 React 代码，要么将整个 kit 生成为设计系统：按语义重新分组的组件、经过精心设计的 token CSS、从文件中提取的真实 SVG/PNG 资产（直接复制，绝不重绘）、指南卡片以及品牌指南 README。 - **GitHub repos。** 将一个 repo URL 作为设计源交给它。Agent 会在克隆任何东西之前使用 `gh api` 浏览代码树，仅将其需要的路径 sparse-checkout 到项目之外的临时目录中，并将 repo URL 记录为出处。 - **现有的 HTML/CSS。** 保存的页面或本地代码库可以作为设计参考：agent 会读取真实的样式表，而不是盯着截图看，将精确的值（颜色、字体、间距、圆角、阴影、交互状态）提取到你项目自身的 custom properties 中，并将引用的资产复制出来。 任何作为设计系统导入的内容都会编译成一个单一的、独立的、交互式的 `preview.html`。这是社区 **Chakra UI Figma Kit** `.fig` 经过一次导入对话后的结果 —— 按语义分组的 28 个组件、400 多个精选 token、指南卡片以及自行编写的展示页面，所有这些都可以在一个文件中浏览： ## 示例提示词 - *“使用此截图中的品牌设计 3 个高保真定价页变体。”* - *“设计一个可正常工作的新手引导流程原型 —— 包含真实状态、过渡效果、表单验证。”* - *“根据这份 PRD，为工程全员大会制作一个 10 页的演示文稿。”* - *“为一个移动端记账应用的首页屏幕绘制几个线框图布局方案。”* - *“根据此代码库重建编辑器 UI，然后将其导出为独立的 HTML。”* - *“将这个 UI kit `.fig` 转换为设计系统，然后用它构建一个仪表盘。”* - *“使用我们的设计系统构建一个仪表盘，从其分析屏幕开始。”* 为获得最佳效果，**为其提供设计上下文** —— 截图、UI kit、Figma `.fig` 导出文件或代码库。从真实的上下文出发是提升质量的最重要手段；如果你不提供，skill 会主动向你索要。 ## 致谢与许可 本项目重新打包了 **Claude Design**，这是由 **Anthropic** 开发、为 [claude.ai/design](https://claude.ai/design) 提供支持的设计 skill，使其能够在本地 agent 上运行。这是一项独立的社区工作，未得到 Anthropic 的认可或与其有任何附属关系。 由 **Jim Liu 宝玉** 重新打包并维护。基于 [MIT License](LICENSE) 发布。

标签：Agent技能, AI代理, MITM代理, UI设计, 代码生成, 前端原型, 渗透测试工具, 网络调试, 自动化, 自定义脚本, 调试辅助, 逆向工具, 防御加固