Taste Skill 设计品味技能

Taste Skill 是什么

Taste Skill 是一个面向编码 Agent 的 Agent Skill，目标是让 AI 写出的网页不再像「批量生成的通用落地页」。它给 Agent 三样东西：明确的艺术方向、真实的参考图片，以及在真实浏览器里检查自己作品的能力。

项目基于对 247 个精选站点的研究整理而成，主语言为 JavaScript，采用 MIT 协议开源。

核心工作流

一次构建大致分为六步：

1. 阅读需求，列出「只有这个客户才有」的独特素材；
2. 脚本从 20 个研究方向中随机发三张牌，由 Agent 选定其一；
3. 提炼一句话创意，把客户自身素材与所选方向绑定；
4. 使用开放图库中的真实照片与影像进行搭建，并标注来源；
5. 在真实浏览器中以三种宽度检查页面，不合格即判定为「slop」；
6. 查看自身截图，修正最突出的三个问题，最多三轮。

官方说明：一次完整构建约需 30 到 45 分钟，并消耗数十万 token。

安装与接入

通过 npx skills CLI 安装：

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

也提供插件方式：

• Claude Code：在会话内添加 marketplace 并安装 taste-skill@taste-skill；
• Codex：使用 codex plugin marketplace add 与 codex plugin add；
• 本地克隆：运行 ./install.sh 以软链接方式接入，git pull 即可原地更新。

运行环境需要 Node 22+ 以及已安装的 Chrome、Edge 或 Chromium；技能本身不安装额外依赖，也不需要 API Key，但找图环节需要网络。

应用界面与版式检查

除落地页外，v2.1 还覆盖仪表盘与应用界面：从真实产品截图中提炼应用风格，按规范搭建外壳、数据、图表与表格，并用「面板安静、数字对齐、颜色只花在数据上、手机端导航可折叠」等规则验收。

同时会检查每个页面的整体框架：首屏标题是否清晰、边距是否一致、有无被挤到一侧的区块、有无莫名留白，并参考近期 Awwwards 每日最佳站点的动效节奏。

适合谁用

• 常用 Claude Code、Codex、Cursor 等 Agent 的前端开发者；
• 需要快速产出有设计感官网、落地页的独立开发者与小团队；
• 希望把「设计审美」沉淀为可复用流程、而非依赖单次提示词的工程团队。

注意事项

• 构建耗时长、token 消耗高，建议在明确需求后再触发；
• 效果与所用模型能力相关，最终仍需人工审阅与微调；
• 部分旧技能已拆分到独立仓库，安装时注意名称对应关系。