转载：Taste Skill：彻底告别 AI 生成官网千篇一律，给 Codex 装上专业设计审美大脑 - 金金在线工具箱你随便输入一句 “搭建企业落地官网”，模型会自动输出训练数据里出现频次最高的通用模板，高度同质化特征https://xiaomisu9.cn/articles/20260813-c7fde51b

项目地址：https://github.com/Leonxlnx/taste-skill

一、痛点：为什么 AI 写的官网永远 “撞脸”？
用 OpenAI Codex、Cursor、Claude Code 生成企业官网时，几乎所有人都会遇到同一个问题：AI Slop（流水线模板 UI）。

你随便输入一句 “搭建企业落地官网”，模型会自动输出训练数据里出现频次最高的通用模板，高度同质化特征

固定紫色 / 蓝紫渐变 Hero 背景、网格波浪光效；
居中大标题 + 三列等宽圆角功能卡片；
默认 Inter 字体、大面积玻璃拟态卡片；
千篇一律模板文案、假占位图、统一圆角尺寸；
布局永远对称规整，缺少品牌专属视觉记忆点。
代码逻辑、响应式完全没问题，但十个官网九个长得一模一样，完全没有品牌辨识度。传统加长提示词、更换技术栈只能轻微缓解，无法从根源解决 AI “审美偷懒” 的问题。
而开源项目 Taste Skill，定位正是The Anti-Slop Frontend Framework for AI Agents—— 专为 AI 编码工具打造的反模板设计技能包，完美适配 Codex，从底层规则约束 AI 生成逻辑，彻底解决官网同质化难题。
项目开源地址：https://github.com/Leonxlnx/taste-skill，MIT 开源协议，无商业限制，可直接集成到 Codex、Cursor、Claude 等全部 AI 编程工具。
二、Taste Skill 核心原理：不是组件库，是 AI 的设计审稿人
Taste Skill 不是 UI 组件库、不是 CSS 框架，而是一套可移植 AI 指令规则集（SKILL.md）。
普通 AI 生成流程：需求 Prompt → 匹配训练集高频模板 → 输出同质化代码
加载 Taste Skill 后流程：需求 Prompt → 读取专业设计规则 → 自动推导专属设计系统 → 输出差异化高端界面
它内置数百条硬性反模板禁令，直接屏蔽烂大街的 AI 默认视觉范式，同时提供可调节的设计参数，让 AI 不再只会输出 “安全平庸” 的通用页面，主动产出有辨识度、符合品牌调性的官网。
核心三大可调旋钮（1-10 档位，建站核心）

主技能design-taste-frontend内置三枚可视化调节参数，做官网直接调整数值即可切换视觉风格

DESIGN_VARIANCE 布局差异度
低档位（1-3）：规整居中、对称布局，适合后台管理系统；
高档位（6-8，官网推荐）：强制不对称排版、分栏错位、自由留白，彻底摆脱卡片网格模板；
MOTION_INTENSITY 动效强度
低：仅 hover 轻微交互；高：滚动视差、磁吸动画、分段入场动效（内置标准化 GSAP 动效代码）；
VISUAL_DENSITY 信息密度
低档位（2-4，品牌官网首选）：大面积留白、轻奢简约；高适合数据仪表盘。
做企业官网标准配置：DESIGN_VARIANCE=7，MOTION_INTENSITY=5，VISUAL_DENSITY=3，平衡差异化与商务稳重感。
内置硬性反模板禁令（根治千篇一律）

项目内置大量黑名单规则，AI 生成时自动规避烂大街样式

禁止默认 Inter 字体，强制推荐 Geist、Satoshi、Cabinet Grotesk 等高级无衬线字体；
禁用泛滥紫蓝渐变光效，限制单主色低饱和度配色；
杜绝固定三列卡片、全屏 h-screen 居中 Hero；
统一规范间距、圆角层级，避免全页面统一超大圆角；
屏蔽模板化英文营销文案、通用占位素材。
三、全技能清单：Codex 建站首选技能组合

仓库内分为代码生成技能（输出前端页面）、图像生成技能（输出设计参考稿）两大类，其中适配 Codex 做官网的核心技能如下

1. 代码实现类（直接生成官网代码）

表格
安装指令名称 技能名称 适用场景（Codex 建站）
design-taste-frontend taste-skill（v2 新版） 通用企业官网首选，平衡差异化与商务风格，开箱即用
gpt-taste gpt-tasteskill 专门适配 Codex/GPT，反模板规则更严格，布局差异化更强
minimalist-ui minimalist-skill 极简轻奢品牌官网、设计工作室官网
industrial-brutalist-ui brutalist-skill 创意、潮牌、工业风小众官网
redesign-existing-projects redesign-skill 改造现有官网，优化老旧同质化页面
high-end-visual-design soft-skill 高端金融、奢侈品、地产官网，柔和低对比视觉

1. 图像辅助类（先出设计稿再转代码，效果最佳）

imagegen-frontend-web：生成官网首页、落地页视觉稿；
brandkit：自动生成品牌配色、字体、Logo 视觉规范；
image-to-code：上传参考图，AI 分析视觉语言后还原官网代码。
重点推荐：Codex 建站必拉取 2 个 Skill
主技能：design-taste-frontend
项目默认 v2 版本，综合能力最强，常规企业官网、SaaS 落地页通用；
专项强化：gpt-taste
专为 OpenAI Codex 优化，对模板布局的限制更激进，想要完全脱离流水线页面优先选用。
四、完整安装教程（Codex 两种接入方式）
方式 1：CLI 一键安装（项目本地永久生效，推荐）
前置条件：本地安装 Node.js 16 + 环境，终端进入项目根目录
bash

1. 仅安装Codex建站核心技能 design-taste-frontend

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

2. 针对Codex强化版gpt-taste（追求极致差异化）

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

3. 一键安装仓库全部技能包

npx skills add https://github.com/Leonxlnx/taste-skill
安装完成后，Codex 读取项目.codex/skills内规则，生成页面自动加载设计约束，无需重复写提示词。
方式 2：对话临时加载（无需本地安装，快速测试）

直接在 Codex 对话顶部粘贴指令，单次对话生效

plaintext

Read and strictly follow this skill rule file

https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/skills/taste-skill/SKILL.md
全局参数配置：DESIGN_VARIANCE=7，MOTION_INTENSITY=5，VISUAL_DENSITY=3
需求：搭建厦门市商务咨询企业官网，使用TailwindCSS，禁止通用AI模板，不对称布局，简约商务风
版本说明
当前默认版本：v2 experimental（全新重构，规则更完善）；
如需兼容旧版 v1 稳定逻辑，安装指令指定design-taste-frontend-v1。
五、Codex 建站标准工作流（告别千篇一律完整流程）
加载技能：安装design-taste-frontend或gpt-taste；
定义参数：固定官网三旋钮参数 DESIGN_VARIANCE=7；
前置约束：增加反模板提示词，强化差异化要求；
先生成设计系统：让 AI 输出品牌配色、字体、页面结构大纲，确认后再写代码；
多页面统一规范：全程复用同一套设计 token，避免内页风格割裂；
可选加分项：搭配imagegen-frontend-web生成视觉参考稿，再交给 Codex 还原代码。
配套完整 Prompt 模板（直接复制给 Codex）
plaintext
严格遵循taste-skill design-taste-frontend全部规则，参数配置：DESIGN_VARIANCE=7，MOTION_INTENSITY=5，VISUAL_DENSITY=3
需求：搭建本地服务类企业官网，包含首页、关于我们、业务板块、客户案例、联系我们5个页面

硬性约束

1. 禁止紫蓝渐变、四列对称卡片、统一大圆角、Inter字体等通用AI落地页模板；
2. 使用不对称分栏布局，大面积留白，商务沉稳配色；
3. 先输出完整品牌设计规范（主辅色、字体层级、间距标准），确认无误后再编写TailwindCSS代码；
4. 动效克制自然，使用GSAP标准化滚动动画，无浮夸光效；
5. 全站统一视觉体系，各页面风格统一不割裂。

六、优势对比：普通 AI 生成 VS Taste Skill 赋能 Codex
表格
维度 原生 Codex 直接生成 加载 taste-skill 后生成
页面辨识度 高度同质化，一眼 AI 模板 专属视觉语言，无撞款风险
布局逻辑 固定对称网格、居中 Hero 自由不对称、错位分层排版
设计规范 字体、配色、圆角混乱无体系 统一品牌设计系统，层级清晰
动效表现 简陋 hover，无连贯滚动动画 标准化 GSAP 流畅交互、分层入场
品牌适配 千站一套视觉，无专属调性 可调节参数匹配企业风格（极简 / 高端 / 工业）
维护成本 代码结构零散，样式混乱 规范 CSS 命名，统一设计 Token，易迭代
七、适用人群与落地场景
前端开发者：用 Codex 快速产出官网，省去大量视觉微调工作；
独立设计师 / 外包团队：批量制作官网，每一套页面拥有独特视觉，提升交付质感；
SaaS 产品运营：搭建产品落地页、活动专题页，摆脱同质化营销页面；
AI 编程重度使用者：Cursor、Claude Code、Codex 通用，一套技能全工具适配。
八、总结
Taste Skill 的出现，解决了 AI 前端生成领域最核心的痛点 ——模板同质化。它不改变 Codex 的代码生成能力，而是给 AI 补上缺失的专业设计判断逻辑，通过数百条硬性规则 + 可调设计参数，让 AI 从 “复制训练集模板” 升级为 “自主推导专属设计方案”。
如果你长期用 Codex 搭建企业官网、落地页，想要产出有品牌辨识度、摆脱流水线廉价模板，直接拉取核心技能design-taste-frontend；追求更强差异化、重度使用 GPT/Codex，则选择gpt-taste强化版。
项目开源地址：https://github.com/Leonxlnx/taste-skill，MIT 协议免费商用，持续更新迭代 v2 稳定版本。