taste-skill
让 AI 编程工具生成有品味的前端界面,通过 prompt 规则系统对抗千篇一律的 Slop 设计
加载项目详情…
本应用为开源项目,仅供学习研究,请遵守其开源协议。
让 AI 编程工具生成有品味的前端界面,通过 prompt 规则系统对抗千篇一律的 Slop 设计
加载项目详情…
本应用为开源项目,仅供学习研究,请遵守其开源协议。
想象一下:你让 Claude Code 或者 Cursor 生成一个落地页,结果出来一个满屏渐变按钮、居中对齐的纯色卡片、毫无层次感的英雄区——这大概是今天互联网上最常见的「AI 生成界面」。这种审美疲劳有个专门的名字:Slop——一种由 AI 批量生产、毫无个性、千篇一律的设计瘟疫,正在悄悄侵蚀互联网的视觉生态。 Taste-Skill 正是为解决这个问题而生。这是一个面向 AI 编程工具(Claude Code、OpenAI Codex、Cursor 等)的可移植技能系统,通过一套经过精心设计的 prompt 规则,让 AI 生成的前端界面从「能用就行」升级到「让人眼前一亮」。本质上,它是一套给 AI 看的设计指南——不是设计师手把手教的,而是通过 prompt 规则让 AI 自己「理解」什么是好品味。 项目的发起背景非常明确:当前 AI 生成代码的能力越来越强,但输出界面的审美水平却远跟不上。一个有趣的现象是:用户让 AI 建一个 SaaS 落地页,5 个不同的 AI 往往会生成 5 个几乎一模一样的页面——因为它们的训练数据里有太多雷同的模板和示例。这不是 AI 的能力问题,而是 AI 缺乏对「设计意图」的理解,或者说,AI 还不具备那种「看一眼就知道哪里不对」的品味直觉。 Taste-Skill 来自独立开发者 leonxlnx,2026 年 2 月上线 GitHub,在短短数月内迅速积累了超过 2 万颗星,成为 AI Agent 工具类增长最快的项目之一。作者同时运营 tasteskill.dev 官网,并在 Twitter (@lexnlin) 上持续更新项目动态。项目采用 MIT 许可证,开源免费。
图1:Taste-Skill 项目 Logo
项目包含 13 个独立技能,覆盖前端设计的多个维度,形成了一个完整的设计品味工具体系:
| 技能名称 | 功能说明 |
|---|---|
| taste-skill | 核心设计品味技能,涵盖布局、字体、动效、间距,是整个项目的旗舰技能 |
| redesign-skill | 对现有项目进行审美审计和升级改造,包含 100+ 项检查清单 |
| output-skill | 强制 AI 输出完整、连贯的设计而非碎片化代码 |
| soft-skill | 柔和设计风格(毛玻璃、微动画、轻质感) |
| minimalist-skill | 极简主义风格(大量留白、克制配色) |
| brutalist-skill | 粗野主义风格(Raw 机械感、瑞士印刷风格) |
| stitch-skill | 语义化设计系统,用于 Google Stitch |
| imagegen-frontend-web | 网页设计的 AI 图片生成参考板 |
| imagegen-frontend-mobile | 移动端设计的 AI 图片生成参考板 |
| brandkit | 品牌套件设计技能 |
| gpt-taste | GPT 系列模型的专属调教版本 |
| image-to-code-skill | 图片转代码参考规范 |
每个技能都是一个独立的 SKILL.md 文件,通过 npx skills add 命令安装到 AI Agent 的上下文中。以核心 taste-skill 为例,其规则体系包含以下几个层面:
需求理解优先(Brief Inference):在动手写代码之前,AI 必须先「读懂」需求文档,包括页面类型(落地页/作品集/重设计)、用户描述的「氛围词」(极简/B端严肃/Awwwards实验感)、参考链接、以及目标受众。这避免了 AI 直接套模板的冲动,强制 AI 先思考「这是给谁看的、想传达什么感受」,再动手。
设计「刻度盘」系统:每个设计维度都提供了可调节的参数——Variance(变化度)、Motion(动效强度)、Density(内容密度)。用户可以通过简单指令调整设计走向,AI 则根据这些参数动态生成界面特征。这种参数化设计让同一套规则可以适应完全不同的设计需求。
AI 设计反模式检测:专门列出 18 种 AI 常见的设计缺陷——比如「无处不在的渐变」「居中对齐强迫症」「全屏 hero 配 CTA 按钮」「全屏留白」等,AI 在生成时必须主动规避这些问题区域。
设计系统感知:规则鼓励使用真实的设计系统(Tailwind 内置工具类、Geist、Pico.css 等),而非让 AI 凭空发明一套自己的样式。这让生成的前端代码更容易与现有项目集成。
框架无关性:所有规则以自然语言编写,框架无关,适用于 Tailwind CSS、Vanilla CSS、React、Vue、Svelte 等任何前端技术栈。
项目还提供了一种极其轻量的上手方式——通过 Vercel Agent Skills 规范安装:
# 一键安装全部技能到 Agent 上下文
npx skills add https://github.com/Leonxlnx/taste-skill
# 安装单个特定技能
npx skills add https://github.com/Leonxlnx/taste-skill --skill taste-skill
安装后,AI Agent 会在每次对话中自动加载这些 SKILL.md 规则,从而在生成代码时自觉遵循设计规范。项目还附带 skill.sh 脚本,可通过 source ./skill.sh <skill-name> 直接查看指定技能的安装路径。
当然,Taste-Skill 也有其局限性:
从更宏观的视角看,Taste-Skill 代表了 AI 编程工具发展的一个重要趋势:从「让 AI 能写代码」到「让 AI 能写出好代码」。早期的 AI 编程工具解决了「能不能写」的问题,而 Taste-Skill 这类项目则在解决「写得好不好」的问题。随着 Claude Code、Cursor、Copilot 等工具的普及,这类设计/质量规范类的 Agent 技能将会成为生态中不可或缺的一环。项目背后的 research/ 目录也值得关注——其中包含根因分析(root-causes)、修复策略(remediation)和设计发现(findings)等多个子目录,为技能规则提供了扎实的理论支撑,而非拍脑袋想出来的「设计建议」。
图2:使用 Taste-Skill 生成的设计示例(Floria 落地页案例)
技术层面:项目本身是纯 Shell + Markdown 结构,不包含可执行代码——它的「代码」就是 SKILL.md 中的 prompt 规则文本。所有规则以自然语言编写,框架无关,适用于 Tailwind CSS、Vanilla CSS、React、Vue、Svelte 等任何前端技术栈。这种设计让它具有极强的通用性和可移植性。 增长情况:项目自 2026 年 2 月上线以来增长迅猛。最新数据显示超过 2 万颗 GitHub 星,1681 个 Fork,3 位贡献者,最近一次提交距今约 18 天,开发活跃度高。项目尚未发布正式 Release 版本,但通过持续 commits 维护。文档方面,除了 README 还有专门的 research/ 目录,为技能规则提供理论支撑,体现出作者在设计研究方面的严谨态度。