反AI味道的网页设计
原则：模型默认会收敛于其见过的一切数据的平均值。此技能通过强制在构建之前做出决定，并在之后用证据验证来打破这种收敛。
何时激活
- 在构建或重新设计页面、部分、Hero、卡片、导航或任何UI时。
- 在审计一个网站或截图时，带着“这看起来像AI做的吗？”的问题。
- 在为全新项目选择字体、调色板、间距或动效时。
设计DNA（触碰代码前必须完成）
每个项目首先声明：
- 命名调色板（例如“控制室”）：1种墨水/底色，1种表面色，1个信号强调色，1个数据强调色，1个警告色。HEX或OKLCH格式，附带经过验证的AA对比度。
- 字体对及角色：显示字体、正文、技术等宽字体、数字。绝不能为所有内容使用单一字体。
- 主要部分的ASCII骨架。
- Hero构成：在1280x720的笔记本电脑上无需滚动即可看到的内容。
- 签名元素：该网站独有的、独一无二的东西（一个动态图表、一个网格模式、一个光标、一个自定义过渡）。
- 动效级别（0-10）以及针对
prefers-reduced-motion的行为。
此信息写入项目的docs/design-dna.md，不得在构建中途临时修改。
两个反AI味道测试
- 测试1： 是否有人仅凭产品类别就能猜出调色板？如果是，则重新设计。
- 测试2： 是否有人仅凭产品类别和反例参考就能猜出美学家族？如果是，则重新设计。
硬性禁令（若出现任何一项，则重新生成该维度）
字体领域： Inter、Roboto、Open Sans或任何系统默认字体担任主角角色；所有部分的标题使用相同大小。
颜色领域： 紫色/靛蓝/紫罗兰渐变；纯#fff和#000；黑色背景上的霓虹绿用于“开发作品集”；奶油色+赤陶色+衬线字体；每页超过一个装饰性渐变。
布局领域： 居中堆叠式Hero（前导语 + H1 + 副标题 + 2个按钮）；等宽三列带图标；卡片套卡片的Bento布局；卡片侧边强调色边框；毛玻璃效果；带有装饰性迷你趋势线的假仪表盘；所有元素进入时都采用淡入向上动画；连续出现结构相同的部分。
视觉内容领域： 虚构的截图或浮动样机；库存图片；AI生成图片替代真实产品；表情符号用作功能图标；无上下文的“信任我们”品牌Logo行。
文案领域： “Elevate your...”、“Unlock”、“Supercharge”、“Take your X to the next level”、“The future of...”、“Seamlessly”、“Effortless”；装饰性破折号；带绿点的“可接项目”标签；超过两种不同样式的按钮。
构建规则
- 文本必须是真实的HTML（可被索引），绝不能包含在canvas、SVG或图片中。
- 有意图的网格：不同内容类型使用不同宽度，有意识地打破对齐，通过大小和字重建立层次结构，而非使用方框。
- 间距遵循声明的（4/8）比例尺；禁止使用任意值。
- 真实的交互：悬停、焦点、键盘、加载状态和空状态。装饰性元素必须响应。
- 有目的性的动效：只进入一次，不循环；动画仅作用于
transform和opacity；明确地尊重prefers-reduced-motion。 - 无障碍性优先于原创性：AA对比度、可见焦点、44px触控目标、375px最小宽度。
反AI味道审计（含截图）
- 使用Playwright CLI截取桌面端1440px和移动端375px的截图（没有截图绝不发表意见）。
- 遍历禁令列表，指出检测到的模式，并附上证据（选择器/截图）。
- 应用上述两个测试。
- 检查焦点、键盘、计算出的对比度以及reduced-motion偏好。
- 输出：模式 → 证据 → 具体修复方案。0个模式 = 通过。
辅助工具
- Playwright CLI用于截图和验证：参见技能
web-qa-visual。 - 真实资源和Logo：参见技能
web-assets-reales。 - 文案：门控
no-ai-slop。 - 之前构建的记录，避免重复骨架/调色板：项目中的
docs/design-dna.md（仅追加）。