前两天我看到有人把 Claude Design 的系统提示词整理出来了。仓库叫 Trystan-SA/claude-design-system-prompt。我花时间看了一遍。虽然 A 社太 xxx 但是不妨碍我们研究它的产品主打就是一个把它给蒸了。我看完之后有一个深深的感触就 A 社这帮 shit 看来也被 AI 味折磨得够呛啊基本上大家有 AI 味儿的观感全写进去了。连最近特别流行的米白底 衬线大标题 陶土色都写进了违禁清单说这玩意儿就是去年的紫色渐变。。。。。。就这种。我估计大家最近也被这种 AI 味儿折磨的不轻。不过让我纳闷的是你这用 prompt 去掉 AI 味儿会不会又变成一种 AI 味儿了老实说把 647 行 prompt 全部贴出来没啥必要。大部分人也不会逐行看完。我拎出来了一些我认为不错的细节给大家过一遍。这份 prompt 基本把 AI 做设计为什么一股 AI 味儿说清楚了。▲ GitHub 仓库首页截图时间为 2026 年 7 月 7 日这份 prompt 在倒逼着 Claude 别瞎搞。不要乱加内容。不要套默认模板。不要把静态图当成成原型。不要一上来就把页面整的跟站长站点似的整个页面是满的层次不分明第一件事身份和职责▲claude/system-prompt.mdL1-L19开头直接来了一句提纲挈领的话You are not a code generator who happens to make designs. You are a designer who happens to use code.Claude 应该把它自己的身份当是 expert designer专家设计师。用户则是它的 manager经理。除非用户特别指出Claude 默认用 HTML、CSS、SVG 和 JavaScript 来交付。但 L5 特意强调HTML 只是工具具体做什么还是得听 manager 的manager 想让你变成什么你就得变成什么比如 UX 设计师、幻灯片设计师、原型设计师、动画师、品牌设计师。L7 这句话的意思Generic AI aesthetics are a failure mode, not a default.它说的是如果一眼能看出是 AI 批量生成的通用式的 AI 审美就是失败的设计这种设计不能把它当成默认方案。然后是全文总纲L11You are not a code generator who happens to make designs. You are a designer who happens to use code.你不是一个碰巧会做设计的生成代码的 AI 你是一个会碰巧用代码干活的设计师。好一个角色互换这俩有什么区别原文自己解释了三层意思。生成代码的 AI 会生成看起来还不错的输出结果把页面填满。而设计师会先问这一页到底干嘛、用户第一眼该注意哪里、哪些可以直接干掉。生成代码的 AI 容易照抄当下流行的渐变、字体和卡片而设计师会先确定颜色、字体、间距、组件等规则然后整套设计都按这套规则来。生成代码的 AI 会机械性的满足用户需求当用户说加一个模块它就加而设计师如果发现加东西会把作品搞崩了就应该解释原因并提出反对意见。也就是说Claude Design 的第一件事是先把 Claude 从只会写前端这个身份里给拎出来。你会将设计师的判断力融入到每一个作品中。你有自己的观点但同时也会尊重你的用户因为他们是你的 manager 他们比你更了解他们的受众和目标。第二件事工作流▲ 原文 L21-L60很多 AI 很爱问问题比如一般会问项目背景是什么目标用户是谁品牌调性是什么喜欢什么风格需要几套方案要不要深色模式听起来 AI 像是在很正经的向用户询问一些设计方案但实际上用户经常只想先让它动起来别问太多问题。原文这里规定了只问那些答案有可能会改变设计的问题。需求不清楚、品牌缺失、是否要做多套方向这些可以向用户询问。改个按钮样式、改个默认值、做两种差不多的排版Claude 自己选就行了只要在交付给用户的时候说一下就行了。还有一句我觉得很实用Build a skeleton, show it early.你需要搭建一个框架然后将其尽早展示出来。最怕的就是一下子在后台吭哧吭哧做完 15 页的设计然后发现方向从最一开始就错了。在设计中出的毛病发现的越晚成本越高。LLM 尤其特别容易犯这个毛病因为它不会心疼自己白干了多少活。。。也不会担心自己消耗了多少 token 。。。第三件事别为了塞满页面乱加东西▲ 原文 L88-L120第五章叫 No filler。这是全文最值得给所有 AI 写的前端钉在耻辱柱上的一章。LLM 做页面有个老毛病了那就是有的没的都喜欢一顿乱加。材料不够它就开始自己脑补。▲ 每个页面元素都要过一遍这五个问题所以 L90 上来就规定页面上的每一个元素都得说清楚出现在页面上的缘由。这些元素要么传递必要信息要么起到推动内容的作用要么承担视觉结构。如果三种规定都不满足直接干掉。第四件事AI 味儿的黑名单这节是我看完最爽的一段了。原文直接给 AI 味儿列了一张黑名单。▲ 原文 L122-L178▲ 一张页面里塞进了 Prompt 直接点名的五样东西三色以上大渐变默认别用。彩虹、霓虹撞霓虹基本就是 AI 味儿的模板。真要用渐变就同色系、低对比、两个色标。Emoji 也一样。标题前面为了 emoji 而 emoji 比如硬加 、、✅这种直接干掉。想起来了很多 LLM 的输出都会直接加上✅ 这种 emoji 了 卡片也逃不过被点名的宿命普通内容不需要border-radius: 12px再加上border-left: 4px solid。左边状态色条应该留给提醒、警告、状态。拿它铺满页面就是标准的 AI SaaS 模板。还有最近很流行的那模版奶油色背景衬线大标题标题里夹一个斜体词再配陶土色或琥珀色。中招了有木有▲ 这套组合大概就是奶油底、衬线大标题、标题里夹斜体词再用陶土色或琥珀色做强调好家伙蓝紫色渐变被骂下去之后奶油色接班了。这套东西用在杂志、酒店、作品集里没问题。但你非用在开发者工具、企业后台、金融、医疗等领域这叫个什么事儿我当时确实认为这种风格应该用在杂志、作品集中甚至婚纱摄影中。。。第五件事视觉结构▲ 原文 L180-L250这一段可谓是直接把 Claude 拴起来拿鞭子抽了。卡片之间留空多少按钮里面留多少标题用多大的Claude 都得恭恭敬敬的照着执行。比如上面留空17px下面留空19px换张卡片又冒出一个23px。每张卡片大小单独用都没事儿但如果乱用直接一团麻了。原文要求间距尽量从 4px 或 8px 的倍数里选8、16、24、32 都可以。字体也是一样的。正文固定 16 px说明文字固定 14 px标题从 24、30、36 里选。别这会儿用 19 px下一次又变成 21 px。后面复制一张卡片、增加一个表单直接沿用前面样式即可。▲ 左右用的是同一份内容。右边只改了字号、灰度、留白和按钮样式原文里的visual hierarchy说的是用户打开页面以后能先看到什么。标题、说明和按钮如果差不多大两个按钮又是一个颜色没有明显的层次感用户的关注点不知道首先应该放在哪里。但你如果把标题字号拉开只留一个蓝色主按钮查看文档改成普通入口层次感就来了先看标题再看说明然后决定要不要点按钮。rhythm管的是页面往下滚时页面排版能否保持统一性。假设页面连续介绍三个功能。第一段左边放文字、右边放截图滚动到下一页的时候应该也保持这样。等三个功能介绍完页面开始讲价格等商业案例时再换背景或版式。这样便于用户能看出内容已经到了下一部分。第六件事交互和反馈▲ 原文 L352-L410第十一章讲的是交互反馈。一个按钮至少准备 default、hover、active、focus、disabled 五种不同的风格。如果它会发送请求的话需要再来一个 Loading。。。第十二章说的是一件很小的事情别让用户猜。一个页面中最重要的按钮应该只有一个。AI 很容易把页面做成按钮展览开始使用、预约演示、查看文档、了解价格、联系我们全都做得又大又亮。结果用户扫了一圈脑子里只剩一个问题我到底该点哪个最后给了一个 5 秒测试。把页面展示给用户让他观看五秒钟然后把页面关了问他刚才应该点哪里。他说不出来基本上这个设计就可以直接干掉了。第七件事组件才是资产▲ 原文 L412-L449原文有一句Design components, not pages.这句容易听起来很抽象。翻译成人话就是先把能复用组件做好再用这些组件去填充页面。▲ Header、Hero、FeatureCards、CTA、Footer放到页面里大概就是这些位置一个普通的产品页往往可以拆成顶部导航、首屏主区域、功能卡片、行动按钮区和底部信息。每一页都重新画一遍按钮那不叫设计系统那叫克鲁苏。按钮要有 primary、secondary、ghost要有尺寸、图标和 loading。卡片、输入框、弹窗、表格行也是一样。间距、颜色、字体、圆角、阴影这些都应该能复用。做到这里模型交付的东西才能考虑复用性和拓展性。其他人才能拿这套东西继续复用。第八件事别拿 HTML 串几张静态图▲ 原文 L451-L489第十四章别拿 HTML 重新做一个 Figma。假设 Claude 设计的是一张注册页。用户填完邮箱点继续后如果邮箱写错了输入框下面要显示错误完成之后页面会进入下一步。这是真实发生的业务事件。而 Figma 虽然能够用来画界面、做设计稿也能制作可点击的演示原型但 Figma 不会发生真正的业务事件。第九件事功能不需要太多▲ 原文 L491-L563比如用户要做五个功能Claude 很容易先搭五个空壳而且搭建速度很快。原文要求它先找出最重要的三个把入口、操作、错误状态和最终结果全部做完。比如结账用户要能填写地址、选择付款方式、提交订单。支付过程中要有 loading填错以后要显示错误成功和失败也能跳转到相关结果页。优惠券、会员积分、邀请好友等功能不着急加。用户如果真要多套方案差别也得落在布局、内容顺序或交互上。把蓝色按钮改成紫色不能算是第二套方案。第十件事另外一个 Agent 挑错▲ 原文 L565-L598第十八章要求 Claude 每完成一次明显的视觉修改就需要把页面交给 verifier 检查。verifier 就是另外一个 Agent 专门负责验证和挑错用的这个 verifier 不负责重新设计。它截图、查看布局、用键盘走一遍页面再检查 JavaScript 有没有报错。发现输入框没有 label、按钮对比度太低、focus 看不见就会把问题抛出来。等主 Agent 改完之后再检查一次。后面的polish-pass又会叫过来四个负责检查的 Agent检查有无视觉阻碍、AI 模板味、页面层级和交互状态。这更像分工验收做页面的 Agent 负责改页面检查 Agent 只管找视觉缺陷。Available skills14 个工具该怎么用最后一章列了 14 个 skills。▲ 原文 L600-L647Available skills 就是一张工具的使用清单Claude 接到任务以后不需要把 14 份说明全部读一遍。它先判断现在要做什么再打开对应的 skill。从零开始做页面会用到discovery-questions、frontend-aesthetic-direction、wireframe和make-a-prototype。先根据用户提供的材料再问缺少的信息确定字体、颜色和页面密度画线框图最后把交互原型做出来。如果用户已经有网站或品牌系统Claude 会先用design-system-extract明确颜色、字体、间距和组件规则。需要把现有页面整理成一套可复用组件时再用component-extract拆按钮、卡片和表单接着用generate-variations给出不同方案需要现场调参数时再加make-tweakable。做幻灯片则单独调用make-a-deck。剩下五个负责检查。accessibility-audit会检查对比度、键盘和 label 标识ai-slop-check会检查渐变、emoji 和模板味hierarchy-rhythm-review会先看页面应该从哪里开始interaction-states-pass会检查 hover、focus、loading 和 disabled 的交互情况。polish-pass会把前面四项一起跑完收集问题修完以后再检查一次。所以从零做一张页面大概是这条顺序discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass已经有品牌和现成页面则会使用另外一条路线design-system-extract → generate-variations → make-tweakable → polish-passAvailable skills 只负责告诉 Claude 该打开哪份操作手册。具体怎么问、怎么画、怎么检查都写在对应的 skill 文件里。我看完以后我觉得 Claude Design 的做事是有点套路的。先把用户给的截图、品牌手册和代码读完缺什么再问你的 manager 。先把方向确定把骨架图画出来错了就及时修复。页面开始设计之后页面上的每个元素都要有交代按钮点到哪里数字从哪来组件能不能复用表单提交后会发生什么。甚至少了一个 focus 状态都算没做完。而且就算做完设计之后。还得经过层层检查verifier 再把对比度、label、页面层级和交互状态查一遍。发现问题就让 Claude 改改完再做最终确认。这才是一个生产级的设计方案。
