让AI生成的页面不再“模板味“：Taste-Skill前端设计指南

让AI生成的页面不再"模板味"：Taste-Skill前端设计指南

【免费下载链接】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写个落地页，交回来的却是居中大标题、三张一模一样功能卡、紫蓝渐变背景。换十个模型写十遍，长相都差不多。Taste-Skill 就是冲着这个问题来的：它把一套设计规则打包成可安装的 Agent Skill，装进你的 AI 编码工具后，布局、字体、配色、动效都会被约束在"不像AI"的范围内。

一句话看懂 Taste-Skill

它是一份可以安装给 AI 的"设计规范"，不是 UI 框架，也不替代你写代码。装好之后，AI 每次动笔前都会先读它，然后帮你做成这些事：

• 新项目输出不再撞脸：同一模型、同一提示词，出来的页面布局不会千篇一律
• 老项目不用推倒重来：先审计现有 UI，再按优先级修排版、间距和层次
• 设计稿先行：让 AI 先出分区设计图，确认方向后再写成可运行的前端代码
• 堵住偷懒输出：禁止"剩余代码类似"这类占位写法，要完整交付就完整交付

快速上手：三步装好 Taste-Skill

第一步，整包安装。用官方 CLI 拉取仓库里skills/目录下的全部技能：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill

第二步，按需只装一个（可选）。技能名取自 SKILL.md 里的name字段，例如：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "imagegen-frontend-mobile"

第三步，在对话里启用。对你的编码代理说一句"按 taste-skill 的规则来做这个页面"即可。懒人方案：直接把任意一份 SKILL.md 复制进项目，或粘贴进 ChatGPT/Codex 对话，效果相同。

按场景选对玩法

不知道从哪个技能入手？对照你现在要干的活：

三个旋钮，调出你要的样子

taste-skill 文件顶部有三个 1-10 的档位，改数字就行，不用懂代码：

• DESIGN_VARIANCE（默认 8）：管布局的实验程度。做给保守甲方看的项目，降到 4-5，得到规整的对称栅格；保留 8 以上，得到非对称留白、错落排版。
• MOTION_INTENSITY（默认 6）：管动效深度。政务类、文档型站点降到 2-3，只留悬停和按压反馈；想要滚动联动、磁性按钮，拉到 8 以上，但页面必须真的动起来，不许"宣称了动效却是静态页"。
• VISUAL_DENSITY（默认 4）：管一屏塞多少信息。品牌站、作品集降到 2-3，得到画廊式大留白；数据密集型产品拉到 8 以上，用细线分隔和等宽数字代替卡片。

拿不准就用默认值，技能会先"读懂"你的需求，再自己微调这三个数字。

效果实拍

下面的页面就是 taste-skill 的产出案例，可以对照前面三条规则看它如何执行：

注意开头不是居中三件套，而是左右分开的非对称构图；标题用了有辨识度的无衬线字体而非 Inter；强调色只有一处，没有紫蓝渐变。

往下翻能看到同一套调色板贯穿始终，客户评价被裁成短片段而非大段文字，行动按钮和页脚保持克制。整页没有一处布局家族重复使用。

好看背后的内置规则

规则很多，挑四组最影响观感的说，每条后面是它防住的问题：

排版

• Inter 不再是默认首选，改用 Geist、Satoshi 等。收益：一眼摆脱 AI 生成页的共同脸。
• 正文限宽约 65 字符。后果：不加这个限制，长句会拉成影响阅读的全屏宽度。

色彩

• 全页只允许一个强调色，饱和度压在 80% 以下，底色走中性灰。
• "AI 紫/蓝发光"被明确禁止。违反的代价：你的页面会立刻混进那 90% 无法区分的 AI 站里。

布局

• DESIGN_VARIANCE 大于 4 时，居中 Hero 直接禁用，必须走分屏或左右错位。
• 同一种版式结构（如三列图卡）整页只能用一次，防止"每个区块都长一样"。

交互

• 加载、空状态、错误三个状态必须实现，不许只画"成功那一帧"。
• :active时按钮下沉 1px 或缩小 98%，模拟物理按压，点下去才有反馈感。

进阶技巧与性能红线

让界面更上头

• 磁性悬停、滚动进度这类连续动画，用 Motion 的useMotionValue而不是useState。因为后者每帧都触发重渲染，手机上直接卡死。
• 动效一律走弹簧物理（stiffness 100、damping 20），别用线性缓动，否则动作没有"收住"的感觉。
• 玻璃拟态不要只叠一个 backdrop-blur，加 1px 内边框和一层内阴影，才能模拟出真实的边缘折射。

别踩的性能坑

• 噪点、颗粒滤镜只贴在固定且pointer-events-none的伪元素上。挂在滚动容器上会持续触发 GPU 重绘，移动端帧率立刻下降。
• 动画只碰transform和opacity，别动top、width这类会触发重排的属性。
• z-index 只留给导航栏、弹层这类系统层级，满屏z-50迟早互相打架。

你可能想问

React、Vue、Svelte 都能用吗？可以。规则针对的是设计意图而不是某个框架的 API，写在哪种技术栈里都成立。

SKILL.md 到底是什么？一份 AI 代理能自动加载的自然语言指令文件，本质是写给模型的"岗位说明"。不需要安装工具，复制进仓库或粘贴进对话也能生效。

图像生成技能要另外装吗？不用，它们和代码技能同放在skills/目录下，同一条npx skills add就能全部发现。

默认装的是 v1 还是 v2？现在是 v2 实验版，是一次大重写。如果你的工作流依赖 v1 的精确行为，单独装design-taste-frontend-v1即可锁定旧版。

这套规则会不会管太死？规则大多是"默认禁止 + 明确豁免路径"，比如品牌本身是紫色，紫色就可以用。想深入了解规则怎么来的，可以看仓库里的research/目录。

写在最后

Taste-Skill 做的事其实只有一件：把"AI 默认审美"从你项目的选项里删掉。装一次，之后每次让 AI 做前端时，它交出来的都会先过一遍这套审。

下一步就一个动作：挑一个你手头的落地页需求，按上面的三步装上 taste-skill，跑一遍，然后把新旧两版页面并排放着看。

【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill