Taste Skill实测 – 一键提升 AI Agent 前端审美

今天发点适合做前端的东西。

说实话，现在不少 AI Agent 生成的前端页面，审美水平实在让人捏把汗。布局清一色居中、卡片堆叠、渐变滥用，留白和层级关系怎么看怎么别扭，动效没有节奏感，字体和间距也谈不上高级。结果就是做出来的网页透着一股廉价感——Codex 就是其中的典型代表。

前几天在 GitHub 上翻到一个叫

的项目，专门解决 AI Agent 审美拉胯的问题。项目仓库目前已经有 4 万多 Stars了。

01 项目简介

Taste Skill 是一套面向 AI Agent 的前端设计技能库，目标很明确：帮 AI 摆脱模板化、同质化、缺乏审美的路子。

。

目前项目包含多种技能模块，每个模块负责一个具体方向：

• design-taste-frontend
  ：默认技能。根据需求推断设计语言，通过布局变化度、动效强度、信息密度等几个维度控制输出。

• gpt-taste
  ：面向 GPT/Codex 的严格版本，对布局变化、GSAP 动效、反模板化要求更高。

• image-to-code
  ：适合先做网页参考图、再让 AI 还原成前端代码的场景。

• redesign-existing-projects
  ：用于改造已有项目。先审查现有 UI，再修复布局、间距、层级、视觉风格等问题。

• high-end-visual-design
  ：偏高端、克制、精致的视觉风格，强调柔和对比、留白、字体质感和自然动效。

• minimalist-ui
  ：类似 Notion、Linear 的现代极简产品界面，适合 SaaS、工具型产品、开发者后台。

• industrial-brutalist-ui
  ：工业风、粗粝感、瑞士字体、强对比和实验性布局，适合个性鲜明、锋芒锐利的视觉表达。

• full-output-enforcement
  ：约束 AI 不要只给半成品、占位符或省略代码，解决 Agent 输出不完整的问题。

• 图片生成相关技能
  ：包括

  imagegen-frontend-web
  、

  imagegen-frontend-mobile
  、

  brandkit
  ，用于生成网站视觉稿、移动端界面流、品牌视觉板等参考图，再交给 Codex、Cursor 或 Claude Code 实现。

安装方式很简洁，一条 CLI 命令搞定：

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

如果只想装某一个技能，也可以指定 skill 名称：

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

更轻量的用法同样支持：直接复制任意 SKILL.md 放到项目里，或者粘贴到 ChatGPT / Codex 对话里直接用。

02 项目实测

Codex 实测 1

咱们分别用无 Skill 和有 Skill 两种方式生成同一个网页，比一比效果。

提示词：

帮我从零实现一个AI Agent 产品官网首屏，不使用任何skill。

产品名：LoopPilot

产品定位：一个帮助团队自动规划、执行、复盘任务的 AI Agent 工作台。

目标用户：独立开发者、小团队、AI 产品经理。

页面气质：不要普通 SaaS 模板感，不要大面积蓝紫渐变，不要堆卡片。希望有高级、克制、清晰的信息层级，同时带一点未来感和工具感。

请完成以下内容：

1. 设计一个完整首屏

– 包含产品名、主标题、副标题、主要 CTA、次要 CTA

– 展示 3 个核心能力：自动拆解任务、持续执行、复盘优化

– 需要有一个产品界面预览区域，但不要像普通 dashboard 模板

– 首屏要有明显视觉记忆点

2. 设计风格要求

– 使用非模板化布局，避免所有内容居中堆叠

– 字体层级清晰，标题有冲击力但不能粗糙

– 色彩控制在 3-5 个主色以内

– 动效可以有，但要服务信息表达，不要炫技

– 页面需要适配移动端和桌面端

3. 代码要求

– 请直接输出完整可运行代码

– 不要使用占位符，不要省略任何关键代码

– 不要只给设计建议，要真正实现页面

– 如果使用组件，请确保所有组件都完整写出

– 如果需要样式，请完整写出 CSS / Tailwind class

4. 验收标准

– 页面第一眼不能像 AI 默认生成的 SaaS 模板

– 视觉层级清楚，CTA 明显

– 移动端 9:16 截图时也要成立

– 所有文字都不能溢出或重叠

– 最终效果要像一个真实产品准备发布的首屏

请先简要说明你的设计方向，然后直接给出完整实现。

桌面端效果：

移动端效果：

没有 Skill 的版本确实没有落入“标题居中 + 三张卡片 + 蓝紫渐变”的老套路。但产品感偏弱——右边的工作台看起来更像装饰图，用户被大标题和图形吸引后，很难立刻理清产品到底怎么帮团队工作、怎么形成闭环。移动端勉强能看，但标题断行有点生硬。

提示词：

请使用 Taste Skill 中的 design-taste-frontend 和 full-output-enforcement，帮我从零实现一个AI Agent 产品官网首屏。

产品名：LoopPilot

产品定位：一个帮助团队自动规划、执行、复盘任务的 AI Agent 工作台。

目标用户：独立开发者、小团队、AI 产品经理。

页面气质：不要普通 SaaS 模板感，不要大面积蓝紫渐变，不要堆卡片。希望有高级、克制、清晰的信息层级，同时带一点未来感和工具感。

请完成以下内容：

1. 设计一个完整首屏

– 包含产品名、主标题、副标题、主要 CTA、次要 CTA

– 展示 3 个核心能力：自动拆解任务、持续执行、复盘优化

– 需要有一个产品界面预览区域，但不要像普通 dashboard 模板

– 首屏要有明显视觉记忆点

2. 设计风格要求

– 使用非模板化布局，避免所有内容居中堆叠

– 字体层级清晰，标题有冲击力但不能粗糙

– 色彩控制在 3-5 个主色以内

– 动效可以有，但要服务信息表达，不要炫技

– 页面需要适配移动端和桌面端

3. 代码要求

– 请直接输出完整可运行代码

– 不要使用占位符，不要省略任何关键代码

– 不要只给设计建议，要真正实现页面

– 如果使用组件，请确保所有组件都完整写出

– 如果需要样式，请完整写出 CSS / Tailwind class

4. 验收标准

– 页面第一眼不能像 AI 默认生成的 SaaS 模板

– 视觉层级清楚，CTA 明显

– 移动端 9:16 截图时也要成立

– 所有文字都不能溢出或重叠

– 最终效果要像一个真实产品准备发布的首屏

桌面端效果：

移动端效果：

用了 Taste Skill 之后，顶部多了导航栏，整体看着舒服不少——毕竟现在哪个网站顶部还没个导航栏呢。右侧产品预览不再是抽象图形，用户可以通过步骤性文字理解产品的运作路径。移动端的表现也更成熟，能力点变成了独立信息块，阅读顺序自然很多。

Codex 实测 2

当然，已经有现成的项目也可以用 Taste Skill 来重构一次前端。

提示词：

请使用 Taste Skill 中的 redesign-existing-projects、minimalist-ui、high-end-visual-design 和 full-output-enforcement，帮我重构一个已有项目的官网首页。

项目位置：

D:360MoveDataUserswinDesktop公众号wechat-topic-dashboard-ugly-homepage

背景：

这是一个「公众号选题管理平台」的官网首页，产品名叫 Content Desk。它面向公众号、小红书、视频号、知乎等内容团队，帮助他们管理选题、分配负责人、跟踪状态、查看 AI 推荐和内容表现。

现在的问题：

当前页面功能和信息都有，但视觉非常模板化：

– 蓝紫粉渐变过重

– 大标题浮夸

– 页面过度居中

– 卡片堆叠严重

– CTA 重复

– 产品截图像装饰，不像真实产品

– 信息层级松散

– 移动端阅读路径很长

– 整体像普通 AI 生成的 SaaS 落地页

重构目标：

在不改变产品主题和核心信息的前提下，把它重构成一个更专业、更克制、更可信的内容运营工具官网首页。最终效果要像一个真实 SaaS 产品准备上线的官网，而不是模板页。

请完成以下内容：

1. 首屏重构

– 保留产品名 Content Desk

– 保留产品定位：给内容团队使用的公众号选题管理平台

– 需要有清晰主标题、副标题、主 CTA、次 CTA

– 不要使用“效率提升 300%”这种浮夸表达

– 首屏必须展示一个可信的产品界面预览，不要做成普通装饰图

– 视觉上要有记忆点，但不能花哨

2. 产品能力展示

需要展示以下能力：

– AI 推荐选题

– 多平台选题管理

– 状态与负责人跟踪

– 截止时间与优先级管理

– 内容风险提醒

– 发布表现复盘

展示方式不要简单堆 6 张大卡片，要根据内容运营场景重新组织信息层级。

3. 工作流程展示

展示一个内容团队从选题到复盘的流程：

– 收集热点

– 评估选题

– 分配写作

– 审核发布

– 数据复盘

流程要和产品界面呼应，不要只是普通 1、2、3 步卡片。

4. 页面风格要求

– 偏 Notion / Linear / 飞书多维表格 / 现代 B2B SaaS 工具感

– 克制、清爽、可信

– 信息密度适中，不要太空

– 不要大面积蓝紫渐变

– 不要圆角大卡片堆叠

– 不要浮夸阴影

– 不要营销腔

– 要有清晰的版面节奏、留白、字体层级和状态色

– 桌面端优先，同时移动端也要自然成立

5. 代码要求

– 直接修改项目中的现有文件

– 输出完整可运行版本

– 不要省略代码

– 不要使用 lorem ipsum

– 不要只给设计建议，要真正实现页面

– 保证桌面端和移动端文本不溢出、不重叠

– 保留纯静态 HTML / CSS 实现即可，不需要引入复杂框架

6. 验收标准

– 第一眼不能像 AI 默认生成的 SaaS 模板

– 产品界面预览要可信，能看出这是“内容选题管理工具”

– CTA 清楚但不吵

– 能力和流程不是堆卡片，而是围绕真实内容运营场景组织

– 移动端阅读顺序自然

– 重构前后视觉差异要明显

– 最终页面适合作为 Taste Skill 重构已有项目的实测案例展示

请先简要指出原页面的主要问题，再说明你的重构策略，然后直接修改项目文件并给出完整实现。

原桌面端效果：

原移动端效果：

原来的页面，蓝紫粉渐变和重阴影太抢眼，首屏过度居中，功能和流程都是平均卡片堆叠。中间的产品截图偏装饰，里面的数据和界面结构看着假，更像是为了填满首屏而放上去的 mockup。移动端的问题更突出：导航、标题、按钮、截图、功能卡片一路往下堆，阅读路径很长，视觉噪声也重。

重构后的桌面端效果：

重构后的移动端效果：

重构后的布局看着顺眼多了——原来的颜色简直辣眼睛。桌面端左侧是产品定位和核心数据，右侧是一个可信的选题工作台预览。用户能一眼看懂：这是用来管理选题、状态、AI 建议、风险和发布表现的工具。移动端的信息顺序变成了品牌导航、产品定位、主标题、CTA、核心数据，用户不用先穿过一堆渐变和营销话术，能更快理解产品是什么。

03 挖一挖

AI Agent 正在成为开发流程的一部分。Stack Overflow 2025 开发者调查显示，84% 的开发者已经使用或计划使用 AI 工具，其中 51% 的专业开发者每天都在用。

同时，AI Code Tools 市场预计将从 2023 年的 43 亿美元增长到 2028 年的 126 亿美元。

但 AI 会写代码，不代表它会做产品。尤其是前端页面，很多 Agent 生成的结果仍然停留在 Demo 阶段。Taste Skill 把前端设计师的经验和审美，封装成技能规则，让 AI Agent 能生成更接近真实产品交付标准的界面。

它解决了 AI 前端开发里最常见的几类痛点：页面模板化、卡片堆叠渐变滥用、移动端适配粗糙、产品预览缺乏可信度、后台信息层级混乱、已有项目重构成本高。换句话说，AI 产品官网首屏、SaaS 落地页、后台管理系统、内容运营工作台、Agent 产品 Demo、客户项目原型、已有项目 UI 重构——这些场景都能用 Taste Skill 来做。

对于没有完整设计团队的小团队来说，这一套东西能明显降低从想法到 MVP、从 Demo 到可展示产品的成本。Taste Skill 的价值，正是把前端审美和产品判断，变成了一种可以复用的 AI 生产力。