baoyu-design

将 Claude Design 打包成可移植的 Agent Skill，在本地代理（如 Cursor、Claude Code、Claude Desktop 等）上运行，生成自包含的 HTML 设计稿。无需访问网站，无需额外订阅，所有产出保存在本地仓库中。

适用场景

• 设计师、开发者需要在编辑器内快速生成 UI 设计稿、交互原型、线框图、登陆页面、仪表盘、移动应用、幻灯片等。
• 希望脱离 claude.ai/design 网站，在本地代理中完成设计工作流，并利用代理的浏览器预览进行迭代。
• 需要将设计系统、Figma 文件、GitHub 仓库或现有 HTML/CSS 作为设计输入。

效果预览

以下四张截图展示了相同提示词在 Cursor、Codex、Claude 和 Claude Design 中的输出效果。

Cursor	Codex	Claude	Claude Design

Build a Reader Mac app that helps me read and save articles better. All data is stored locally.

## Information collection

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

## Editing and organization

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 assistance

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.

核心能力

该 Skill 内置了一套完整的设计技能，涵盖以下领域：

此外，还提供了多组起始组件（设备外壳、浏览器外壳、社交媒体外壳、平移缩放画布、幻灯片舞台、动画舞台、图表舞台、文档舞台、文件舞台、3D 舞台、可调参数面板等），避免代理从头编写基础结构。

工作方式

1. 用户用自然语言描述设计任务，例如“设计一个冥想应用的设置界面，提供三个高保真变体”。
2. 代理读取 Skill 的入口文件 SKILL.md，加载核心方法论（system-prompt.md），检测当前运行环境（Cursor、Claude Code、Codex 或其他），并加载对应的工具映射文档。
3. 根据任务需求，代理仅加载所需的内置技能，然后生成一个或多个自包含的 HTML 文件，保存在 designs/<project>/ 目录下。
4. 代理启动本地 HTTP 服务器（通常自动完成），在浏览器中预览生成的设计。用户可以通过指向实时预览中的元素并说出修改要求，让代理直接编辑底层源代码，实现快速视觉迭代。

你需要提供

• 本地代理：推荐使用 Cursor、Claude Code 或 Codex（其他支持文件操作的代理也可使用）。
• 模型：推荐选择 Claude Opus 4.8 以获得最佳效果，其他模型也能工作。
• 设计任务：一个自然语言描述，可附带以下上下文（任选其一）：
  • 截图或图片
  • UI 套件（Figma .fig 文件可离线解码）
  • GitHub 仓库 URL
  • 现有 HTML/CSS 文件
• （可选）设计系统：如果你已有设计系统，可指定使用，代理会将其绑定到项目中。

你会获得

• 自包含的 HTML 文件，包含设计稿、原型、线框图、幻灯片等。
• 文件保存在 designs/<project>/ 目录下，可直接版本控制、分享或导出。
• 对于幻灯片，支持导出为可编辑的 PPTX（含动画）或截图 PPTX。
• 导出选项包括：独立 HTML、PDF、PPTX、MP4 视频，以及发送到 Figma 或 Canva。

导入设计源

真实的上下文胜过文字描述。三个内置导入技能让你将已有的素材转化为设计依据：

• Figma .fig 文件 —— 完全离线解码。将任何 Figma 文件导出为 .fig（或获取社区套件），指向该文件，一个内置的解码器会在你的机器上直接读取 —— 无需 Figma 账号、API Token 或 MCP 服务器。代理会列出页面、组件和变量，与你确认范围后，将组件提取为 React 代码，或将整个套件生成为设计系统：组件按语义重新分组、精选的 token CSS、从文件中提取的真实 SVG/PNG 资源（复制而来，不会重绘）、指南卡片和品牌指南 README。
• GitHub 仓库。将仓库 URL 作为设计源交给代理。代理会在克隆之前使用 gh api 浏览文件树，仅稀疏检出所需路径到项目外部的临时目录，并记录仓库 URL 作为来源。
• 现有 HTML/CSS。保存的页面或本地代码库可作为设计参考：代理读取真实的样式表，提取精确的值（颜色、字体、间距、圆角、阴影、交互状态）并写入你项目的自定义属性，同时复制引用的资源。

导入为设计系统的任何内容都会编译成一个自包含、可交互的 preview.html。下图是社区 Chakra UI Figma Kit .fig 经过一次导入对话后的结果 —— 28 个组件按语义分组、400 多个精选 token、指南卡片和自建展示，全部在一个文件中浏览：

使用示例

• “Design 3 hi‑fi variations of a pricing page using the brand in this screenshot.”
• “Prototype a working onboarding flow — real state, transitions, form validation.”
• “Make a 10‑slide deck from this PRD for an engineering all‑hands.”
• “Build the key‑metrics slide point by point on click, then export the deck to PPTX with the animations.”
• “Wireframe a few layout ideas for a mobile expense‑tracker home screen.”
• “Recreate the composer UI from this codebase, then export it as standalone HTML.”
• “Turn this UI kit .fig into a design system, then build a dashboard with it.”
• “Build a dashboard using our design system, starting from its analytics screen.”

选型说明

该 Skill 支持多种本地代理，并在内部针对 Cursor、Claude Code 和 Codex 提供了专门的工具映射，以获得最佳体验。其他支持文件操作的代理也可使用，但可能缺少部分自动化功能（如自动预览）。选择代理时，优先考虑支持浏览器预览和元素标注功能的代理，以便进行指向性迭代。

注意事项

• 模型选择：推荐使用 Claude Opus 4.8。该 Skill 是一个长而复杂的设计简报，模型越强，效果越好。其他模型也能工作，但质量可能下降。
• 预览：生成的 HTML 需要通过 HTTP 服务才能正确加载多文件原型。代理通常会自动启动预览服务器。如需手动启动，可在项目根目录运行：

  python3 -m http.server 4311 --directory designs
  

  然后打开 http://localhost:4311/<project>/<file>.html。
• PPTX 导出：该功能需要本地构建一个辅助工具。在 Claude Code 中，第一次使用前需执行一次构建（其他代理可能自动处理）：

  cd skills/baoyu-design/agents/gen-pptx && npm install && npx playwright install chromium && npm run build
  

  构建完成后，代理即可导出带有动画的 PPTX。
• 设计系统：设计系统绑定到项目后，代理会严格遵循系统的 token、组件和样式，不会发明系统外的颜色或样式。系统保存在 designs/ 目录下，可版本控制。
• 导入 Figma 文件：支持离线解码 .fig 文件，无需 Figma 账号、API Token 或 MCP 服务器。解码后的组件可提取为 React 代码或生成完整的设计系统。
• 导入 GitHub 仓库：代理会先使用 gh api 浏览文件树，然后稀疏检出所需路径，不会克隆整个仓库。
• 导入现有 HTML/CSS：代理会读取真实样式表，提取颜色、字体、间距、圆角、阴影等值，并复制引用的资源。
• 输出限制：所有输出为自包含 HTML，确保可移植性。但某些高级功能（如视频导出）可能依赖代理环境。