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的征兆。先做最简的版本，只在用户要求时加。

content-guidelines.md 8.2 KB Istoric Crud