AI 生成页面太普通怎么办？taste-skill 前端审美优化教程

AI 生成页面太普通，可以用 taste-skill 给前端生成过程加一层审美约束。它不是组件库，也不是设计模板，而是一组开源 skill 文件，目标是阻止 Cursor、Claude Code、Codex、Gemini CLI、v0、Lovable 等工具生成同质化前端。官网把它称为 Anti-Slop Frontend Framework，安装入口给出的命令是 npx skills add Leonxlnx/taste-skill，具体命令和版本以官方页面为准。

taste-skill 解决什么问题

它解决的是“页面能用但没有味道”的问题：大圆角卡片、泛紫渐变、空洞 hero、重复布局、按钮和文字没有层级。SKILL.md 里明确说它面向 landing pages、portfolios、redesigns，不适合 dashboards、data tables、multi-step product UI。这个边界很重要，运营页、作品集、官网改版适合用它，后台系统和复杂表格页不要硬套。参数换成日常影响就是：它更关心首屏观感、品牌气质、排版密度和视觉节奏，而不是表格筛选、批量操作和复杂权限。

怎么把它放进工作流

正确用法不是让 AI 直接“变好看”，而是在需求里写清页面类型、品牌气质、受众、必须保留的内容和不想要的视觉套路。生成前让 agent 先读 brief，再按 taste-skill 判断设计方向；生成后检查移动端、文字层级、留白、首屏视觉和交互状态。若接入 Claude Code 或 Codex，先确认 skill 安装位置、SKILL.md 内容和项目改动，再看 Git Diff。页面仍然普通时，不要继续加装饰，先要求它重做信息层级、主视觉、按钮状态和真实文案。改完再截图复查，先看首屏和主按钮。

前端审美优化检查点

1. 先判断页面是不是官网、落地页、作品集或重设计。
2. 把“不要模板感”改成具体禁用项，如泛紫渐变、空卡片、无意义插画。
3. 要求保留真实内容，不用假文案撑版面。
4. 生成后用截图看桌面端和移动端，确认文字不挤、不遮挡。
5. 提交前查看 Git Diff，避免 skill 同时改业务逻辑。