1. 为什么你的 AI 编码 Agent 总在输出“AI 味”UI用 Cursor、Claude Code 或 Codex 生成过落地页的开发者大概率见过同一种画面居中 Hero、紫色渐变、三张等宽卡片、Inter 字体、页脚四列链接。语法挑不出毛病但视觉上信息密度均匀、节奏单调一眼就能看出是模型批量生产的。业界把这类廉价量产的界面叫 AI Slop也就是 AI 模板垃圾。问题不在模型不会写代码而在于它没有“审美约束”这一维度。模型倾向于输出训练分布里最高频、最安全的结构缺少对布局对称性、动效强度、信息密度的量化判断只能复用平均品味。taste-skill 把这个问题当作工程缺陷来治理它不是 UI 库而是一套可被 Agent 自动加载的 SKILL.md 设计约束技能集配合三个 1–10 的可调旋钮和发货前预检清单让模型输出从“语法正确”走向“看起来有品位”。这篇内容聚焦 taste-skill 在 AI 编码 Agent 中的落地方式围绕 SKILL.md 与 agent-skills 目录结构演示如何为前端框架项目配置可复用的审美技能文件。我会给出 SKILL.md 骨架、agent-skills 目录配置示例以及 Agent 生成组件前后的对比验证动作。适合已经在用 Cursor、Claude Code、Codex 做前端、但受够了模板化 UI 的开发者。2. TaoToken 前置给 Agent 一个稳定的模型入口在配置 taste-skill 之前先解决模型调用这一层。SKILL.md 只是约束文件真正写代码的还是背后的模型。如果你用 Claude Code 或 Codex 这类 CLI Agent需要一个稳定的 API 入口来承载长上下文和多次工具调用。TaoToken 在这里的角色是模型接入层。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 。它提供兼容主流协议的统一入口Claude Code、Codex、Cursor 这类工具都能通过配置 base_url 和 api_key 接进来。具体操作上你需要先拿到 API Key。进入控制台创建密钥https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。创建后复制密钥注意它只显示一次。拿到 Key 之后在 Agent 的配置里填入。以 Claude Code 为例设置环境变量export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的密钥如果你用的是支持 Anthropic 协议的 CLI接入文档里有更细的字段说明https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。配置完成后可以先在模型对话里验证一下连通性https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 确认模型能正常响应再往下做技能配置。这一步的意义在于taste-skill 会让 Agent 做更多推理简报推断、预检清单token 消耗比普通生成高。一个稳定的入口能避免中途断流导致 SKILL.md 加载到一半失败。3. 可复制配置SKILL.md 骨架与 agent-skills 目录taste-skill 基于 Vercel 社区的 agent-skills 标准。核心机制是Agent 启动时扫描项目里的 skills 目录自动加载每个子文件夹下的 SKILL.md把里面的规则注入推理链路。所以配置分两步——装技能、写项目级覆盖。3.1 安装技能到项目官方推荐用 npx skills add 一行起步。它会扫描仓库的 skills/ 文件夹把技能复制到你的项目里。# 安装全部技能 npx skills add https://github.com/Leonxlnx/taste-skill # 只安装核心默认技能推荐起步 npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend # 固定使用 v1 行为 npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend-v1注意--skill参数取的是 SKILL frontmatter 中name:字段定义的 install name不是文件夹名。装完后项目里会出现类似这样的结构your-project/ ├── agent-skills/ │ ├── design-taste-frontend/ │ │ └── SKILL.md │ ├── full-output-enforcement/ │ │ └── SKILL.md │ └── redesign-existing-projects/ │ └── SKILL.md ├── src/ └── package.json3.2 SKILL.md 骨架每个 SKILL.md 顶部是 frontmatter下面是规则正文。taste-skill v2 的骨架大致长这样你可以直接复制改--- name: design-taste-frontend description: Anti-slop frontend design constraints for AI coding agents version: 2.0.0 --- # Design Taste Frontend ## Design Read (Brief Inference) Before writing any code, read the signals: - Page type: SaaS / consumer / portfolio / editorial / redesign - Mood words from user: minimalist, Linear-style, brutalist, premium - Reference signals: links, screenshots, brand names - Audience and existing brand assets Output one line: Reading this as: ... ## Three Dials (1-10) DESIGN_VARIANCE: 6 MOTION_INTENSITY: 4 VISUAL_DENSITY: 5 ## Anti-Slop Rules - No default purple gradients - No em-dash in copy - No fake screenshots - No decorative numbering - No centered stacking without hierarchy - No uniform card grids without rhythm ## Design System Mapping Map to official systems (Material / Fluent / Carbon / shadcn) instead of hand-rolling CSS. ## Pre-Flight Check - [ ] Layout variance matches DESIGN_VARIANCE - [ ] Motion intensity matches MOTION_INTENSITY - [ ] Density matches VISUAL_DENSITY - [ ] No anti-patterns present - [ ] Full output, no placeholder comments三个旋钮是核心。DESIGN_VARIANCE 控制布局实验度低值居中规整高值非对称实验MOTION_INTENSITY 控制动效深度低值只有 hover 微动高值滚动磁吸和全局物理动效VISUAL_DENSITY 控制单屏信息密度低值空灵艺术馆高值密集仪表盘。把抽象审美变成可量化变量输出就可复现、可调参。3.3 项目级覆盖如果你不想改官方 SKILL.md可以在项目根目录放一个覆盖文件比如agent-skills/design-taste-frontend/SKILL.md只写你要改的字段。Agent 加载时会以项目内的为准。这样团队里每个人拉下来都是同一套约束审美标准进了版本管理。4. 验证请求Agent 生成组件前后的对比动作配置完不能直接信得验证。我试过的做法是同一个组件需求跑两次一次不带 SKILL.md一次带然后对比。4.1 准备测试 Prompt用一个典型的前端组件需求比如“做一个 SaaS 产品定价页三档套餐”。这个需求最容易触发模板化输出。Build a pricing page for a SaaS product with three tiers: Starter, Pro, Enterprise. Include a hero, feature comparison, and CTA. Use React Tailwind.4.2 不带技能跑一次在 Agent 里直接发这个 Prompt保存输出。你大概率会看到居中大标题、紫色渐变按钮、三张等宽卡片、每张卡片顶部一个图标、底部一个 CTA。这就是基线。4.3 带技能跑一次确保 agent-skills 目录在项目里Agent 启动时会自动加载。再发同一个 Prompt。这次观察几个点第一Agent 有没有先输出一行 “Design Read”。比如 “Reading this as: SaaS pricing page for developer audience, calm technical language, leaning toward Linear-style density.” 如果有说明简报推断生效了。第二布局有没有变化。DESIGN_VARIANCE 设成 6 以上时应该看到非对称布局比如左侧标题右侧卡片或者卡片高度错落而不是三张等宽。第三有没有触发反模式禁令。检查输出里有没有紫色渐变、em-dash、装饰性编号。如果这些消失了说明反模式规则在起作用。第四输出是否完整。配合 full-output-enforcement 技能时不应该出现// ... 剩余代码这类占位符。4.4 用脚本做自动化对比如果要做团队级验证可以写个简单脚本把两次输出存下来做 diff# 保存基线输出 cat baseline-output.tsx /tmp/baseline.tsx # 保存带技能输出 cat skill-output.tsx /tmp/skill.tsx # 对比关键特征 grep -c purple\|gradient /tmp/baseline.tsx grep -c purple\|gradient /tmp/skill.tsx紫色渐变出现次数从 N 降到 0就是最直观的成功信号。更细的可以统计卡片宽度方差、标题对齐方式、动效声明数量。5. 本篇常见错排查配置过程中容易踩几个坑我按遇到频率排一下。技能没被加载。最常见的原因是目录名不对。agent-skills 标准要求技能放在agent-skills/或工具约定的 skills 目录下且每个技能一个子文件夹里面必须有 SKILL.md。如果你把 SKILL.md 直接放在项目根目录Agent 扫不到。检查一下目录层级。install name 和文件夹名混淆。npx skills add --skill后面跟的是 frontmatter 里的name:字段不是文件夹名。比如文件夹叫taste-skill但 install name 是design-taste-frontend。写错了会提示找不到技能。v1 和 v2 行为不一致。v2 目前是 experimental正在向 v2.0.0 stable 迭代。如果你的工作流依赖 v1 的确切行为要显式固定design-taste-frontend-v1不要跟随默认升级。完整差异看仓库的 CHANGELOG.md。模型输出被截断。taste-skill 让 Agent 做更多推理输出也更长。如果模型中途停了叠加full-output-enforcement技能它会强制完整输出、禁止占位注释。同时检查 API 入口的上下文长度限制必要时换成长上下文模型。旋钮调了没效果。三个旋钮是 1–10 的整数写在 SKILL.md 顶部。如果你改了但 Agent 没反应可能是项目级覆盖文件没生效或者 Agent 缓存了旧的技能内容。重启 Agent 会话再试。图像生成类技能用不了。imagegen-frontend-web 这类技能只输出参考图不输出代码。它们需要配合 ChatGPT Images 或 Codex 图像模式使用。如果你在纯代码 Agent 里调用它不会生成图片。正确流程是先生成参考板再把图喂给编码代理实现。API 调用报错。如果 Agent 在加载技能后频繁报错先确认 API 入口配置正确。base_url 应该是 https://taotoken.net/api 不要带多余路径。密钥从控制台重新复制一次注意前后不要有空格。接入文档里有各工具的完整配置示例。6. 长期编码与 Agent 工作流的接入建议如果你只是偶尔生成几个组件装个 design-taste-frontend 就够了。但如果你长期用 AI 编码 Agent 做前端项目建议把 taste-skill 当成项目基础设施来配。具体做法是在项目仓库里固定 agent-skills 目录把选定的技能提交到版本控制。团队每个人拉下来Agent 加载的是同一套审美约束。新人入职不用口头传达设计规范SKILL.md 就是规范。技能选型上从零搭建用 design-taste-frontend 起步GPT/Codex 工作流切到 gpt-taste布局方差和 GSAP 约束更强改造已有项目用 redesign-existing-projects先审计再修复风格方向已定就叠加 soft-skill、minimalist-skill 或 brutalist-skill。输出被截断加 full-output-enforcement。对于需要长时间跑编码任务、频繁调用模型的场景Coding Plan 比按量计费更划算适合把 Agent 当成日常开发伙伴的团队https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。它覆盖长期编码和 Agent 工作流的模型调用需求配合 taste-skill 使用能把“功能能跑”稳定推进到“看起来像专业产品”。最后提醒一句taste-skill 的价值不在于让 AI 变设计师而在于把审美判断拆解成可被模型稳定执行的工程化约束。简报推断让模型先读懂需求三旋钮把抽象风格变成可量化分布反模式禁令收缩低质量解空间预检清单守住交付质量。把它作为项目级 SKILL.md 接入工作流是低成本提升前端输出质感的一步。 taste-skill 实战：用 SKILL.md 给 AI 编码 Agent 注入前端审美，告别模板化 UI
1. 为什么你的 AI 编码 Agent 总在输出“AI 味”UI用 Cursor、Claude Code 或 Codex 生成过落地页的开发者大概率见过同一种画面居中 Hero、紫色渐变、三张等宽卡片、Inter 字体、页脚四列链接。语法挑不出毛病但视觉上信息密度均匀、节奏单调一眼就能看出是模型批量生产的。业界把这类廉价量产的界面叫 AI Slop也就是 AI 模板垃圾。问题不在模型不会写代码而在于它没有“审美约束”这一维度。模型倾向于输出训练分布里最高频、最安全的结构缺少对布局对称性、动效强度、信息密度的量化判断只能复用平均品味。taste-skill 把这个问题当作工程缺陷来治理它不是 UI 库而是一套可被 Agent 自动加载的 SKILL.md 设计约束技能集配合三个 1–10 的可调旋钮和发货前预检清单让模型输出从“语法正确”走向“看起来有品位”。这篇内容聚焦 taste-skill 在 AI 编码 Agent 中的落地方式围绕 SKILL.md 与 agent-skills 目录结构演示如何为前端框架项目配置可复用的审美技能文件。我会给出 SKILL.md 骨架、agent-skills 目录配置示例以及 Agent 生成组件前后的对比验证动作。适合已经在用 Cursor、Claude Code、Codex 做前端、但受够了模板化 UI 的开发者。2. TaoToken 前置给 Agent 一个稳定的模型入口在配置 taste-skill 之前先解决模型调用这一层。SKILL.md 只是约束文件真正写代码的还是背后的模型。如果你用 Claude Code 或 Codex 这类 CLI Agent需要一个稳定的 API 入口来承载长上下文和多次工具调用。TaoToken 在这里的角色是模型接入层。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 。它提供兼容主流协议的统一入口Claude Code、Codex、Cursor 这类工具都能通过配置 base_url 和 api_key 接进来。具体操作上你需要先拿到 API Key。进入控制台创建密钥https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。创建后复制密钥注意它只显示一次。拿到 Key 之后在 Agent 的配置里填入。以 Claude Code 为例设置环境变量export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的密钥如果你用的是支持 Anthropic 协议的 CLI接入文档里有更细的字段说明https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。配置完成后可以先在模型对话里验证一下连通性https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 确认模型能正常响应再往下做技能配置。这一步的意义在于taste-skill 会让 Agent 做更多推理简报推断、预检清单token 消耗比普通生成高。一个稳定的入口能避免中途断流导致 SKILL.md 加载到一半失败。3. 可复制配置SKILL.md 骨架与 agent-skills 目录taste-skill 基于 Vercel 社区的 agent-skills 标准。核心机制是Agent 启动时扫描项目里的 skills 目录自动加载每个子文件夹下的 SKILL.md把里面的规则注入推理链路。所以配置分两步——装技能、写项目级覆盖。3.1 安装技能到项目官方推荐用 npx skills add 一行起步。它会扫描仓库的 skills/ 文件夹把技能复制到你的项目里。# 安装全部技能 npx skills add https://github.com/Leonxlnx/taste-skill # 只安装核心默认技能推荐起步 npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend # 固定使用 v1 行为 npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend-v1注意--skill参数取的是 SKILL frontmatter 中name:字段定义的 install name不是文件夹名。装完后项目里会出现类似这样的结构your-project/ ├── agent-skills/ │ ├── design-taste-frontend/ │ │ └── SKILL.md │ ├── full-output-enforcement/ │ │ └── SKILL.md │ └── redesign-existing-projects/ │ └── SKILL.md ├── src/ └── package.json3.2 SKILL.md 骨架每个 SKILL.md 顶部是 frontmatter下面是规则正文。taste-skill v2 的骨架大致长这样你可以直接复制改--- name: design-taste-frontend description: Anti-slop frontend design constraints for AI coding agents version: 2.0.0 --- # Design Taste Frontend ## Design Read (Brief Inference) Before writing any code, read the signals: - Page type: SaaS / consumer / portfolio / editorial / redesign - Mood words from user: minimalist, Linear-style, brutalist, premium - Reference signals: links, screenshots, brand names - Audience and existing brand assets Output one line: Reading this as: ... ## Three Dials (1-10) DESIGN_VARIANCE: 6 MOTION_INTENSITY: 4 VISUAL_DENSITY: 5 ## Anti-Slop Rules - No default purple gradients - No em-dash in copy - No fake screenshots - No decorative numbering - No centered stacking without hierarchy - No uniform card grids without rhythm ## Design System Mapping Map to official systems (Material / Fluent / Carbon / shadcn) instead of hand-rolling CSS. ## Pre-Flight Check - [ ] Layout variance matches DESIGN_VARIANCE - [ ] Motion intensity matches MOTION_INTENSITY - [ ] Density matches VISUAL_DENSITY - [ ] No anti-patterns present - [ ] Full output, no placeholder comments三个旋钮是核心。DESIGN_VARIANCE 控制布局实验度低值居中规整高值非对称实验MOTION_INTENSITY 控制动效深度低值只有 hover 微动高值滚动磁吸和全局物理动效VISUAL_DENSITY 控制单屏信息密度低值空灵艺术馆高值密集仪表盘。把抽象审美变成可量化变量输出就可复现、可调参。3.3 项目级覆盖如果你不想改官方 SKILL.md可以在项目根目录放一个覆盖文件比如agent-skills/design-taste-frontend/SKILL.md只写你要改的字段。Agent 加载时会以项目内的为准。这样团队里每个人拉下来都是同一套约束审美标准进了版本管理。4. 验证请求Agent 生成组件前后的对比动作配置完不能直接信得验证。我试过的做法是同一个组件需求跑两次一次不带 SKILL.md一次带然后对比。4.1 准备测试 Prompt用一个典型的前端组件需求比如“做一个 SaaS 产品定价页三档套餐”。这个需求最容易触发模板化输出。Build a pricing page for a SaaS product with three tiers: Starter, Pro, Enterprise. Include a hero, feature comparison, and CTA. Use React Tailwind.4.2 不带技能跑一次在 Agent 里直接发这个 Prompt保存输出。你大概率会看到居中大标题、紫色渐变按钮、三张等宽卡片、每张卡片顶部一个图标、底部一个 CTA。这就是基线。4.3 带技能跑一次确保 agent-skills 目录在项目里Agent 启动时会自动加载。再发同一个 Prompt。这次观察几个点第一Agent 有没有先输出一行 “Design Read”。比如 “Reading this as: SaaS pricing page for developer audience, calm technical language, leaning toward Linear-style density.” 如果有说明简报推断生效了。第二布局有没有变化。DESIGN_VARIANCE 设成 6 以上时应该看到非对称布局比如左侧标题右侧卡片或者卡片高度错落而不是三张等宽。第三有没有触发反模式禁令。检查输出里有没有紫色渐变、em-dash、装饰性编号。如果这些消失了说明反模式规则在起作用。第四输出是否完整。配合 full-output-enforcement 技能时不应该出现// ... 剩余代码这类占位符。4.4 用脚本做自动化对比如果要做团队级验证可以写个简单脚本把两次输出存下来做 diff# 保存基线输出 cat baseline-output.tsx /tmp/baseline.tsx # 保存带技能输出 cat skill-output.tsx /tmp/skill.tsx # 对比关键特征 grep -c purple\|gradient /tmp/baseline.tsx grep -c purple\|gradient /tmp/skill.tsx紫色渐变出现次数从 N 降到 0就是最直观的成功信号。更细的可以统计卡片宽度方差、标题对齐方式、动效声明数量。5. 本篇常见错排查配置过程中容易踩几个坑我按遇到频率排一下。技能没被加载。最常见的原因是目录名不对。agent-skills 标准要求技能放在agent-skills/或工具约定的 skills 目录下且每个技能一个子文件夹里面必须有 SKILL.md。如果你把 SKILL.md 直接放在项目根目录Agent 扫不到。检查一下目录层级。install name 和文件夹名混淆。npx skills add --skill后面跟的是 frontmatter 里的name:字段不是文件夹名。比如文件夹叫taste-skill但 install name 是design-taste-frontend。写错了会提示找不到技能。v1 和 v2 行为不一致。v2 目前是 experimental正在向 v2.0.0 stable 迭代。如果你的工作流依赖 v1 的确切行为要显式固定design-taste-frontend-v1不要跟随默认升级。完整差异看仓库的 CHANGELOG.md。模型输出被截断。taste-skill 让 Agent 做更多推理输出也更长。如果模型中途停了叠加full-output-enforcement技能它会强制完整输出、禁止占位注释。同时检查 API 入口的上下文长度限制必要时换成长上下文模型。旋钮调了没效果。三个旋钮是 1–10 的整数写在 SKILL.md 顶部。如果你改了但 Agent 没反应可能是项目级覆盖文件没生效或者 Agent 缓存了旧的技能内容。重启 Agent 会话再试。图像生成类技能用不了。imagegen-frontend-web 这类技能只输出参考图不输出代码。它们需要配合 ChatGPT Images 或 Codex 图像模式使用。如果你在纯代码 Agent 里调用它不会生成图片。正确流程是先生成参考板再把图喂给编码代理实现。API 调用报错。如果 Agent 在加载技能后频繁报错先确认 API 入口配置正确。base_url 应该是 https://taotoken.net/api 不要带多余路径。密钥从控制台重新复制一次注意前后不要有空格。接入文档里有各工具的完整配置示例。6. 长期编码与 Agent 工作流的接入建议如果你只是偶尔生成几个组件装个 design-taste-frontend 就够了。但如果你长期用 AI 编码 Agent 做前端项目建议把 taste-skill 当成项目基础设施来配。具体做法是在项目仓库里固定 agent-skills 目录把选定的技能提交到版本控制。团队每个人拉下来Agent 加载的是同一套审美约束。新人入职不用口头传达设计规范SKILL.md 就是规范。技能选型上从零搭建用 design-taste-frontend 起步GPT/Codex 工作流切到 gpt-taste布局方差和 GSAP 约束更强改造已有项目用 redesign-existing-projects先审计再修复风格方向已定就叠加 soft-skill、minimalist-skill 或 brutalist-skill。输出被截断加 full-output-enforcement。对于需要长时间跑编码任务、频繁调用模型的场景Coding Plan 比按量计费更划算适合把 Agent 当成日常开发伙伴的团队https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。它覆盖长期编码和 Agent 工作流的模型调用需求配合 taste-skill 使用能把“功能能跑”稳定推进到“看起来像专业产品”。最后提醒一句taste-skill 的价值不在于让 AI 变设计师而在于把审美判断拆解成可被模型稳定执行的工程化约束。简报推断让模型先读懂需求三旋钮把抽象风格变成可量化分布反模式禁令收缩低质量解空间预检清单守住交付质量。把它作为项目级 SKILL.md 接入工作流是低成本提升前端输出质感的一步。