反模板化前端设计品味

解决什么问题

LLM 在写前端时很容易滑进一组默认美学：紫色渐变背景、居中 Hero 配暗色网格、三列等宽特性卡片、毛玻璃、Inter 配 slate-900。这套组合在落地页和作品集里被反复复制，结果每个项目看起来都像同一个模板。更麻烦的是，模型经常跳过对需求简报的解读，直接跳到默认方案，而不是先想清楚受众和风格词。

这个技能的目标不是“让 AI 自己选好看”，而是把设计决策拆成可门控的规则：先读懂需求，再设置三个旋钮，最后用工程纪律约束排版、布局、配色和交互状态。

核心工作机制

需求解读与设计解读

动手写代码前先读六类信号：页面类型、风格词、参考链接、受众、已有品牌资产和隐性约束。受众决定美学，不是模型自己的品味。隐性约束（无障碍优先、公共部门、受监管行业）会覆盖美学偏好。

解读完后输出一行 解读为：面向 ... ，... 语言，偏向 ... 。 如果简报真正有歧义，只问一个澄清问题。

三个设计旋钮

所有布局、动效和密度决策都由三个旋钮门控：

• DESIGN_VARIANCE（默认 8）：1 是完美对称，10 是艺术混沌
• MOTION_INTENSITY（默认 6）：1 是静态，10 是电影级物理动效
• VISUAL_DENSITY（默认 4）：1 是画廊透气，10 是驾驶舱密集数据

技能提供了信号推断表和用例预设表。比如信任优先/公共部门/无障碍场景会压到 VARIANCE 3-4、MOTION 2-3、DENSITY 4-5；代理/创意落地页会推到 VARIANCE 9、MOTION 8。

设计系统映射与默认架构

简报方向明确指向某套官方设计系统时，直接安装官方包：Fluent UI、Material 3、Carbon、Polaris、Primer、govuk-frontend、Radix Themes、shadcn/ui 或 Tailwind v4。每个项目只用一个系统，不手动重写其 CSS。

默认技术栈是 React 或 Next.js（Server Components）、Tailwind v4、Motion（从 motion/react 导入），字体始终自托管，不用 Google Fonts。图标允许 Phosphor、Hugeicons、Radix Icons、Tabler Icons，不鼓励 lucide-react，绝不手写 SVG。

布局与交互纪律

硬规则包括：Hero 必须装进初始视口、标题最多 2 行、桌面端顶部内边距上限 pt-24、桌面导航一行高度不超过 80px、一个布局家族最多出现一次、Bento 网格必须有节奏、min-h-[100dvh] 替代 h-screen。交互 UI 必须实现完整循环：加载态（骨架屏匹配最终布局）、空态、错误态、active 触觉反馈、按钮文字对比检查。表单标签在输入框上方，绝不用占位符当标签。

上下文感知策略

毛玻璃用 backdrop-filter 加 1px 内边框和微妙内阴影；磁性微物理和持续微交互只在 MOTION_INTENSITY > 5 且简报匹配时使用；滚动揭示优先用 whileInView 而非 GSAP；跑马灯每页最多一个。动效必须能回答“它传达什么”：层次、叙事、反馈或状态转换。

适用边界

技能明确不适用于仪表盘、数据表格或多步骤产品 UI，这些场景需要不同的密度和交互模型。每条规则都是上下文相关的，不会自动触发，需要先读需求简报再拉取适用规则。图片资产有明确优先级：AI 生成工具优先，picsum.photos 次之，最后留占位符告诉用户需要什么。纯文本页面不是极简主义，是未完成的作品。

所有第三方库导入前需检查 package.json，代码注释中诚实标注借用灵感与官方材料。斜体展示文字含降部字母时最少用 leading-[1.1]。页面主题在 layout.tsx 设置一次后不逐节覆盖。