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 即可完成工作，且所有产出物都保留在你的 repo 中。 ## 截图 在 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** 以及一系列现成的组件脚手架。 | 领域 | 内置技能 | |---|---| | **核心设计** | 高保真设计 · 交互式原型 · 线框图 · 前端美学方向 | | **演示文稿** | 制作演示文稿 · 演讲备注 | | **移动端与动效** | 移动端原型 · 动画视频 · 音效 | | **设计系统** | 创建设计系统 · 使用设计系统 · 设计系统预览 · 设计组件 (`.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 脚手架 —— 没有构建步骤，没有 runtime。 ``` 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 还是通用的支持文件操作的 harness 中运行，并在存在匹配的参考文档时进行读取。然后，它仅会拉取任务所需的内置 skill。这种分离方式使得工艺规则独立于 harness，同时每个环境会自行解析用于*提问*、*预览*、*截图*和*验证*的工具。 ## 快速开始 ### 前置条件 - 一个本地 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）会读取此 repo，找到 `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` 可进行 `~/` 层级的用户级安装）。 **替代方案 —— 将 repo URL 提交给你的 agent。** 不想安装任何东西？将 URL 粘贴到聊天中，让 agent 自行获取该 skill： 随后 agent 会 clone 或 fetch 该 repo，加载 `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` 中记录绑定关系。正是这个本地副本保证了项目的便携性和可复现性 —— 不会有任何操作越出文件夹，且重新运行导入是稍后拉取更新的方式。如果选择多个系统，其中一个将成为**主要系统（primary）** —— 它掌控整体外观并在任何 token 冲突时胜出，而其他系统则提供特定的组件。 ### 使用导入的设计系统 一旦系统被绑定，它就充当一个 **具有约束力的视觉契约**，而不是一个松散的建议：每一个屏幕都由系统的真实 token、字体、间距和组件构建而成，且 agent 不会凭空捏造不符合系统的颜色或样式。如果系统附带了 **起始点（starting points）** —— 现成的屏幕或组件 —— 你就可以从其中一个开始播种新的设计，而不是从空白开始。 这种绑定会伴随项目一起存在。稍后重新打开它时，agent 会读取 `_d_meta.json`，重新加载系统，并继续保持风格内进行设计 —— 无需重新选择。在此基础上，你可以 **刷新** 系统以拉取更新、**添加** 另一个系统、**交换** 主要系统，或者完全 **移除** 某个系统。 ## 导入设计源 真实的上下文胜过描述。三个内置的导入 skill 可以将你已有的素材转化为 agent 可直接使用的“设计真理”： - **Figma `.fig` 文件 —— 完全离线解码。** 将任何 Figma 文件导出为 `.fig`（或获取一个社区 kit），将其指向 agent，内置的解码器就会直接在你的机器上读取它 —— 无需 Figma 账号、API token 或 MCP 服务器。agent 会对页面、组件和变量进行盘点，与你确认范围，然后要么挑选部分组件作为 React 代码，要么将整个 kit 输出为一个设计系统：按语义重新分组的组件、精心整理的 token CSS、从文件中提取的真实 SVG/PNG 资产（直接复制，绝不重绘）、指南卡片以及品牌指南 README。 - **GitHub repo。** 将 repo URL 作为设计源交给它。agent 会在 clone 之前使用 `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辅助设计, Claude, Cursor, CVE检测, HTML生成, MITM代理, UI原型, 前端开发工具, 多模态安全, 数据可视化, 自定义脚本, 逆向工具, 防御加固