/ 目录 / 演练场 / Taste Skill
● 社区 Leonxlnx ⚡ 即开即用

Taste Skill

作者 Leonxlnx · Leonxlnx/taste-skill

将设计品味编码为规则——排版、间距、配色、构图——让 Claude 不再产出千篇一律的 UI,而是输出读起来像资深设计师之手的作品。

Taste Skill 是一套小而有主见的规则集,专门防范 AI 设计中最常见的错误:字体过多、营销网站正文字号 14px、三个争夺注意力的强调色、2018 年 Bootstrap 4 风格的 hero 布局。它作为「审查-重写」步骤运行于生成的 UI 之上,应用规则并解释原因。适用于任何支持 skill 的 agent。

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "taste-skill-leon",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "taste-skill-leon": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Leonxlnx/taste-skill",
          "~/.claude/skills/taste"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add taste-skill-leon -- git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: Taste Skill

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

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

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

前置条件
  • 已安装 skill — git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste
步骤
  1. 批评
    Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ 已复制
    → 10-20 个问题,每个带标签
  2. 修复一级问题
    Apply only severity-high fixes. Don't change copy — only visual/structural.✓ 已复制
    → diff 已应用;页面不再显得千篇一律
  3. 迭代
    Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ 已复制
    → 2 轮后收敛

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

注意事项
  • skill 强加了一种与品牌冲突的风格 — 通过 --brand /design/brand.md 传入品牌规范,让 skill 遵守约束
搭配使用: filesystem

审计单个组件的品味问题

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

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

步骤
  1. 批评
    Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ 已复制
    → 问题列表,含引用行
  2. 变体检查
    Compare hover, focus, and disabled states for visual coherence.✓ 已复制
    → 检测到偏差时报告

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

注意事项
  • 批评忽略了有意为之的设计选择(如 brutalist 风格) — 传入 --style brutalist 或类似参数,放松部分规则

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

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

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

步骤
  1. 生成基线
    Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ 已复制
    → tokens.json,每个选择附理由
  2. 压力测试
    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? 发布前审查 0
fix path, severity_threshold 批评后,针对一级/二级问题修复 0
baseline context: {product, audience} 冷启动一个设计系统 0

成本与限制

运行它的成本

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 生成通用模式

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills