Taste-Skill 从零上手:给 AI 前端生成配一份拒绝模板味的预检清单
【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill
Taste-Skill 是一套可移植的 Agent Skills,作用是让 AI 编码代理在写前端代码时"有品味":它强制模型先读懂需求简报、显式设定三项设计参数、调用官方设计系统,并通过一份预检清单后才能交付,使 AI 生成的落地页与作品集不再千篇一律。本文从一个真实任务出发,讲清这套机制为什么存在、三步装好之后每一步该做什么,以及它明确不管的边界在哪里。
为什么 AI 生成的主页总是一个模子:问题不在 CSS
这一节回答第一个问题:为什么模型的代码能力明明不弱,产出的页面却总是"模板味"。
Taste-Skill 的仓库维护者把根因定位得很直接:多数糟糕的 LLM 设计输出,不是因为模型不会写样式,而是因为模型在"读懂房间"之前就跳到了默认审美。它会条件反射地给出同一套起手式:AI 紫渐变、深色网格上的居中 Hero、三张等宽特性卡片、玻璃拟态糊在一切上面、Inter 配 slate-900 的默认字体组合。
这套运作方式很像航空业的预飞检查清单:先读懂航班任务(简报),再确认仪表读数(三项参数),选用标准件(官方设计系统),最后逐项核对预检清单。任何一格无法诚实打勾,这趟就不飞。仓库里的规则就是照着这个纪律写成的。
以下是生产测试中反复出现的"AI 特征"(AI Tells)与对应反制规则:
| 模板味症状 | 具体表现 | Taste-Skill 的反制 |
|---|---|---|
| 紫色渐变 | AI 紫、霓虹外发光按钮 | 中性底色,全页只允许一个高对比强调色 |
| 三等卡片 | 一行三张完全相同的特性卡 | 禁用,改双列错位、bento 网格或滚动固定结构 |
| 衬线字体滥用 | 只要"有创意"就上 Fraunces 等花体衬线 | 默认无衬线,衬线必须有品牌层面的理由 |
| 破折号堆砌 | 标题、正文、引文里到处是"—" | 零容忍,改用句号、逗号或重构句子 |
| 假产品截图 | 用 div 矩形拼出伪终端、伪仪表盘 | 用真实截图、生成图,或干脆不放 |
| 滚动提示 | 页面底部"Scroll ↓"字样 | 禁用,用户不需要被提醒怎么滚动 |
v2 版本之所以是一次大改写,就是因为这些特征在多次真实构建中跨项目复现:规则从"建议"升级成了硬规则加强制清单。
快速上手:三步装好 Taste-Skill 并跑通
这一节解决最短路径的安装与验证问题,不需要任何框架改动。
- 克隆仓库,浏览
skills/目录:每个子目录是一个技能,其中的SKILL.md就是代理自动加载的指令文件。 - 选择安装范围:全量安装,或用
--skill参数按安装名只装一个。 - 验证:在对话里丢给它一个简报(例如"做一个独立花艺工作室的官网"),看它是否先吐出一行设计判断,而不是直接开始写代码。
# 克隆仓库,检查 skills/ 目录 git clone https://gitcode.com/GitHub_Trending/ta/taste-skill # 全量安装,或只装默认设计技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "design-taste-frontend"没有 CLI 环境也有最小可用路径:把任意SKILL.md直接复制进项目,或粘贴进对话即可。技能分两类,实现类输出代码,图像生成类只输出参考图。常用选择如下:
| 你的任务 | 安装名 |
|---|---|
| 通用默认(v2 实验版) | design-taste-frontend |
| GPT/Codex 下更严格的布局与动效 | gpt-taste |
| 先出参考图再实现 | image-to-code |
| 改造已有项目 | redesign-existing-projects |
| 输出总是被截断、留占位注释 | full-output-enforcement |
| 只要参考图(网页 / 移动端 / 品牌板) | imagegen-frontend-web/-mobile/brandkit |
写代码前的第一步:读懂简报并输出一行"设计判断"
这一节解决整条链路最上游的问题:如何把一句口头需求拆成可执行的设计方向。
技能的第一节(Brief Inference)要求代理在碰任何代码或参数之前,先扫描六类信号:
- 页面类型:落地页(SaaS、消费、活动)、作品集、改造还是编辑型内容。
- 用户用过的风格词:"minimalist""Linear 风""brutalist""premium"……
- 参考信号:贴的截图、链的网站、点名的竞品。
- 受众:B2B 采购决策人、审美敏感的消费者、扫作品集的招聘方。审美由受众决定,不由模型的偏好决定。
- 已有品牌资产:logo、色彩、字体、摄影。改造类任务里这些是起点,不是可选输入。
- 隐性约束:无障碍优先、公共部门、受监管行业。这类约束的优先级高于一切审美偏好。
读完后,代理必须先用一行话宣布判断,格式是"Reading this as: 为某受众做的某类页面,用某种语言,倾向于某个设计系统"。例如:"为技术买家做的 B2B SaaS 落地页,Linear 式极简语言,倾向 Tailwind + Geist + 克制动效。"如果简报真的含糊到两种读法会走向完全不同的方向,只允许追问一个问题,不许连环追问;能自信推断时就直接宣布判断并往下做。
三个 1 到 10 的旋钮:布局、动效、密度怎么调
这一节解决把主观审美偏好转化成三个可调节参数的问题。
读完简报后设定三个参数,后续所有布局、动效、密度决策都以它们为闸门:
# taste-skill 默认基线(按简报推断调整,不要照抄) DESIGN_VARIANCE: 8 # 1 完美对称,10 艺术化非对称 MOTION_INTENSITY: 6 # 1 纯静态,10 电影级 / 物理模拟 VISUAL_DENSITY: 4 # 1 画廊留白,10 数据驾驶舱按信号推断取值,或直接套用途预设:
| 任务 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 主流 SaaS 落地页 | 7 | 6 | 4 |
| 代理 / 创意工作室 | 9 | 8 | 3 |
| 设计师作品集 | 8 | 7 | 3 |
| 开发者作品集 | 6 | 5 | 4 |
| 编辑型 / 博客 | 6 | 4 | 3 |
| 公共部门 / 信任优先 | 3 | 2 | 5 |
| 改造(保留品牌) | 匹配现状 | +1 | 匹配现状 |
三档行为也各不相同:VARIANCE 1-3 是对称 12 列网格,4-7 引入负边距重叠与混合宽高比,8-10 才是错落式与分数网格;MOTION 1-3 只有悬停态,4-7 是滚动显现与视差,8-10 才动用 GSAP 级滚动叙事;DENSITY 8 以上要求数字全部等宽字体、去掉卡片容器。两条纪律值得记住:非对称布局在小于 768px 时必须塌缩为单列;"动效已声明,动效必须出现",MOTION 高于 4 的页面如果动不起来,就把旋钮降到 3,交付干净的静态页,而不是半成品动画。
设计系统选型:优先官方包,近似就标注近似
这一节解决"在什么地基上盖楼"的问题。Taste-Skill 不是要替代你的设计系统,而是与官方设计系统建立一种诚实的映射关系:能用官方包的绝不手写仿制。
| 简报读起来像 | 直接用 |
|---|---|
| 微软系 / 企业 SaaS | @fluentui/react-components |
| Google / Material 风格 | @material/web+ Material 3 令牌 |
| IBM 风数据分析 | @carbon/react+@carbon/styles |
| GitHub 风开发者工具 | @primer/css |
| 英 / 美政府公共服务 | govuk-frontend/uswds |
| 自持组件的现代 SaaS | shadcn/ui(禁止以默认态交付) |
| Tailwind 营销站 | Tailwind v4 |
配套铁律:一个项目只允许一个设计系统,不混用;不要手搓官方系统的 CSS;不要导入令牌后覆盖掉九成。
反过来,玻璃拟态、bento 网格、粗野主义、编辑风这类审美方向没有官方包,就用原生 CSS 实现,并在注释里诚实写明"这是借鉴,不是官方素材"。最典型的是 Apple Liquid Glass:Apple 只把它文档化在自家平台,不存在公开的 web 包,任何 web 实现都是backdrop-filter加层叠边界的近似,必须在代码里标注为近似,而不是冒充官方。
预检:交付前必须诚实勾选的清单
这一节解决"最终质量由谁把关"。Taste-Skill 把质量底线写成代理自己必须跑的清单(§14 Final Pre-Flight Check),任何一格不能诚实打勾,页面就不算完成。
上图就是 taste-skill 产物:深色底、左侧排版加真实花艺摄影,没有 AI 紫渐变,没有三等卡片,Logo 墙、信任条各归其位。从完整清单里挑出最常翻车的八项:
- 全页零破折号(—),引文、按钮、alt 文本都不许有。
- 色彩锁:一个强调色贯穿全页,第七节不许突然换色。
- 形状锁:一套圆角体系,圆按钮不许出现在方卡片页面里。
- Hero 必须装进首屏:标题两行以内,副文案 20 词以内,CTA 不滚动就可见。
- 按钮对比度过 WCAG AA(4.5:1),白底白字直接判死;同一意图全页只留一个 CTA 文案。
- 小字号眉标每三个 section 最多出现一次。
- 真实图像优先:生成图、真实照片,禁止 div 假截图,纯文字页不算极简。
- MOTION 高于 3 的一切动效必须响应
prefers-reduced-motion。
完整清单有六十余项,覆盖内容自审、深色模式双模验证、移动端塌缩声明、动效组件清理函数,见 skills/taste-skill/SKILL.md 的 §14。
边界与取舍:哪些页面不该用它
这一节划清边界:什么任务该交给它,什么任务该明确放弃,以及 v1 与 v2 之间怎么取舍。
taste-skill 在 §13 里自己声明了不管什么,并要求代理遇到这些简报时明说"这不是我的活":
| 超出范围的场景 | 应该用什么 |
|---|---|
| 数据仪表盘 / 管理后台 | Fluent、Carbon、Atlassian、Polaris 等官方设计系统 |
| 重型数据表格 | TanStack Table / AG Grid |
| 代码编辑器 | Monaco / CodeMirror 官方主题 |
| 原生移动端 | Apple HIG / Material 规范 |
| 实时协作 UI(光标、冲突合并) | 对应领域方案,问题类型不同 |
三条实操取舍,提前知道能少走弯路:
- 默认装到的是 v2(实验版),它仍在迭代;如果工作流依赖 v1 的精确行为,显式安装
design-taste-frontend-v1钉住旧版,完整差异见 CHANGELOG.md。 - 图像生成技能只出图不出码,与
image-to-code的区别在于:后者把"生成图、分析、实现"写成一条强制流水线,前者只是参考板。 - 技能本身也会"偷懒"吗:输出被截断、留占位注释是模型的行为倾向,仓库内置了 research/laziness/ 的专项研究,讲清截断的成因与对策,配合
full-output-enforcement使用。
Taste-Skill 真正的贡献不在任何单条规则。破折号禁令、三等卡片禁令、Hero 行数上限,单独看都是小决定;不同之处在于它们被写成代理必须自己执行的清单,而清单上每一格都要求"诚实打勾"。
它不仅解决"AI 第一次生成的页面长得像 AI",更重要的是建立了一套设计产出可提前约定标准、过程可检查、事后可持续收紧的工程流程:简报被大声读出来,三个旋钮被写出来,设计系统的来源在注释里标注。对规模化使用编码代理的团队来说,这意味着一个页面的验收标准,第一次不再取决于评审者的手感。
下一次模型伸手去够紫色渐变时,拦下它的不再是某个人的一句话,而是那六十多个勾。
【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
