8.2 KiB
Content Guidelines：反AI slop、内容准则、Scale规范
AI设计里最容易掉进去的陷阱。这是一份「不做什么」的清单，比「做什么」更重要——因为AI slop是默认值，你不主动避免就会发生。
AI Slop 完整黑名单
视觉陷阱
❌ 激进渐变背景
- 紫色 → 粉色 → 蓝色 全屏渐变（AI生成网页的典型味道）
- 任何方向的rainbow gradient
- Mesh gradient铺满背景
- ✅ 如果要用渐变：subtle、单色系、有意图地点缀（比如button hover）
❌ 圆角卡片 + 左border accent色
/* 这是AI味卡片的典型签名 */
.card {
border-radius: 12px;
border-left: 4px solid #3b82f6;
padding: 16px;
}
这种卡片在AI生成的Dashboard里泛滥。想做强调？用更有设计感的方式：背景色对比、字重/字号对比、plain分隔线、或者干脆不分卡片。
❌ Emoji 装饰 除非品牌本身使用emoji（比如Notion、Slack），否则不要在UI上放emoji。尤其不要：
- 标题前的 🚀 ⚡️ ✨ 🎯 💡
- Feature列表的 ✅
- CTA按钮里的 →（箭头单独出现OK，emoji箭头不行）
没图标用真icon库（Lucide/Heroicons/Phosphor），或者用placeholder。
❌ SVG 画 imagery 不要试图用SVG画：人物、场景、设备、物品、抽象艺术。AI画的SVG imagery一眼就是AI味，幼稚且廉价。一个灰色矩形+"插画位 1200×800"的文字标签，比一个拙劣的SVG hero illustration强100倍。
唯一可以用SVG的场景：
- 真正的icon（16×16到32×32级别）
- 几何图形做装饰元素
- Data viz的chart
❌ 过多iconography 不是每个标题/feature/section都需要icon。滥用icon会让界面像toy。Less is more。
❌ "Data slop" 编造的stats装饰：
- "10,000+ happy customers" （你都不知道有没有）
- "99.9% uptime" （没有真数据就别写）
- 用图标+数字+词组成的装饰"metric cards"
- Mock table里的假数据装点得花里胡哨
如果没真数据，留placeholder或问用户要。
❌ "Quote slop" 编造的用户评价、名人名言装饰页面。留placeholder问用户要真quote。
字体陷阱
❌ 避免这些烂大街字体：
- Inter（AI生成的网页默认）
- Roboto
- Arial / Helvetica
- 纯system font stack
- Fraunces（AI发现了这个就用滥了）
- Space Grotesk（最近AI的最爱）
✅ 用有特点的display+body配对。灵感方向：
- 衬线display + 无衬线body（editorial feel）
- Mono display + sans body（technical feel）
- Heavy display + light body（contrast）
- Variable font做hero的粗细动画
字体资源：
- Google Fonts的冷门好选项（Instrument Serif、Cormorant、Bricolage Grotesque、JetBrains Mono）
- 开源字体站（Fraunces的兄弟字体、Adobe Fonts）
- 不要凭空发明字体名
色彩陷阱
❌ 凭空发明颜色 不要从头设计一整套不熟悉的色彩。这通常不和谐。
✅ 策略：
- 有品牌色 → 用品牌色，缺的color token用oklch插值
- 没有品牌色但有参考 → 从参考产品截图吸色
- 完全从零 → 选一个known的配色系统（Radix Colors / Tailwind默认palette / Anthropic brand），不要自己调
oklch定义色彩是最现代的做法：
:root {
--primary: oklch(0.65 0.18 25); /* 温暖的terracotta */
--primary-light: oklch(0.85 0.08 25); /* 同色系浅色 */
--primary-dark: oklch(0.45 0.20 25); /* 同色系深色 */
}
oklch能保证调整亮度时色相不漂移，比hsl好用。
❌ 夜间模式随手加反色 不是简单invert颜色。好的dark mode需要重新调整饱和度、对比度、accent色。不想做dark mode就别做。
Layout陷阱
❌ Bento grid 过度泛滥 每个AI生成的landing page都想搞bento。除非你的信息structure确实适合bento，否则用其他layout。
❌ 大hero + 3-column features + testimonials + CTA 这个landing page模板被用烂了。想创新就真创新。
❌ Card grid里每个card长一样 Asymmetric、不同大小的cards、有的带image有的只有文字、有的跨列——这才像真设计师做的。
内容准则
1. Don't add filler content
每个元素都必须earn its place。空白是设计问题，用构图解决（对比、节奏、留白），不是靠内容填满。
判断filler的问题：
- 如果去掉这段内容，设计会变差吗？答案若是"不会"，就去掉。
- 这个元素解决了什么真问题？如果是"让页面不那么空"，删掉。
- 这个stats/quote/feature有真数据支持吗？没有就不要凭空写。
「One thousand no's for every yes」。
2. Ask before adding material
你觉得多加一段/一页/一个section会更好？先问用户，不要单方面加。
原因：
- 用户知道他的受众比你清楚
- 加内容有成本，用户可能不想要
- 单方面加内容违反了"junior designer汇报工作"的关系
3. Create a system up front
探索完design context后，先口头说出你要用的系统，让用户确认：
我的设计系统：
- 色彩：#1A1A1A主体 + #F0EEE6背景 + #D97757 accent（来自你的品牌）
- 字型：Instrument Serif做display + Geist Sans做body
- 节奏：section title用full-bleed彩色背景 + 白字；普通section用白背景
- 图像：hero用full-bleed照片，feature section用placeholder等你提供
- 最多用2种背景色，避免杂乱
确认这个方向我就开始做。
用户确认后再动手。这个check-in能避免"做完一半发现方向错"。
Scale 规范
幻灯片（1920×1080）
- 正文最小 24px，理想 28-36px
- 标题 60-120px
- Section title 80-160px
- Hero headline 可以用 180-240px 的大字
- 永远不要用 <24px 的字放幻灯片
印刷文档
- 正文最小 10pt（≈13.3px），理想 11-12pt
- 标题 18-36pt
- Caption 8-9pt
Web和移动端
- 正文最小 14px（老年人友好用16px）
- 移动端正文 16px（避免iOS自动缩放）
- Hit target（可点击元素）最小 44×44px
- 行高 1.5-1.7（中文1.7-1.8）
对比度
- 正文 vs 背景 至少 4.5:1（WCAG AA）
- 大字 vs 背景 至少 3:1
- 用Chrome DevTools的accessibility工具检查
CSS 神器
高级CSS特性是设计师的好朋友，大胆用：
排版
/* 让标题换行更自然，不会最后一行孤单单一个词 */
h1, h2, h3 { text-wrap: balance; }
/* 正文换行，避免寡孀和孤儿 */
p { text-wrap: pretty; }
/* 中文排版神器：标点挤压、行首行尾控制 */
p {
text-spacing-trim: space-all;
hanging-punctuation: first;
}
Layout
/* CSS Grid + named areas = 可读性爆表 */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
/* Subgrid对齐卡片内容 */
.card { display: grid; grid-template-rows: subgrid; }
视觉效果
/* 有设计感的滚动条 */
* { scrollbar-width: thin; scrollbar-color: #666 transparent; }
/* 玻璃拟态（克制使用） */
.glass {
backdrop-filter: blur(20px) saturate(150%);
background: color-mix(in oklch, white 70%, transparent);
}
/* View transitions API让页面切换丝滑 */
@view-transition { navigation: auto; }
交互
/* :has()选择器让条件样式变容易 */
.card:has(img) { padding-top: 0; } /* 有图片的卡片无顶padding */
/* container queries让组件真的响应式 */
@container (min-width: 500px) { ... }
/* 新的color-mix函数 */
.button:hover {
background: color-mix(in oklch, var(--primary) 85%, black);
}
决策速查：当你犹豫时
- 想加个渐变？→ 大概率不加
- 想加个emoji？→ 不加
- 想给卡片加圆角+border-left accent？→ 不加，换其他方式
- 想用SVG画个hero插画？→ 不画，用placeholder
- 想加一段quote装饰？→ 先问用户有没有真quote
- 想加一排icon features？→ 先问要不要icon，可能不需要
- 用Inter？→ 换一个更有特点的
- 用紫色渐变？→ 换一个有根据的配色
当你觉得"加一下会更好看"的时候——那通常是AI slop的征兆。先做最简的版本，只在用户要求时加。