如何用 AI 做设计而不撞出千篇一律的界面

如何用 AI 做设计，而不拿到同一个屏幕两次 August 27, 2026 · 10 min read · View source ↗ AI Claude Design 我让 Claude 给同一个落地页做了四个版本。 它四次给了我同一个页面。 居中的 hero。渐变色块。三张等宽卡片。不同的文案，相同的设计。 问题不在 Claude。我的 brief 把每一个重要决策都留成了开放题，于是模型返回了公开网络上最安全的那个平均值。 "干净且高级"不是一个设计方向。它是生成平庸结果的许可。 修复方法是五个有约束力的决策： 字体 颜色 间距 形状 动效 一旦这些值被固定下来，大多数可能的屏幕就变得非法了。到那时，输出就不再收敛了。 下面就是我现在在生成屏幕之前，会放进仓库里的那段约束块。 在你生成之前复制这个 DESIGN CONSTRAINTS (binding) Type: [family]. Sizes: [12/14/16/24/40]px only. Weights: [400,600] only. Color: bg [hex], fg [hex], accent [hex], muted [hex]. No other color. Spacing: multiples of [4]px only. Radius: [6]px everywhere. Grid: [12] columns, max width [1120]px, gutter [24]px. Motion: [none] / [150ms ease-out on hover only]. Forbidden: - mesh behind text - emoji as icons - fabricated metrics or testimonials - centered body copy longer than one line - a second radius If a constraint makes the request impossible, stop. Do not improvise a new design token. Structure first. No decoration until the hierarchy is approved. 把每一个方括号都填上真实的值。然后把这块内容移出聊天，放进 AGENTS.md、CLAUDE.md，或你的 token 文件里。 如果它只存在于对话中，它就会随对话一起消失。 为什么 AI 老是返回同一个屏幕 模型是在采样一个可能的续写。 "让它现代、干净、高级"命名了网络上的一个巨大区域。那个区域里最密集的点，看起来都很眼熟： 居中的标题 短副标题 发光渐变 主 CTA 和次 CTA 三张等宽功能卡片 虚假的社会证明 收敛，就是模型替你补全了那些你没定下来的决策。 形容词描述的是街区。约束关闭的是道路。 这个区别很重要，因为多加形容词很少能让输出走远。"优雅、未来感、精致、打磨"仍然指向同一个高概率簇。 一个四色色板和一个被允许的圆角，改变的是采样空间。一段关于品味的文字，改变不了什么。 > 模型返回它所见过东西的平均值。而设计，是你拒绝让它去平均的那部分。 首先，选对设计席位 不要让一个工具去想象、结构、实现、验证，并交接同一个产物。 按活儿来选席位。 电影级生成：氛围 当"表面"本身就是产品时，用图像生成：一篇文章封面、一种情绪、一个材质世界、一尊雕像、一片粒子场、一个金色网格。 在缩略图尺寸下验证它的轮廓。 别让这个席位去保住六个精确的标签、一套字体层级、或一份数据密集的合同。那不是它擅长的。 HTML 和 CSS：精确信息 当标签、层级、间距或重复字段必须精确时，用 HTML 和 CSS。 这是清单、对比、合同、价格表或技术图表的正确席位。 但精确不等于视觉上毫不相关。如果封面用的是黑色石材和金色几何，那它下面一张默认的 Tailwind 卡片仍然是错位的图形。 v0：快速的第一屏 当你需要快速得到一个能跑的草图时，用 v0。 那个 URL 是设计过程的起点，而不是"现在存在一个设计系统了"的证明。 导出有用的结构。绑定到你的 token 上。删掉默认值。 仓库里的 Cursor 或 Claude：实现 当真实的 token、组件、约束和 diff 已经存在于项目里时，用仓库这个席位。 模型应该读取规则并复用那些原语。它不该因为某个组件"需要更多对比度"就发明出第五种颜色。 Figma：人类可编辑的交接 当设计师需要在不读 CSS 的情况下检查和修改产物时，用 Figma。 在屏幕通过浏览器验证之后再做往返。从 Figma 开始，解决不了缺失约束的问题。它只是给了模糊性一些把手。 规则很简单： > 每个席位一个活儿。所有席位共用一套系统。 让一套系统成立的五个决策 1. 字体 选一个字体族、一个小字号阶梯、两个字重。 别让模型为每一个语义细节都挑一个新字号。层级应该来自一组刻意精简的对比。 示例： Family: Geist Sizes: 12 / 14 / 16 / 24 / 40 Weights: 400 / 600 2. 颜色 把背景、前景、强调色和弱化色的值命名出来。 四种颜色足以建立层级。第五种通常出现，是因为系统没有定义好某个角色。 示例： bg: #0A0A0A fg: #F4F4F0 accent: #D5A62E muted: #77776F 3. 间距 选一个基准单位，并使用它的倍数。 这会消除模型对每个间距都独立"目测"的倾向。 重点不是 4px 普遍正确。重点是 18px、23px 和 31px 需要有一个存在的理由。 4. 形状 选一个圆角、一种边框处理。 如果卡片用 6px 圆角，按钮用胶囊形，弹窗用 16px，徽章用 4px，那你就没有表现力范围，你只有一个屏幕上四个系统在互相谈判。 5. 动效 命名什么在动、动多久，或者决定什么都不动。 "让它活起来"邀请的是装饰性动效。"只在 hover 时 150ms ease-out"定义的是行为。 空的字段不是灵活性。它们是委派出去的设计决策。 ——"按你需要的产物来挑选生产席位，然后让一套系统贯穿所有席位。" 先生成无聊的版本 第一个合规的屏幕，应该比模型正常输出看起来更朴素。 这是好事。 沉闷而系统化，是便宜的可改进项。独特却脱离系统，通常需要重写。 在装饰之前先生成结构： 只构建页面层级。 使用项目规则里那些有约束力的设计约束。 不要加渐变、插画、用户证言、指标或动效。 返回： 内容顺序 组件树 实现后的屏幕 每一个用到的、但尚未被定义的 token 如果需要用到未定义的 token，停下并询问。 如果模型返回了色板之外的一个 hex 值，或系统之外的一个圆角，不要打磨页面。合同已经被打破了。 分三遍审查，从最便宜的开始 大多数人审查生成设计的方式是反的。他们在层级还不对的时候，就先去对抛光做反应。 用这个顺序代替。 第一遍：结构 把屏幕当一份大纲来读。 它说的是对的内容吗？ 它们的顺序对吗？ 主行动出现的时机对吗？ 有没有哪一节可以删掉？ 生成的落地页往往在确立问题之前就先解释功能。任何阴影调整都修不了那个。 第二遍：系统 把每一个可见的决策都追溯回一个被命名的 token。 在 diff 里搜索： 第五种颜色 第二个圆角 一次性边距 任意的字体大小 新阴影 规则之外的动效 如果第二遍失败了，停下。别在一个坏掉的系统上再去猎审美痕迹。 第三遍：猎痕迹 现在才轮到用你的品味。 寻找那些暴露未编辑模型输出的习惯： hero 后面的渐变色块 三张等宽卡片 虚假的用户证言 装饰性的仪表盘图表 过大的胶囊按钮 "seamlessly"这个词 反馈必须点名决策。 "让它更高级"会产出阴影。 "提高推荐档位的字重，并降低相邻两档的对比度"会产出一个层级。 实操示例：一篇文章，而不是三个品牌 我在做文章配图时遇到了同样的收敛问题。 封面是电影级的：暖黑、裂纹石材、金色几何。然后第一张内嵌图以一张扁平的深色 HTML 卡片出现了。第二张看起来像一份奶油色的技术文档。 每张图单独看都能接受。放在一起，它们看起来像三个产品。 修复不是给每张图更好的 prompt。而是一条继承规则： 锁定一个视觉家族。 命名被禁止的画面框架。 在电影级席位里生成封面。 让每一张内嵌图都从封面播种。 保留色板、材质、字体和物件类别。 改变构图，而不是世界。 在文章最终尺寸下验证每一张图。 对这篇内容，规则变成了： Family: monochrome technical blueprint Palette: warm black, white, restrained gold Material: grid, vector line, particle field Typography: condensed white display + small technical labels Object class: systems diagrams, not glossy dashboards Forbidden: - purple gradients - unrelated cream cards - copied competitor frames - generic chatbot mascots - decorative fake metrics 有用的输出不是一张更漂亮的图。而是一个下一张图必须继承的世界。 真正要紧的失败模式 约束只活在聊天里 下一个会话又从形容词开始了。把规则放进仓库。 样式先于结构 你把昂贵的品味那一遍，花在了一个你之后会删掉的层级上。 一个工具包揽所有活儿 图像生成无法保证一张六行的收据。HTML 无法造出一尊有说服力的石像。一张快速的 UI 草图不会替你发明品牌。 反馈停留在主观 "更高级"不可操作。点名字重、间距、对比度、顺序或材质。 占位式的证明幸存下来 生成的用户证言和指标，一旦页面上线，就不再是无害的填充。 每张内嵌图都从零开始 文章变成了一个情绪板，而不是一套系统。 系统不断膨胀 每个会话加一个新颜色和新圆角，最终会造出你用 AI 本来想避开的那种不一致。 什么时候不用这套循环 当布局本身就是产品时，不要用它：一个画布工具、一种新颖的交互、或一个密集的专业工作台。手绘核心交互可能比纠正一个可能的模板更快。 不要用它来发明品牌。那个区分性的决策，恰恰是统计中位数无法替你做出的部分。 不要信任未经审查的生成标记，用于对无障碍至关重要的流程。焦点顺序、键盘行为、语义、错误恢复，以及 reduced-motion 支持，都需要刻意验证。 而且，在你填好五个字段之前，不要打开模型。先在一块屏幕上亲手做出那些决策。 操作循环 生成之前： 挑好席位。 填好字体、颜色、间距、形状和动效。 把约束放进仓库。 命名什么是被禁止的。 生成之后： 审查结构。 追溯系统。 猎痕迹。 在最终尺寸下验证。 让每一个兄弟产物继承同一个世界。 一块生成的屏幕，不是因为它看起来贵就算完成。 当每一个可见的决策，要么能追溯回系统，要么是你选定的那一个刻意例外时，它才算完成。 拿一块你已经上线的屏幕，跑一遍这个约束块。 哪个字段还是空的？ 获取下一封字段笔记 什么上线了。什么坏了。它背后的系统。 免费获取下一封： https://nyk.dev/#newsletter 私密 alpha 频道： https://t.me/+GJ-FEpzcZrtmMTky Tags: # X # AI # Claude # Design # Guide Related articles Building a software factory a portrait of my software factory AI SEO Design Claude