企业官网建设流程全解析

Taste-Skill 完整上手：30 秒装好，让 AI 生成的高端 UI 不再模板化

【免费下载链接】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，负责教 AI 做反通用化的高端 UI 设计。30 秒装好它，产出的页面就不会再带"AI 味"。

为什么 AI 生成的页面长得都一样

模型背了太多落地页套路，"深色背景 + 渐变光效 + 居中大标题 + 三张等宽卡片"几乎是它的默认答案。你让它写"现代、高级"的页面，它回你的就是这套默认答案，所以越看越像广告模板。而且你说"再高级一点"，它只是把同一个默认方案再渲染一遍，方向不会变——问题不在模型，在它缺少设计判断的红线。Taste-Skill 做的事，就是把这批红线直接写进 AI 的工作流：开始写之前先读懂需求、推断设计方向，交付前再逐项自检，命中红线就返工。

30 秒上手：安装命令与技能怎么选

一条命令装下全部技能：

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

只装其中一个，用 --skill 指定安装名：

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

不想用命令行的话，把 skills/ 目录里任意一份 SKILL.md 拷进项目，或整段粘贴到 ChatGPT / Codex 对话里，效果相同。装完后按交付物选技能：产出代码，选实现类；产出设计稿，选图像类；拿不准就先装 taste-skill。

• 从零写落地页 → taste-skill，最稳的通用默认，读需求、推风格、调参数一条龙
• 在 GPT / Codex 上要更严格的布局与动效强制 → gpt-tasteskill
• 先生成参考图、再让 AI 照着写代码 → image-to-code-skill
• 已有项目想翻新，而不是从零开始 → redesign-skill，先审计 UI，再修布局、间距和层级
• 视觉方向已定，只挑风格 → soft-skill（安静高级）、minimalist-skill（Notion/Linear 式克制）、brutalist-skill（硬朗机械）
• AI 总是截断输出、交半成品 → 加一个 output-skill，强制完整交付
• 交付物是设计稿而不是代码 → imagegen-frontend-web（网站稿）、imagegen-frontend-mobile（手机屏）、brandkit（品牌板），生成后把图交给编码代理实现

三个参数怎么调：DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY

skills/taste-skill/SKILL.md 文件顶部有三个 1–10 档的旋钮，各管一类视觉决策：

• DESIGN_VARIANCE：布局实验度。调低是居中、规整、安全；调高是不对称、更现代。
• MOTION_INTENSITY：动效深度。调低只有悬停反馈；调高是滚动驱动、磁性跟随。
• VISUAL_DENSITY：单屏信息量。调低是画廊式留白；调高是仪表板式密集。

默认值：

DESIGN_VARIANCE: 8 MOTION_INTENSITY: 6 VISUAL_DENSITY: 4

改数值不用手动编辑文件，直接在对话里告诉 AI"把 VARIANCE 调到 9"就行。文件里还带预设组合可以直接引用：SaaS 落地页 7/6/4，设计师作品集 8/7/3，政务或信任型站点 3/2/5。

设计红线：必须做与不要做两张清单

这些不是风格建议，而是每次生成都会执行的检查项。清单如下：

必须做

• 全页锁定 1 种强调色，饱和度低于 80%，选完用到最后一个组件
• 大标题收紧字距，正文单行宽度限制在 65 字符内
• 交互状态做全：骨架屏、空状态、表单内联错误提示一个不能少
• 动效走弹簧物理参数（stiffness: 100, damping: 20），手感要有重量
• 玻璃态加 1px 内边框和微妙内阴影，模拟物理边缘折射
• 全屏区块用 min-height 100dvh，别用 h-screen，避免移动端地址栏抖动

不要做

• 不要用"AI 紫蓝"渐变发光当默认，改中性基底 + 单一高对比强调色
• 不要给"高级、创意"风格默认配 Inter，换 Geist、Outfit 或 Satoshi
• DESIGN_VARIANCE 大于 4 时，不要做居中 Hero + 居中 H1
• 不要用 useState 驱动鼠标跟随这类连续动画，移动端会卡死，改用 Motion 的 useMotionValue
• 不要把颗粒噪点滤镜加在滚动容器上，只放在固定且 pointer-events-none 的元素
• 不要随手 z-50，z-index 只留给粘性导航、模态框、覆盖层

真实案例：一张 Taste-Skill 生成的页面

这是一套用默认参数生成的"植物建筑"工作室页面，四个看点：

• 标题压在左上，花卉大图占满右侧，非对称分栏，通篇没有居中式 Hero
• 黑色基底，唯一强调色来自花材本身的粉与黄，整页只用一个调色板
• 无衬线大标题配斜体强调词，正文小字号浅灰，层级对比一目了然
• 实心主按钮加幽灵式次按钮，CTA 主次一眼可分

首屏往下是客户评价区与转化区，整页按"钩子 → 展示 → 转化 → 页脚"的节奏排布，每个区块都有明确任务，交互状态也是齐全的，不是只有一张静态效果图。

Taste-Skill 常见问题

只在 React 里能用吗？Vue、Svelte 行不行？行。规则针对的是设计意图，不是某个框架的 API，主流 AI 编码工具都能加载。

不用命令行，能装吗？能。把 skills/ 下任意一份 SKILL.md 拷进项目，或整段粘贴进对话即可生效。

图像生成技能跟写代码的技能有什么区别？前者只输出设计稿图片、不产代码，你把图交给编码代理去实现；两者走同一条安装命令。

默认版和 v1 有什么区别，旧项目要不要换？默认 taste-skill 现在是 v2 实验版，行为更严格；依赖旧行为的可以单独装 taste-skill-v1，两个安装名互不覆盖。

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