Taste Skill：从设计规则到方向抽样与浏览器检查

Taste Skill 源码仓库

AI 参与说明（Agent：Codex）：本文根据公开源码协助调研、撰写与局部验证，资料核验于 2026-10-15，锁定提交 f624f37。使用项目 Anatomy 制作方向抽样交互解释，中文正文使用 humanizer-zh 编辑。运行记录：模型 gpt-6.1-sol，reasoning effort ultra，执行入口 Codex Desktop，提供方 openai；CLI 版本 0.162.0-alpha.17.2（不代表桌面 App 版本）。作者的研究报告与本文实际执行的验证分别说明。

讲解修订（2026-10-15，Agent：Codex）：撤下初版方向抽样交互图，改为说明真实模块、设计档案与输出之间的关系，并区分源码行为与假设输入。初版图是依据部分源码重建的教学模型；装置外观为本文设计，并非上游界面。此次修订沿用上述模型与运行参数。

Taste Skill 值得用来试做有明确视觉目标的官网、产品介绍页和作品集。它把设计工作拆成主题盘点、方向选择、素材寻找、页面实现和截图修订，让 Coding Agent 对每个选择给出依据。它提供的是工作方法；公开对照尚未证明它能稳定提高平均审美评分，使用时仍要以品牌、内容与真实用户需求验收。

当前默认 design-taste-frontend 已经是 2026-10-13 发布的全新 v2，由 Markdown 指令、脚本、参考资料与方向数据组成。网上常见的三拨盘单文件版现名为 design-taste-frontend-v2-experimental，最早版本为 design-taste-frontend-v1。默认安装名没有改变，升级时需要核对文件内容。Changelog

它最有研究价值的部分，是将审美偏好拆成可执行、可追踪的机制：用脚本分配候选方向，Agent 选择与主题契合的一种；用页面实际度量拒绝部分固定模式；再看截图修正。它的硬规则是作者选择的一套 house style，不能当成所有优秀界面的普遍规律。上游本身承认部分禁用手法在高评分样本中反而更常见。默认 Skill、研究方法与限制

阅读前先看这几个词

先按任务选用

上表结合上游的任务分工与规则内容给出选用建议。尤其要区分“多个 Skill 已安装”和“同时把它们作为强制设计标准”；后文会列出具体冲突。上游选用说明

源码版本与目录

本次读取 GitHub main 时取得 commit f624f37a8c650b9cc550253104925efe4c8de246，提交时间 2026-10-14T15:00:49Z。Codex plugin manifest 声明版本 2.0.0。固定提交、Codex manifest

主要目录包含 skills/、research/、examples/v2/、tests/、插件 manifests 与两个 shell helper。默认 Skill 的结构是：

• SKILL.md：执行顺序、house rules、特殊场景与报告要求。
• references/：copy、type、colour、layout、imagery、motion、critique、tells、research，共 9 份参考文档。
• library/：方向、hero、section、字体、色板、图片、motion、参考站点数据。
• scripts/：draw.mjs、assets.mjs、lint.mjs、inspect.mjs，以及 CDP、probe、rules 三个内部模块。
• assets/base.css 与 base.js：可选基础样式与交互代码。
• evals/evals.json：六类 brief 的 Agent 对照评估说明。

本次直接解析固定 commit 的 JSON，得到 20 个 directions、48 个 heroes、172 个 sections、44 个 type systems、56 个 palettes、11 个 motions、181 个 reference sites；photo library 有 19 组、420 个不同图片 ID。数字与 Changelog 对得上。库内 181 个 reference sites 不等于作者研究中全部 247 个已加载样本。library、Changelog 数据规模

仓库内的 14 个 Skills

下表 name 按各自 front matter 原样记录；description 为中文摘译，完整原文见各行固定源码链接。目录名与安装名并不总是相同。

默认 v2 如何把输入转成结果

这里分析的是默认 v2 的指令、数据与脚本怎样协同工作。SKILL.md 告诉 Agent 按什么顺序做设计；library/ 提供预置的设计档案；scripts/ 执行抽样与检查。下图各步骤对应这些真实职责，其中标为 Agent 的步骤需要模型判断，并非脚本自动完成。

输入是 brief、真实素材条件、项目 stack 与既有品牌约束。Agent 先列 8–12 个客户独有事实，再将页面写成「主张与证明」，这些主张决定 section 顺序。随后 draw.mjs 抽出三个候选 direction，Agent 选择能够承载主题的一项，再生成完整 direction sheet。sheet 包含 composition、type、palette、photos、hero、section blueprints、signature motion 与参考站点。执行顺序

direction 是构图方式，idea 是将主题特有材料映射到构图装置的一句话。上游还要求一个使用真实内容的 live thing，如可操作的产品选择器；支持手机并有无脚本 fallback。代码实现完成后执行 lint 与 inspect，再打开截图按 rubric 批评，最多三轮，每轮修最严重三个问题。动效层随后加入，再次检查。idea 与 live thing

The scripts deal and measure; the agent decides and builds. 这些步骤由 Agent 按 Skill 指令组织，脚本负责其中的抽样、搜索和度量，并没有一个调用后自动完成所有设计判断的总函数。

flowchart TD
    A["brief、真实素材与品牌约束"] --> B["Agent 盘点主题，组织主张与证明"]
    B --> C["draw.mjs 给出三个候选方向"]
    C --> D["Agent 选择方向，形成主题构思"]
    D --> E["draw.mjs 生成 direction sheet"]
    E --> F["Agent 实现静态布局、内容与素材"]
    F --> G["lint.mjs 与 inspect.mjs 检查"]
    G --> H["Agent 看截图，每轮修三个主要问题，最多三轮"]
    H --> I["加入动效与减少动画的替代呈现"]
    I --> J["再次检查，报告方向、素材来源与遗留问题"]

draw.mjs 使用 node:crypto 的 randomInt 生成初始 seed，再使用显式 PRNG；--seed 可指定起始值。它会参考最近历史避开重复，因此复现还要控制历史状态与输入。项目输出默认进入 .taste-skill/；用户历史默认保存在 ~/.taste-skill/history.json，最多保存 24 条，环境变量 TASTE_SKILL_HISTORY 可重定向。draw 源码

关键参数：--sector、--brief、--sections、--tone、--have、--keep palette,type、--options 3、--direction、--seed、--out、--redraw、--alternatives、--show。--options 只显示候选，不写 direction/history。--have 表示确实存在的项目素材，不该把计划去公共图库找的图片算成客户拥有的照片。draw 参数

源码中的方向选择：从设计档案到说明单

本节分析的是上游 draw.mjs 及它读取的 library/directions.json。要回答的问题是：脚本交给 Agent 的“方向”到底是什么，Agent 拿到它以后还要做什么？

一个 direction 是库中预先写好的设计档案。 它包含构思方式、构图、字体类别、配色与素材原则、动效和易错点，还带有适用行业与素材条件。它不是现成网页；选中它意味着后续设计将沿着这份档案组织。方向数据

例如，假设要制作“CSV 文件对账工具的产品介绍页”，并给脚本传入 sector=saas、无素材、无 tone、seed=42，同时固定历史为空。产品用途是本文假设的输入，以下候选 ID、档案内容与转换规则来自固定版本源码。 这个例子只核对方向选择，没有实际生成该产品的网页。

三个候选也不只是不同名称。editorial-report 借用印刷报告的构图：大标题、固定纵轴，交替安排文本与整幅色块；quiet-instrument 采用窄单栏、小型演示与较多留白；dense-tiles 将整页组织为尺寸受约束的信息块网格。选择方向会改变页面怎样组织内容，而非只替换一种颜色。 这些描述摘自方向档案；本例未替 Agent 作出最终选择，也没有展示三张已生成的网页。候选输出与说明单生成

这里有一个容易误解的边界：--brief 会记入说明单，但不参与候选方向的自然语言匹配。改写“CSV 对账工具”这句话，在其余输入和历史相同时不会改变抽样；改变 sector 或素材条件则可能改变候选池。主题是否适合某个方向，仍由 Agent 比较和判断。随机抽样让它先看到几个候选，不能替代内容理解。

安装与实际使用

用户常见的入口命令是：

npx skills add https://github.com/Leonxlnx/taste-skill

它会发现仓库中的多个 Skills；交互环境下通常继续选择技能和目标 Agent。不要将它理解为无条件把全部技能静默装入所有 Agent。只看清单用 --list，只选当前默认版用 --skill。Skills CLI 默认安装到项目范围；加 --global 才改为用户范围。具体落盘位置以安装结果为准。Skills CLI 官方文档

# 只列举候选，不安装；本次实际执行，列出 14 项后退出
npx skills add https://github.com/Leonxlnx/taste-skill --list

# 项目范围，为 Codex 定向选择当前默认版
npx skills add https://github.com/Leonxlnx/taste-skill \
  --skill design-taste-frontend --agent codex

安装后可以先只运行方向抽样。下面是 Bash 示例；将变量指向安装结果中真实的 Skill 目录。它要求目录中同时存在 scripts/ 和 library/，只复制 SKILL.md 无法运行当前 v2 的配套脚本。

TASTE_SKILL_DIR="./.agents/skills/design-taste-frontend"
node "$TASTE_SKILL_DIR/scripts/draw.mjs" \
  --sector saas --brief "A reconciliation tool for CSV files" \
  --sections showcase,features,pricing,faq,footer --seed 42 --options 3

预期结果是三份候选方向摘要；--options 3 不保存说明单和历史。实际结果还受固定版本、输入和已有历史影响。要采用刚选中的候选，将 --options 3 换成 --direction 和该 ID，生成完整 direction.json；不指定方向时，脚本也可以自行抽取方向并生成说明单。其中 --keep palette,type 适合已有品牌，会跳过这两项抽取；--have product-ui 只应在确有界面素材时使用。

交给 Agent 的 brief 应写清受众、主要动作、真实内容和素材。下面是一个假设场景的调用示例，使用时应替换为真实条件：

使用 design-taste-frontend，为独立字体工作室制作公开作品集。
目标是让潜在客户提交项目咨询；已有品牌字体、黑白色板和四张作品图。
保留品牌字体与色板，先盘点作品特点，再抽取三个候选方向并选择一个。
按作品内容组织章节，完成页面、浏览器检查和截图修订。
报告 seed、选择理由、素材署名、示例文案和尚未完成的检查。

验收应分两层：先确认内容真实、主要动作可完成、页面可读且符合品牌；再核对方向落实、各宽度的正文渲染与检查结果。选择其他风格时，应在开始前明确主规范。已有单文件拨盘版的项目若要升级，先比较行为变化；需要原样复现时选择保留的旧版安装名。

素材来源与依赖

完整运行默认 v2，需要 Node 22+ 与已经安装的 Chrome、Edge 或 Chromium。其中 draw、lint、assets 单独运行时，上游说明支持 Node 18+；inspect 使用 Node 22+ 的内置 WebSocket。脚本没有第三方 npm 依赖，使用 Node 内置模块与仓库自身模块；inspect 通过 Chrome DevTools Protocol 启动 headless 浏览器。图像生成类 Skills 需要宿主提供生图工具，Skill 文件本身不会创建生图能力；Stitch Skill 需要能访问 Google Stitch，MCP 是可选集成。Requirements、CDP、Stitch prerequisites

assets.mjs 无需 API key，但需要网络。图片搜索源是 Openverse、Wikimedia Commons、Art Institute of Chicago、Met；视频源是 Wikimedia Commons、Internet Archive、NASA。默认过滤为 cc0、pd、by、by-sa，输出 source、creator、license 与 credit，--get 下载到 assets/ 并写 credits.json，--credits 输出署名。--license all 能放开默认过滤，因而不能把脚本筛选等同于对素材权利的完整审核。本文未调用这些 API 或验证任何具体素材。assets 源码与参数

另有 420 张预编排 atmosphere photographs，它们走 Lorem Picsum/Unsplash，与上述开放图库搜索并不是同一来源。默认 Skill 要求不得把公共图库照片冒充为客户自己的产品、房间、菜品或员工。photos 数据源

Inspector 检查什么

lint.mjs 对源文件逐行执行正则，支持 HTML、CSS、JS/TS、Vue、Svelte、Astro、MDX 等扩展名，跳过常见构建目录、点目录与超过 4 MB 文件；行长超过 2000 的行也不扫描。它不是 parser、type checker 或 build verifier。带 taste-skill-ignore 的整行跳过检查，局部允许要在报告中解释。lint 实现

inspect.mjs 默认打开 1440、768、390 宽的页面。它给本地文件开临时 127.0.0.1 HTTP server，测量 computed styles、geometry、loaded fonts 等，再保存首屏与滚动 contact sheets、report.json。默认每个宽度最多采 12 屏，过长页面并非逐像素检查。CLI 有 --out、--widths、--allow、--json；direction.json 中的 allow 会自动合并。退出码 0 仅表示本次度量中没有未豁免 FAIL。inspect 源码

主要 FAIL 包括：标题超过两行；eyebrows；code 外 monospace；decorative numbering；部分 tiny uppercase labels；emoji；gradient、静止阴影、紫色或 terracotta 色系；过多 hairlines/outlined boxes；icon-topped cards；极低对比度；正文太小；横向 overflow；broken image；首屏没有主视觉；文字被遮挡或裁切。表格、表单与真实 <code> 有例外，标为 data-ui 的真实产品界面片段保留部分边框规则，但不能拿它包住整页。judge 规则

值得精确区分的阈值：

• 桌面少于 4 个 realPictures + uiPictures 为 few-pictures FAIL；SVG 不计入 real picture；无 video 为 WARN。
• 桌面动效得分实际是 motion.elements + motion.playingVideos * 4，小于 8 为 FAIL、小于 16 为 WARN。一个 playing video 折算 4，并不严格等于「至少 8 个独立动效元素」。
• 至少两屏被 heuristic 判为填充低于 20%，会有 empty-screens FAIL。
• 3 个主要字体在实际规则中是 WARN，大于 3 才 FAIL；文字对比度小于 2.6 才直接 FAIL，其他不足目标的情形会 WARN。因此文档中的偏好与脚本退出阈值不总是一一相同。

这些是有限探针。它不会实际走完预订/购买等业务路径；默认 inspect 没有点击 CTA、提交表单，也没有启用其 CDP wrapper 已支持的 reduced-motion 模式。console exception 收集进 JSON，脚本并未统一将其升级为 FAIL。它不提供完整 accessibility audit、性能验收、后端验收或真假素材审核。上游也明确说通过 meter 只是下限，仍要看截图。inspect 流程、CDP reducedMotion 接口

这些偏好为什么不能当通用设计定律

上游调查描述的是 2026-10-05 从 One Page Love 与 Awwwards gallery 收集的 248 个网站，247 个成功加载；235 个可供 panel 评审，202 个满足 typography measurement 条件。panel 是 21 个模型 reviewer，每个约看 12 个网站，根据静态截图与测量按 design 40%、usability 30%、creativity 20%、content 10% 评分。这些不是人类评审，也不是真实 Awwwards 分数。研究方法

研究是相关观察，不是隔离变量证明。上游明确承认：monospace、index numbering 在高分组更常见，thin rules 并未分出高低，仍基于作者 house style 禁用。它的 inspector 跑在 gallery 自身时，中位数为 4 个 FAIL，只有 4% 无 FAIL；所以「没有 FAIL」也不是对真实优秀网站的完整描述。devices、gallery inspector 结果

作者报告五轮、六类 brief 的盲评，Skill 在各轮后依据评审继续修订。最后一轮三个 brief 中，v2 平均 7.7、baseline 7.8、另一 Skill 7.2，v2 赢 2/3；五轮表中该 Skill 的均分均未超过 baseline。最后一轮 brief 已用于前一轮，每个 brief、每轮只有一名模型评审，作者估计单次约有 0.5 分噪声。本次没有独立复现这些构建与打分；不能把结果表述成 v2 稳定全面胜过无 Skill。作者所写约 30–45 分钟、数十万 tokens 也是其运行经验，不是本次实测预算。比较结果与限制、Cost

组合冲突与使用边界

不要同时把多个风格 Skill 当成必须全部满足的总规则。默认 v2 禁止 eyebrows、gradient、静止 shadow、浮动 pill nav 与许多装饰线；high-end-visual-design 却明确要求眉题 pill、floating glass pill nav、nested shadow cards；industrial-brutalist-ui 依赖 micro monospace、rigid lines 与 telemetry 风格；gpt-taste 强制 AIDA/bento/GSAP 并偏好 radial backgrounds，与 v2 的 argument-led sections、无 gradient、非 card grid 明显不同。这是并列的审美方向，不是可无条件叠加的分层依赖。soft Skill、brutalist Skill、GPT Skill

gpt-taste description 说 Python-driven true randomization，但正文实际要求模拟一段 Python execution，按 prompt 字符数构造 deterministic seed，并输出 mock Python result；它不提供 Python 随机脚本。这与当前 v2 真正执行 JS draw 是不同机制，不能把措辞当成已发生的工具调用。GPT randomization

许可

仓库 LICENSE 为 MIT，版权归 2026 Leonxlnx，复制或分发实质代码/文档时需保留版权和许可声明。图片、字体与外部素材按自身来源与许可处理；仓库 MIT 声明不自动代替素材许可。LICENSE、imagery licensing

本次实际执行的最小验证

本次环境 Node v24.16.0，源码来自本文固定提交。规则案例直接导入原始 rules.mjs，没有改写其判断规则；skills add --list 实际列出 14 项后退出，本次未执行安装或升级。

上述 judge() 共 8 个断言全部通过；lint 两个案例按预期返回。它们证明源码在这些局部输入下的行为，不能证明 probe 对真实复杂 DOM 都能正确识别，也不能证明生成页面审美质量。完整真实浏览器 inspector、开放图库下载、六类页面生成与盲评均未执行。仓库 tests/skill_test.sh 本身主要覆盖 source ./skill.sh helper 返回行为；evals.json 提供人工/Agent 评估方案，不是会自动完成 UI 质量证明的测试集。上游 helper tests、evals

关联阅读

• Skills Overview：按用途查找相关工作流与工具。
• 本地 Agent Skills 安装清单：区分安装来源、可用范围与当前会话实际加载。
• Anatomy：让 Coding Agent 用交互式装置解释技术原理：交互式技术讲解的方法与适用边界。