反模板化前端设计技能（Anti-Slop Frontend）
> 适用于落地页、作品集和改版项目。不适用于仪表盘、数据表格或多步骤产品 UI。
> 以下每条规则都是上下文相关的，不会自动触发。先读需求简报，再拉取适用规则。
0. 需求解读（行动前先读懂房间）
在写代码或调参数之前，推断用户真正想要什么。大多数 LLM 的设计输出很烂，因为模型跳到了默认美学而不是读懂需求。
0.A 先读这些信号
- 页面类型 — 落地页（SaaS / 消费 / 代理 / 活动）、作品集（开发者 / 设计师 / 创意工作室）、改版（保留 vs 颠覆）、编辑/博客
- 用户用的风格词 — "极简"、"安静"、"Linear 风"、"Awwwards"、"粗野主义"、"高端消费"、"Apple 风"、"活泼"、"严肃 B2B"、"编辑风"
- 参考信号 — 用户给的链接、截图、竞品名
- 受众 — B2B 采购委员会 vs 设计敏感消费者 vs 看作品集的招聘者。受众决定美学，不是你的品味
- 已有品牌资产 — logo、配色、字体、摄影。改版时这些是起点
- 隐性约束 — 无障碍优先、公共部门、受监管行业、信任优先的商务、儿童产品。这些覆盖美学偏好
0.B 生成代码前先输出一行「设计解读」
> 「解读为：\<页面类型> 面向 \<受众>，\<风格> 语言，偏向 \<设计系统或美学方向>。」
0.C 简报模糊时只问一个问题
只在设计解读真正有歧义时问一个澄清问题。能从上下文推断的就不问。
0.D 反默认纪律
不默认使用：AI 紫色渐变、居中 Hero + 暗色网格、三个等宽特性卡片、通用毛玻璃、无限循环微动画、Inter + slate-900。这些是 LLM 默认值，要有意识地越过它们。
1. 三个旋钮（核心配置）
设计解读之后，设置三个旋钮。所有布局、动效和密度决策都由此门控。
| 旋钮 | 默认值 | 含义 |
|---|---|---|
| DESIGN_VARIANCE | 8 | 1=完美对称，10=艺术混沌 |
| MOTION_INTENSITY | 6 | 1=静态，10=电影级/物理级 |
| VISUAL_DENSITY | 4 | 1=画廊/透气，10=驾驶舱/密集数据 |
1.A 旋钮推断表
| 信号 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 极简/干净/安静/编辑风 | 5-6 | 3-4 | 2-3 |
| 高端消费/Apple 风/奢侈 | 7-8 | 5-7 | 3-4 |
| 活泼/实验/代理风 | 9-10 | 8-10 | 3-4 |
| 落地页/作品集（默认） | 7-9 | 6-8 | 3-5 |
| 信任优先/公共部门/无障碍 | 3-4 | 2-3 | 4-5 |
1.B 用例预设
| 用例 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 落地页（SaaS 主流） | 7 | 6 | 4 |
| 落地页（代理/创意） | 9 | 8 | 3 |
| 落地页（高端消费） | 7 | 6 | 3 |
| 作品集（设计师/工作室） | 8 | 7 | 3 |
| 作品集（开发者） | 6 | 5 | 4 |
| 编辑/博客 | 6 | 4 | 3 |
| 公共部门服务 | 3 | 2 | 5 |
2. 需求 → 设计系统映射
2.A 何时使用真实设计系统
| 简报方向 | 使用 | 原因 |
|---|---|---|
| 微软/企业 SaaS | @fluentui/react-components |
官方 Fluent UI |
| Google 风 / Material 产品 | @material/web + Material 3 tokens |
官方可主题化 |
| IBM 风 B2B | @carbon/react + @carbon/styles |
官方 Carbon |
| Shopify 应用 | polaris.js / Polaris React |
Shopify 必需 |
| GitHub 风开发工具 | @primer/css 或 @primer/react-brand |
官方 Primer |
| 公共部门（英国） | govuk-frontend |
法规要求 |
| 现代 React 基础 | @radix-ui/themes |
原语 + 精致主题 |
| 现代 SaaS（你拥有组件） | shadcn/ui | 你拥有代码 |
| Tailwind 基础 SaaS/AI 营销 | Tailwind v4 + dark: |
独立/小团队默认 |
诚实原则：如果简报匹配上述系统，安装并使用官方包。不手动重写其 CSS。每个项目只用一个系统。
2.B 简报是美学方向而非系统
| 美学 | 诚实实现方式 |
|---|---|
| 毛玻璃/磨砂玻璃 | backdrop-filter，分层边框，提供实色回退 |
| Bento（Apple 风格瓦片网格） | CSS Grid 混合单元尺寸 |
| 粗野主义 | 原生 CSS，等宽字体，原始边框 |
| 编辑/杂志风 | 衬线字体，不对称网格，大量留白 |
| 暗色科技/黑客风 | 等宽 + 霓虹强调，终端元素 |
| Apple Liquid Glass | Web 实现是 backdrop-filter 近似，标注清楚 |
3. 默认架构与约定
3.A 技术栈
- 框架：React 或 Next.js，默认 Server Components（RSC）
- 样式：Tailwind v4（默认）
- 动画：Motion（原 Framer Motion），从
motion/react导入 - 字体：始终使用
next/font或@font-face自托管，绝不<link>Google Fonts
3.B 状态管理
- 局部 UI 用
useState/useReducer - 全局状态仅用于避免深层 prop drilling（Zustand / Jotai / React context）
- 绝不用
useState跟踪连续值（鼠标位置、滚动进度），用 Motion 的useMotionValue
3.C 图标
- 允许库：
@phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react - 不鼓励：
lucide-react（仅用户明确要求时用） - 绝不手写 SVG 图标，缺少字形时安装第二个库
- 每个项目一个图标族
3.D 表情策略
默认不使用 emoji。用图标库字形替代。仅在用户明确要求活泼/聊天风格时允许使用。
3.E 响应式与布局
- 标准化断点：
sm 640、md 768、lg 1024、xl 1280、2xl 1536 - 页面布局用
max-w-[1400px] mx-auto或max-w-7xl包含 - 绝不用
h-screen做全高 Hero，始终用min-h-[100dvh] - 绝不用复杂 flex 百分比计算，始终用 CSS Grid
4. 设计工程指令（偏差修正）
LLM 倾向套用陈词滥调。每条规则都有上下文感知的覆盖路径。
4.1 排版
- 标题：默认
text-4xl md:text-6xl tracking-tighter leading-none - 正文：默认
text-base text-gray-600 leading-relaxed max-w-[65ch] - 无衬线选择：不鼓励默认用
Inter。优先选Geist、Outfit、Cabinet Grotesk、Satoshi - 衬线纪律：衬线字体非常不鼓励作为默认。"感觉有创意/高端"不是选衬线的理由。只有品牌简报明确命名衬线字体、或美学方向确实是编辑/出版/传统/复古时才用
- 斜体降部保护：斜体展示文字含降部字母（y g j p q）时，
leading-[1]会裁切，最少用leading-[1.1]
4.2 配色校准
- 最多 1 个强调色，饱和度 < 80%
- 紫光规则：AI 紫/蓝光美学不鼓励作为默认。用中性底色 + 高对比单一强调色
- 一个调色板锁全局：选定强调色后全页面统一，不在第 7 节突然变色
- 高端消费配色禁令：暖米/奶油 + 黄铜/黏土/赭石 + 深咖啡色文字是 LLM 默认高端配色——被禁止作为默认。每个高端消费网站都用这个配色，品牌就隐形了
4.3 布局多样化
- 反居中偏见：
DESIGN_VARIANCE > 4时避免居中 Hero，用分屏、左对齐、不对称留白 - Bento 网格必须有节奏，不能重复同一构图
- 布局重复禁令：一个布局家族最多出现一次
- 锯齿交替上限：连续最多 2 节用图文交叉，第 3 节必须换布局
- 眉毛标签克制：每 3 节最多 1 个 eyebrow 标签
- 分栏标题禁令：默认不用"左大标题 + 右小解释段"模式
- 移动端折叠必须显式声明
4.4 材质、阴影与卡片
- 仅在层次传达真实层级时使用卡片
- 阴影染上背景色调，不用纯黑投影
- 圆角一致性锁：选一个圆角标准全页面统一——全锐角、全圆角或全药丸形
4.5 交互 UI 状态
LLM 默认只实现静态成功状态。始终实现完整循环：
- 加载态：骨架屏匹配最终布局形状
- 空态：精美构图，提示如何填充
- 错误态：清晰、内联
- 触觉反馈：:active 时用 -translate-y-[1px] 或 scale-[0.98]
- 按钮对比检查：确保按钮文字在按钮背景上可读，WCAG AA 最低标准
- CTA 按钮换行禁令：桌面端文字必须一行装下
- 重复 CTA 意图禁令：同一意图的 CTA 只用一个标签
- 表单对比检查：输入框、占位符、聚焦环、错误文字全部通过 WCAG AA
4.6 数据与表单模式
- 标签在输入框上方
- 绝不用占位符当标签
4.7 布局纪律（硬规则，违反即为上线故障）
- Hero 必须装进初始视口：标题最多 2 行，副标题最多 20 词 + 3-4 行
- Hero 字号纪律：字体大小与图片大小一起规划
- Hero 顶部内边距上限：桌面端最大
pt-24（≈6rem） - Hero 堆叠纪律：最多 4 个文本元素（眉毛标签 + 标题 + 副标题 + CTA）
- "Trusted by" logo 墙在 Hero 下方，不在 Hero 内部
- 导航桌面端必须一行，高度上限 80px
- Section 布局重复禁令：一个布局家族最多出现一次
- Bento 背景多样性：不能全是白底白卡片
4.8 图片与视觉资产策略
优先级顺序：
1. 图片生成工具优先 — 有可用的 AI 图片生成工具就用它创建区块专属素材
2. 真实网络图片次之 — 用 https://picsum.photos/seed/{描述性种子}/{w}/{h} 或实际品牌 URL
3. 最后手段：告诉用户 — 留占位符，明确说明需要什么图片
- 纯文本页面不是极简主义，是未完成的作品
- Logo 墙只放 logo，不加行业标签
- 禁用 div 假截图
4.9 内容密度
- 每节默认形态：短标题（≤8 词）+ 短段落（≤25 词）+ 一个视觉资产或一个 CTA
- 无数据倾倒节：用前 3-5 个亮点 + "查看完整列表"链接
- 长列表用不同 UI 组件，不用更长的列表
- 文案自审：上线前重读每个可见字符串，标记语法错误、指代不清、AI 幻觉内容
- 精确数字标记：来自真实数据的数字 OK，AI 编造的规格美学数字被禁止
- 一页一个文案语体
4.10 引言与推荐
- 引文正文最多 3 行
- 不用破折号做设计装饰
- 归属：名字 + 职位 + （可选）公司
- 引号用真实排版引号（" "），不用 ASCII 直引号
4.11 页面主题锁
- 页面只有一个主题，各节不反转
- 暗色模式页面所有节都是暗色，不在中间夹暖白
- 主题在
layout.tsx或页面根设置一次
5. 上下文感知的主动策略
这些是工具，不是默认值。设计解读需要时才用。
- Liquid Glass / 毛玻璃：适合高端消费、Apple 邻近、奢侈品。超出
backdrop-blur：加 1px 内边框和微妙内阴影 - 磁性微物理：
MOTION_INTENSITY > 5且简报为高端/活泼/代理时使用 - 持续微交互（脉冲、打字机、浮动、闪烁、轮播）：
MOTION_INTENSITY > 5且区块主动受益于动效时使用 - 动效必须有动机：每个动画问"它传达什么？"——层次、叙事、反馈或状态转换。"看起来酷"不是有效答案
- 跑马灯每页最多一个
- GSAP Sticky-Stack / Horizontal-Pan：需要 pinned 滚动时使用标准骨架代码，关键点：
start: "top top"
5.A 滚动揭示交错（轻量替代）
简单"元素进入视口时出现"优先用 Motion 的 whileInView，不需要 GSAP。
附录：关键代码约定
- 所有第三方库导入前检查
package.json - 代码注释中诚实标注借用灵感 vs 官方材料
- 斜体在展示文字中确保降部不被裁切
- 页面主题锁定后不逐节覆盖
