Taste Skill 评测：Claude Code 前端设计质量提升实战

Taste Skill 告诉你的 Agent 些什么

阅读简报并告知对方。 在写任何代码之前，Agent 必须写一行"设计解读"：Reading this as: 页面类型、受众群体、风格调性，倾向于哪个设计系统或美学方向。如果简报有歧义，可以提一个问题，但绝不能一次提多个。

设定三个旋钮。 每一个布局、动效和密度决策都受三个数值控制：DESIGN_VARIANCE（1 为完美对称，10 为艺术化混沌）、MOTION_INTENSITY（1 为静态，10 为电影级动感）和 VISUAL_DENSITY（1 为画廊式宽松，10 为驾驶舱式紧凑）。基准值是 8 / 6 / 4，还有一张表格将简报中的词汇映射为具体数值："minimalist"或"Linear-style"会降低 variance 和 motion；"trust-first"或"regulated"会进一步降低这些值。

避免一长串 AI 痕迹。 第 9 节禁止或限制那些暴露页面是 AI 生成的模式。Em dash（长破折号）在任何地方都禁止使用。连续三个完全相同的 Feature 卡片也被禁止，Inter 作为默认字体被禁止，类似 "06 · how it works" 这种章节编号眉标被禁止，Hero 区域里的 "BETA" 标签被禁止，装饰性状态点被禁止，填充性动词（"elevate"、"seamless"、"unleash"）被禁止，虚假完美的数字如 99.99% 被禁止。中圆点（middle dot）限制为每行最多一个。

通过起飞前检查。 大约 40 个勾选框，在 Agent 移交代码之前必须全部满足：零个 em dash、一个主色、一个圆角体系、CTA 对比度达标、Hero 在视口内且标题不超过两行、无重复 CTA、copy 自审。附录列出了真实设计系统的安装命令（shadcn/ui、Radix、GOV.UK Frontend、USWDS、Primer 等），供应该使用设计系统的简报参考。

安装方式

从作者的仓库，用 skills CLI 安装：

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

从 SkillGild 安装，适用于 Claude Code、Codex、Cursor 或 Gemini CLI：

skillgild install design-taste-frontend --agent claude-code

仓库默认的 design-taste-frontend 是 v2，其 README 称其为实验性版本；design-taste-frontend-v1 安装的是原始版本。SkillGild 也将上游文件夹列为 taste-skill。

简报内容

为 Ledgerline——一个面向自由职业设计师的虚构记账应用——制作一个着陆页。要求写成单个自包含的 HTML 文件，唯一的外部资源是 Google Fonts。简报列出了各区块，并禁止编造客户评价、客户数量、Logo 和奖项。一次运行使用 Taste Skill；另一次不使用任何 Skill。两次都使用 2026 年 10 月 9 日的 Claude Code 2.1.278 配合 Claude Opus 5，并关闭了 Skill 工具以确保不会加载其他已安装的 Skill。每种条件各跑一次：这是示例，不是基准测试。

Taste Skill 的运行结果完全按照 Skill 的要求开头：

Reading this as: SaaS landing for solo freelance designers (visually literate, spreadsheet-averse), with a calm, type-led, honest-tool language, leaning toward native CSS + Google Fonts (Outfit + IBM Plex Mono) and a near-monochrome palette with one ink-blue accent.

它将旋钮设置为 7 / 5 / 4，从基准值 8 降低 variance，因为"这是一个金钱应用，信任很重要"。它还解决了两处写作冲突：Skill 要求图标库，但简报只允许 Google Fonts，所以它没有使用图标；而且 Skill 禁止假截图，它在 Hero 区域做了一个可运行的产品小 Demo，包含每条样本交易上的客户端菜单和会自动重新计算的总计。

使用 Taste Skill 后的效果。 面板标注为"Example transactions"，税率标注为"an example 25% rate"。

不使用 Skill 的同一简报。

1440 px 下的 AI 痕迹统计：

零 em dash 值得注意：在我们测试的五个页面中，只有 Taste Skill 和 Impeccable 的页面没有任何 em dash，而 Taste Skill 的规则是绝对禁止的。它也是最短的页面，可见词约 460 个，而基准页面是 710 个，而且它在界面本身就将其样本数据标注为例示数据。

Taste Skill 整个页面，自上而下（无声）。 在 skillgild.dev 上观看。

它自己的两项预检失败了。 标题断行成了三行，而且在 1440 × 900 的尺寸下，Hero 的文字位置偏低，上面有一大片空白，因为它是相对于更高的交易面板垂直居中的。预检要求标题不超过两行，并规定 Hero 内容不能"浮在视口中间"。一份很长的检查清单仍然由写了页面的同一个模型来检查，所以在自己关心的尺寸上看看实际效果吧。

它还在标题中将一个词加重了颜色（"spreadsheet" 设为蓝色），这是 Taste Skill 允许而 Anthropic 的 Skill 不鼓励的做法。而且和测试中除了 Impeccable 之外的所有运行一样，它编造了产品事实：一个只读银行链接、收据捕获、CSV 和 PDF 导出、"由构建者提供的"邮件支持，以及取消后 30 天内可导出数据。这些都不在简报里。

这次运行用了 13 个 turn 和 7.1 分钟，Claude Code 报告的 API 等价成本为 $2.28。基准运行用了 2 个 turn、3.3 分钟和 $0.98。

375 px 下的 Taste Skill： 无横向滚动，菜单按钮替代了导航链接。

使用建议

Taste Skill 会对风格词汇、参考案例和受众产生反应，所以把这些给它：

Use Taste Skill (design-taste-frontend) for this landing page.
Product facts, and nothing else: <what it does, price, trial>.
Audience: <who>. Feel: <two or three vibe words>. References: <URLs you like>.
Dials: variance <n>, motion <n>, density <n>.
State your design read and dials before writing code.

自己设定旋钮是最快的方式：对于严肃产品降低 DESIGN_VARIANCE，对于发布页面提高 MOTION_INTENSITY。Skill 本身说明仪表盘和多步产品 UI 超出其范围；那里请使用 Impeccable 的 Operate 模式或 UI UX Pro Max。

在 skillgild.dev 上查看全部十个顶级 Claude 前端与设计 Skill，其中四个已用同一简报运行过。

原文发表于 skillgild.dev。