构建任何 Web 前端时如何避免 AI 默认审美…

在构建或美化落地页、SaaS 应用、仪表盘、电商、演示文稿、文档、作品集等任何 Web 前端时，用一套「先定策略再定设计」的流程摆脱千篇一律的 AI 味界面。

适用场景

解决思路

1. 所有用户提问必须通过环境的问题工具提出，绝不用纯文本散文；一次只问一个问题，给 2–4 个可点选项，等回答后再继续；若环境无问题工具，则用散文按同样选项一次一个地提问。
2. 批量提出相关问题，每个问题给 2 到 4 个具体选项；只问会改变设计系统的高信号子集；先从上下文推断并确认推断，而不是重复追问。
3. Phase 0 先检查项目根目录（及 docs/ 等常见位置）是否已有 DESIGN.md：存在则读取、遵守其 token、跳过已回答的问题并扩展它；缺失则先解决下面三件事再动任何像素。
4. Phase 0 第一件事：分类 WHAT——判断产物类型（营销/落地页、定价页、SaaS 应用、仪表盘/数据工具、电商、市场、移动应用、AI/对话界面、邮件/通讯、博客/编辑出版物、引导/认证流程、设置/管理/CMS、演示/幻灯片、文档/API 参考、作品集/品牌站等），复合产物按区域分别设计。
5. Phase 0 第二件事：明确 WHO 和 WHY——受众、定位（企业 vs 创意 vs 技术 vs 奢华 vs 玩趣）、以及唯一的主要动作或结果。
6. Phase 0 第三件事：锁定文字——在任何视觉探索之前确定 3 到 5 个品牌形容词和一个 3 词美学本质；这是最高杠杆的输入，驱动字体、颜色、密度、圆角和动效。
7. 自适应地做发现：先推断、陈述推断、通过问题工具问高信号子集，并用 1 到 3 个参考锚定方向（若无参考，则网络搜索该产物类型与定位下当前优秀案例，然后转译而非原创）；在产物类型、定位和形容词锁定前不要继续。
8. 面对泛泛的简报（又一个仪表盘、又一个 SaaS 落地页）且品类本身没什么可说时，把参考搜索拓宽到产品自身品类之外，而不是在品类内要求更多创意。
9. Phase 1 用散文简要陈述承诺，每条都必须源自 Phase 0 而非条件反射：先确定一个有个性的美学方向，若用户给了品牌或参考则转译它；先推导 2-3 个真实候选再选一个，完全投入后再为可读性软化，并检查裸结构（而非仅样式化表面）是否落入品类默认。
10. 字体（品牌优先）：根据个性而非审美偏好选字体，把分类匹配到形容词，选适合内容的模块化比例，用对比配对（展示体 + 正文体）且不产生排版混乱；绝不用 Inter/Roboto/Arial/system 作为主字体。
11. 颜色（适配性 + 差异化）：先按品牌与受众适配选色，再找未被占领的领域（靛蓝/紫罗兰带是 AI UI 的红海，除非简报要求否则避开）；构建一个主色 + 一个锐利强调色 + 中性色 + 语义状态色，大致按 60-30-10 分布；用 OKLCH 编写。
12. Token 表（在组件之前输出）：展示体 + 正文体；字号比例（说明比例与基准，6 级）；间距基准单位；最多两个圆角值；一种阴影方案（定义边缘或柔和抬升，绝不在同一元素上同时用）；带角色的调色板（bg、surface、fg、muted、border、accent、accent-fg、success、warning、error），其中 surface 是必需项；一切引用 token，不散落 hex/px。
13. 签名动作：命名让这个 UI 令人难忘、明确非默认的那一件事，每个项目只做一个。
14. 适配器：选择技术栈语法——纯 CSS 自定义属性、Tailwind v4 @theme 或 shadcn 语义 token；references/token-core.css 是可移植的事实来源。
15. Phase 2 布局与构图：用意图组织空间——基准间距单位、组内紧凑组间宽松、有意图的网格（12 列、模块化或内容确实多变时用 bento）、至少一个针对简报的布局动作、用留白表达自信；打破居中最大宽度单列的反射。
16. Phase 2 组件与状态：为每个交互组件规定完整状态矩阵（默认、悬停、激活、聚焦、禁用、加载、错误、选中），而不只是静止态；正确处理按钮（按重要性排序而非按含义着色）、表单（真实标签、正确类型、保留输入的即时校验）、表格（文本左对齐、数字右对齐并用 tabular-nums、轻分隔线）、导航、浮层以及空/加载/错误状态。
17. Phase 2 动效：把动效当作沟通，置于时长与缓动 token 尺度之下；默认 ease-out 且 300ms 以内，只动画 transform 和 opacity，弹出层从触发元素缩放，绝不为高频操作加动画。
18. Phase 2 图标：整套图标统一网格、统一描边、统一圆角；不要让未修改的默认起始套件定义外观。
19. Phase 2 图像与插画：把图像当作系统来艺术指导；优先真实产品视觉而非图库和抽象图；避开 AI/图库指纹（指着笔记本的人、渐变团块、企业孟菲斯、默认 Midjourney）；用纹理和图形装置逃离扁平 slop。
20. Phase 2 深色模式与主题：若在范围内就要设计它（不要反转）：近黑而非纯黑、近白而非纯白、用明度表达抬升、降低强调色饱和度，全部由语义 token 驱动。
21. Phase 2 边构建边做无障碍：WCAG 2.2 AA——可见的受管焦点、键盘可操作、标签、24px 以上目标、不依赖颜色、减少动效；构建时内置，不要事后补。
22. 在构思结束时、方向与工艺决策锁定后，向用户建议一组相关的设计与组件目录供挖掘具体想法和现成实现，框定为通过已承诺系统转译的灵感（绝不克隆），并提醒核实组件许可；按产物类型和阶段挑选而非倾倒整份清单。
23. Phase 3 把一切写进项目根目录的单个 DESIGN.md：发现上下文、承诺的美学与签名动作、字体与颜色系统、token、间距/圆角/阴影规则、工艺层决策（布局、组件、动效、图标、图像、深色模式、无障碍）、slop 审计结果；在构建组件之前或同时写入，DESIGN.md 是唯一事实来源，若 CSS、适配器或组件漂移则以 DESIGN.md 为准；后续会话 Phase 0 读取该文件而非重跑发现。
24. Token 优先生成规则：颜色用 OKLCH，主色 + 锐利强调色而非怯懦的均匀分布；先在灰度中设计层级，最后少量加入强调色，大致 60-30-10（中性/品牌/强调）；在彩色背景上把同一色相变暗/降饱和而非变灰；定义语义状态色（success、warning、error），绝不把颜色作为唯一信号。
25. 字体规则：独特的展示体搭配精致的正文体，模块化比例并说明比例值；从 Fontshare/Google 获取；限制在 2 到 3 个字族。
26. 间距节奏：按关系变化间距（组内紧凑、组间宽松）；到处用同一个统一值是破绽。
27. 密度匹配产物：仪表盘和专业工具容忍高密度；营销和作品集页面要留白。
28. 实现复杂度匹配美学：极繁主义要精细细节；极简主义要克制与精确，而不是偷懒。
29. 绝不要用通用 AI 审美：过度使用的字体（Inter、Roboto、Arial、system-ui 作为主字体）；陈词滥调配色（尤其白底或深底上的紫/靛蓝/紫罗兰渐变）；把 hero + 3 张功能卡 + 推荐语 + CTA 样板当作唯一结构；图标方块在标题上方的功能卡模板；卡片上的侧标签强调边框；同一元素上叠加发丝边框和弥散投影；标题或指标上的渐变文字；装饰性玻璃拟态；团块圆角（小卡片上圆角 > 16px）；条件反射式的奶油/米色背景；弹跳/弹性缓动和给一切加微交互；无结构用途的装饰性网格线背景或径向聚光；并非真正实时内容上的脉冲状态点或自动滚动跑马灯；用手写 SVG 吉祥物代替真实插画。
30. 工艺层绝不要：不要交付只有静止态的组件；不要把占位文本当标签；不要按含义给按钮着色而不是按重要性排序；不要居中数字表格列或对数字用非等宽数字；不要让未修改的 shadcn/Tailwind 默认图标集定义外观；不要在需要真实产品视觉的地方用图库的指着笔记本的人、渐变团块、漂浮球体、光泽等距科技插画、企业孟菲斯人物或原始默认 Midjourney 图像；不要通过反转浅色调色板来做深色模式、用纯黑背景、纯白文字或条件反射式的发光彩色 box-shadow；不要动画布局属性（width/height/top/left）或忽略 prefers-reduced-motion；不要移除焦点轮廓而不替换、仅靠颜色传达含义或交付小于 24px 的目标。
31. 完成前自审：对照 references/slop-checklist.md 运行生成的 UI 并打分。
32. 自审第 1 步：验证它服务于 references/artifact-types.md 中该产物类型的优先级——读起来像作品集的仪表盘、或没有明确主要动作的落地页，即使漂亮也算失败——并验证字体与颜色选择匹配已承诺的形容词。
33. 自审第 2 步：验证工艺层——组件有完整状态矩阵、布局有节奏和有意图的动作、动效有沟通性且尊重 reduced-motion、图标是一套连贯系统、图像不是图库/AI slop、深色模式（若有）是设计而非反转。
34. 自审第 3 步：运行 references/accessibility.md 中的无障碍门禁（焦点、键盘、对比度、目标尺寸、颜色独立）；无障碍是及格/不及格的门禁，不是锦上添花。
35. 自审第 4 步：像第一次看到一样，把 DESIGN.md 的美学承诺与实际渲染对照重读，并做 references/divergence.md §6-7 的裸结构检查——仅逐条对照破绽清单可能在仍然通用的输出上得满分。
36. 自审第 5 步：若任何破绽触发或适配错误，在展示前重新生成该部分。
37. 自审第 6 步：把结果记录到 DESIGN.md 的 slop 审计部分并更新其变更日志，说明所用的产物类型、定位、形容词、美学、字体系统、调色板与签名动作。
38. 所有清单项都必须在单次构建内可检测；不要发明模型无法验证的跨代规则。部分项需要渲染页面而非仅源码（见 references/slop-checklist.md 的 Layout defects 与 Build correctness 部分）——只要有截图或实时浏览器就运行它们。

适用边界 · 注意事项

• 不适用于撰写营销文案。
• 若环境没有提问工具，仍按同样选项用散文一次一个提问，而不是跳过提问。
• 在产物类型、定位和形容词锁定之前不要继续设计。