用途
Taste Skill 是一个前端设计技能,目标是解决 AI 生成界面“千篇一律”的问题。如果你的 UI 看起来和其他 AI 落地页毫无区别,这个技能就是为此设计的。它让编码智能体获得实际的设计品味,产出更强的布局、字体、间距、层级和动效,而不是默认的 AI 模板。该技能基于 Leonxlnx/taste-skill。
主要能力
该技能的核心是“反套路”规则,明确要求不要默认使用以下元素:
- 紫色 / 靛蓝色渐变
- 三张等宽功能卡片
- Inter 字体 + slate-900 配色
- 居中英雄区 + 网格背景
- 通用的玻璃拟态效果
它要求先阅读需求简报,推断页面类型、受众和氛围,然后再开始构建。
使用方式
三个设计旋钮
在编写代码之前,需要设定以下三个旋钮:
| 旋钮 | 低 | 高 |
|---|---|---|
| DESIGN_VARIANCE | 干净、居中 | 不对称、实验性 |
| MOTION_INTENSITY | 仅悬停 | 滚动、磁吸、电影感 |
| VISUAL_DENSITY | 通透、画廊感 | 密集、紧凑 |
智能体工作流程
- 输出一行设计解读:“Reading this as: [page] for [audience], [vibe], leaning toward [system/aesthetic].”
- 设定三个旋钮。
- 在合适的情况下优先使用真实设计系统(Fluent、Material、Carbon、Primer、shadcn、Tailwind 等)。
- 交付完整 UI——不要占位注释,不要半成品区块。
- 在宣布完成前运行交付前检查。
安装
完整安装(推荐):
git clone https://github.com/0xwilliamortiz/taste-skill.git
cd taste-skill
npm install -g .
taste-skill
适用场景
- 落地页、作品集、营销站点、改版设计
- 当智能体不断产出同样无聊的 AI 外观时
- 当你希望界面感觉是有意为之的
限制
资料中未提供关于收费、价格、平台支持范围、具体效果指标或使用步骤的更多细节,暂未提供。