Skill Taste-Skill 教会AI编程助手真实设计品味的技能

让 Claude Code 或 Cursor 做一个落地页，十次有八次你会得到同一套东西：紫色渐变背景、三栏特性卡片、居中大标题，字体永远是 Inter。模板没错，但千篇一律，一眼就能看出是 AI 做的。设计感这种东西很难用一句提示词描述清楚，写「要好看」等于什么都没写，写「参考某某网站」智能体又不一定真能看懂。

Taste Skill 的做法是把这个难题拆成可执行的流程：先给智能体一套从 247 个精选网站里提炼出来的艺术方向库，再让它去公开图库找真实照片素材，最后逼它打开浏览器检查自己的产出，不合格就返工。这个技能在 GitHub 上拿到超过 10 万 Star，是设计类技能里的头部项目。

项目基本信息

一、项目介绍

Taste Skill 是一个标准的 Agent Skill，核心能力是让编码智能体真正「设计」网站和应用界面，而不是拼装平均水平的模板页。它给智能体三样东西：艺术方向、真实图片资源，以及一种在真实浏览器里检查自己作品的方式。

一次完整的构建分六步：读取需求并列出这个客户独有的东西；从 20 个经过研究的方向里抽三个让智能体选定；用一句话把客户的素材和方向绑在一起；使用来自开放图库的真实照片和视频素材（自动附上出处）；在真实浏览器里按三种宽度检查页面，不达标即判定失败；查看自己的截图，修掉最严重的三个问题，最多三轮。

v2.1 之后它还能区分页面和应用界面：仪表盘、管理后台、设置页会走另一套从真实产品屏幕里提炼的风格，遵循安静面板、数据对齐、颜色只花在数据上这类规则，并附带独立的检查脚本。

二、核心优势

第一，产出不是「AI 还行」的水平。README 里展示的每个页面都是该技能自己做的，从咖啡店门店页到演出排期页，视觉完成度接近专业工作室水准。

第二，图片版权干净。素材只从 Wikimedia Commons、Openverse、大都会博物馆这类开放馆藏里取，仅限公有领域、CC0、CC BY 和 CC BY-SA 授权，并且技能会在页面上自动标注出处。

第三，框架无关。规则约束的是设计本身，React、Vue、Svelte 还是纯 HTML 都能用。

第四，有自检闭环。多数设计技能生成完就结束，这个技能会真的截图回看，按名单把 AI 味的通病一项项修掉。

三、适用场景

独立开发者和小团队给产品做官网，是它最典型的用途：一段需求描述进去，三四十分钟后拿到一个能直接交付的页面。产品落地页上要展示的应用截图，它也会用同一套流程把界面真做出来，保证截图看起来像在运行的产品。

第二类是营销与活动页面：演出排期、新品发布、活动专题这类强调视觉冲击的场景。第三类是后台与仪表盘，v2.1 的应用界面路线对数据密集型页面有专门的规则，能避免图表乱配色、数字不对齐这些常见毛病。

四、安装教程

推荐用 skills CLI 一条命令安装：

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

运行环境要求 Node.js 22 或更高版本，以及本机装有 Chrome、Edge 或 Chromium。技能本身不装任何依赖、不需要 API Key，只有找图片时需要联网。已装过旧版的用户重新执行安装命令即可，安装名没有变。

常见报错：技能跑不起来多半是 Node 版本低于 22，用 node -v 确认后升级；浏览器检查失败则检查 Chromium 系浏览器是否在 PATH 中。另外注意旧版 skills CLI 有只同步单文件的 bug（1.5.15 及更早），装完确认目录完整，不完整就 npm i -g skills@latest 升级后重装。

五、使用示例

装好后直接在支持的智能体里用自然语言下达需求，例如：

给一家精品咖啡店做官网首页，要有门店照片和豆子产地介绍

智能体会先抽三个艺术方向给你选，选定后开始构建。产出是一个完整的 HTML 页面：首屏用一张从开放图库找来的真实门店照片做视觉主体，往下按烘焙程度分节展示豆子，每张图带出处标注，常见问题区做成层叠索引卡的样式。整个流程大约消耗三四十万 token，期间它会自己在浏览器里截图检查三遍宽度。

想改已有页面时直接说「重新设计这个页面」，技能会先在浏览器里审计现状，再动手改，而不是推倒重来。

六、常见问题

需要 API Key 吗？不需要，技能不调用任何模型接口，全部能力由你现有的智能体承载。

图片能商用吗？素材只来自公有领域和宽松许可的开放馆藏，且自动署名，但正式商用前建议替换成自有素材更稳妥。

一次构建为什么这么慢？六步流程加三轮自检本身就要消耗大量 token，换来的是能直接交付的质量，赶时间可以关掉部分检查轮次。

七、总结

Taste Skill 证明了品味是可以被工程化的：把 247 个好网站的研究结论、真实的素材供应链和浏览器自检闭环打包成一个技能，普通开发者也能拿到设计师级别的前端产出。如果你受够了千篇一律的 AI 页面，它是目前最值得装的设计类技能之一。