反AI模板网站设计
大多数AI生成的网站看起来都差不多，因为模型会用统计学上最普遍的答案来填充每一个开放决策：Inter字体、靛蓝到紫色的渐变、带柔和阴影的rounded-2xl卡片、居中的英雄区域加上药丸徽章、三个带Lucide图标的特色卡片。每个选择单独看都不错。但放在一起，它们传达出的信息是“没人做任何决定”，而访问者会立刻察觉到这一点。
专业设计师避免这些东西，并非因为某个规则这么说。他们避免它们，是因为他们从主题（业务、内容、受众）出发，每一个选择都由此而来。你的工作方式也应如此。下面的禁止清单只是一个兜底措施，而非方法本身。
设计流程
1. 先写设计摘要，再写代码
用几句话写下这个摘要（可以是在你的推理过程中，如果范围较大也可以展示给用户）。填入以下内容：
- 主题： 这是什么？为谁而做？他们需要在页面上完成什么？
- 性格： 三个专属于此主题的形容词。“现代、干净、流线型”适用于任何事物，所以不算。比如旧书店的“陈旧、温暖、略带书呆子气”，或者实验室的“临床、冷静、精确”。
- 现实参考： 本页面借鉴的一个物理或历史上的设计传统。例如：火车时刻表、1970年代瑞士海报、种子包装袋、博物馆墙上的标签、五金目录、报纸头版、杂志、餐厅菜单、野外笔记本、旧软件手册、唱片封套。从主题中选取，不要每次都默认用同一个。
- 色板： 3-5个实际的十六进制颜色值，并说明它们的来源（产品材质、品牌、照片、或上述参考）。
- 细分领域与字体： 明确细分领域（面包店、律所、开发工具、健身房、婚礼策划……），然后从
references/fonts-by-niche.md中该细分领域对应的行里选取字体，选择与你三个形容词匹配的选项。写一句话说明它为什么合适（“Alfa Slab One：它看起来像是刷在酿酒厂墙上的招牌”）。如果你写不出这句话，说明你还没选好。 - 一个标志性细节： 一个该网站独有的、令人印象深刻的动作。例如，价格像手写黑板字一样设置，页边空白处像法律文档一样标注章节编号，像方格纸一样的网格线，或者一张全出血、未裁剪的照片。
如果用户已经提供了品牌、颜色、字体或参考，那就以它们为准。围绕它们构建摘要。
2. 从内容向外构建
- 有真实内容时，直接使用。没有时，为此主题编写合理、具体的占位文案（听起来真实的产品名称、真实感觉的数字、可信的地址），而非通用的营销填充词。
- 让内容来决定布局。菜单需要多列和虚线指引。作品集需要大图和少量装饰。文档网站需要侧边栏和密集的文本。不要把每个主题都塞进同一个着陆页模板。
- 变换章节结构。真实的网站会有：一个长篇文字章节，一个密集的表格，一张打破网格的图片。它们不会把“标题 + 副标题 + 3张卡片”重复八遍。
3. 移交前进行审计
对照 references/slop-catalog.md 检查你的输出（在本次会话中第一次使用此技能时，请通读它；它包含完整的清单、原因和替代方案）。如果项目在磁盘上并且Node可用，也可以运行扫描器：
node <skill-path>/scripts/slop-check.js <file-or-folder>
该脚本会标记常见的AI特征（渐变、发光阴影、过度使用的字体、闪光表情符号、华而不实的文案）及其文件路径和行号。并非每个命中都是错误的。天气图中的渐变或用户明确要求的字体就没问题。修复每个命中，或者有理由地保留它。
简版禁止清单
以下是特征最明显的AI模板。避免使用，除非用户要求或品牌真的需要。完整清单在 catalog 中。
颜色
- 紫色 / 紫罗兰 / 靛蓝 / 蓝色 / 粉色渐变，用于背景、按钮、边框或文本
- 标题上的渐变文字（
background-clip: text） - 近黑色背景上的霓虹色强调（电光蓝、品红、酸橙绿）
- 英雄区域背景后的模糊彩色“球体”、极光或网格渐变斑点
- 直接使用Tailwind默认色板（
indigo-600、slate-900、violet-500）作为品牌色
表面和效果
- 彩色发光阴影（
box-shadow: 0 0 40px rgba(139,92,246,.5)）以及在大范围内使用shadow-2xl - 玻璃态：带半透明白色填充的
backdrop-blur和border-white/10 - 每个元素都在自己的圆角卡片中，到处使用相同的巨大圆角（
rounded-2xl/3xl） - 带径向渐变蒙版的点状或网格背景图案
- 动态渐变边框、闪烁扫描、光束线条、跟随光标的高光
- 所有卡片悬停时上移（
translateY(-4px)+ 更大的阴影）
排版
- 不经思考就选择 Inter、Poppins、Montserrat、Plus Jakarta Sans、DM Sans、Outfit、Sora、Manrope、Space Grotesk、Geist 或 Instrument Serif。它们是好字体，但问题在于无理由地选择它们。
- 任何不符合细分领域或该领域明显刻板印象的字体（参见
references/fonts-by-niche.md） - 英雄标题中有一个词用了渐变或斜体衬线字（“Build faster”）
- 每个章节标题上方都有一个小的、全大写、宽间距的“眉毛”标签
- 所有内容居中
布局
- 模板：固定导航栏 → 带有“✨ New”药丸徽章的居中英雄 → 两个按钮 → “Trusted by”灰度Logo行 → 3列带圆角方块内图标的特征卡片 → 数据统计条 → 带5星评分的推荐卡片 → 3档价格表（中间高亮） → FAQ手风琴 → 渐变CTA横幅 → 4列页脚
- 默认使用Bento网格来展示特征
- 倾斜的、带透视变换的假仪表盘截图
内容和文案
- 表情符号作为图标或项目符号（🚀 ✨ ⚡ 💡 🔥），以及将所有“AI”相关的东西都用闪光图标
- “释放……的力量”、“超级加速”、“提升”、“无缝”、“毫不费力”、“革新”、“下一代”、“一体化平台”、“为未来而建”、“将X提升到新高度”
- 三连口号：“快速。简单。强大。”
- 虚构的数据（10万+用户，99.9%可用性）和虚假的推荐语（“张经理，TechCorp CEO”）
动效
- 每个元素滚动时淡入，交错出现
- 浮动/上下浮动的元素、打字机效果标题、数字滚动计数
应该怎么做
颜色。 从中性色开始，但赋予它们温度（暖纸色 #f4efe6、冷灰 #e8eaec、墨水色 #1b1a17），而不是纯 #fff 和Tailwind的slate。添加一个强调色，并节制使用，用于链接、主要操作和一到两个高亮。从主题中提取：陶艺工作室用赤陶色，交通应用用信号橙，药房用深绿色。使用纯色填充。如果确实需要渐变（天空、热力图），让它微妙并与含义相关联。
排版。 按细分领域选择字体，绝不随机或凭习惯。思考这个业务在它的招牌、菜单、标签或信纸上会印什么字体，然后找到匹配的字体。酿酒厂和律所绝不应偶然共享同一字型。在挑选前阅读 references/fonts-by-niche.md。它覆盖了大约40个细分领域，每个领域提供多个选项，以及AI在每个领域容易落入的刻板印象（游戏用Orbitron，奢侈品用Playfair，健身房用Bebas加Montserrat），还包括非拉丁语系（如印地语和泰米尔语）的字体。对于工具和仪表盘来说，系统字体栈（system-ui, -apple-system, "Segoe UI", sans-serif）是合理的选择。通常一个家族就够了。最多两个。通过字号、字重和间距建立层次，使正文左对齐，并保持可读的宽度（大约60-75个字符）。
表面。 用空白、分隔线（在较深的中性色中使用 1px solid）和背景变化来分隔元素，而不是阴影。如果使用阴影，让它小而中性，并带有像真实光线一样的偏移（0 1px 2px rgb(0 0 0 / .08)）。有目的地选择圆角：用于编辑或工业用途用0，大多数UI用2-6px，仅用于药丸或头像才用完全圆角。并非所有元素都需要容器。
布局。 使用不对称：宽文本列搭配窄侧栏，图片突破网格，或左对齐的英雄区域。让内容密度决定布局。价格可以用普通表格。特征可以用带句子的列表代替卡片。省略主题不需要的章节。面包店网站不需要数据统计条。
交互。 为链接添加下划线。悬停状态改变颜色或下划线，而非改变位置。为按钮提供清晰的按下/焦点状态。仅在需要解释某事时才使用动效（菜单打开、状态变化），并尊重 prefers-reduced-motion。
图片。 实物实拍胜过任何插图。没有照片时，使用诚实的占位符（一个中性方框，标注“照片：店面，晨光”）而不是3D库克、等距人物或AI艺术。简单的图表、地图、产品图和纯排版设计，都看起来像人做的。
文案。 具体说明这个东西做什么，用店主会在柜台前说的直白语言。“每天早上7点新鲜酸面包，周一休息”比“体验工艺级卓越”好得多。与其编造一个数据，不如省略它。
不要用一种陈词滥调替换另一种
当一个默认项被禁止，下一个最常见的答案会成为新的默认项：用 Space Grotesk 替代 Inter，用蓝绿色替代紫色，每个网站都用粗黑边框和黄色高亮的“粗野主义”风格。如果你设计的两个不同主题的网站看起来很相似，说明你是在套模板，而不是基于摘要在设计。回到第一步，让主题来推动思考。
当用户想要“模板感”外观时
有些用户想要那种光鲜亮丽的SaaS外观，或者一个品牌确实是紫色的并带有渐变。请遵循明确的说明和品牌指南。它们会覆盖此技能。你仍然可以在那些不受影响的方面施加约束：用一个渐变而不是五个，用真实的文案而不是流行语，选择有目的性的字体配对。