技能介绍

baoyu-design 把 Claude Design 打包成一个可移植的 Agent Skill，让设计工作在本地代理（Cursor、Claude Code、Claude Desktop、Codex 等）中完成，产出为自包含的 HTML 设计稿。不需要访问网站，不需要额外订阅，所有产出都保存在本地仓库里。

它解决的是「设计能力必须挂在网站上」的问题：设计稿、原型、幻灯片、设计系统全部落到本地文件，可以直接版本控制、分享或导出。

适用场景

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

核心能力

内置了一整套设计技能，覆盖以下领域：

↔ 左右滑动查看完整表格
领域内置技能
核心设计高保真设计 · 交互原型 · 线框图 · 前端美学方向
幻灯片制作幻灯片 · 演讲者备注
移动端与动效移动端原型 · 动画视频 · 音效
网页与营销网站与着陆页 · 社交媒体内容 · HTML 邮件 · 传单 · 三折页
数据与研究网页研究 · 数据科学 · 数据可视化 · 地图与地理 · 实验流程
文档、3D 与插图制作文档 · 3D 对象 · 水彩插图
设计系统创建设计系统 · 使用设计系统 · 设计系统预览 · 设计组件（.dc.html） · 制作可调参数
导入源Figma .fig（离线解码） · GitHub 仓库 · 现有 HTML/CSS
导出与交接独立 HTML · PDF · PPTX（可编辑） · PPTX（截图） · 视频（MP4） · 发送到 Figma · 发送到 Canva · 交接给 Claude Code
AI 资产与集成Gemini 图像生成 · 从原型调用 Claude · 读取 PDF

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

三种设计源导入方式（真实上下文胜过文字描述）：

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

导入为设计系统的内容会编译成一个自包含、可交互的 preview.html。

设计系统约束：设计系统绑定到项目后，代理会严格遵循系统的 token、组件和样式，不会发明系统外的颜色或样式。系统保存在 designs/ 目录下，可版本控制。

输出限制：所有输出均为自包含 HTML 以保证可移植性，但某些高级功能（如视频导出）可能依赖代理环境。

效果预览

用Claude Design本地生成UI原型和幻灯片预览

作者提供了同一提示词在 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.

下图是社区 Chakra UI Figma Kit 的 .fig 经过一次导入对话后的结果：28 个组件按语义分组、400 多个精选 token、指南卡片和自建展示，全部在一个文件中浏览。

从 Chakra UI Figma Kit .fig 导入的设计系统之 preview.html

工作方式

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

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

你需要提供

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

你会获得

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

使用示例

生成的设计需要 HTTP 服务才能正确加载多文件原型（代理通常会自己启动预览服务器），手动启动方式：

python3 -m http.server 4311 --directory designs

然后打开 http://localhost:4311//.html 预览。

PPTX 导出功能需要本地构建一个辅助工具。在 Claude Code 中第一次使用前需执行一次构建（其他代理可能自动处理）：

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

构建完成后，代理即可导出带有动画的 PPTX。

典型指令：

  • “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.”