企业官网建设流程全解析

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 前端设计工具，产出的往往是：深色背景、紫色渐变、三张等宽卡片、居中大标题。十个页面长得像同一个模板。问题不在代码能力，而在模型不理解你的意图时，会退回"平均审美"的默认值。Taste-Skill 的思路是设计参数化：把品味变成一套 AI 能执行的规则，让 Cursor、Codex、Claude Code 这类 Agent 停止生产模板页。

🧭 先问三个问题，再写代码

大多数 AI 工具收到需求后直接"需求进、代码出"，跳过了最关键的设计推理。Taste-Skill 在动代码前插了一步"设计判读"：模型先读取页面类型、你用的形容词、你给的参考、目标观众、已有品牌资产、隐性约束（无障碍优先、受监管行业）这几类信号，再输出一行固定格式的设计判读，例如："Reading this as: 面向技术买家的 B2B SaaS 落地页，Linear 式极简语言，倾向 Tailwind + Geist + 克制动效。"只有当判读真正分叉时才追问，而且只问一个问题，绝不连珠炮。

翻译成大白话，就是写码前先做"三连问"：

• 这是什么页面？页面类型决定设计语言：SaaS 落地页讲价值主张与转化路径；作品集讲视觉个性；企业站讲信任感；博客和编辑型内容讲阅读体验与信息层次。
• 要什么气质？你用的描述词会被翻译成具体参数，而不是空泛的样式标签："简约"对应居中布局、充足留白、单色调；"高端"对应非对称构图、精细动效、材质纹理；"创意"则把布局实验性和交互元素拉到最满。
• 给谁看？观众决定视觉策略，而不是 AI 的个人口味：B2B 采购团队看数据可信度与合规性；设计敏感型消费者看品牌故事与情感连接；技术决策者看架构与性能；普通用户看直观导航和清晰的价值主张。

这三连问看似简单，却是"AI 听懂了你"和"AI 自说自话"的分界线。

🎛 三个旋钮调"感觉"

判读明确后，第二步是调"感觉"。可以把它想成做菜：同样的食材（内容和组件），放多少盐、怎么摆盘，味道完全不同。Taste-Skill 把品味抽象成三个旋钮，都是 1 到 10，之后所有布局、动效、密度决策都被它们卡控。文件里带默认值（8/6/4），调参直接在对话里说，不用改文件。

旋钮一：DESIGN_VARIANCE，摆盘自由度。管布局敢不敢偏离居中。低档（1-3）是经典 12 列网格、居中对齐、间距等分；中档（4-7）开始用负边距重叠、混合宽高比、非对称对齐；高档（8-10）出现错落式布局、分数单位网格、大尺度留白。三个参数怎么选的实战口径：企业页、文档站压在 3-5；作品集和创意站从 7-10 起步。

旋钮二：MOTION_INTENSITY，火候。管页面动不动。低档只有 hover 和按压态，CSS 过渡就够；中档（4-7）是滚动进场、视差，交给 Motion 库；高档（8-10）上滚动劫持、物理模拟、GSAP 或 Three.js。硬规则是：每个动画必须能用一句话说清它在传达什么（引导注意力、展示状态变化、推进叙事），说不清就别做。而且"动效要说真话"：旋钮设到 7，页面就必须真动；做不出来就降到 3，交一个干净的静态页，不要半成品。

旋钮三：VISUAL_DENSITY，盘子满不满。管一屏塞多少信息。低档（1-3）像美术馆，大留白、只强调一个焦点；中档（4-7）是常规网页间距，信息与可读性平衡；高档（8-10）是驾驶舱模式，数据密集，数字一律等宽字体。

三个参数怎么选的高频组合：

旋钮之上还压着一份"AI 破绽"清单：AI 紫渐变、Inter + slate-900、三张等宽卡片、默认滥用衬线体、高端品牌的米色 + 黄铜配色、破折号装饰，默认全部禁用，除非需求明确点名。这是"反模板脸"最直接的体现。

仓库里也附带真实产出，比如这个用默认技能做出的花艺品牌 Floria：

📦 用起来的三种方式

仓库里十几个技能，各管一件事，安装方式相同，按场景挑：

有参考图，或者想先看效果

imagegen-frontend-web、imagegen-frontend-mobile、brandkit 三个技能只出参考图（落地页 moodboard、移动端流程、品牌板），不写一行代码。你可以在带图像能力的 Agent 里先出图，再把图交给编码 Agent；也可以直接用 image-to-code-skill 跑"生图 → 析图 → 写码"完整链路，提示词里交代一句即可："follow the skill: generate images, then analyze, then code"。

有现成页面要翻新

redesign-skill 的原则是"先审计，再动手"：先提取现有品牌令牌、信息架构和 SEO 基线（SEO 迁移是重设计的头号风险），再按优先级逐项改进：字体 → 间距 → 色彩 → 动效 → hero 重构。同时有几样东西绝不静默改动：URL 结构、导航文案、表单字段名、法律文案。"保留品牌"模式下现有旋钮值原样保留、动效 +1；"全面翻新"则变化度和动效各 +2、密度不变。

全新需求

用默认的 taste-skill：读简报 → 定三个旋钮 → 选地基。需求指向成熟设计系统时，别重复造轮子，直接装官方包：

• Microsoft 生态、企业应用：npm install @fluentui/react-components
• Google / Material 风格：npm install @material/web
• IBM、数据分析界面：npm install @carbon/react @carbon/styles
• GitHub 风开发者工具：npm install @primer/css

规矩很硬：一个项目只用一个设计系统，不许手写 CSS 复刻官方体系。需求是美学方向（玻璃态、Bento、粗野主义、暗色科技）而没有官方包时，就用原生 CSS 做，并在注释里诚实标注"近似实现"，Apple Liquid Glass 就是按近似实现处理的。

全新构建的默认技术栈也被写死：React/Next.js 且服务端组件优先，动效逻辑隔离进带 'use client' 的叶子组件；Tailwind v4 + Motion（原 Framer Motion）；图标只用 Phosphor/Radix/Tabler，不手绘 SVG；字体自托管或走 next/font，配 font-display: swap；本地状态用 useState，但指针、滚动进度这类连续值必须走 Motion 的 motion value，否则移动端渲染树会顶不住。

如果 Agent 爱留 TODO 交半成品，加 output-skill；想要更严的布局与动效约束，用 gpt-taste；视觉方向已定时，直接加 soft-skill、minimalist-skill 或 brutalist-skill。

安装一行命令（完整规则集见 skills/taste-skill/SKILL.md，v1 到 v2 的变更见 CHANGELOG.md）：

git clone https://gitcode.com/GitHub_Trending/ta/taste-skill

然后把对应 SKILL.md 拷进项目，或直接粘进对话即可。

✅ 交付前自检清单

最后一关是交付前自检清单：一条一句话，任何一条不过关就算没做完。完整清单有 60 多项，最容易踩的 8 条如下：

• Hero 是否装进首屏：标题不超 2 行、副文案不超 20 词、CTA 不滚动就可见
• 导航在桌面端保持单行，高度不超 80px
• 按钮、表单、占位文字对比度都过 WCAG AA（4.5:1）
• 所有交互元素可键盘触达，hover / focus / active / disabled 状态齐全
• 动效有 prefers-reduced-motion 的静态回退
• 移动端断点逐节写明，用 min-h-[100dvh] 而不是 h-screen
• LCP < 2.5s、INP < 200ms、CLS < 0.1，过一遍 Lighthouse
• 全页零破折号（—），这是模型最常见的"AI 痕迹"，硬性禁止

这份交付前自检清单的意义不在条目多，而在把"我觉得好看"变成"逐条可验证"。

把品味变成流程

Taste-Skill 的用法一句话带走：读简报、定旋钮、选系统、交付前自检，"好不好看"就从玄学变成了流程。项目自己也按同一逻辑迭代：v2 基于真实翻车案例整体重写，区块库在持续扩充，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