规则加太猛反而更丑过度约束的四种翻车现场【免费下载链接】taste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill给 AI 编码代理套一份审美规则最初的想法很朴素既然模型生成的页面总是居中大标题 三张图标卡片 紫色渐变那就把这些东西全禁掉。taste-skill 正是沿着这条路走到今天的项目v2 从 247 个 curated 站点One Page Love、Awwwards Sites of the Day的研究里蒸馏出一套无装饰的 house style并用真实浏览器里的inspect.mjs去测量而不是靠提示词祈祷。但项目自己的文档里写着一句容易被跳过的话Taking the ornaments away is only half the job; a page that has lost its labels, rules and cards and gained nothing in their place reads as thin, and blind jurors rightly prefer a richer page with tells over an empty page without them.见 SKILL.md 开头 Warning 一节。这句话点出了本文要谈的问题约束是好事把每条阈值都当成必须打满的指标结果往往比不加约束更丑。下面四种翻车都能在仓库源码里找到具体的判定逻辑。先把话说明白规则的定位是靶心不是评分在讲翻车之前得先接受一个不太舒服的数字。项目把自家的检测规则跑在那 202 个可测量的获奖站点上结果是中位每个站点有 4 个 FAIL只有 4% 的站点完全干净见 research.md §9。被禁得最多的几项恰恰在获奖站上很常见标题超过两行 60%、疑似 eyebrow 60%、细线 50%、等宽字体 37%。同一份研究里还有一组盲测记录最终轮三个 briefv2 得分 7.7无技能基线 7.8另一个设计技能 7.2CHANGELOG.md v2 的 How it was tested。也就是说规则的价值不在于把分数顶上去而在于把没人做过决定的页面排除掉。理解了这一点加太猛才不至于被误读成再加一点就好了。翻车一把装饰全删了留下一个洞去掉卡片、去掉分隔线、去掉阴影是最容易执行的一条因为它可以机械地做。问题在于删掉之后空出来的位置规则并没有告诉你填什么。SKILL.md的 House rules 末尾只写了一句方向性的话Removing ornament leaves space. Never fill it with another ornament. Fill it with scale, with the full content, with a picture made for this subject, or with a field of flat colour.如果没有做到这一点检查器会用三组阈值把空翻译成错empty-screens桌面端有2 个及以上屏幕的有效内容文字、图片或色块占比低于 20%直接 FAILblank-gap页面中出现高度超过视口 60% 的纯空白段 FAIL42%–60% 之间出现两段及以上也 FAILlopsided/hero-void有 2 个及以上区块把内容全挤在一侧、另一侧留白超过 42% 宽度FAIL首屏出现一个占屏 28% 以上的空矩形WARN。判定逻辑在 rules.mjs 的judgeLayout()里空白段用的是视口高度的比例而不是像素const big L.gaps.filter((g) g.height H * 0.6), mid L.gaps.filter((g) g.height H * 0.42 g.height H * 0.6); if (big.length || mid.length 2) add(L.stage ? WARN : FAIL, blank-gap, ...)更严厉的是评论区那套封顶机制critique.md 规定只要出现两个及以上几乎空的桌面屏设计分直接不超过 6.5无论其他部分多精致。值得对照的是 layout.md §4 的结论在 97 个 Sites of the Day 的阅读记录里读者把每一块大空白判成两种东西之一rest被某个东西收口或hole没人收口。强站也有很多 rest但大约一半的强站仍然留有至少一个 hole而 hole 正是访客第一时间会点名的问题。所以过度留白的翻车不是审美判断是可测量的删掉装饰之后若没有把尺寸做大、内容写满、或把这一块交给一张属于这个主题的图片检查器量到的就是洞。项目自己在 tells.md §8 给这种状态起了名字叫 avoidance aesthetic任何人只要知道类别加上一份禁止清单都能猜出这个页面长什么样。翻车二为了不被判太静把动效堆上去动效这条最容易踩进指标化的陷阱因为它是整套规则里唯一带下限的inspect.mjs里写着const MOTION_MIN 8, MOTION_GOOD 16; // distinct moving elements over load one scroll through the page加载与滚动过程中实际发生位移的元素少于 8 个still-pageFAIL少于 16 个WARN。而研究给出的获奖站中位数是每页 130 个元素被脚本移动motion.md §2。一个刚被禁掉一切的页面很容易在这个数字上恐慌于是往每一块上加同一个 fade-up。但这恰好撞上另一条明令禁止的规则同一个 fade-and-slide-up 打在所有区块上是生成页动效最典型的 tell被点名最多的就是它首屏十几个错峰入场同样被禁。真正的要求是结构化的五件事两三个滚动场景、一个 signature move、每个区块按阅读顺序编排的入场错峰 60–90ms位移 16–32px、控件反馈、一张会动的图片。堆叠的代价在场景检查里立刻显形检查项阈值后果many-scenes一页超过 4 个滚动场景WARN要求砍到两三个scene-heavy场景占位合计超过页高的 60%WARN要求缩短停留long-pin同一段大字连续占据 3 屏以上WARNempty-screens空转的 pinned 舞台留下的空白FAIL这些判定写在 inspect.mjs 的场景与帧检查段里。它们共同指向一个事实动效的预算是守恒的。你把 20 个区块都做成入场signature move 就不再是那一个记得住的动作而只是第 21 个渐显你把 6 个场景塞进一页每个场景能分到的阅读间隔就被压到零scene-heavy会替读者说出这里太挤。翻车三配色往两头拉都会失衡配色是过度约束最容易被误读成禁用列表的地方。rules.mjs用一个 HSL 区间函数把三类颜色家族打成生成页签名export function colourFamily(hsl) { const { h, s, l } hsl; if (inRange(h, 22, 62) s 0.16 l 0.88 l 0.995) return cream; if (inRange(h, 6, 30) s 0.38 s 0.85 l 0.42 l 0.72) return terracotta; if (inRange(h, 244, 295) s 0.42 l 0.3 l 0.8) return ai-purple; return null; }组合起来就是几条硬门cream terracotta 同时出现 FAILterracotta 单独出现也 FAIL紫/靛 FAIL任何渐变填充 FAIL静止元素上的阴影 FAIL1px 描边盒子 ≥3 个 FAIL。把这份清单当 KPI 执行最省事的做法是把页面调成一片灰。然后就会触发另一侧的阈值grey-body。检查器会算运行正文与背景的对比度低于 7:1 就 WARN提示语写得很直白the running text is a soft grey on its ground… pages read thin and unfinished when everything is grey。同类还有应用屏那边的no-data-hue如果一张带图表的屏幕上完全没有色相而彩色像素占比低于 0.2%会提示把风格里唯一的那支图表色放到主数据上。真正的约束从来不是少用颜色而是比例。colour.md §3 给的是份额底色ground占 70%–90%墨色承担文字也许再承担一个反色区块accent 在任一屏幕上不超过 5%它标记动作和至多一个重复元素表面用 2–6 个亮度点的一步色阶区分不用线也不用阴影。应用屏那边还有一条具体的预算首屏强彩色像素超过 12% 就 WARNcolour-sprawl研究里被测的真实产品屏大多在 3% 附近。约束的意图是把颜色花在数据上不是不许有颜色。把 5% 理解成 0%就是从AI 紫翻到施工图。翻车四层级被两头拉断字号是最容易被拉满的参数。想显得有冲击力就把 display 拉到 9vw想显得克制就把所有文字压到 15–16px。两条路都会失败因为检查器是双向夹的。往大拉headline-lines规定任何标题在任何宽度下超过 2 行就是 FAIL陈述段落按 statement 尺寸处理桌面 ≤36px、平板 ≤32px、手机 ≤24px可放宽到 3–4 行。而且修法顺序被写死在给代理的提示里先砍字再放宽 measure最后才降字号且不得低于已选定的 scale。往平压focal-point会量首屏最大字号占视口宽度的比例hero.vw以及最大图片占视口的比例两者都不够、又没有真实界面片段时 FAILelse if (!mobile m.hero.vw 4.5 (m.heroMedia[0]?.ratio || 0) 0.3 !m.page.uiFragments) { add(FAIL, focal-point, ...); }研究数据支持这条最强站点的最大字号中位数是 8.4vw弱站是 5.0vwtype.md §1。同时另一头还有size-count一页出现超过 9 个不同字号就 WARN条目里的建议是一页大约五个display、heading、lead、body、small。而body-size卡在 15px 的下限低于 15px FAIL16px 以下在桌面 WARN。于是就有了一个典型的两难字号种类被压到 5 个以内display 又被要求大到 8vw 量级那么显示级与正文级之间至少 4 倍的落差就必须靠极少的几级完成中间任何一级顺手加个 20px的小标题都会同时踩到size-count和层级扁平化。这也是 critique.md 第 6 条 pass 的原话从正文到标题的跳跃要decisive三倍以上。参数上限为什么不能一起拉满把上面四段合起来看会发现一个结构性的事实这些阈值不是独立指标而是成对的下限与上限中间只有一条窄带。你想优化的目标拉满时触发的检查反向拉满时触发的检查留白/克制empty-screens、blank-gap、lopsided装饰回归gradient、shadow、icon-cards动效表现力many-scenes、scene-heavy、long-pinstill-page8 FAIL16 WARN色彩克制grey-body、no-data-hue、无 accent 的扁平感palette-purple、palette-claude、colour-sprawl字号冲击力headline-lines、overflowfocal-point、size-count、body-size更麻烦的是修一个 FAIL 常常会打开另一个。删掉三张图标卡片那一段就变成lopsided或blank-gap把空白填上一张图片可能让few-pictures过关却让某一屏变成6 张小图从而在 critique 的第 2 条 pass眯眼测试里被判成全是中等质量、没有主角给页面加动效躲开still-page又可能因为入场动画没触发而留下空带直接命中reduced-hidden或empty-screens。这就是参数不能一起拉满的工程含义规则内部有一个隐含的预算总量是守恒的。研究给出的获奖站画像本身就是这种平衡的产物图片中位数 7 张头部 8 张最低 2 张但 42% 的屏幕一张图都没有、19% 的屏幕 90% 以上是图research.md §12。它不是均匀铺满而是少数屏幕承担全部视觉重量其余屏幕留白。还有一层--allow这个开关是按规则 id 全域豁免的。你在某一次构建里为了省事放行hairline之后这个页面上所有细线都不再被计量。工具没有变弱是仪表被关掉了。回退策略与灰度验证项目对规则和判断冲突这件事给了一套相当克制的处理流程可以直接当团队的灰度方案用。第一重抽要有理由且必须记账。draw.mjs抽出的方向表direction sheet默认要求采纳不要和你本来就会做的布局混合。只有当三种情况之一成立时才允许--redraw与已声明的品牌约束冲突、需要并不存在的素材、某个 section 装不下真实内容。原文明确加了一句Never redraw to get something more comfortable。每次重抽都会写进direction.json的redraws计数并在最终报告里说明。第二豁免要单条、要留痕。品牌自带紫色时正确做法是保留品牌资产、在报告里说明并且只对那一条规则传--allow palette-purple而不是把整个调色板检查关掉。inspect.mjs会把allow列表写进report.json读报告的人知道哪些门是开着的。第三验证要分层且必须在出货态上做。检查器默认跑 1440 / 768 / 390 三个宽度并在 1.2 秒后确认首屏标题真的可读late-titleFAIL。2.1.5 加入的dev-server警告值得单独提如果检测到 Vite / webpack / Next 的开发服务器会提醒你在 production build 上再跑一次。这条来自真实问题构建工具会把backdrop-filter之类的东西裁掉dev server 上看到的不是访客拿到的东西CHANGELOG.md 2.1.5。第四也是最便宜的一次回退演练prefers-reduced-motion。检查器会另开一个 reduced-motion 的页面扫描首屏文本只要有 2 段以上因为等待动画而不可见就 FAILreduced-hidden。所有隐藏初态都必须写在media (prefers-reduced-motion: no-preference)里reduced 状态就是完成态。这条规则的实际效果是如果你的动效层撤掉之后页面塌了说明它本来就靠动效撑着。第五改版要有 before/after 两个目录。对已有页面做 restyle 或 redesign 时流程要求先把现状inspect到.taste-skill/before改完再 inspect 到.taste-skill/after在三个宽度上并排比较并逐条点过原来能用的链接、表单和菜单。修复顺序也是固定的因为后面的项救不了前面的项想法 → 层级 → 构图 → 字体 → 图像 → 颜色 → 细节 → 动效。第六给自己设止损。critique 最多三轮每轮只修最显眼的三个问题第三轮如果仍然低于 7.5报告里要如实写出剩余问题不许四舍五入。同理inspect.mjs通过只代表没有测到被禁的东西原文的说法是 Passing the meter is the floor, not the grade。第七把规则本身当代码测。仓库的tests/目录里有针对 frontmatter 解析、检查器文件命名、文本编码和浏览器 profile 清理的测试。规则一旦写进 CI就不容易在这次先放过的临时妥协里腐化而 2.1.2 的事故描述字段里一个未加引号的:让整个 skill 被静默丢弃说明这类测试是必要的。收尾约束的对象是决定不是数量回头看那三个曾经常被引用的旋钮DESIGN_VARIANCE/MOTION_INTENSITY/VISUAL_DENSITY现在只保留在 v2 experimental 的历史说明里它们的直觉是参数越高越有设计感。但 v2 的实践恰好相反真正拉开差距的不是把某一维推到 10而是每一维都被推到它该在的位置并且彼此不打架。四种翻车的共同点是把避免某种丑误当成达成某种美。删装饰避免了模板味却可能造出空洞加动效避免了静态感却可能造出噪音禁颜色避免了 AI 紫却可能造出施工图放大字号避免了平庸却可能造出断掉的层级。rules.mjs里的每一条 FAIL 都只是一道门门后面的房间长什么样仍然要靠在截图前坐着看完十四个 pass 的人来决定。项目自己的盲测结果是最好的注脚规则齐备的 v2 是 7.7什么技能都不给的基线是 7.8。约束能稳定下限但顶不上限。把规则加猛之前先确认自己还在做设计而不是在做合规。【免费下载链接】taste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
