企业官网建设流程全解析

AI生成的网页总是一个样？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正是为了解决这件事而生的开源项目，它用一套可移植的"技能说明书"，给 Codex、Cursor、Claude Code 等 AI 智能体补上设计品味这一课，让 AI 生成网页告别千篇一律的模板感。

有没有发现，AI 做出来的网页全都"长得很像"

先描述一个你大概率经历过的场景。你打开 Cursor 或 Claude Code，输入一句"帮我做一个 SaaS 产品的官网首页"，等了几十秒，页面出来了：居中的大标题、紫色到蓝色的渐变光晕、三张等宽的功能卡片、到处是毛玻璃、底部再来一行"Scroll down"。

然后你又让它做一个花店官网，它给你同样的紫色渐变、同样的三张卡片、同样的圆角玻璃面板。内容换了，骨架没换。这种一眼就能认出来的"AI 味"，英文圈子里有个很形象的说法叫AI slop（AI 垃圾），意思是 AI 批量生产出来的、缺乏个性和专业判断的界面。

问题不在 AI 不聪明，而在于它的"默认值"。大模型在训练数据里见过最多的，就是那些被大量复制的中等水平页面，于是"稳妥地随大流"成了它的条件反射。专业设计师会把版式、配色、字体当成一项项有意识的决策，而 AI 默认跳过决策，直接输出统计意义上的"最大公约数"。

有意思的是，Taste-Skill 项目里还专门附带了一整个research/目录，从认知捷径、训练数据偏差、RLHF 与算力约束等角度，认真分析了"为什么大模型生成的东西总是偷懒"。它不是把问题归结为一句"AI 没审美"，而是把成因拆开来看，再对症下药。

Taste-Skill 是什么：一份写给 AI 的"设计品味说明书"

Taste-Skill 的核心形态，是一批名为SKILL.md的纯文本技能文件。你可以把它理解成给 AI 看的"岗位说明书"：里面不写死任何一套模板，而是写清楚"面对什么样的需求，应该做出什么样的设计决策"。

这个定位很关键。它不是组件库，不强制你用某个框架，也不规定页面必须长成什么样。它的作用是改变 AI 做决策的方式：从"条件反射式地输出默认风格"，变成"先读需求、再定策略、最后动手"。

• 对落地页、作品集、营销官网这类页面，它有一整套设计纪律；
• 对"把现有老网站改好看"这类任务，它有一套改版审计流程；
• 对"先画设计图再写代码"的工作流，它还有配套的图像生成技能；
• 对极简、粗野主义、高端视觉等特定风格，它各准备了一份专项技能。

你不需要一次装完所有技能。装一个默认的taste-skill就能覆盖大部分场景，其他的按需添加即可。

它怎么把"审美"变成可执行的规则

审美听起来很玄，但 Taste-Skill 把它拆成了四条可落地的机制，这也是它和普通"提示词模板"最本质的区别。

规则一：先读懂房间，再动手画

在碰代码之前，技能要求 AI 先做一次"需求推理"：这个页面是什么类型，用户用了哪些风格词（极简、冷静、Awwwards 风、高级消费品感），有没有参考链接或竞品，受众是技术采购委员会还是审美挑剔的消费者，品牌方已有的 Logo、配色、字体是什么。

推理完之后，AI 必须先输出一句"设计解读"，比如："我将它理解为：面向技术买家的 B2B SaaS 落地页，走 Linear 式极简路线，采用 Tailwind 工具类 + Geist 字体 + 克制的动效。"这句声明的作用，是强迫 AI 把隐性假设摊到明面上，而不是闷头就画。

规则二：三颗旋钮，把风格参数化

Taste-Skill 给每个项目预设了三颗从 1 到 10 的调节旋钮，相当于把"风格"变成了可调参的变量：

默认基准是 8 / 6 / 4，但更重要的是"由需求推导旋钮值"：你说"要公共部门那种可信、稳重的官网"，AI 会把变异度降到 3、动效降到 2；你说"要创意机构那种炸裂的作品集"，它会把变异度拉到 9、动效拉到 8。需求决定参数，而不是参数决定需求。

规则三：一张"AI 味"黑名单

如果说旋钮是"往哪个方向走"，那黑名单就是"哪些路绝对不能走"。技能里专门列了一长串AI 标志性特征，逐条禁止：

• 破折号（—）被彻底禁用，一个都不许出现，因为它是 AI 最典型的行文习惯；
• 禁止"V0.6""BETA"这类版本角标，禁止"Scroll"、"↓ scroll"这类滚动提示；
• 禁止图片上叠加装饰性标签，禁止"00 / INDEX"这种给区块编号的小字眉题；
• 禁止用 div 拼出来的假截图、假终端、假仪表盘；
• 禁止默认使用 Inter 字体、禁止"AI 紫"渐变当默认配色；
• 禁止同一个页面里出现两处相同意图的按钮文案（"联系我们"和"Let's talk"重复出现就是不合格）。

这份黑名单不是凭空拍脑袋，而是从大量真实生成结果里总结出来的"指纹"。项目甚至在文档里注明，破折号禁令是历次测试中被违反次数最多的一条，所以干脆写成零容忍。

规则四：交付前的预飞行检查

在 AI 宣布"写完了"之前，技能强制要求它逐项核对一份长达几十条的预飞行检查清单：强调色是不是全页统一、圆角体系是不是一套、每个 CTA 按钮是否通过 WCAG AA 对比度、英雄区标题是否超过两行、导航栏在桌面端是否单行显示、是否有减少动效的适配、LCP 是否小于 2.5 秒。任何一项不能诚实地打勾，页面就不算完成。

这套"硬检查"把许多原本靠人肉 review 才能发现的细节问题，前置到了 AI 交付环节，相当于给生成结果装了一道质检闸门。

上手实操：三步让 AI 变得有品位

光说不练没用，下面按真实使用流程走一遍。

第一步：安装技能

安装只需要一条命令。npx skills add会自动扫描仓库里的skills/目录，把全部技能装好：

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"

懒得用命令的话，也可以直接把某个SKILL.md文件复制进项目，或者粘贴到 ChatGPT 的对话里，效果一样。

第二步：挑一个合适的技能

技能家族分两大类：输出代码的实现技能和只出参考图的图像技能。初次上手，直接装默认的design-taste-frontend就行；想换个口味或应对特定场景，再按需补充：

第三步：在提示词里声明用法

装好之后，正常写你的需求就行，AI 会自动读取技能里的规则。如果你走的是"先出图再编码"的流程，可以在提示词里把工作流说清楚，例如："遵循技能：先生成图像，然后分析，最后编码。"

看一眼真实产出：Floria 示例

仓库里附带了用 Taste-Skill 生成的完整案例，一个名为Floria的高端花艺网站。不看广告看疗效，直接看它长什么样：

留意几个细节：深色背景、白色大字与高饱和花艺摄影形成强烈对比，整体只有一种基调；商品陈列、作品档案、服务板块各自用了不同的布局家族，没有重复的三等分卡片；信息层级清晰，从品牌名、大标题到副文案，眼睛该看哪里被安排得明明白白。

下半部分延续同一种视觉语言，用户评价、品牌理念、行动号召层层递进，配色与字体从头到尾保持一致。整个页面有一种"被认真设计过"的气质，而不是"被模板生成出来"的感觉。

进阶玩法：图像优先与老项目改版

图像优先：先出图，再编码

传统做法是直接让 AI 写代码，但 Taste-Skill 提供了一条更接近真实工作流的路径：先用图像生成技能为每个区块各产出一张独立参考图。一个八区块的落地页，就对应八张横向大图，每张专注一个局部，而不是压缩成一张看不清的小拼图。拿到参考图后，再交给编码智能体按图实现。这样"设计方向"和"代码实现"解耦，你可以在投入开发之前，先确认视觉方向对不对。

老项目改版：先审计，再动手

Taste-Skill 把改版任务分成三种模式：全新项目（绿场）、保留品牌（渐进升级）、彻底改造（换视觉语言）。面对已有网站时，AI 先做一次设计审计，把现有配色、字体、信息架构、SEO 基线摸清楚，再按优先级依次应用现代化手段。技能还明确划了红线：URL 结构、主导航文案、表单字段名、品牌 Logo 这些核心资产，未经许可绝不能偷偷改掉。这正好治住了"AI 一改版就把链接全弄坏"的老毛病。

它不做什么：边界与适用场景

Taste-Skill 的适用边界非常诚实，技能文档里白纸黑字写明了它不适合什么：数据仪表盘、复杂数据表格、多步骤表单、代码编辑器、原生移动端、实时协作界面。这些场景各有更专业的官方设计系统，硬套反而画蛇添足。

它真正擅长的是"面向陌生人的第一印象"型页面：SaaS 落地页、个人与工作室作品集、品牌官网、活动页、以及给老网站做视觉升级。它和 React、Vue、Svelte 都兼容，因为规则管的是设计意图，不是某个框架的 API。

另外值得一提的是，它把所有设计决策都放在公开可读的规则文件里，这意味着你可以随时翻看 AI 在遵守什么、甚至手动改规则。透明度高，也更容易排查"它为什么这么画"。

现在就可以开始

给 AI 装"品味"这件事，门槛比想象中低得多：一条安装命令，一次提示词调用，剩下的交给规则。默认的design-taste-frontend适合作为起点；有明确风格偏好就加对应的专项技能；想走"先看图再动手"的流程就上image-to-code。

最后回到那个核心问题：好设计不该让人一眼认出"这是 AI 做的"，而应该看起来像是一位专业设计师的作品。Taste-Skill 提供的，正是把"专业设计师的判断力"翻译成 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