反套路前端设计品味

问题从哪来

大模型写前端时，常见输出是 AI 紫渐变、居中暗色 Hero、三张等宽功能卡、Inter + slate-900 和到处开的玻璃拟态——不是读不懂 brief，而是直接套默认审美。本技能（tasteskill: Anti-Slop Frontend Skill）面向 落地页、作品集、改版，明确 不 覆盖仪表盘、数据表格或多步产品 UI；且每条规则都是 情境触发，不会自动全开。

技能如何工作

0. Brief 推断：先看页面类型、用户 vibe 词、参考链接、受众与既有品牌资产；在写代码前输出一行 Design Read（例如「B2B SaaS landing，Linear 极简，偏 Tailwind + Geist」）。brief 真歧义时只问 一个问题。

1. 三档全局参数：DESIGN_VARIANCE（对称↔混乱）、MOTION_INTENSITY（静态↔电影感）、VISUAL_DENSITY（留白↔信息密度），默认 8 / 6 / 4，由 design read 与用例表推断，对话中覆盖即可。

2. Brief → 设计系统：brief 像 Fluent、Material、Carbon、GOV.UK、USWDS、shadcn 等时，安装并用官方包，禁止手搓 90% 覆盖；一个项目只绑一套系统。纯 aesthetic（玻璃、bento、brutalist、动效排版等）用原生 CSS + Tailwind，并在注释里标明是近似实现。

3. 工程默认：React/Next（RSC 为主）、Tailwind v4、motion/react、图标库优先级（Phosphor 等）、min-h-[100dvh] 而非 h-screen、Grid 而非 flex 百分比魔法；动效与 scroll 用 Motion 的 motion value，别用 useState 跟鼠标/滚动。

4. 反默认纪律：排版、动效、布局各节都有「LLM 会写什么 → 何时例外」的对照，例如 默认不用 Inter 当 display、serif 非常规默认、减少无意义 emoji。

适用边界

• 适合：营销落地、个人/工作室作品集、preserve/overhaul 改版、偏 editorial 的站点。
• 不适合：复杂 SaaS 后台、密集表格、多步骤表单产品流——应换用 Section 2.A 里的产品型设计系统，而不是本技能的 landing/portfolio 预设。
• 硬约束优先：无障碍优先、公共部门、强监管、信任型电商等会 压过 审美偏好（如 GOV.UK / USWDS、低 motion）。
• 改版：已有 logo/色/字体/摄影是输入，不是可选项（见 SKILL 第 11 节语境）。