企业官网建设流程全解析

3 个旋钮驯服 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 Skills 集合）：它不替你写代码，而是把设计决策拆解成可调参数与硬性检查项，让 Codex、Cursor、Claude Code 生成的落地页、作品集、重设计项目摆脱"一眼假"的模板感。

AI 前端设计为什么总是一眼假

痛点不在代码能力，而在审美默认值。大模型写 UI 时会直接滑向一组"默认审美"：紫色渐变、深色背景上的居中 hero、三张等宽特性卡片、到处糊玻璃拟态、Inter 配 slate-900。再叠加占位文案和 div 拼的假产品截图，模板感就成型了。

Taste-Skill 的解法是把"品味"工程化：先读需求、再调参数、选对设计系统、最后过一张硬性检查清单。整套规则以可移植的SKILL.md文件分发，跨编码 Agent 通用，规则针对设计意图而非某套框架 API。

先读需求：Design Read 推理机制

结论：生成任何代码之前，Agent 必须先输出一行"设计读"，再动手。

技能的第一阶段叫 BRIEF INFERENCE。Agent 从 6 类信号源判断用户到底要什么，再压缩成一行判断，例如："Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind + Geist + restrained motion." 后续所有布局、动效、密度决策都锚定这一行。

需求有歧义时，只允许追问一个问题，禁止多问题轰炸，更禁止靠猜。同时有一条"反默认纪律"：除非需求明确指向，否则主动避开 LLM 默认审美组合。

设计参数怎么调：3 个 1-10 旋钮

设计读定方向后，Taste-Skill 用三个 1-10 的旋钮锁定整体气质，写在技能文件顶部：

DESIGN_VARIANCE: 8 # 1 完全对称 -> 10 艺术化非对称 MOTION_INTENSITY: 6 # 1 纯 hover 状态 -> 10 电影级物理动效 VISUAL_DENSITY: 4 # 1 画廊式大留白 -> 10 驾驶舱式高密度

每个旋钮都有明确的分档定义：VARIANCE 在 1-3 档用 12 列对称网格，8-10 档用错位网格和2fr 1fr 1fr这类分数轨道，且中高值布局在窄屏必须塌回单列；MOTION 在 4-7 档只碰transform和opacity，8-10 档才允许滚动叙事与视差；DENSITY 在 8-10 档要求所有数字用等宽字体、卡片让位 1px 分隔线。

按气质词查表，直接得到推荐区间：

这三个值就是全局变量：文档内所有规则引用变量名，不造别名。改参数不需要改文件，在对话里直接覆盖即可。完整参数定义见 skills/taste-skill/SKILL.md。

设计系统怎么选：官方包与近似实现

结论：需求指向官方设计系统就装官方包，别手搓；需求是美学方向就自建并诚实标注。

映射表把需求直接落到具体包：Microsoft 生态上 Fluent UI，Google 风格上@material/web加 Material 3 tokens，IBM 式企业分析上 Carbon，GitHub 风格开发者页面上 Primer，Shopify 管理界面必须 Polaris，现代 SaaS 自持组件则用 shadcn/ui 或 Tailwind v4。硬性规则：一个项目只用一个系统，不允许把 Fluent 和 Carbon 混进同一棵树，也不允许只抄别人的 tokens 再覆盖 90%。

玻璃拟态、Bento 网格、粗野主义、杂志风这类方向没有官方包，用原生 CSS 加组件库实现，并在代码注释里写清楚哪些是借鉴、哪些是官方。例如玻璃态用backdrop-filter加分层边框近似，同时给prefers-reduced-transparency用户留纯色回退。

反 AI 味规则与验收检查清单

Taste-Skill 的 AI Tells 部分，是从真实落地页测试里归纳的"一眼假"信号清单，全部是硬性禁令：

最后一行最严格：页面任何可见位置出现一个 em-dash，就算 Pre-Flight Check 直接失败，必须重写。规则不给"少用"的余地，因为历史经验是模型会无视"适量使用"的措辞。

交付前的验收检查清单：

• 响应式：320px 到 1920px 全断点检查，非对称布局窄屏必须塌回单列
• 视觉层级：优先级靠尺寸、颜色、间距传达，而不是装饰元素
• 交互状态：hover、focus、active、disabled 齐全
• 暗色模式：消费级页面默认双模式，两种模式都过一遍才算完成
• 动效降级：prefers-reduced-motion有静态替代
• 性能护栏：只动画transform与opacity，禁止裸window.addEventListener('scroll')
• Tells 扫描：对照清单逐项过，em-dash 计数必须为零

任何一条不过，重写对应部分再交付。

快速上手路径与技能矩阵

一条命令安装，代码技能与图像技能共用同一条 CLI：

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"

懒办法是把任意SKILL.md拷进项目，或直接贴进 ChatGPT、Codex 对话。旧版 v1 与 v2 并存，重跑安装即原地升级，脚本不用动。

技能矩阵按用途分工，实现类产出代码，图像类只产出参考图：

两条典型路径：先出图再写码，用 imagegen 系列产出概念图与团队对齐，确认方向后把渲染图交给编码 Agent 落地；或者直接写码，配 output-skill 防止截断与占位注释。

总结

Taste-Skill 把"好看"从玄学拆成了工程问题：Design Read 定方向，三个旋钮管布局、动效与密度，设计系统映射表防重复造轮子，AI Tells 清单加 Pre-Flight 做最后闸门，形成完整的验收闭环。它适合新建落地页与作品集、重设计存量项目、先出概念图再写代码、以及需要并行对比多种风格方向的所有场景。MIT 开源、基于 Agent Skills 标准跨 Agent 可移植，仓库research/目录还内置了关于模型为何偷懒、输出为何截断的专项调研，是这套反平庸机制的实证底座。

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