📌 项目地址：Leonxlnx/taste-skill | ⭐ 53,754 颗星 | 🔧 Shell | 📜 未标注
一个悬而未解的问题
用Cursor或Claude Code写前端，我见过太多相似场景：逻辑代码一次过，界面来回改。标题和正文视觉权重拉不开，卡片间距像Excel表格，配色主次模糊。我告诉AI“间距再松一点”，它给容器加一倍padding。我说“标题更显眼”，它加粗加字号。反复三四轮，改不出我想要的。
问题不在AI能力。它的训练数据里，平庸界面远多过优秀设计。你需要一套可执行的规则，告诉AI什么叫“好”。
三数字决定界面风格
Leonxlnx/taste-skill（53754星）是Vercel Agent Skills生态的一组SKILL.md文件。它把设计师的审美拆成三个整数参数，范围0到10：
- VARIANCE（视觉层次强度）：控制字号、颜色对比度。值越大，标题和正文的视觉重量差异越明显。
- MOTION（动态感强度）：控制悬停、切换动画幅度。值越高，交互反馈越活跃。
- DENSITY（信息紧凑度）：控制间距、留白。值越大，页面越密集；值越小，呼吸感越强。
安装后，AI生成的HTML/CSS会自动使用这些参数。你也可以把任意SKILL.md内容直接复制到ChatGPT或Codex对话中，效果一样。
v2做了什么
主技能design-taste-frontend现在是v2实验版。我实际使用中感受到三个变化：
Pre-flight check：AI收到需求后先检查输入。只说“做个登录页”，AI会打断，追问：目标设备（web/mobile）？页面用途（注册/登录/密码找回）？品牌调性（专业/活泼/简约）？多花半分钟说清场景，后续少改两轮代码。
强制en-dash：规则要求所有英文字符用en-dash（–）代替em-dash（—）。em-dash在英文排版里阅读间隙过大，v2直接写进规则。改掉后文字流畅度有差异。这个细节多数人不会注意，但修掉之后页面整体质感会提升半个级别。
GSAP动画骨架：v1生成的动画写法不统一。v2固定结构：开发者只需要填写duration、easing、transform的值。改动量从重写整个动画函数缩到只改几个数字。
v1到v2没有破坏性变化。想锁v1可以用design-taste-frontend-v1。
我试了个仪表盘
我试了个资源监控仪表盘。要求“紧凑但不压抑”。
设VARIANCE=6、MOTION=3、DENSITY=8。AI输出：
- 视觉权重分层：主要卡片标题字号更大、颜色更深；次要卡片用浅灰背景而非全白。不加规则时所有卡片白色背景，靠边框区分。
- 交互动画：表格行hover出现0.2s ease-out淡入，不是默认的生硬闪烁。
MOTION=3只加了渐变，没有弹跳。 - 留白节奏：左侧8个监控项密集排列（
DENSITY=8），右侧大盘图标签间距更大，引导视线先看右侧。不加规则时卡片等距排列，视觉平淡。
三个数字代替了“想要高级点”这种空话。AI按数值执行，不用反复试。
安装方法
装所有技能：
npx skills add https://github.com/Leonxlnx/taste-skill装单个技能（按install name，不是文件夹名）：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"已有v1的用户，重新运行相同命令自动升级到v2。仓库还提供React和Tailwind变体：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-react"
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-tailwind"也可以不装CLI：任意SKILL.md内容直接复制到AI对话。仓库还提供图像生成技能（只出参考图），可用ChatGPT Images先生成参考帧，再让Codex或Cursor实现。
诚实说：起点拉高了，精调还得自己来
三个数字控制整体风格基调，但做不到像素级控制。精调仍需手动改CSS。
和纯prompt相比，这套规则至少让你的AI输出绕开了“默认模板”的大坑。我最近用AI写的三个前端页面都套了这套规则，改动量从原来反复8轮减少到2-3轮手动修细节。不算完美，但已经能用了。
另外：README明确写了没有代币、没有加密货币项目。任何用项目名称、作者姓名或图片的代币都不相关。别上当。
===
AI前端设计,Agent技能,参数化界面,开发者工具