三个数字定页面：Taste-Skill 审美规则指南
项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill 先填 8、6、4，再谈生成页面
把需求丢给 AI 写落地页，十次有八次拿回同一副面孔：紫渐变、居中大标题、三张等宽卡片。人类设计师开工前会先定三件事：布局敢不敢偏、动效给多深、一屏塞多少信息。Taste-Skill 把这套判断变成编码智能体可执行的规则与关卡，让 AI 界面设计从模板味拉回设计感。
它约束的是设计意图，不是框架
一句话定义：Taste-Skill 是一组 Agent Skill，即一组可移植的智能体指令文件，载体是 SKILL.md。安装之后，Codex、Cursor、Claude Code 这类编码智能体会自动加载，在写任何界面前逐条执行里面的规则。它管的是设计意图——配色逻辑、版式取舍、动效的克制程度——而不是某个框架的 API，所以 React、Vue、Svelte、原生 HTML 都能用。
仓库里其实有两条线：一条是代码生成技能，直接产出前端代码；另一条是图像生成技能，先产出设计参考图。两条线可以单独用，也可以串成"先出图、再落码"的工作流。
三个数字为什么比"高级感"管用
对模型说"要高级、要有质感"，它只会退回训练数据里出现最多的默认审美。Taste-Skill 的解法，是把所有布局、动效、密度决策都挂到三个 1 到 10 的刻度上：
- DESIGN_VARIANCE：1 是完美对称，10 是艺术性混乱，管布局的实验程度
- MOTION_INTENSITY：1 是纯静态，10 是电影级物理效果，管动画给多深
- VISUAL_DENSITY：1 像画廊一样空，10 像驾驶舱一样密，管每个视口的信息量
默认基线是 8 / 6 / 4。不想自己调？按场景抄预设：SaaS 落地页 7 / 6 / 4，创意机构作品集 9 / 8 / 3，公共部门服务网站 3 / 2 / 5。
这就是数字的价值：形容词会漂移，数字是全局变量。技能文档里大量规则直接引用这三个变量——比如 "DESIGN_VARIANCE 大于 4 时禁止居中英雄区"、"VISUAL_DENSITY 大于 7 时禁用通用卡片容器"。旋钮一转，整份输出一起变。你只要丢一句"要 Linear 式极简"，它会自己把三个刻度拧到对应位置。🎛️
一条流水线：从一句需求到可发货的页面
生成开始前的几分钟其实最值钱。技能要求智能体先做需求推理：页面类型、你用的语气词（"极简""Awwwards 风"）、参考截图、目标受众、已有品牌资产，然后强制输出一行"设计解读"，例如 "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 不许在同页混用。
选型之后进入生成，生成之后不是终点，还要过质量关卡。推理、选型、生成、关卡环环相扣，任何一环的产出都是下一环的输入——这是流水线，不是四件各自为政的事。
硬规则比软提示更诚实
"注意美观"这类软提示，上下文一长就被模型稀释掉。Taste-Skill 反着来：把审美拆成可计数、可判错的硬规则。
最有名的一条是破折号禁令：标题、正文、按钮、alt 文本，任何可见位置都不许出现 "—"，这也是官方测试里违反率最高的一条。同一张黑名单上还挂着：章节编号眉标（01 / 02 / 03）、"V0.6 BETA" 式版本标签装饰、Scroll 箭头、三张等宽卡片、AI 紫渐变、用 div 拼的假产品截图。
还有一组一致性锁定：全页只允许一个强调色、一套圆角系统；每个 CTA 必须通过 WCAG AA 对比度；英雄区标题不超过两行，副文本不超过 20 个词；Inter 默认禁用，推荐 Geist、Satoshi、Cabinet Grotesk 这类更有性格的字。
软提示赌的是模型"自觉"，硬规则赌的是"数得出来"。眉标每三个区块最多一个，八个区块至少要四种布局家族——这种规则没法糊弄，只能逐条过。
检查单与动效：可勾选才叫完成
交付前，智能体要逐项过一份三十多项的发货前检查单：颜色一致性、按钮对比度、移动端布局、暗色模式、动效是否真的生效、有没有两个 CTA 表达同一个意图、长列表该不该换成更合适的组件……任何一项勾不上，页面就算没做完。把"好不好看"这种模糊问题换成机械项，是这套技能最实用的地方。📋
动效是检查单里最容易注水的环节，规则因此特别具体：动画库统一收敛到 Motion（原 Framer Motion 更名而来），复杂滚动效果则给了一套 GSAP 标准骨架——粘性堆叠卡片、纵向滚动驱动横向平移都有可直接照抄的完整实现，start: "top top"、pin: true、scrub 这些关键参数全部标注清楚。反向约束同样硬：window.addEventListener('scroll') 直接禁止，动画只允许动 transform 和 opacity，任何高强度动画必须提供减少动效的降级方案。
其中一条原则我最喜欢：声称有动效就必须真有动效。宣称动效强度 7 却纹丝不动，是失败品；做不出像样的动效，就把旋钮降到 3，交付干净的静态页。不许半吊子。
老页面改版与风格变体
改版走另一条协议：先判断当前属于全新项目、保留现状还是彻底改造，然后在真实浏览器里把现有页面审计一遍再动手，按投入产出比从高到低依次上杠杆——字体刷新、间距节奏、色彩校准、动效层、英雄区重构。
另有一份红线清单，没拿到用户明确许可就不能碰：URL 结构、导航标签、表单字段名、品牌标识、法务文案。它们不是设计细节，是 SEO 和埋点数据的地基。
不想用默认技能，也有细分变体按需取：gpt-taste 面向 GPT/Codex，更严格，用模拟随机化强制布局多样性；minimalist-skill 做 Notion/Linear 式的编辑型产品 UI；brutalist-skill 是瑞士字体加硬边界的工业粗野主义；soft-skill 走高对比度的柔和高端路线。图像侧的 imagegen-frontend-web 已拆到独立仓库，规则依旧反模板：8 个区块的落地页必须出 8 张独立的横版参考图，一张图只管一个区块，不许压进一张长图，构图也不许永远是"左文右图"。
三分钟装完，第一张页面怎么要
一条命令安装：
npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill
只装核心技能就加 --skill "design-taste-frontend"；想锁定 v1 的原始行为，把名字换成 design-taste-frontend-v1 即可。
装完，直接在编码智能体里下第一条生成指令：
用 taste-skill 给一家独立咖啡馆做个落地页
剩下的交给规则去约束。
看成品：规则跑出来的页面长这样
仓库 examples/v2/ 目录里放着几条真实产线：一家只有二十个座位的社区咖啡馆（Bohne & Söhne），整页以手绘店面为视觉主角，烘焙流程用四张实拍照片递进；一个电音夜活动页（Nachtschicht），把档期直接钉进老工业厂房的档案照片里。照片全部来自开放档案并附署名，整页找不到三卡片模板、找不到编号眉标，也找不到一个破折号。
别只读文章，挑一个技能跑一轮完整流程，用同一个需求对比安装前后的输出，差异自己会说话。项目迭代很快：默认技能已换成重写后的 v2，方向由脚本发牌、规则由真实浏览器测量，后续还会补更多设计系统支持和更聪明的需求推理。目标始终只有一个——让 AI 交出的页面能过人工审，而不是过"看起来像那么回事"这一关。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
