TasteSkill 实测：给本站改版，首页 12 个 FAIL 清零

TasteSkill 是一个给编程 Agent 用的网页设计 Skill：先抽签定美术方向，再用真浏览器检查页面，挑出「AI 味」并逐条判 FAIL。10 月 21 日晚我们拿它给智涌AI 本站改版：首页从 12 个 FAIL 降到 0，列表页和文章页也都清零，前后改了三轮。

它是什么

一句话：一份让 Agent 有「审美纪律」的 Skill。它不提供组件库，提供的是一套做法：开工前抽一个设计方向，做完用脚本在真浏览器里量页面，量出问题就判不合格，直到改完为止。

解决什么问题

让大模型直接写一个首页，结果往往长得差不多：居中大标题、标题上方一个小胶囊标签、紫蓝渐变、三张带阴影的图标卡片。作者把这些称为生成页面的「味道」。TasteSkill 的办法是三层约束：

• 抽签定方向。据 README，作者研究了 247 个精选网站，归纳出 20 种设计方向。脚本按你的行业和语气随机发 3 个让 Agent 挑，避免每次都回到同一个默认模板。
• 写死的家规。禁止渐变、静止状态下的阴影、1px 细线描边框、标题上方的小标签、紫色和靛蓝；正文至少 16px，标题不超过两行，左右边距要相等。
• 真浏览器验收。inspect.mjs 用本机 Chrome 打开页面、逐屏滚动、截图，把量到的问题分成 FAIL 和 WARN。FAIL 不清零就不算完成。

怎么用

# 安装（npx skills，装到 Claude Code 的 skills 目录，我们实测 2 秒）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# 以下是 Agent 会调用的脚本，人也可以直接跑（Node 22+）
S=.claude/skills/design-taste-frontend
node $S/scripts/draw.mjs --sector other --tone editorial --brief "…" --options 3   # 发 3 个方向
node $S/scripts/draw.mjs ... --direction editorial-report                         # 展开选中的方向
node $S/scripts/lint.mjs src/style.css src/index.html                             # 静态检查
CHROME_PATH=/path/to/chrome node $S/scripts/inspect.mjs http://127.0.0.1:8765/   # 三个宽度的浏览器检查

正常用法是直接对 Agent 说「用 design-taste-frontend 给这个页面改版」，它会按 SKILL.md 的流程走：写简报、抽方向、搭页面、检查、看截图、修改，最多三轮。改版场景下，技能要求先给旧页面跑一次检查留底，保留原有技术栈和内容。品牌已经定死的颜色和字体，可以用 --keep palette,type 不参与抽签。

实测：给 friendlyai.top 改版

环境：2026-10-21 晚，Debian 服务器，Node 22.23.3，Chromium 用的是机器上已有的 Playwright 浏览器（设 CHROME_PATH 即可，技能本身什么都不装）。站点是纯静态 HTML 加一个 CSS 文件。为了不刷阅读数，检查都跑在本地构建副本上，并去掉了统计脚本。

抽方向。三张牌是「页面就是实物」「印刷年报」「一句话即版式」。我们选了「印刷年报」：资讯站卖的就是被编辑过的内容，适合大标题、整块色块和严格的栏线。展开后的方向单写得很细：首屏是 2×2 拼版；配色是白底黑字，加橙、鼠尾草绿、荧光黄和黑四种色块；列表用会折成书脊的卡片；页脚把联系方式放大成标题；招牌动效是「快门式开图」。

检查结果逐轮变化（FAIL / WARN，三个宽度合计去重）：

改版前首页的 12 个 FAIL：标题上方的「公告」小标签、订阅框里的 📬 emoji、3 处渐变、66 处静止阴影、头部细线、63 个 1px 描边框、紫色（#6d28d9）、正文 14.1px、0 张图、首屏没有焦点（最大字号只有 2.1vw）、页面完全不动、按钮带阴影。静态检查 lint.mjs 在旧 CSS 里查出 46 个 FAIL，改完是 0。

它逼出来的几个真问题，都是我们自己看截图没注意到的：

• 滚动揭示的空洞。文章小标题用 clip-path 做遮罩动效，结果 IntersectionObserver 永远不触发，手机上留下一段段空白。另外它只滚 11 屏，首页后面几十张卡片保持透明，被判 blank-gap。改法是揭示前保留 20% 不透明度，并且每次回调时补扫已经滚过的元素。
• 公告条被当成标题上方的小标签。把它挪进页头之后就不算了。
• 旧文章首屏没有焦点。9 篇老文章的头图排在导语和结论框之后，第 3 轮统一挪到标题下面。
• 一个 CSS 优先级错误。列表页最后一张卡片贴着页脚，原因是 .w 的 padding 把 main 的下边距盖掉了。

我们没照方向单做的地方。技能要求偏离时写明原因，这里一并列出：

• 字体。抽到的 STIX Two Text 是英文衬线字体，要从 Google Fonts 加载，国内访问慢，也没有中文字形。我们改成系统中文字体栈（苹方、冬青黑、微软雅黑、Noto Sans CJK），只沿用它的五档字号和收紧字距。中文正文行高定在 1.85，比方向单给英文的 1.45 高。检查脚本因此一直报 font-not-dealt 警告。
• 弃用品牌紫。旧站主色是紫色，正好撞上它的禁色规则。我们没用 --keep palette 保留，换成了抽到的配色。
• 文章列表。「书脊卡片」是一个钉住四屏的横向卡组，放 62 篇可筛选的文章不好用。我们改成以头图为主、不加框的索引，技能允许归档类页面重复同一种模块。每张缩略图约 27KB，由文章头图自动生成，所以没用它的找图功能。
• 页脚。没做满屏色块，只做黑色底加一行大字的公众号。

上线前的人工调整。技能对这个首屏的要求是全站统一一个圆角（0 或 8px），我们原本用了 0。看完对比图，觉得直角太硬，于是改成一套圆角：大色块和头图 16px，缩略图和卡片 10px，按钮和输入框 8px，标签做成胶囊形。这条它的规则管不到，属于人的口味。同时把旧的「订阅周报」假表单换成了如实的公众号关注说明：那个表单点了只会弹出「订阅功能即将上线」。

局限和注意事项

• 默认面向落地页。「每页至少 4 张真实图片」（FAIL）、「页面要有动效」（FAIL）、「首屏要有主按钮」「最好有一段视频」（WARN）这类规则，放到搜索页、标签索引这种工具页上就不太合适。我们的 /search/ 仍有 2 个 FAIL（图太少、页面不动），/tags/ 也有 2 个（图太少、手机上左右边距不等）。一篇 40 字标题的文章在手机上折成 3 行，同样是 FAIL。我们没有为了过检查去加假图或改标题。
• 中文排版几乎没覆盖。字体、字号、行宽的参考数据都来自英文网站，抽到的字体也全是 Google Fonts。做中文站得自己换字体、调行高，并接受相应的警告。
• 耗时和 token。README 说一次完整构建大约 30–45 分钟、几十万 token，这是项目方自己的估计，我们没统计 token。我们这次是改版而不是从零搭，Agent 主要的时间花在读文档（SKILL.md 有 529 行，另有 11 份参考文档）和看截图上。
• 需要本机 Chrome。脚本用临时配置文件启动浏览器，不会自己下载。机器上已经有 Playwright 装的 Chromium 的话，用 CHROME_PATH 指过去就行，不必再装一个。
• 不上报数据。我们查了脚本里的外链，只有找图功能会访问 Openverse、Wikimedia Commons、芝加哥艺术博物馆、大都会博物馆和 NASA 的开放接口，没有统计上报。

适合谁，不适合谁

适合：用 Claude Code、Codex 一类 Agent 做营销页、作品集、活动页的人，以及想给现有站点做一次「去 AI 味」体检的人。就算不让 Agent 改，单跑 inspect.mjs 和 lint.mjs，也能拿到一份可执行的问题清单。

不太适合：以列表和长文为主的中文内容站，或者后台类应用，需要自己取舍规则（v2.1 给应用界面单独有一套规则，我们没测）。只想要现成组件的话，直接用组件库更快。