反模板化前端设计品味

为什么 LLM 的前端设计总像套模板

做落地页或作品集时，你可能遇到过这样的代码：居中 Hero 配暗色网格背景，三张等宽特性卡片，标题是 Inter + slate-900，按钮用紫色渐变，甚至毛玻璃效果只是 backdrop-filter 的默认参数。这些不是设计师的选择，而是 LLM 的「默认美学」——它会跳过需求解读，直接套用训练数据里最常见的组合，结果就是千篇一律的「AI 味」页面。更糟的是，当你明确想要「安静的编辑风」或「粗野主义」时，模型可能还是会偷偷回到默认值，或者用 lucide-react 的通用图标、手写 SVG 凑数，让页面看起来像半成品。

这个技能如何工作

它的核心是把「设计决策」从模型的潜意识里拉出来，变成显式的、可控制的步骤。第一步是「需求解读」：在写任何代码前，先读简报里的页面类型（落地页/作品集）、风格词（极简/Linear 风）、受众（B2B 采购委员会 vs 设计敏感用户）和隐性约束（无障碍/公共部门），然后输出一行设计解读，比如 解读为：面向招聘者的开发者作品集，编辑风语言，偏向低密度与克制动效。如果简报模糊，只问一个澄清问题——能从上下文推断的绝不多问。

接下来是「三个旋钮」：DESIGN_VARIANCE（1=完美对称，10=艺术混沌）、MOTION_INTENSITY（1=静态，10=电影级物理动效）、VISUAL_DENSITY（1=画廊式透气，10=驾驶舱式密集）。比如「高端消费」简报对应旋钮 7-8（VARIANCE）、5-7（MOTION）、3-4（DENSITY），「公共部门服务」则降到 3-4（VARIANCE）、2-3（MOTION）、4-5（DENSITY）。这些旋钮不是装饰，而是后续所有布局、动效和密度决策的「门控」——比如 MOTION_INTENSITY > 5 时才会考虑磁性微物理，VISUAL_DENSITY < 3 时才会用大量留白的编辑网格。

然后是「诚实的设计系统选择」：如果简报明确要「微软企业 SaaS」，就用 @fluentui/react-components；要「Shopify 应用」就用 polaris.js；要「现代 SaaS 且你拥有组件」就用 shadcn/ui。每个项目只用一个系统，不手动重写官方 CSS——这不是偷懒，而是避免「伪 Material 风」或「假 Carbon 设计」的尴尬。如果简报是「毛玻璃」「Bento」这类美学方向，就用对应的技术实现（比如 backdrop-filter 加实色回退，CSS Grid 混合单元尺寸），并明确标注这是 Web 端的近似实现。

技术栈和规则部分，它坚持 React/Next.js + Server Components、Tailwind v4 默认样式、Motion（原 Framer Motion）做动效，字体必须自托管（绝不用 Google Fonts）。图标只允许 @phosphor-icons/react、hugeicons-react 等四个库，lucide-react 仅在用户明确要求时用，绝不手写 SVG；每个项目只用一个图标族。布局上，用 min-h-[100dvh] 代替 h-screen 做 Hero，用 CSS Grid 代替复杂 flex 百分比，移动端折叠必须显式声明，Bento 网格不能重复同一构图，布局家族最多出现一次。

适用边界与注意点

它不适用于仪表盘、数据表格或多步骤产品 UI——这些场景需要的是信息密度和操作效率，而不是反模板化的美学实验。所有规则都是「上下文相关的」，不会自动触发：比如「衬线字体非常不鼓励作为默认」，只有简报明确要「编辑/出版/传统风」时才会用；「暗色模式页面所有节都是暗色」，不会在中间夹暖白。另外，它强调「动效必须有动机」：每个动画都要回答「它传达什么？层次、叙事、反馈还是状态转换？「看起来酷」不是有效答案。