用 Taste Skill 给编码 Agent 设计品味

让编码 agent 做落地页，得到的是平均值落地页：同样的栅格、同样的渐变、同样的图库感。Taste Skill——一套 96k 星的 Agent Skills——让 agent 去做设计：选定美术方向，用真实照片搭建，再在真实浏览器里检查自己的作品。

为什么这个 Skill 重要

默认 skill 基于 247 个精选站点的研究构建，v2 的一次构建分六步：读需求并列出这个客户独有的东西，从二十个研究过的方向里抽三个选一个，用一句话把客户的素材与该方向绑在一起，用真实图片搭建，在真实浏览器里以三个宽度检查并把套版页面判为不合格，最后根据截图修复前三名问题——最多三轮。

照片来自 Wikimedia Commons、Openverse、大都会博物馆等开放图库，只取公有领域、CC0、CC BY、CC BY-SA 授权的文件，并把署名放在页面上。一次构建大约需要 30 到 45 分钟和几十万 token。

安装

用 npx skills CLI 安装仓库里的全部 skill：

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

只装默认 skill 时，传入它的安装名：

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

在 Claude Code 里也可以走插件路线：先 /plugin marketplace add Leonxlnx/taste-skill，再 /plugin install taste-skill@taste-skill。默认 skill 需要 Node 22 或更高版本，以及已安装的 Chrome、Edge 或 Chromium。它不安装任何东西、不需要 API key，只有找图时才需要联网。

实战：给咖啡店写落地页需求

1. 写一段需求，说明客户、素材和气质。比如给 agent 粘贴这样的提示：

用 taste-skill 为一家社区咖啡店做落地页：突出店里自烘焙的豆子和手冲吧台，气质安静、纸质感，避免科技感的蓝色渐变。

2. agent 读需求，列出这家店独有的东西——自烘焙吧台、纸质感。
3. 脚本抽出三个设计方向；agent 选定一个，并用一句话说出核心创意。
4. 它用真实的、带署名的照片搭建页面，而不是占位图。
5. 它在三个宽度下截图自查，把平庸的结果判为不合格，然后修复前三名问题——最多三轮。

这些规则只关于设计，不绑定框架，所以产出可用于 React、Vue、Svelte 或纯 HTML。

技巧

• 按任务选 skill：redesign-existing-projects 负责先审计再修复已有页面；minimalist-ui、high-end-visual-design 和 industrial-brutalist-ui 适用于方向已经定好的场景。
• 如果 agent 总是交付半成品，加装 full-output-enforcement skill。
• 想先出图再写代码？三个图像生成 skill 只产出设计稿——把画面交给编码 agent，或者用 image-to-code 跑完整条流水线。
• 有了自己的照片后可以替换开放图库素材；skill 本来就把它们当作替代品。
• 仓库保留的旧版本带 DESIGN_VARIANCE、MOTION_INTENSITY 这类旋钮；v2 默认版没有旋钮——方向来自抽签，约束来自审查。

何时不用这个 Skill

默认 skill 面向公开页面，不面向仪表盘和应用界面——README 把产品 UI 指向极简或柔和风格的那几个 skill。另外，找图需要联网，完全离线的构建不在它的承诺范围内。

查看 排行榜 了解更多 skill。