4 步约束 AI 界面设计：Taste-Skill 实现 AI 界面反模板化的完整指南
项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill Taste-Skill 是一套面向 AI 界面设计的 Agent 技能集合，核心目标是让 AI 生成的网页摆脱千篇一律的模板感。把它装进编码智能体之后，你拿到的不再是"又一套紫色渐变落地页"，而是有明确设计立场、能通过交付前检查的前端代码。
一次真实的生成现场：模板感到底从哪来
让智能体"帮我做个咖啡店落地页"，第一版多半长这样：居中大标题前挂着小号大写字母眉标，下面三张等宽卡片并排，底部一个"Scroll"提示，页脚还有一行 V0.6 BETA。你会不会好奇，这些"AI 标志"是怎么来的？
这不是某个模型的问题。大语言模型在不确定时，会退回到训练数据里出现频率最高的"看起来像设计"的模式。Taste-Skill 的思路是：与其写几条"注意美观"的软性提示，不如把设计纪律拆成可执行、可核查的硬规则，让 AI 在每一步输出前逐项执行。
Taste-Skill 是什么：智能体自动加载的技能文件
项目核心载体是 SKILL.md，一种可移植的指令文件。安装之后，Codex、Cursor、Claude Code 这类编码智能体会自动加载它，生成界面前按内置流程执行。它不绑定任何框架：规则约束的是设计意图，而不是某个框架的 API，所以 React、Vue、Svelte 乃至纯 HTML 项目都能用。
仓库围绕两条主线组织：一条是代码生成技能，直接产出前端代码；另一条是图像生成技能，产出设计参考图。两条线可以单独使用，也可以组合成"先出图、再编码"的完整工作流。
三个滑块定调：1 到 10 的档位机制
动笔之前，技能要求先把三个 1 到 10 的滑块推到合适档位，后续所有布局、动效、密度决策都由它们驱动：
| 参数 | 档位 1（最低） | 档位 10（最高） | 管什么 |
|---|---|---|---|
| DESIGN_VARIANCE | 完美对称 | 艺术性混乱 | 布局的实验程度 |
| MOTION_INTENSITY | 纯静态 | 电影级物理效果 | 动画深度 |
| VISUAL_DENSITY | 画廊般空旷 | 驾驶舱般密集 | 每个视口的信息量 |
项目内置了场景预设，不需要你懂设计理论：SaaS 落地页建议 7 / 6 / 4，创意机构作品集 9 / 8 / 3，公共部门服务网站 3 / 2 / 5。如果你不想手动推档，只要说一句"要 Linear 那种极简风格"，技能会依据你的语气词和参考信号推断出对应档位。
从需求到方案：先推理，再映射官方设计系统
需求推理。 很多 AI 设计平庸，是因为模型跳过了思考，直接套用默认审美。Taste-Skill 的第一步强制 AI 先做需求推理：分析页面类型（SaaS 落地页、作品集、改版）、你的语气词（"极简""高级"）、参考信号、目标受众和已有品牌资产，然后在写任何代码之前，先输出一句一行式的"设计解读"。比如面对 B2B SaaS 需求，AI 会先声明 "Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language"，再据此决定字体、配色和动效。这一步相当于把模型的默认审美扳回到你的真实需求上。
官方设计系统映射。 需求推理之后，技能判断这个需求对应哪套真实存在的设计系统，并直接映射到官方包：微软风格企业应用用 Fluent UI，Google 风格产品用 Material 3，GitHub 风格开发工具用 Primer，公共部门项目可以直接对接 GOV.UK Frontend 或 USWDS。这里有一条"诚实规则"：是系统就装官方包，别手写山寨版；是美学趋势（玻璃拟态、Bento、粗野主义）就用原生 CSS 加 Tailwind 实现，并在注释里注明灵感来源。另外，每个项目只允许保留一套设计系统，把 Material 和 shadcn 混进同一个页面是不被允许的。
质量关卡：AI 痕迹禁令与交付前检查清单
技能的质量控制分两层。
第一层是 AI 模板痕迹禁令。最有代表性的是破折号禁令：页面任何可见位置（标题、正文、按钮、alt 文本）都不允许出现破折号，这是真实测试中违反率最高的一条。"01 / 02" 式章节编号眉标、版本标签装饰、滚动提示、装饰性图片说明、浮动副标题、三张等宽卡片、AI 紫渐变，全在禁止名单里。还有一组"一致性锁定"：全页只能有一个强调色、一套圆角系统，每个 CTA 必须通过 WCAG AA 对比度，英雄区标题不超过两行，副文本不超过 20 个词。连字体默认值都管了：Inter 默认禁用，推荐 Geist、Satoshi、Cabinet Grotesk 这类更有性格的选择。
第二层是交付前检查清单。AI 输出代码之前，必须逐项核对三十多关：颜色一致性、按钮对比度、移动端布局、暗色模式、动效是否真的生效、有没有重复的 CTA 意图、长列表是否换用了更合适的组件……任何一项打不了勾，就视为"页面没做完"。这套清单把模糊的"好不好看"变成了可勾选的机械项：眉标数量有硬上限（每三个区块最多一个），八个区块至少要出现四种布局家族，甚至斜体字的降部字母都要检查行高预留。
进阶玩法：动效规范、先出图再编码与改版协议
动效规范：只允许动 transform 和 opacity
动画库统一到了 Motion（原 Framer Motion 的重新品牌），复杂滚动效果则提供可直接照抄的 GSAP 代码骨架：粘性堆叠（卡片随滚动逐层钉住）和水平平移（纵向滚动驱动横向滑动）都有完整实现，start: "top top"、pin: true、scrub 等关键参数标注清楚。反向约束同样明确：window.addEventListener('scroll') 这类低效监听被禁止，动画只允许操作 transform 和 opacity，高强度动画必须提供减少动效支持。技能里还有一条诚实原则：页面宣称动效档位 7 却纹丝不动，是失败品；做不出好动效，就老实把档位降到 3，交付干净的静态页。
先出图再编码：每个区块一张独立参考图
imagegen-frontend-web 技能有一条硬性输出规则：一个 8 区块的落地页必须生成 8 张独立的横向参考图，每张只负责一个区块，绝不允许把所有区块压进一张长图里，参考图的构图也强制多样化。建议的工作流是：把图像技能挂到 ChatGPT 图像生成器里先出设计框架，再把结果交给 Codex、Cursor 或 Claude Code 落地实现。使用 image-to-code 技能时，直接在提示里写明"先生成图像，然后分析，最后编码"即可。
现有项目改版：先审计后动手，守住底线
针对已有项目，技能要求先判断属于"全新项目、保留现状、彻底改造"哪种模式，然后先做一轮 UI 审计（品牌令牌、信息架构、SEO 基线），再按优先级依次应用现代化杠杆：字体刷新、间距节奏、色彩校准、动效层、英雄区重构。审计之外还有一份"不得悄悄改动"的清单：URL 结构、导航标签、表单字段名、品牌标识和法务文案，没有用户明确许可绝不能动，因为它们是 SEO 和埋点数据的地基。
一条命令安装，发出第一条生成指令
安装只有一个命令，不想全装可以只装核心技能：
# 安装全部技能
npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill
# 或只装核心技能
npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "design-taste-frontend"
想锁定原始 v1 行为，把安装名换成 design-taste-frontend-v1 即可。装完在编码智能体里说一句"用 taste-skill 帮我生成一个花艺品牌的落地页"，剩下的交给规则去约束。
实测效果：看 Floria 与更多可组合的技能方向
项目自带的 Floria 示例最能说明问题：统一的深色主题贯穿全页，花卉大图成为真正的视觉主角，品牌故事、作品展示、用户评价层层递进，区块之间看不到重复的卡片模板，也没有一处破折号或章节编号眉标。仓库 examples/v2/ 目录里还有更多 v2 产出，比如这家咖啡店页面和夜生活站点，每张都来自同一条规则流水线：
除了默认技能，仓库还有一组细分方向可按需取用：gpt-taste（面向 GPT/Codex 的更严格变体，用模拟随机化强制布局多样性）、redesign-skill（现有项目改版专用）、minimalist-skill（Notion/Linear 式编辑型产品 UI）、brutalist-skill（瑞士字体加硬边界的工业粗野主义）、soft-skill（高对比度更柔和的高端视觉）、output-skill（专门治"AI 只交半成品"的问题）。
下一步：装好它，跑一轮前后对比
如果你也受够了 AI 生成页面的"千页一面"，不妨现在装上，挑一个技能跑一轮完整流程，亲手对比安装前后的输出差异。项目仍在快速迭代：默认技能已升级为重构后的 v2 实验版本，规则更硬、清单更全，未来的版本还会补充更多设计系统支持和更聪明的需求推理。让 AI 的作品看起来像专业设计师的手笔，而不是模板复制，正是它一直在做的事。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
