JimLiu/baoyu-design

baoyu‑design – 作为本地 代理技能 的 Claude Design

是什么

• 一个便携式 技能，将 Claude Design 引擎（与 https://claude.ai/design 同源的后端）引入任何你本地运行的文件型编码代理中——例如 Cursor、Claude Code、Codex，或 skills CLI 支持的 70 多个代理之一。
• 该技能仅由 Markdown 文件、少量 JSX/JS 辅助文件和一组 内置提示（称为“技能”）组成，驱动完整的 UI 设计工作流。
• 所有输出均为 自包含 HTML（可选 PDF、PPTX、视频等），存储在 designs/<project>/ 下，便于版本控制、导出或直接从你的仓库中交付。

为何需要它

• 无需网络服务或订阅 – 设计工作完全在你的机器上进行；你保留所有成果，数据从不离开你的仓库。
• 最佳适配 Claude Opus 4.8（最强的 Claude 模型），但也可在任何可用的 LLM 上运行。
• 可视化“点选编辑”循环 – 由于结果在 localhost 上提供，你可以使用代理内置的预览/浏览器点击元素并要求模型修改，立即获得源码更新。
• 支持设计系统 – 可导入现有设计系统（包括离线的 Figma .fig 文件），并绑定到新项目，确保品牌一致性。

核心功能

领域	该技能可生成的内容
核心设计	高保真原型、线框图、交互式原型、美学方向
演示文稿	带演讲备注的幻灯片、全屏演示模式、可编辑 PPTX 或 PNG 截图导出
移动端与动效	移动应用原型、动画视频、音效
网站与营销	网站、落地页、HTML 邮件、传单、三折页
数据与研究	网络调研、数据科学笔记本、可视化、地图
文档、3D 与插画	文档、3D 对象、水彩风格插画
设计系统	创建、导入、绑定、版本锁定、预览设计系统；组件骨架（.dc.html）
导入	离线 Figma .fig 解码、GitHub 仓库部分检出、现有 HTML/CSS 作为源材料
导出	独立 HTML、PDF、PPTX（可编辑或截图）、MP4 视频、直接交付至 Claude Code、Figma、Canva
AI 资产	Gemini 图像生成、从原型调用 Claude、PDF 读取

如何工作

• 入口点是 SKILL.md。当你向代理请求设计时，它会读取此文件，加载 system-prompt.md 中的方法，通过 references/ 中的参考文档检测你使用的代理（Cursor、Claude Code、Codex 等），并仅拉取任务所需的内置技能文件。
• 该技能协调一个对话式循环：澄清问题 → 生成设计 → 输出 HTML → 实时预览 → 视觉化二次编辑。
• 无需构建步骤或运行时；文件为纯 Markdown/JSX，由代理直接解释。

安装（需 Node.js；Python 可选，用于预览服务器）

# 推荐：使用 Vercel‑Labs `skills` CLI
npx skills add JimLiu/baoyu-design          # 自动检测你的本地代理
# 全局安装（对每个项目可用）
npx skills add JimLiu/baoyu-design -g
# 针对特定代理
npx skills add JimLiu/baoyu-design --agent claude-code

• CLI 会将技能复制到相应文件夹（Claude Code 为 .claude/skills/，Cursor/Codex 为 .agents/skills/ 等）。
• 更新同样简单：npx skills update baoyu-design（或 upgrade）。

基本用法

1. 用自然语言描述设计，例如：

   "为冥想应用设计三个高保真设置界面变体。"

2. 该技能自动激活（或在 Claude Code 中通过 /baoyu-design，在 Codex 中通过 $baoyu-design 手动触发）。它会提出必要澄清问题，然后在 designs/<project>/ 下生成 HTML。
3. 打开预览（代理通常会为你启动本地 HTTP 服务器）。在实时预览中点击任意元素并告诉模型如何修改——源 HTML 会即时更新。
4. 满意后，请求代理 导出（例如：导出为 PPTX、下载 PDF、保存为 MP4）。

设计系统工作流

• 使用内置的 创建设计系统 技能创建系统，或从 Figma .fig 文件导入。
• 开始新设计时，代理会列出可用系统；你可以选择一个、多个或不选。所选系统将复制到项目内的 _ds/<slug>/ 并通过 _d_meta.json 引用。
• 系统成为令牌、字体和组件的权威来源——模型不会生成系统外的颜色或排版。
• 后续可刷新、替换或移除系统，绑定关系在会话间持久保留。

导入现有资产

• Figma .fig – 完全离线解码；无需 API 密钥。技能提取页面、组件、令牌、SVG/PNG 资产，并可生成完整设计系统或 React 代码。
• GitHub 仓库 – 技能仅对所需路径进行稀疏检出，并记录仓库 URL 以确保溯源。
• HTML/CSS – 技能读取真实样式表，复制精确值（颜色、间距、阴影等）和资产到新项目中。

演示文稿与 PPTX 导出

• 演示文稿使用 deck‑stage 组件构建为自包含 HTML。
• 可通过 data-anim 属性为每个元素添加动画（如 fade-in、fly-in、path）。
• 技能附带本地 CLI（agents/gen-pptx/），通过 Playwright 以无头 Chromium 运行，捕获实时 DOM 并使用 PptxGenJS 写入包含 原生动画 的 PowerPoint 文件。无需外部服务。

预览服务器（如需手动运行）

python3 -m http.server 4311 --directory designs
# 然后打开 http://localhost:4311/<project>/<file>.html

许可证与徽章

• MIT 许可证
• 专为 Claude Opus 4.8 优化（徽章“Best with Opus 4.8”）
• 支持 Cursor · Claude Code · Codex（徽章“Harness”）

---

总结：baoyu‑design 让你可以在任何本地编码代理中运行强大的 Claude Design 引擎，提供完整的 UI/UX 设计工作流——包括原型、原型、设计系统管理，以及导出为 HTML/PDF/PPTX——无需离开编辑器，也无需支付托管服务费用。