Taste Skill

为什么要用

核心特性

排版规则：字号层级、对比度、视觉层次
间距系统执行（消除 1px 偏差的内边距）
配色纪律（单一强调色、语义中性色）
构图批评（视觉重量、留白）
自我解释：说明修复的理由，而非仅仅给出「改成这样」
兼容 Tailwind、原生 CSS、SwiftUI、Compose

实时演示

实际使用效果

就绪

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： Taste Skill

通过品味过滤器审查 Claude 生成的落地页

👤 任何上线了 Claude 构建的营销页面的开发者 ⏱ ~30 min intermediate

何时使用： 初版输出还可以，但毫无特点。

步骤

批评

Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ 已复制

→ 10-20 个问题，每个带标签
修复一级问题

Apply only severity-high fixes. Don't change copy — only visual/structural.✓ 已复制

→ diff 已应用；页面不再显得千篇一律
迭代

Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ 已复制

→ 2 轮后收敛

结果： 一个读起来像精心打磨、而非批量生成的页面。

注意事项

skill 强加了一种与品牌冲突的风格 — 通过 --brand /design/brand.md 传入品牌规范，让 skill 遵守约束

搭配使用： filesystem

审计单个组件的品味问题

👤 触碰设计系统的开发者 ⏱ ~15 min beginner

何时使用： 在将新组件纳入设计系统之前。

步骤

批评

Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ 已复制

→ 问题列表，含引用行
变体检查

Compare hover, focus, and disabled states for visual coherence.✓ 已复制

→ 检测到偏差时报告

结果： 组件上线后减少「那个看起来怪怪的」类型的 ticket。

注意事项

批评忽略了有意为之的设计选择（如 brutalist 风格） — 传入 --style brutalist 或类似参数，放松部分规则

用 taste-skill 为新设计系统建立基线

👤 刚开始构建新产品的团队 ⏱ ~60 min intermediate

何时使用： 你在选择 token 比例、字体、配色，希望有一个合理的默认起点。

步骤

生成基线

Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ 已复制

→ tokens.json，每个选择附理由
压力测试

Generate sample pages (login, dashboard, settings) using the baseline. Critique your own output.✓ 已复制

→ 示例页面 + 自我批评，含可能的改进

结果： 一个无需与利益相关方反复协商的合理起点。

注意事项

生成的基线过于「安全」 — 提供品牌输入（氛围、参考案例），避免输出过于平淡

搭配使用： design-extract-mcp

组合

与其他 MCP 搭配，撬动十倍杠杆

taste-skill-leon + design-extract-mcp

从参考网站提取 token，再用 taste-skill 精炼

Extract tokens from https://linear.app, then run taste critique on a page using them.✓ 已复制

taste-skill-leon + filesystem

将批评报告持久化为设计审查记录

Save each critique to /design/reviews/$(date +%F)-<page>.md.✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用
critique	path_or_url, brand?	发布前审查
fix	path, severity_threshold	批评后，针对一级/二级问题修复
baseline	context: {product, audience}	冷启动一个设计系统

成本与限制

运行它的成本

API 配额: 不适用
每次调用 Token 数: 适中——整页批评约 5-10k token
费用: 免费
提示: 组件级批评比整页批评更省 token；优先以这种方式迭代

安全

权限、密钥、影响范围

最小权限： filesystem-read filesystem-write

凭据存储： 无

数据出站： 本地

故障排查

常见错误与修复

对明显千篇一律的 UI，批评返回零问题

skill 可能处于「宽松」模式——传入 --strict

修复破坏了布局

先使用 --diff-preview 预览，再有选择地应用

与品牌规范冲突

通过 --brand 传入品牌 markdown，让 skill 遵守例外规则

替代方案

Taste Skill 对比其他方案

替代方案	何时用它替代	权衡
stevembarclay/pencilplaybook	你想要以 Pencil 产品为基础的 UI 设计品味	特定于 Pencil；taste-skill 是通用的
直接写一份 brand.md prompt	你只做一个产品	无法捕捉此 skill 专门针对的 AI 生成通用模式

为什么要用

核心特性

实时演示

实际使用效果

安装

使用场景

实战用法： Taste Skill

通过品味过滤器审查 Claude 生成的落地页

步骤

注意事项

审计单个组件的品味问题

步骤

注意事项

用 taste-skill 为新设计系统建立基线

步骤

注意事项

组合

与其他 MCP 搭配，撬动十倍杠杆

工具

此 MCP 暴露的能力

成本与限制

运行它的成本

安全

权限、密钥、影响范围

故障排查

常见错误与修复

替代方案

Taste Skill 对比其他方案

更多

资源