enhance-web-landing

Surface router：/uiux。你当前位于：enhance-web-landing。原生 iOS/Android（SwiftUI / Compose，不使用 Web 层）不在适用范围内——请直接使用 Apple HIG / Material。

enhance-web-landing — 反俗套落地页

自由度：混合。 设计判断和调节项为 [高自由度]；依赖检查、对比度和预检为硬性规则 [低自由度 — 严格执行]。

落地页、作品集和重新设计。不适用于仪表板、数据表或多步骤产品 UI。 以下所有规则都视情况而定。没有任何规则会自动触发。先阅读需求，再选用适合的规则。

如何推理

1. 阅读 — 页面类型、风格关键词、受众、现有品牌、未明说的约束
2. 调节 — 根据判断设定 VARIANCE / MOTION / DENSITY（不要使用大模型默认值）
3. 系统 — 如果需求指定了系统，就使用其官方包；每个项目只用一个系统
4. 预检 — 首屏视口内展示 Hero、检查对比度、不使用俗套默认样式、使用真实图片

示例

判断： 面向技术买家的 B2B SaaS 落地页；用户表示“Linear 风格”；没有品牌衬线字体。 调节： 5 / 3 / 3 — 简洁、低动效、宽松。 系统： Tailwind v4 + Geist；不用 Inter + 紫色网格背景；仅在项目已使用 shadcn 时才使用。 预检： 分栏 Hero（不居中）、一种强调色、真实产品截图、CTA 不换行。

汇报前的自我审查

• 说明设计判断 — 编写代码前用一行说明；不要默默采用默认美学风格
• 避免默认风格 — 除非判断结果明确要求，否则不要使用 Inter + 紫色渐变 + 三张等宽卡片
• 硬性规则 — Hero 在首屏视口内完整显示；按钮对比度达到 AA；CTA 意图唯一
• 使用正确工具 — 仪表板/产品 UI → enhance-web-ui；现有应用润色 → enhance-web-redesign

---

0. 推断需求（先读懂情境，再做其他事） [高自由度]

修改代码或调整参数前，先推断用户的实际需求：页面类型、风格关键词、参考信号、受众、现有品牌素材，以及未明说的约束（优先考虑无障碍、公共部门、受监管行业、儿童）。约束优先于审美偏好。 编写任何代码前，用一行说明：“我将其理解为：面向 <受众> 的 <页面类型>，采用 <风格> 的设计语言，倾向于 <设计系统或美学风格系列>。” 如果设计判断确实存在分歧，只问一个澄清问题；如果能从上下文推断出来，就不要提问。 **避免默认风格：**不要默认使用 AI 紫色渐变、深色网格背景上的居中 Hero、三张等宽功能卡片、泛滥的玻璃拟态、无休止的微动画、Inter / Roboto + slate-900、奶油色页面背景、每个标题都带一个斜体强调词、“01 / 02 / 03”标签、等宽字体眉题、所有控件都用胶囊按钮。完成第一版后，将结果中出现的任何默认风格也添加到此列表。 信号列表、判断示例和完整的默认风格列表：references/brief-dials-stack.md §0。

1. 三个调节项（核心配置） [高自由度]

完成设计判断后，设置 DESIGN_VARIANCE（1 为对称 → 10 为混乱）、MOTION_INTENSITY（1 为静态 → 10 为电影感）、VISUAL_DENSITY（1 为宽松 → 10 为驾驶舱式）。基准值为 8 / 6 / 4，除非判断结果要求覆盖；覆盖值通过对话确定，绝不通过编辑此文件设置。 调节项推断表（信号 → 数值）和用例预设：references/brief-dials-stack.md §1。

2. 简报 → 设计系统映射 [高自由度]

如果简报描述的是成熟系统（Fluent、Material 3、Carbon、Polaris、Atlaskit、Primer、GOV.UK、USWDS、Bootstrap 5.3、Radix Themes、shadcn/ui、Tailwind v4），请安装并使用其官方软件包。不要手工重建其 CSS，也不要导入其设计令牌后再覆盖其中 90%。 每个项目只使用一个系统。 不要在同一个项目结构中混用 Fluent 和 Carbon，也不要在 Material 3 应用中嵌入 shadcn。 如果简报描述的是一种美学风格（玻璃拟态、便当盒布局、粗野主义、编辑风、暗黑科技、极光、动态字体、Apple Liquid Glass），则没有官方软件包：使用原生 CSS + Tailwind + 维护中的组件库，并如实标明近似实现。不存在官方的 liquid-glass.css。 两张映射表见：references/brief-dials-stack.md §2。

3. 默认架构与约定 [高自由度]

除非第 2.A 节选择了某个系统：使用带服务器组件的 React / Next.js、Tailwind v4（使用 @tailwindcss/postcss，而非 tailwindcss PostCSS 插件）、从 motion/react 导入 Motion、使用 next/font 或自托管的 @font-face + font-display: swap。Motion、滚动和指针相关代码应放在独立的 'use client' 叶节点中。 切勿在 useState 中跟踪连续输入值（鼠标、滚动、磁性悬停）；请使用 useMotionValue / useTransform / useScroll。 图标：@phosphor-icons/react → hugeicons-react → @radix-ui/react-icons → @tabler/icons-react；仅在用户要求或已是依赖项时使用 lucide-react；每个项目只使用一套图标库；切勿手工绘制 SVG 图标。除非用户要求轻松活泼的风格，否则不建议使用 Emoji。 布局：断点 sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536；使用 max-w-[1400px] mx-auto 或 max-w-7xl 进行容器限制；主视觉区使用 min-h-[100dvh]，切勿使用 h-screen；优先使用 CSS Grid，而非基于百分比的 Flex 数学计算。 3.F 依赖项验证 [低自由度 — 必须严格执行]： 导入任何第三方库前先检查 package.json；如果缺少该库，先输出安装命令。切勿假定库已存在。 完整的技术栈、状态、图标、Emoji 和布局规则见：references/brief-dials-stack.md §3。

4. 设计工程指令（偏差校正） [高自由度]

主动规避 LLM 陈词滥调；每条规则都允许根据上下文调整。涵盖：字体（默认使用无衬线展示字体；仅当品牌指定衬线字体，或美学确属编辑风 / 奢华 / 传承风格时才使用衬线字体；禁止将 Fraunces 和 Instrument_Serif 作为默认字体；注意斜体字形下行部分的留白）、颜色（最多 1 种强调色，饱和度 < 80%，淡紫色规则，禁止高端消费品常见的米色 + 黄铜色 + 浓缩咖啡色组合，锁定颜色一致性）、布局（当 DESIGN_VARIANCE > 4 时禁止居中主视觉区）、材质与形状一致性锁定、交互状态、表单（标签置于上方，绝不以占位符代替标签）、图片策略（图片生成工具 → 真实照片 → 明确标注的占位区域；禁止使用 div 制作伪截图；使用真实 SVG 徽标）、内容密度（标题 ≤ 8 个词，副标题 ≤ 25 个词；不得使用数据堆砌区块；文案自查；标记看似精确的虚构数字）、引语（最多 3 行，不使用长破折号）、页面主题锁定。 4.7 布局规范 [低自由度 — 必须严格执行]： 主视觉区应完整显示在首屏（标题 ≤ 2 行，副文案 ≤ 20 个词，最多 4 个文本元素，顶部内边距 ≤ pt-24）；徽标墙放在主视觉区下方，不得置于其中；单行导航栏高度 ≤ 80px；便当盒布局的节奏与单元格数量必须精确；每种布局类型在每页最多使用一次，每 8 个区块至少包含 4 种类型；连续的图文交错布局最多 2 组；每 3 个区块最多使用 1 个眉题（机械检查：uppercase tracking 的计数 > ceil(sections / 3) 即不通过）；默认禁止分栏式标题；便当盒布局需要 2–3 个视觉效果各异的单元格；每个区块都必须明确说明 < 768px 时的折叠方式。 预检失败条件：按钮或表单对比度低于 WCAG AA、桌面端 CTA 标签换行、两个 CTA 意图相同。 完整的 4.1–4.11 指令请参阅：references/design-directives.md。

5. 上下文感知的主动设计 [高度自由]

工具，而非默认项。不会自动触发任何效果。 Liquid Glass 仅适用于高端消费品、Apple 周边或奢侈品场景，并须带有内边框、内阴影，以及 prefers-reduced-transparency 降级方案。只有在 MOTION_INTENSITY > 5 且该部分确实受益时，才使用磁性微物理效果和持续微交互；采用弹簧物理效果（type: "spring", stiffness: 100, damping: 20），不要使用线性缓动。 **宣称有动效，就要展示动效：**如果 MOTION_INTENSITY > 4，页面就必须实际动起来（首屏进场、滚动显现、CTA 悬停物理效果）；如果无法交付可正常运行的动效，就将该参数调至 3，并采用静态效果。每个动画都需要用一句话说明理由。跑马灯：每页最多一个。 粘性堆叠和水平平移必须是真正的固定滚动效果：start: "top top"，固定包装器，对内部轨道进行 scrub。 完整的要点列表和 GSAP 规范骨架（5.A 粘性堆叠、5.B 水平平移、5.C 滚动显现错开效果、5.D 禁用模式）：references/details.md §5。

6–14. 护栏、识别特征、重新设计、发布前检查

性能与无障碍护栏、参数定义、深色模式规范、AI 特征（包括 §9.F 生产测试特征和 §9.G em-dashes）、参考词汇、重新设计规范、区块库契约、不在范围内的内容，以及最终发布前检查清单：references/details.md §6–14。附录 A–C 包含安装命令、规范来源和 Liquid Glass 近似实现。

延伸阅读

• 简要说明、参数、系统地图、技术栈约定（第 0–3 节）
• 设计工程指引（第 4 节）
• 动效骨架、护栏、AI 特征、重新设计规范、发布前检查、附录（第 5–14 节）