baoyu-design：本地运行 Claude Design 的 Agent Skill
将 claude.ai/design 的设计能力打包成 Agent Skill，在本地 Cursor、Claude Code 等任意文件型代理中生成自包含 HTML 的 UI 稿、原型和 PPT。
证据显示技能以生成自包含的HTML文件为主要功能，操作在本地进行，未见明显过度权限或敏感数据收集。但技能的行为高度依赖AI模型的指令遵循能力，且要求用户确认输出位置和设计系统，但权限控制、执行隔离和回滚机制不明确，外部资源（如playwright、unpkg）的使用增加网络风险。因此扣分主要在于权限和隔离机制不够透明，未能达到满分。
指令文件提供了详细的分步流程和多个辅助脚本，如build-preview.mjs、compile-design-system.mjs等，但关键路径未经过实际执行验证，依赖外部服务（如unpkg）的可用性也可能影响可靠性。未提供自动化测试覆盖技能关键路径的明确证据。因此扣分主要在于缺乏执行测试和边缘情况处理不足，只能给予低于满分。
技能应用范围广泛，涵盖了多种设计任务（UI mockup、原型、幻灯片等），并有明确的触发条件，但非触发场景的描述不够清晰，用户期望与实际能力之间可能不一致。环境适配方面，虽然支持多种harness，但对中国大陆网络的可达性未做特别说明，且核心功能可能依赖Claude等海外服务。因此扣分主要在于边界条件和环境适配的信号不足。
文档结构清晰，提供了分层的信息（SKILL.md、system-prompt.md等），并包含许可（MIT）和版本（package.json中的版本），但缺少明确的changelog和更新路径，维护责任未完全说明。已知限制的披露不充分，例如对播放器浏览器版本的依赖未提及。因此扣分主要在于版本管理、更新路径和已知限制的披露不完整。
技能声称能生成高质量的设计交付物，但静态审查无法验证实际输出质量，且生成过程依赖AI模型的创造力，可能存在质量不稳定。替代方案的比较和边际价值未得到明确的证据支持。因此扣分主要在于输出直接可用性未经证实。
证据主要来自代码和文档，但缺少第三方执行的独立验证。虽然提供了辅助脚本的源代码，但未展示实际测试结果或CI流程。因此扣分主要在于缺乏可重复执行的证据。
- 该技能高度依赖外部服务（如Claude模型、unpkg CDN）和网络下载，中国大陆用户可能无法访问，导致核心功能不可用，建议在使用前评估网络可达性。
- 技能的执行涉及本地文件写入和代码执行，用户应确保在可信环境中运行，并注意权限控制。
- 静态审查无法验证实际输出质量，建议用户在小范围项目上先行测试。
这个 Skill 能做什么，适合哪些场景？
baoyu-design 将 Anthropic 的 Claude Design 引擎（claude.ai/design 背后的技术）重新打包为可移植的 Agent Skill。把它装进本地代理，即可在编辑器里获得该网站的大部分能力：UI mockup、可交互原型、线框图、落地页、仪表盘、移动应用和幻灯片，全部输出为自包含 HTML，无需额外订阅或上传。它提供完整的设计流程——澄清问题、汇总设计上下文、构建 HTML 交付物，并通过本地 HTTP 预览和浏览器工具支持基于指针的迭代。该技能对工具链无偏好，内置适用于 Claude Code、Cursor 和 Codex Agent 的参考文档，并为 Deck 到 PPTX 导出提供本地 CLI，其生成方式是在真实浏览器中渲染页面而非解析 HTML。
读取 SKILL.md 和 system-prompt.md 以加载设计方法论；检测当前代理环境（Cursor/Claude Code/Codex/通用），并读取对应 references/<harness>.md 来解析提问、预览、截图和调试等工具。运行时读取内置技能（如 hi-fi-design、interactive-prototype、make-a-deck、design-system-authoring 等）以匹配具体任务类型。询问澄清问题并确定保存位置（默认 designs/<project>/）与设计系统。生成自包含 HTML 文件，复制资源到项目文件夹，并通过 HTTP 本地预览。通过 agents/import-design-system.mjs、agents/record-asset.mjs、agents/compile-design-system.mjs、agents/build-preview.mjs 等辅助脚本管理设计系统。通过 agents/gen-pptx CLI（基于 Playwright 的 headless Chromium）导出为可编辑或截图的 PPTX，并生成原生 PowerPoint 文本、形状、图片和动画。还可从 .fig 文件离线导入 Figma 设计，从 GitHub 仓库导入组件，或从现有 HTML/CSS 导入 tokens 与状态。
- UI/UX 设计师在 Cursor 中为移动端应用快速产出 3 套高保真设置页变体，边预览边通过指针修改。
- 产品经理用 Claude Code 从 PRD 制作 10 页、带逐点动画的 PPT，并直接导出为可编辑的 PPTX。
- 开发者在本地代码库中重建作曲家 UI，输出为独立 HTML 交付给前端团队。
- 设计系统负责人通过导入 Figma .fig 文件，将其转化为带 tokens、组件和指南页的完整设计系统，并生成 preview.html。
- 前端开发想复用现有 HTML/CSS 页面中的颜色和字体 tokens，作为新原型的设计基准。
这个 Skill 有哪些优点和局限？
- 不依赖 claude.ai/design 网站，输出全留在本地仓库，可版本管理、复刻或交付。
- 方法学和工艺标准完整打包，支持 13 种以上设计类型（mockup、原型、wireframe、Deck、文档、动画等）。
- 多代理兼容：Claude Code、Cursor、Codex 各有专用工具参考，通用文件型代理也能用。
- PPTX 导出保留 data-anim 动画为原生 PowerPoint 动画，可编辑模式输出原生文本/形状/图片。
- 设计系统支持强：可导入 Figma .fig（离线）、GitHub 仓库、已有 HTML/CSS，并在项目间绑定复用。
- 需在本地 Node.js 环境，首次使用 gen_pptx 需构建（npm install、playwright install chromium、npm run build）。
- 不适合普通 Claude Desktop 等非文件型代理：需手动服务 designs/ 目录，且缺少专用工具参考。
- README/SKILL.md 未提测试套件，质量依赖模型能力（推荐 Opus 4.8，其他模型可能效果打折）。
- 安装依赖 `npx skills`，若代理不支持该 CLI 则只能用手动 URL 方式。
如何安装这个 Skill？
先决条件：本地代理（Cursor、Claude Code、Codex 或任何支持的 70+ 代理）、推荐使用 Claude Opus 4.8、Node.js（用于 npx 安装器）、Python 3（可选，用于预览服务器）。推荐用 npx skills（来自 Vercel Labs）：在项目根目录运行 npx skills add JimLiu/baoyu-design（自动检测代理），或加 -g 全局安装，或用 --agent claude-code / --agent cursor / --agent codex 指定。安装位置：Claude Code 装到 .claude/skills/，Cursor/Codex 风格装到 .agents/skills/（加 -g 装到用户级 ~/）。备选：直接把仓库 URL 给代理，让它自行获取。
如何使用这个 Skill？
安装完成后，用自然语言描述设计任务，例如“用 Fluent 2 设计系统设计一个设置页”。代理会读取 SKILL.md，询问澄清问题，在 designs/<project>/ 下生成 HTML，并通过 http://localhost:4311/<project>/<file>.html 预览（可手动运行 python3 -m http.server 4311 --directory designs）。在实时预览中指向任意元素，告诉代理要改什么，它会直接修改源码。若想将 Deck 导出为 PPTX，在对话中直接说“导出为 PPTX”，代理会调用本地 gen_pptx CLI（需事先构建）。