把"AI 默认款"挡在门外:
一套反模板的前端设计指令集

反 AI 默认款的前端设计 指令集

taste-skill 把"反 slop"这件事拆成三层。 第一层是旋钮:DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY, 把"实验性 / 动画深度 / 信息密度"三个互相独立的维度从 1 到 10 量化。第二层是规则, 任何子 skill 都遵循同一条开场:"先读 brief,后写代码",每个规则都附 override path 。 不是一刀切,而是带 escape hatch。第三层是预检清单,可被 agent 机械执行的 grep-able 检验 (em-dash、uppercase tracking 计数、border-b 行数等)。

它通过 vercel-labs/agent-skills 协议发布, 安装一行命令搞定。skill 是纯文本的 SKILL.md,所以同一份规则可以丢给 Codex、Cursor、 Claude Code,甚至直接贴进 ChatGPT 对话框 。 框架中立(react/vue/svelte 都行),工具中立(命令行 / IDE / Web 都行),只约束设计意图本身。

三个 1-10 旋钮:不是配置位,是思考顺序

taste-skill 把几乎所有判断都挂在三个变量上。baseline 写死在 8 / 6 / 4(左图), 用户对话中可临时覆盖。读 brief 时的"先做什么"已经替 agent 排序:先读 brief → 再选 dial → 再选规则, 跳步就会被训练分布推回默认。

三旋钮不是配置面板里的输入框,而是变量名。SKILL.md 里后续章节都按字面引用 DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY, 禁止发明别名(README 明确写"never invent aliases like LAYOUT_VARIANCE")。

13 个子 skill,按角色分三族

taste-skill 不做"一个大而全的 skill",而是把任务切片:实现类(出代码)8 个、图像生成类(出参考图)3 个、 平台适配类 1 个。每个 SKILL.md 都是独立的可安装单元,装多了会叠加,装少了也能跑。

13 个 skill 互不替代。常见组合:taste-skill + soft-skill 或 minimalist-skill 或 brutalist-skill (在已经确定视觉方向时叠加);redesign-skill 替掉 taste-skill 的"新建"路径;output-skill 加在任何 后面治"agent 输出偷懒"的毛病。 。 选型思路 · README §"Which one should I use?"

v2 默认款的精选硬规则(必读)

v2 实验版相对 v1 最值钱的不是新增篇幅,而是把一堆 "use sparingly" 的软建议 升级成 可机械预检的字面量规则。这里摘出最有教学价值、最容易被 LLM 默认越过的几条。

单一强调色 + 单一圆角系统 · 全页锁

Color Consistency Lock:一旦选了一页的强调色,整页(包括 footer、status badge)都同色; 暖灰底色不能在第 7 节突然冒出一个蓝色 CTA。Shape Consistency Lock:圆角只能选一套 (全部锐利 / 全部柔和 / 全部 pill),按钮是 pill 而卡片是 16px 这种"圆角+方角"混搭属于破坏设计 。 除非有 成文规则且全员遵守。

Hero 4 元素封顶

hero 区文字元素最多 4 个:eyebrow(可选) + headline(≤2 行) + subtext(≤20 词且 ≤4 行) + CTA(1 主 + 最多 1 次)。 以下内容 明确禁止出现在 hero:小标签("Works with GitHub, GitLab, and self-hosted Git")、 信任微条("Used by engineering teams at...")、定价预告、feature bullet list、social-proof 头像行 。 一律挪到 hero 下面的独立 section。

Eyebrow 上限 1/3 节

每节都加 eyebrow 是 LLM 第二大 tell。硬上限:每 3 节最多 1 个 eyebrow(hero 占 1)。 9 节页面最多 3 个 eyebrow。预检是机械可执行的:grep uppercase tracking 出现次数,超 ceil(sectionCount / 3) 直接 fail。要分类,靠 section 在页面中的位置即可,不需要标签。

三栏等宽特性卡出局 · 锯齿布局封顶 2 连

"三张等宽卡片横排"是 LLM 最爱的特性 section 模板,直接 ban。锯齿式左图右文 / 右图左文交替, 连续两节是上限,第三节连续出现就是 pre-flight fail,必须用全宽段、竖排、bento grid、 marquee 之一打断节奏。

Bento Cell Count Rule · Section-Layout-Repetition Ban

N 个内容就有 N 个格子 。 不留空 middle cell 也不留结尾空位。8 节页面至少 4 种不同布局族,禁止 "Selected commissions" 长得跟 "What we do" 一个样。

Premium-consumer 温米色+黄铜整套封禁

对 cookware / wellness / artisan / DTC home goods 这类 brief,LLM 的默认抓取是温暖米色背景 + 黄铜 / 陶土 / 牛血红 + 浓缩咖啡色文字。整套 hex 都被点名封为默认(背景 #f5f1ea、 #f7f5f1 等;强调 #b08947、#b6553a 等)。 默认走向必须换族轮换 。 Cold Luxury / Forest / Black & Tan / Cobalt + Cream / Terracotta + Slate / Olive + Brick + Paper / Pure monochrome + 单色饱和 pop,且相邻两个项目不能复用同一族。 只有品牌 brief 字面指定这套,才能用。

Inter 默认禁用 · Fraunces / Instrument_Serif 直接点名封禁

Inter 是 LLM 第一字体默认,被 ban。Serif 作为默认字体是 LLM 单测里出现频率最高的 AI tell, "creative brief = serif" 这条心智能映射直接作废。除非品牌字面指定、或真正属于编辑 / 奢华 / 出版 / 手稿 / 传承 / 复古 系列且能说清为什么,否则一律 sans display(Geist Display / Cabinet Grotesk Display / GT Walsheim / PP Neue Montreal 等)。

Fraunces、Instrument_Serif 这两个 LLM 偏爱的显示 serif被点名封禁(连可选 escape hatch 都没有)。 强调字时,用同字体的 italic 或 bold,绝不在 sans headline 里塞一个 serif 单词。

Div 假装产品截图出局

"用 div 拼个假任务列表 / 假终端 / 假仪表盘假装产品截图"是 LLM 第一大视觉 tell,直接 ban。要展示产品, 改用真实截图、生成图、真实组件预览,或者干脆不展示。

动画纪律:三段 canonical skeleton + 一组禁手

v2 把动画工程标准化到 Motion 库(motion/react,Framer Motion 的 rebrand; 旧的 framer-motion 包名仍可作 legacy alias 用)。canonical skeleton 共三段, 解决"看起来在用 GSAP 但 scroll trigger 永远 pin 不上"的问题。

§5.A Sticky-Stack · 关键参数

关键参数是 start: "top top"(不是 "top center" 也不是 "top 80%"),pin: true,pinSpacing: false, 上一张卡的 scale / opacity 变换由下一张卡的 ScrollTrigger 驱动(所以新卡到位时旧卡收缩)。

§5.B Horizontal-Pan · 关键参数

同样 start: "top top",end: "+=" + distance (scroll 长度 = 横向行程),scrub: 1。wrapper 钉住,内层 track 横向滑。

§5.C Scroll-Reveal Stagger · 轻量替代

简单"元素进入视口"用 Motion 的 whileInView 即可,不要为这个上 GSAP 。 节省 bundle size 又避免 ScrollTrigger 复杂度。

§5.D Forbidden Animation Patterns

• window.addEventListener("scroll", ...) 。 全局 scroll 监听每帧触发、jank-prone。
• React state 跟 window.scrollY 。 同理。
• requestAnimationFrame 循环 touch React state 。 用 useMotionValue + useTransform。
• 静态内容包 layout prop "为安全起见" 。 徒增测量成本。

"Motion claimed, motion shown"

如果 MOTION_INTENSITY > 4,页面必须真动 。 hero 入场、scroll-reveal、CTA hover physics, 至少占一项。挂了高 MOTION_INTENSITY 却没有真动 = broken。做不到就把 dial 降到 3 出干净静态页, 绝不允许半残动画(cut-off ScrollTrigger、jumpy enter、漏 cleanup)。

prefers-reduced-motion 在 MOTION_INTENSITY > 3 时强制降级 。 Motion 用 useReducedMotion(),CSS 用 @media (prefers-reduced-motion: no-preference) gate。infinite loop、parallax、 scroll-hijack、磁吸物理全都要塌成静态。

磁吸 / 鼠标跟随只能 useMotionValue

重要性能约束:跟连续值(鼠标位置、滚动进度、pointer 物理)的永远不准用 useState 。 每帧 re-render 在 mobile 直接坍塌。唯一允许实现方式:Motion 的 useMotionValue / useTransform,绕过 React render 周期。

诚实规则:有官方包就用官方包,别手抄

v2 加了 §2 "Brief → Design System Map"。brief 一旦读出是 Microsoft / Google / IBM / Shopify / Atlassian / GitHub / GOV.UK / USWDS / Bootstrap / Radix / shadcn / Tailwind 之一,装对应的官方包, 别手抄 CSS,别装系统的 token 又自己改 90%。

一个项目一个系统。同一棵树里不准混 Fluent React 和 Carbon,不淮把 shadcn 组件塞进 Material 3 应用。 没法套官方包的美学方向(glassmorphism / bento / brutalism / editorial / dark tech / aurora / kinetic type)用原生 CSS + Tailwind + 维护中的组件库;在代码注释里诚实标注借鉴 vs 官方素材。

em-dash 全禁:第一大 LLM tell

v2 把 em-dash(字符 —)的措辞从"少用"升级为完全禁止。原话: "There is no 'limited use' allowance, no 'natural language frequency' allowance, no 'in body copy is fine' allowance. None."

预检是机械可执行:页面任何一处用户可见的位置出现字符 — 或 – 都算 fail,必须改写。原话:"The agent has historically ignored em-dash limits when phrased as 'use sparingly.' The phrasing here is binary: zero em-dashes."

"This rule is non-negotiable." 。 §9.G EM-DASH BAN (展示用 em-dash 已转义为实体字符 —)

这条规则单独点名写得很重,本身就是反 LLM 写作习惯的样本:在 SKILL.md 里用 "non-negotiable" "binary: zero" 这种不留余地的语句,是在训练 agent 不要 "smell-like-the-default"。

v2 §9 速查表:禁手清单

下表把 v2 §9 散落的禁手按类别重排,便于一眼检索。每条都附明确的 escape hatch 。 也就是说"何时不算违规"已经写好,不用猜。

视觉 / CSS

排版

版式 / 内容

v2 增列的生产测试禁手

另一条路:Python RNG + pre-flight plan

gpt-tasteskill(74 行,主打 GPT/Codex 的更严格变体)走另一条工程思路。 它不靠"读 brief → 调 dial",而是靠模拟 Python 确定性随机播种强迫 agent 不要偷懒:

1. Python RNG Execution 。 用 prompt 字符数 modulo 数学算出一个 seed,模拟 random.choice() 严格选定:1 个 Hero 架构、1 个字体栈、3 个 component 架构、 2 个 GSAP 范式。禁止两次连续产出同一份 UI。
2. AIDA 结构 。 每页 Attention(Hero) → Interest(Bento) → Desire(GSAP / media) → Action(footer / pricing),章节之间巨大竖向 padding(py-32 md:py-48)。
3. 2-3 行 hero 铁律 。 H1 必须用 max-w-5xl/6xl/w-full 这种超宽容器, 字号用 clamp(3rem, 5vw, 5.5rem)。4、5、6 行 H1 是 catastrophic failure。
4. GAPLESS BENTO 。 bento grid 必须 grid-flow-dense,数学上验证 col-span / row-span 互锁无空洞。
5. pre-flight plan 块 。 写 UI 代码前先输出一个 <design_plan> 块, 把上述五项验证显式列出,通过才允许写代码。

思路差异:gpt-tasteskill 假定 LLM 是偷懒的,用显式过程把"是不是偷懒"摆在桌面上; taste-skill(默认)假定 LLM 有可能读 brief,但仍会塌进 tell,所以用字面量硬规则 + grep-able pre-flight 抓偷懒。两条路都有效,选哪条看 agent 性格。

配套研究:LLM 为何偷懒

taste-skill 不只给规则,research/ 子目录把为什么也做了一份独立研究, 主题是 "LLM Laziness"。根因(4 个文件)+ 实证(2 个文件)+ 修复(4 个文件),整套论证链独立可读。

根因 · root-causes/

• cognitive-shortcuts.md 。 模型倾向走"最常见路径"的认知捷径。
• output-limits.md 。 token 限制 + max-turn 限制下的截断与偷工。
• rlhf-and-compute.md 。 RLHF 偏好"看起来完整但浅"的输出,compute 预算下的偷懒。
• training-data-bias.md 。 训练语料里某类 UI 模式占比畸高(暖米色+黄铜就是其一)。

实证 · findings/

• empirical-results.md 。 实验数据。
• references.md 。 引证清单。

修复 · remediation/

• architectural-patterns.md 。 架构层面的防偷懒设计(如 canonical skeleton)。
• parameter-tuning.md 。 参数调优(temperature、top_p 等)。
• prompt-engineering.md 。 prompt 工程(把偷懒显式列为禁忌)。
• reference-prompts.md 。 参考 prompt 模板。

这套目录的学习方法价值高于 taste-skill 本身 。 skill 是结论,research 是论证链。 学它能带走"一个开源项目如何把"为何"和"如何"分开维护"的范例。

五点带走

① 反 slop 框架的搭法

三层结构(旋钮 → 规则 → 预检)+ 每个旋钮都不允许穷举配置位 + 硬规则都用 grep-able 字面量(。、uppercase tracking、 border-b)。LLM 看到字面量规则比看到"少用"两个字的遵循度高一个数量级。

② 硬规则 SKILL 怎么写

每条硬规则都必须附 override path 。 一刀切会让 agent 在不该绕的时候硬套规则, 反而出活更差。taste-skill 的做法是"默认禁 + 例外条件明文":读者知道何时不准用, 更知道何时可以用。

③ 差异化分发 。 变体而非配置

taste-skill 把同一根主题做成多个变体 skill(taste-skill-v1 / gpt-tasteskill / minimalist-skill / brutalist-skill / soft-skill / stitch-skill),每个变体是独立的可安装单元, 暴露的是"行为名 → 语义切换",不是"配置位"。配置位会让人陷在"参数调到多少"的细节, 行为名让人一眼知道这个变体在追求什么。

④ skill 与 research 分两层维护

skills/ 给"如何做",research/ 给"为什么"。 二者分开 commit、分开维护,改一处不必重写另一处。这是文档型项目最常见的 "正文 vs 论证链"分层模式。

⑤ 安装协议中立

SKILL.md 是纯文本,vercel-labs/agent-skills 一行命令通吃 Codex / Cursor / Claude Code。不绑定某个 IDE,不绑定某个模型 。 这是把"指令集"做成可移植资产的关键。 类似 anthropic-skills 仓库也是同一思路:文本是事实,工具是消费者。

文件清单与规模

仓库截至本整理:13 个 SKILL.md 共 6670 行(其中含 llms.txt 作为顶层索引)。目录树:

taste-skill/
├── README.md
├── CHANGELOG.md
├── LICENSE                     (MIT · Copyright (c) 2026 Leonxlnx)
├── skill.sh                    (安装辅助脚本)
├── skills/
│   ├── llms.txt                (13 行,顶层索引)
│   ├── taste-skill/            (v2 默认 · 1206 行)
│   ├── taste-skill-v1/         (原版 · 226 行)
│   ├── gpt-tasteskill/         (74 行)
│   ├── image-to-code-skill/    (1228 行)
│   ├── redesign-skill/         (178 行)
│   ├── soft-skill/             (98 行)
│   ├── output-skill/           (49 行)
│   ├── minimalist-skill/       (85 行)
│   ├── brutalist-skill/        (92 行)
│   ├── stitch-skill/           (184 行)
│   ├── imagegen-frontend-web/   (987 行)
│   ├── imagegen-frontend-mobile/(1465 行)
│   └── brandkit/               (798 行)
├── research/
│   ├── README.md
│   └── laziness/
│       ├── README.md
│       ├── root-causes/  (4 文件)
│       ├── findings/     (2 文件)
│       └── remediation/  (4 文件)
├── assets/   (README 横幅 / 赞助方图标等 .webp / .svg)
├── examples/ (生成样例 webp,如 floria-top.webp)
└── scripts/  (README 资源处理 .mjs)