Claude Design 的能力，被搬进了终端里

你有没有想过，把 Claude Design 那个在浏览器里画页面的能力，直接搬进终端？

不是比喻——bluzir 这个开源项目真的在做这件事。它把 Claude Design 的核心功能：HTML 格式的演示文稿、可交互的原型、动态视频、设计系统，全部用 Skills 的方式搬到了 Claude Code 里。你在终端里打一条命令，它就能帮你生成一套完整的设计产出物。

它能做什么？

说出来都有点夸张：一个技能包里塞了五套完整的设计工作流。

/make-deck —— 生成 1920×1080 的 HTML 演示文稿，键盘左右翻页、手机端触摸翻页、打印模式下每页一张幻灯片、还带演讲者备注。你不需要 Keynote，不需要 PowerPoint，浏览器打开就是一个完整的演示。

/interactive-prototype —— 做出可以点击的 App 原型。用 React+Babel 搭建，带设备框架（iOS/Android），直接在浏览器里操作跳转逻辑。

/animated-video —— 生成动态视频，用的是 Remotion 兼容的 API：Stage + Sprite + 时间轴，可以做产品演示、动效 reel，或者解释性短视频。MP4 导出走的是 Puppeteer 渲染。

/create-design-system —— 从现有代码里提取设计 token（颜色、字体、间距），或者从需求描述里直接生成一套完整的设计系统说明文档。

这还没完——它还有一套调试和验证的 Skills：/verify-artifact 做视觉 QA（截图+控制台扫描+AI 读图），/inspect 精准定位某个 UI 元素，/make-tweakable 生成一个浮窗面板，让非技术人员也能实时调整颜色和字体。

怎么装？

三步搞定：

git clone https://github.com/bluzir/claude-code-design.git
cd claude-code-design
claude

然后在 Claude Code 里跑 /doctor——它会自动装好 Chrome DevTools MCP、monolith、pptxgenjs 和 Puppeteer，然后跑一个冒烟测试。整个过程不需要你手动配任何东西。

跟 Claude Design 什么关系？

Claude Design 是 Anthropic Labs 在 claude.ai 上做的「聊天+画布」设计工具，输出质量很高，但不是所有人都有权限或者愿意在浏览器里工作。

这个项目等于把它的核心能力「翻译」成了 CLI 版本——同样的产出质量，终端里就能跑。可以理解成：Claude Design 的能力，Agent 化的方式重新包装了一遍。

谁适合用？

设计师想快速出原型但不想开 Figma；产品经理需要随时能生成可演示的 Demo；开发者在终端里工作不想切到浏览器——这三种人都很适合。

说到底，这是一个把「AI 设计」从 GUI 拉回 CLI 的项目。喜欢在终端里工作的人，应该会觉得很对味。

GitHub 仓库：bluzir/claude-code-design

GitHub: https://github.com/bluzir/claude-code-design