claude-code-design
在终端中复现 Claude Design 的设计生成能力
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-code-design。 它的用途是：在终端中复现 Claude Design 的设计生成能力 完整的 Skill 内容见：https://321skill.com/skills/claude-code-design/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要一个关于新功能上线的产品介绍幻灯片，包含三部分：市场痛点、解决方案和路线图。’，它会自动触发 `/make-deck` 技能，生成一个具有演讲者注释、支持键盘导航和移动端触摸的 1920×1080 HTML 演示稿，并保存到工作目录。
介绍
claude-code-design 是一个将 Anthropic Labs 的 Claude Design 功能迁移到 Claude Code CLI 终端的技能。它解决了设计师和开发者需要在终端环境中快速生成高质量设计产物的需求，无需依赖基于画布的网页应用。
使用方式非常简单：在 Claude Code 会话中克隆此仓库并运行 /doctor 命令，即可完成首次设置。之后，通过在任务描述中使用特定关键词（如“制作演示文稿”、“创建交互原型”），对应的技能（如 /make-deck、/interactive-prototype）会自动触发，生成 HTML 演示稿、交互式原型、线框图、动画视频或设计系统等五种主要输出。
该技能非常适合前端开发者、产品经理、UX/UI 设计师以及任何需要在命令行工作流中快速原型设计、制作演示材料或构建设计系统的用户。它尤其适合那些偏好终端操作、希望将设计生成自动化集成到现有开发流程中的技术团队。
与同类设计工具或生成技能相比，claude-code-design 的核心区别在于其“终端原生”和“代理自主”的哲学。它将 Claude Design 网页应用中的用户交互（点击标签、拖放组件）转化为终端中基于关键词和上下文的智能代理决策，实现了从图形界面到命令行的高保真功能迁移，并通过 Chrome DevTools MCP 等工具确保产物的专业级质量。
核心特点
核心区别在于将 Claude Design 的图形界面交互完全转化为终端内基于上下文的智能代理决策，通过关键词触发和启发式规则（如自动判断是否添加演讲者注释）实现自动化，并集成 Chrome DevTools MCP 确保输出质量与网页版一致。
注意事项
不适合需要实时可视化拖拽编辑、精细像素级手动调整或完全脱离终端/代码环境的纯图形设计场景。
常见问题
需要安装哪些前置依赖？
运行 `/doctor` 会自动安装 Chrome DevTools MCP、monolith、pptxgenjs、puppeteer 等，并创建所需目录。
它能生成哪些格式的设计输出？
主要生成 HTML 格式的演示稿、交互原型、线框图、动画视频和设计系统，支持响应式布局和交互功能。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-code-design/raw/index.md 读取 claude-code-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-code-design/raw/index.md（查看排版版本）