前端设计系统指南

问题：AI 生成的界面长得太像

当提示词只写「做一个现代化的落地页」，模型往往会给出高度趋同的结果：Inter 或 Roboto、紫到粉的渐变、左文右图的标准 Hero 区、三列等宽的功能卡片、满屏毛玻璃。这套组合放在任何产品里都不算错，也因此毫无辨识度。

这个技能的价值在于把「避免平庸」拆成一组可执行的约束：先列出反模式，再给出替代方案，最后用检查清单收尾。

技能如何工作

规则按四个层面组织：

• Typography：禁止全站同一字族，要求标题与正文使用不同字族（衬线 × 无衬线）。资料给出 5 组可直接使用的配对，例如 Playfair Display + Source Sans Pro（经典现代）、Space Grotesk + Inter（技术极简）、Syne + Outfit（大胆现代）。字重需覆盖 300/400/600/800，并用字距制造视觉层级。
• Colors：避开默认 Tailwind 调色板和高饱和霓虹色。实操路径是用 HSL 做细微色相偏移、暗色模式下降饱和并调明度、把 success/warning/error 等语义色也对齐品牌色板。
• Layout：默认网格是平庸感的主要来源。技能推荐非对称比例（5:7、2:3）、元素重叠与负边距、斜向区块切分、Bento 网格，以及更大胆的留白。
• Animation & Motion：动效集中在三个高影响时刻——页面加载、交互反馈、状态变化，时长按 150-300ms（微交互）、300-500ms（页面切换）、500-800ms（复杂动画）控制，而不是给所有元素加动画。

背景层建议使用微妙的噪点纹理、克制的几何图案、渐变 mesh、抽象 blob 或视差图层。实现前有一份 6 项进度清单，覆盖字体、配色、布局、动画、背景与一致性检查。

适用边界

这是一套设计决策框架，不是组件库，也不附带任何代码。它没有规定构建工具、框架或状态管理，落地实现需要自己完成。

两点提醒：字体与配色建议是起点而非定律，实际选择仍受品牌约束；easing 函数一节在资料中是残缺的，需要另行补齐，不要凭印象填默认值。