夜雨聆风
Claude Code藏了很深的设计系统被开源了,强烈推荐,没有ai味的
如何让大模型像真正的设计师一样设计？你可以使用cc-design，“得益于”Anthropic泄露的Claude Code源码，ZeroZ-lab从中提取出了一套设计系统，封装成了以下的skill，cc-design。
https://github.com/ZeroZ-lab/cc-design
项目作者给它的定义是“High-fidelity HTML design and prototype guidance skill for AI agents”，给 AI Agent 用的高保真 HTML 设计能力。
这个项目的理念就是这个。传统 AI是从Prompt直接输出 HTML，然后你就得到一个AI味严重、排版混乱、间距失控、色彩垃圾、动效廉价、没有设计逻辑的半成品。
而 cc-design 的理念是：
理解 -> 规划 -> 设计推理 -> 分阶段构建 -> 验证 -> 交付它模拟的“真实设计团队的工作流程”
README 里面甚至明确写了：
Understand → Route → Plan → Approve → Build → Verify → Deliver
cc-design内置了Anti-AI Slop Rules，如果你用过ai射给你成果网页，你就能得到渐变、毛玻璃、emoji、发光、浮夸卡片、Dribbble 风格垃圾UI。一开始觉得挺好看，后来就看你了，所以尝试了会有ui ux pro max这样的设计skills。
Claude Code安装方式：
# 1. Add the cc-design marketplace/plugin marketplace add ZeroZ-lab/cc-design# 2. Install the plugin/plugin install cc-design@cc-design# 3. Reload plugins to activate/reload-plugins
Codex安装方式：
# 1. Add the cc-design marketplace from GitHub/plugin marketplace add ZeroZ-lab/cc-design# 2. Install the plugin/plugin install cc-design@cc-design# 3. Reload plugins to activate/reload-plugins
安装完毕后自然语言就能使用。
“为我们的 SaaS（软件即服务）产品设计一个落地页”
“为第三季度董事会会议制作一份10页的融资/汇报演示文稿”
“搭建一个结账流程的交互式原型”
“制作一个交互式演示，展示我们的 RAG（检索增强生成）管道是如何运作的”
“制作一份 React 与 Vue 的对比说明”
“构建一个用于技术栈选择的决策树”
“用 Pentagram（五角设计联盟）的风格为这个 Logo 揭幕制作动画”
“将演示文稿导出为可编辑的 PPTX 格式”
cc-design 负责处理上下文收集、设计规划、质量检查和验证，我们只需要批准设计方案，剩下的就交给它来构建。