# 🎨 Taste Skill：17k Stars 的 Anti-Slop 前端框架，一句命令让 AI 不再生成丑界面 AI 写的前端代码你懂的——千篇一律的居中布局、 Bootstrap 灰、满屏 placeholder，一看就是「AI 味」。Leonxlnx 开源的 **Taste Skill** 就是来治这个毛病的：17,000+ Stars 的 Anti-Slop 设计技能集，让 Claude Code、Codex、Cursor 写出有呼吸感的前端。 ## 一句话总结 Taste Skill 是一组可插拔的 Agent Skills，覆盖布局、字体、动效、间距。装一个 skill，AI 产出的 UI 就从「AI 模板风」升级到「设计稿级」。不是提示词优化，是一套完整的设计规则引擎。 ## 安装 ```bash # 装全部 skill（推荐） npx skills add https://github.com/Leonxlnx/taste-skill # 只装前端设计 skill npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" ``` 装完把 `SKILL.md` 放到项目根目录，下次跑 agent 自动生效。 ## 能控制什么？ Taste Skill 每个 skill 参数可调（1-10），写在文件开头： - **DESIGN_VARIANCE** — 布局实验性（低=居中偏稳，高=不对称/现代） - **MOTION_INTENSITY** — 动效深度（低=hover，高=滚动/magnetic） - **VISUAL_DENSITY** — 每屏信息密度（低=通透，高=仪表盘） 想调个 Linear 风格的极简 UI： ```bash npx skills add https://github.com/Leonxlnx/taste-skill --skill "minimalist-ui" ``` ## 实测用法 一个我实际用过的场景：让 Codex 给我的 API 文档页面重新设计。 提示词就一句话：「用 taste-skill 的 redesign-skill 分析当前页面布局问题，然后重写。」 它先给了我一份 audit（间距不一致、字体层级乱、CTA 不突出），然后自动修了代码。前后对比： - **之前**：居中 1200px 容器，Card 三列，灰色按钮 - **之后**：非对称布局，左侧导航悬浮，右侧内容区用 GSAP 滚动渐入 整个流程没有写一行设计说明，全是 skill 自己判断的。 ## 适合谁 - 受够了 AI 写的「bootstrap 级」前端的开发者 - 用 Claude Code / Codex / Cursor 做前端项目的团队 - 想给 Agent 装「设计审美」的人 不挑框架，React / Vue / Svelte 都能用。 --- **Taste Skill** is a set of anti-slop design skills for AI coding agents. At 17,000+ stars, it's the most popular way to make Claude Code, Codex, and Cursor output production-quality frontends instead of boilerplate. ```bash # Install all skills npx skills add https://github.com/Leonxlnx/taste-skill # Or install just one npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" ``` Three configurable dials control the output: `DESIGN_VARIANCE` (layout experimentation), `MOTION_INTENSITY` (animation depth), and `VISUAL_DENSITY` (information per viewport). Framework-agnostic — works with React, Vue, and Svelte. The **redesign-skill** variant audits existing UI first, then fixes layout, spacing, typography, and hierarchy automatically. No design brief needed — the skill makes its own judgment calls. Tasteskill.dev has full docs and examples. MIT licensed.