企业官网建设流程全解析

让AI生成的界面不再像"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 就是为了解决这个问题做的开源技能包——它的定位很直白：给 AI 助手一套可执行的 UI 设计规则，让模型产出的页面不再像流水线模板，而是有统一、能落地的视觉标准。

🚀 一分钟安装 Taste-Skill

不用注册不用配置，一条命令，技能就能在 Codex、Cursor、Claude Code 这类工具里直接生效：

npx skills add https://github.com/Leonxlnx/taste-skill

装完你能拿到一串设计技能，核心是 skills/taste-skill/SKILL.md 这份规则文件：AI 动手写页面前会先"读需求"，判断你要的是 SaaS 落地页、作品集还是改版，然后按后文的三条规则和三个参数输出界面。懒得跑命令的话，把 SKILL.md 全文复制进对话窗口也能用。

🎨 决定"品味"的三套色彩规则

Taste-Skill 的色彩理论其实就三条规则，作用是把 AI 最常见的翻车点一次性堵住。

中性打底，单点强调

原理：像全屋装修先定配色方案再挑家具，页面先用中性色（Zinc、Slate、Stone 这类灰阶）铺底，再只允许出现一个高对比强调色，饱和度压在 80% 以下，视觉焦点就只有一处。反例：AI 默认的"紫蓝渐变加霓虹光晕"正是这条规则点名的对象——渐变背景、紫色按钮、蓝色徽章同时抢注意力，页面看起来很热闹，其实没有重点。起步时可以直接定好三组值：一组中性色（如 #f9fafb / #ffffff / #18181b）、一组强调色（翠绿、电蓝、深玫瑰、焦橙里选一个）、一组语义色（成功、警告、错误）。下面这个花艺工作室页面就是这条规则的产物：深底中性色打底，花卉照片自然成为唯一的高饱和点。

全页色彩一致性锁

原理：强调色一经选定，整页只用这一个，发布前把每个组件审一遍。反例：暖灰色的页面在第七屏突然冒出蓝色 CTA，玫瑰色强调的站点页脚藏着青色状态徽章——页面不会报错，但看起来像两个人各做了一半。

对比度红线

原理：正文文本对比度不低于 4.5:1，大文本（18px 及以上）不低于 3:1，每个 CTA 发布前都过这道线（WCAG AA 标准）。反例：白按钮配白字、浅灰底配灰字，自己看很干净，用户眯着眼才能读完。

🎛️ 用三个旋钮调风格

三个旋钮就像音响均衡器：规则决定"音色对不对"，旋钮决定"低音给多少"。AI 动笔前会先把三个参数定下来，之后所有布局、动画、密度决策都按这个基准走。

三组开箱即用的组合，不用自己推导：

• 通用营销页：DESIGN_VARIANCE: 8 / MOTION_INTENSITY: 6 / VISUAL_DENSITY: 4，默认基准；
• 简约编辑风：5-6 / 3-4 / 2-3，留白大、动画克制；
• 创意机构：9 / 8 / 3，布局实验性强、动效足，但密度压低，否则容易乱。

📊 按项目类型调参

不同项目类型起点不一样，直接对照这张表：

信任优先的 SaaS 把布局调得太实验反而减分，创意公司把动效收得太紧又退回模板——参数服务于受众，而不是反过来。

⚠️ AI配色最常见的坑与避坑清单

发布前对照这张表过一遍，四行全过，配色基本翻不了车：

🌙 进阶：深色模式与动态主题

深色模式和动态主题在 Taste-Skill 里其实是同一件事：别写死颜色，写设计令牌。颜色以 CSS 变量挂在:root上，深色模式只改变量取值，整站自动翻面；再加一个[data-theme]就是多主题。原理看这 10 行就够：

:root { --bg: #ffffff; --text: #18181b; --accent: #059669; } [data-theme="dark"] { --bg: #18181b; --text: #f9fafb; --accent: #10b981; }

组件层只引用变量、不引用具体色值，这样切主题时强调色还能顺手调亮（翠绿换成更亮的 emerald），保证在深底上依然过对比度红线。另外声明一下prefers-reduced-motion支持，给关闭了系统动画的用户把 MOTION_INTENSITY 旋钮视为无效。

收尾

整套流程就四步：装好技能、让 AI 先读需求、按三条色彩规则配色、按项目类型拧三个旋钮，配色翻车的概率会被压得很低。下次让 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