← 返回全部 Skill
把 claude.ai/design 背后的 Claude Design 设计引擎打包成本地 Agent Skill。装进 Claude Code / Cursor / Codex 后，无需上传网站、无需额外订阅，就能在编辑器里产出精致的 UI 稿、可交互原型、线框图、落地页、仪表盘和幻灯片，全部输出为自包含 HTML，文件都留在你自己的仓库。
核心功能
- 本地跑 Claude Design
- 产出自包含 HTML 稿
- 原型/线框/落地页/PPT
- 对着预览点选改稿
安装方式
npx skills add JimLiu/baoyu-design
加 -g 可全局安装；装入 .claude/skills（Claude Code）或 .agents/skills。也可直接把仓库 URL 丢给智能体，按其 SKILL.md 执行。
使用说明
装好后用自然语言描述设计需求，如「设计 3 版冥想 App 的设置页高保真稿」。Claude Code 里可用 /baoyu-design 显式触发。智能体会先问清需求，在 designs/ 下生成 HTML 并在 localhost 预览；可对着预览里的元素点选、说改哪里，形成可视化二次编辑闭环。搭配 Claude Opus 4.8 效果最佳。
前置条件
本地智能体（Cursor / Claude Code / Codex 等）+ Node.js（安装器）；预览服务器需要 Python 3；推荐选用 Claude Opus 4.8。
相关 Skill