AI生成的页面为什么都长一样？5分钟用Taste-Skill做出不像AI的界面

AI生成的页面为什么都长一样5分钟用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你有没有遇到过这种情况让 AI 写一个落地页交回来的是紫色渐变背景、居中大标题、三张一模一样的功能卡片。这套AI 脸业内叫 slop低质通用产出问题不在模型能力而在没人告诉它设计品味是什么。Taste-Skill 就是干这个的一组可移植的 Agent Skill 文件Agent Skill 可以理解为给 AI 代理自动加载的设计规则说明书把布局、排版、动效、间距的判断标准直接注入你的 AI 编码工具让它的产出脱离模板味。没有它之前 / 用了之后对比项没有 Taste-Skill用了 Taste-Skill首屏居中标题 紫色渐变 装饰光斑分屏或不对称布局中性色打底 单一强调色字体清一色 InterGeist、Outfit、Cabinet Grotesk 等更对的选择动效要么没有要么满屏无限循环每个动画都有理由引导视线/反馈/叙事且只动 transform 和 opacity细节圆形 spinner 加载、占位注释烂尾骨架屏、空状态、错误态齐全按检查清单过一遍再交付一条命令完成安装安装走 Vercel 的 skills CLI一条命令把整个仓库的 13 个技能全部装进你的代理工具npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只想要某一个技能时用--skill加它的安装名安装名写在每个 SKILL.md 的 frontmatter 里和文件夹名不一样别搞混npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill redesign-existing-projects嫌麻烦的话直接把某个skills/*/SKILL.md复制进你的项目或粘贴进对话窗口效果相同。第一次使用先看它怎么读题装完不用配置。打开 Codex、Cursor 或 Claude Code 这类工具丢一句需求帮我做一个精品咖啡品牌的落地页装好默认技能安装名design-taste-frontend的代理不会立刻开写而是先输出一句设计判断比如读作面向消费者的品牌落地页走克制的高端路线倾向 Tailwind 无衬线显示字体然后设定三个 1-10 的旋钮值再开始产出代码。第一个可见效果就是首屏不再是居中大标题字体不再是 Inter背景也没有紫色渐变。场景一给新页面定风格默认技能适合绝大多数新项目。它的行为由顶部三个旋钮决定你不需要改文件用自然语言就能覆写极简、平静、Linear 风格 → 旋钮自动往低变化、少动效、大留白方向走Awwwards 风、实验性 → 布局不对称、动效拉满政府服务类、信任优先 → 收敛到稳妥的对称布局和高密度信息注意需求里带参考物贴截图、点名产品时代理会优先跟随你的参考而不是套默认审美。场景二改造已有项目已有网站想提升质感用redesign-existing-projects技能。它的强制流程是先审计再动手先盘点现有品牌色、字体、页面结构和该保留的交互再按字体 → 间距 → 色彩 → 动效 → 关键区块重构的优先级逐级提升。关键是它明确禁止静默改动 URL 结构、导航标签和表单字段名SEO 和埋点不会因为你换个皮而挂掉。场景三只要设计图不要代码交付物是图而不是代码时给老板看方向、给设计评审装图像生成类技能imagegen-frontend-web网站设计稿hero、着陆页、多区块imagegen-frontend-mobile移动端屏幕和完整流程brandkit品牌工具板logo 方向、调色板、字体、身份应用流程是先用这些技能出一版图确认方向后把图丢给编码代理去实现。想要生成 → 分析 → 写码一步到位用image-to-code技能并在提示词里写明这个顺序。场景四AI 老烂尾怎么办代理动不动输出半截代码、留 TODO 注释加一个full-output-enforcement技能即可它强制完整输出、禁止占位注释。这类技能是独立开关互不冲突按需要叠加。五个最影响效果的细节细节规则为什么重要三个旋钮DESIGN_VARIANCE 8 / MOTION_INTENSITY 6 / VISUAL_DENSITY 4默认分别管布局实验性、动效深度、单屏信息量所有规则都由这三个数 gating反居中变化度 4 时禁止居中 hero居中大标题是 AI 页第一签名强制分屏或不对称留白单一强调色全页只允许 1 个强调色禁 AI 紫蓝发光配色一致性是高级感最便宜的来源磁性/连续动效只用 useMotionValue/useTransform禁用 useStateuseState 每次鼠标移动都重渲染整棵树移动端直接卡死动画只动 transform 和 opacity禁止动画 top/left/width/height触发重排的性能杀手移动端帧率会崩⚠️ 最容易踩的坑不是规则没执行而是半执行声明了高动效旋钮却只做了 hover或者写了 ScrollTrigger 但触发点在滚动中途。技能末尾内置了一份约 80 项的交付前检查清单代理会在输出代码前逐项过一遍别跳过这一步。效果展示这是项目的官方横幅右侧的纸艺组件视觉本身就遵循了技能强调的克制路线大量留白、中性米色底、单一强调元素没有任何发光渐变。实际产出可以对比仓库examples/下的完整案例页植物主题工作室站点非通用字体排版、不对称布局、单一强调色贯穿全页动效只在滚动关键节点出现。适合谁下一步看哪里如果你日常用 AI 编码代理做前端或者受够了给AI 脸页面返工这套技能基本零成本装一次之后每个新项目自动生效。想深入三个入口按顺序看skills/ 目录下的 13 个 SKILL.md 原文每条规则都有出处、CHANGELOG.md里的 v1 到 v2 重写说明、research/目录下的专项研究比如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），仅供参考