CC Design 是一个专为 Claude Code 及类似编程智能体设计的开源技能插件（Skill），致力于赋予 AI 专家级产品设计师的能力。通过在代码环境中无缝集成，它能够将自然语言指令直接转化为高保真的 HTML 交互原型、演示幻灯片、落地页、UI 线框图以及动态视觉演示。与传统 AI 绘画或“凭空想象”的代码生成不同，CC Design 秉持“上下文优先”原则，能智能读取项目现有的组件库和设计规范进行创作，确保代码高度贴合实际工程。同时，它采用渐进式加载策略以最小化上下文窗口占用，并内置 Playwright 自动化渲染验证体系和丰富的格式导出工具。通过该插件，开发者无需打开 Figma 即可完成从需求探索、多维视觉方案对比如到最终交互 Demo 落地交付的完整专业设计闭环。
功能列表
- 特色功能：一键品牌视觉风格克隆：支持渐进式加载 68 种以上全球顶级品牌（如 Stripe、Vercel、Notion、Linear、Apple、Tesla 等）的设计系统，并在生成原型时完美复现其高级视觉美学与排版特征。
- 特色功能：多维度变体方案自动生成（Variations）：打破单一输出局限，AI 会在布局结构、交互模式、视觉强度和动效轨迹等维度上，一次性提供至少 3 个以上截然不同的设计方向供用户对比决策。
- 丰富的商业级输出格式：不仅仅是网页，全面支持生成可交互的 UI 原型、专业的 PPT 级幻灯片演示（Slide Decks）、高转化率落地页、产品线框图及复杂的动作/动效探索分析。
- 智能提取与继承项目设计系统：自动发现并复用代码库中现有的设计令牌（Tokens）、基础组件、排版规范、间距系统和色彩模式，彻底消除 AI 生成组件时产生的“违和感”。
- 强大的在线交互原型引擎：内部基于 React 和 Babel 提供内联 JSX 编译能力，自带被锁定的稳定依赖版本、严格的组件作用域隔离以及丰富的启动脚手架代码。
- 实时微调控制面板（Tweaks System）：生成的原型页面自带内嵌式 UI 控制器，支持在浏览器中拖拽修改参数进行实时预览，并通过 localStorage 实现调整状态的持久化保存。
- 集成 Playwright 自动化验证：在 Claude Code 内部挂载 Playwright 实例环境，实现浏览器级别的真实渲染验证，并支持自动截图，确保生成的代码“所见即所得”且真实可跑。
- 全链路本地导出与分发：内置专用 Node.js 脚本，支持将生成的 HTML 原型一键打包转换为 PPTX 演示文稿、PDF 文档，或将全部素材（图片/CSS/JS）压缩为单个纯净的内联 HTML 文件以便于分享。
使用帮助
CC Design 是一款极其强大的 AI 编程和设计提效工具，但因为它运行在命令行 CLI 与大语言模型的交互环境中，掌握正确的安装步骤与核心提示词（Prompt）技巧至关重要。以下为您提供极为详尽的配置与使用指南，帮助您从零开始将代码环境改造为专业的数字设计工作站。
一、 运行环境准备与基础要求
由于 CC Design 深度挂载于 Claude Code（或 Codex 风格的兼容编程智能体）的底层执行流中，你需要确保本地环境具备以下开发前置条件：
- Node.js 环境：推荐安装 Node.js v18 或以上稳定版本，这不仅是运行 AI 客户端的基础，更是执行后续 PDF/PPT 导出脚本的必备环境。
- AI 智能体工具：请确保你的电脑上已经安装并登录了 Anthropic 官方推出的
Claude Code命令行客户端，或其他能够支持 MCP（Model Context Protocol）或自定技能栈的类似平台。 - 基础终端操作：准备好你常用的终端（Terminal，如 iTerm2、Windows Terminal 或 VS Code 集成终端）。
二、 详细安装与配置流程
步骤 1：向 Claude Code 注入技能库
你需要将 CC Design 的项目文件放置到 Claude Code 识别的 skills 目录中。打开终端，通过 Git 将开源仓库克隆至本地配置文件夹：
# 全局安装模式（推荐）
git clone https://github.com/ZeroZ-lab/cc-design.git ~/.claude/skills/cc-design
# 若你想将其作为现有项目的一部分（子模块加载）
git submodule add https://github.com/ZeroZ-lab/cc-design.git skills/cc-design
步骤 2：初始化导出依赖环境
本工具自带强大的交付流水线（将网页转 PPTX、PDF 等），我们需要进入脚本当中安装必需的 npm 包：
# 进入脚本目录并安装依赖（如 pptxgenjs 等）
cd ~/.claude/skills/cc-design/scripts && npm install && cd -
步骤 3：配置自动化视觉验证引擎（Playwright）
这一步是重中之重。CC Design 之所以被称为“真实可跑”，是因为它会在后台唤起真实的浏览器来验证代码。你需要为内置脚本安装无头浏览器内核：
# 安装 Chromium 浏览器内核以供 Playwright 截图和验证调用
npx playwright install chromium
完成以上三步后，重启你的 Claude Code 服务或终端，CC Design 将自动进入监听激活状态。
三、 核心功能操作指南与 Prompt 技巧
一旦安装完毕，CC Design 的核心定义（SKILL.md）会常驻 AI 的上下文。你无需输入复杂的代码，完全通过自然语言需求描述即可触发功能。它的工作流遵循：理解需求 → 探索方向 → 规划代码 → 构建构建 → 渲染验证 → 交付文件。
1. 基础 UI 原型与页面生成
你可以像使唤高级设计师一样给 Claude 派发任务，建议直接指明业务场景。
- 操作示例：在 Claude Code 中输入指令：“我们需要为内部 SaaS 产品设计一个新的落地页。请帮我生成一个交互式原型。”
“请为下周的 Q3 季度董事会，设计并创建一个包含 10 页内容的 Pitch Deck 幻灯片代码。” - 引擎执行：Claude 将自动查阅
templates文件夹下的脚手架（如deck_stage.js幻灯片模板），编写完整的带样式 HTML，并保存在你的工作区中。
2. 进阶神技：品牌风格一键克隆
如果你不懂配色和排版，你可以直接要求 AI “借用”知名品牌的视觉规范。CC Design 内置了一份包含 68 个大厂视觉规范的隐藏参考文件（getdesign.md）。
- 操作示例：“帮我写一个 Kanban 任务看板组件，请使用 Notion 的极简设计风格。”
“创建一个定价页面（Pricing Page），给我融合 Stripe 的渐变美学和 Linear 的暗黑紫调风格。”
“把刚才的仪表盘页面，分别用 Apple 的风格和 Tesla 的风格各生成一个版本让我对比。” - 引擎执行：系统会触发按需加载（Progressive Disclosure），将目标品牌的排版规则、颜色 Token 注入提示词，最终生成的 HTML 仿佛出自这些官方设计团队之手。
3. 多方向变体生成（Variations 模式）
当不确定需求时，强制要求多套方案是专业设计师的习惯。
- 操作示例：“为我们的支付结账流程设计 3 个视觉探索方向，请在布局结构、操作交互和动效表现上做出明显区分。”
- 引擎执行：AI 将使用
design_canvas.jsx（并排对比画布组件），在一个屏幕内分列展示 3 个不同交互逻辑和配色风格的组件供你审阅。
四、 实时调整与项目导出交付
使用微调控制器（Tweaks System）
当 HTML 文件生成完毕并在本地浏览器打开时，你可能会注意到页面角落有一个控制面板。由于集成了 Tweaks System，你可以直接在页面上拖拽滑块（如调整主色调、卡片圆角、阴影深度）。调整结果会通过浏览器 LocalStorage 持久化，无需返回终端要求 AI 重写代码，极大提升了 UI 调优效率。
格式导出与交付
原型敲定后，你需要将它发给产品经理、老板或客户。此时可以利用工具内置的自动化脚本：
- 导出为 PPTX 文件：适用于向非技术人员汇报。
node ~/.claude/skills/cc-design/scripts/gen_pptx.js [目标HTML文件路径] - 生成高清单页面 HTML（免部署）：将分散的外部样式、JS 或图片强行编码打包进一个单体文件，别人拿到这个
.html双击即可原样离线预览。
node ~/.claude/skills/cc-design/scripts/super_inline_html.js [目标HTML文件路径] - 通过真实浏览器导出高清 PDF：
node ~/.claude/skills/cc-design/scripts/open_for_print.js [目标HTML文件路径]
只要遵循这一套极其规范、上下文优先的智能体系，无论你是否具备专业 UI 设计经验，都能独立打通从逻辑构思到高保真工程级交互交付的完整链路！
应用场景
- 产品与业务需求的低成本验证
产品经理或创业团队在产生新点子时，无需耗费时间打开 Figma 等设计软件画图。直接向终端描述产品业务逻辑，系统几秒内即可产出带交互的真实网页 Demo，大幅缩短产品从“Idea”到“可体验状态”的距离。 - 前端开发流程的极致提效
前端工程师在接手新页面开发时，可通过 AI 读取现有的代码库和组件目录，要求 CC Design 遵循当前的 CSS Token 或 Tailwind 规范直接排版出新版块，避免反复拼凑 div 和调试 CSS 样式。 - 高规格商业提案/汇报演示制作
需要向高层管理团队或外部投资人进行提案时，利用工具生成商业幻灯片（Slide Decks），并指定复用顶级金融 SaaS 或科技大厂的视觉系统，一键输出高级感拉满且带有流畅交互动画的演示资产（甚至能转为 PPTX 留档）。 - UI/UX 设计师的灵感破局
当面对空白画板缺乏排版思路时，设计师可以利用“品牌克隆”和“多维变体”功能，迅速在一分钟内生成 3~4 个排版布局、视觉重心完全不同的低保真或高保真方向。从中提取灵感后再进入专业设计软件进行打磨。
QA
- 问：CC Design 是一个独立的带图形界面的软件吗？
答：不是。它是一个专为 Claude Code CLI（或 Codex 风格代码智能体）深度定制的代码技能包（Skill Plugin）。你需要在命令行或终端环境中，配合大语言模型直接通过对话进行驱动。 - 问：我的项目已经有了自己的一套设计系统，CC Design 会乱套用它的内置品牌吗？
答：完全不会。插件的首要原则是“上下文优先（Context-first design）”，AI 每次生成前会主动寻找并获取你代码库中既有的组件、主题色彩和规范词汇，只有在你主动要求或项目从零开始时，它才会去提取外部视觉库。 - 问：如果不安装和配置 Playwright 浏览器依赖，还能生成原型吗？
答：可以。AI 依然会进行代码编写并生成 HTML 及 React 逻辑文件。但缺少 Playwright 会导致系统失去在后台“自动渲染并截图截图验证”的能力，无法自动查错，需要你手动在浏览器中打开调试。强烈建议完整安装环境。 - 问：生成出来的代码足够规范，可以直接放到生产环境（线上）去运行吗？
答：建议将其作为高保真原型和交互规范参考。由于其生成结果可能采用了极速的内联 Babel 编译或是内联样式以方便预览，若要在严肃的商业生产环境上线，请先让前端工程师对其进行业务数据绑定、安全审查和规范化组件提取。
