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

• Codex 实测 1

分别在无 Skill 和有 Skill 两种情况下生成同一个网页，对比下效果。

先看无 Skill 的：

提示词：

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

产品名：LoopPilot

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

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

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

请完成以下内容：

1. 设计一个完整首屏

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

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

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

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

1. 设计风格要求

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

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

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

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

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

1. 代码要求

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

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

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

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

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

1. 验收标准

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

– 视觉层级清楚，CTA 明显

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

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

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

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

桌面端效果长这样：

移动端效果长这样：

无 Skill 这版倒是没掉进普通 SaaS 首屏“标题居中 + 三张卡片 + 蓝紫渐变”那个套路。

但产品感弱了些：右边工作台像装饰图，用户被大标题和图形吸引了眼球，到头来却理不顺这产品怎么帮团队干活、闭环在哪。

移动端凑合能看，就是标题断行有点生硬。

换成用 Taste Skill：

提示词：

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

产品名：LoopPilot

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

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

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

请完成以下内容：

1. 设计一个完整首屏

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

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

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

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

1. 设计风格要求

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

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

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

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

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

1. 代码要求

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

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

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

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

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

1. 验收标准

– 页面第一眼不能像 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:\360MoveData\Users\win\Desktop\公众号\wechat-topic-dashboard-ugly-homepage

背景：

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

现在的问题：

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

– 蓝紫粉渐变过重

– 大标题浮夸

– 页面过度居中

– 卡片堆叠严重

– CTA 重复

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

– 信息层级松散

– 移动端阅读路径很长

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

重构目标：

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

请完成以下内容：

1. 首屏重构

– 保留产品名 Content Desk

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

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

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

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

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

1. 产品能力展示

需要展示以下能力：

– AI 推荐选题

– 多平台选题管理

– 状态与负责人跟踪

– 截止时间与优先级管理

– 内容风险提醒

– 发布表现复盘

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

1. 工作流程展示

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

– 收集热点

– 评估选题

– 分配写作

– 审核发布

– 数据复盘

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

1. 页面风格要求

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

– 克制、清爽、可信

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

– 不要大面积蓝紫渐变

– 不要圆角大卡片堆叠

– 不要浮夸阴影

– 不要营销腔

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

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

1. 代码要求

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

– 输出完整可运行版本

– 不要省略代码

– 不要使用 lorem ipsum

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

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

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

1. 验收标准

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

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

– CTA 清楚但不吵

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

– 移动端阅读顺序自然

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

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

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

原来的桌面端效果：

原来的移动端效果：

原页面那蓝紫粉渐变加重阴影实在太抢眼，首屏过度居中，功能和流程清一色都是卡片堆叠。

中间的产品截图也偏装饰，里面的数据和界面结构比较假，更像为了填满首屏硬塞进去的 mockup。

移动端问题更明显：导航、标题、按钮、截图、功能卡片一路往下摞，阅读路径拉得很长，视觉噪音也重。

重构后的桌面端效果：

重构后的移动端效果：

重构后的布局顺眼了不少，再回头看原页面那个配色，简直晃眼睛。

桌面端左边是产品定位和核心数据，右边是一个像样的选题工作台预览，一眼就能看懂：这是管选题、状态、AI 建议、风险和发布表现的工具。

移动端的信息顺序改成了品牌导航、产品定位、主标题、CTA、核心数据，用户不用先趟过一堆渐变和营销话术，能更快明白产品是干嘛的。

眼下，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 到能拿出来展示的产品，成本肉眼可见地降了。

把前端审美和产品判断变成一种可复用的 AI 生产力，这就是 Taste Skill 的价值所在。

原文链接：GitHub 狂揽 4 万多 Star，让 AI 生成有品味的前端页面