今天发点适合做前端的东西。
说实话，现在有的 AI Agent 前端审美极差，布局过于居中、卡片堆叠、渐变滥用、留白和层级不自然、动效缺少节奏、字体和间距没有高级感，做出来的网页很廉价，其中的代表便是 Codex。
前几天终于在 GitHub 上发现一个叫 Taste Skill 的项目能解决AI Agent 审美差的问题，项目仓库目前已有约 4 万多 Stars。
01
项目简介
Taste Skill 是面向 AI Agent 的前端设计技能库，目标是帮助 AI 摆脱模板化、同质化、缺乏审美的前端。
把布局、排版、动效、间距、视觉密度、设计语言这些原本需要设计经验判断的东西，转化成可被 AI Agent 读取和执行的 SKILL.md 指令，来提升 AI 生成界面时的设计判断力。
Taste Skill 目前包含多种不同用途的技能模块，每个模块解决一个具体问题：
- design-taste-frontend：默认Skill，会根据需求推断设计语言，并通过几个关键维度控制输出，比如布局变化度、动效强度、信息密度等。
- 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 实现。
npx skills add https://github.com/Leonxlnx/taste-skill npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"02
项目实测
- Codex 实测 1
让我们无 Skill 和有 Skill 两种情况分别生成一个网页，对比一下效果。
无 Skill：
提示词：
帮我从零实现一个AI Agent 产品官网首屏，不使用任何skill。
产品名：LoopPilot
产品定位：一个帮助团队自动规划、执行、复盘任务的 AI Agent 工作台。
目标用户：独立开发者、小团队、AI 产品经理。
页面气质：不要普通 SaaS 模板感，不要大面积蓝紫渐变，不要堆卡片。希望有高级、克制、清晰的信息层级，同时带一点未来感和工具感。
请完成以下内容：
- 设计一个完整首屏
– 包含产品名、主标题、副标题、主要 CTA、次要 CTA
– 展示 3 个核心能力：自动拆解任务、持续执行、复盘优化
– 需要有一个产品界面预览区域，但不要像普通 dashboard 模板
– 首屏要有明显视觉记忆点
- 设计风格要求
– 使用非模板化布局，避免所有内容居中堆叠
– 字体层级清晰，标题有冲击力但不能粗糙
– 色彩控制在 3-5 个主色以内
– 动效可以有，但要服务信息表达，不要炫技
– 页面需要适配移动端和桌面端
- 代码要求
– 请直接输出完整可运行代码
– 不要使用占位符，不要省略任何关键代码
– 不要只给设计建议，要真正实现页面
– 如果使用组件，请确保所有组件都完整写出
– 如果需要样式，请完整写出 CSS / Tailwind class
- 验收标准
– 页面第一眼不能像 AI 默认生成的 SaaS 模板
– 视觉层级清楚，CTA 明显
– 移动端 9:16 截图时也要成立
– 所有文字都不能溢出或重叠
– 最终效果要像一个真实产品准备发布的首屏
请先简要说明你的设计方向，然后直接给出完整实现。
桌面端效果：
移动端效果：
无 Skill 版本没有落入普通 SaaS 首屏的“标题居中 + 三张卡片 + 蓝紫渐变”套路。
但产品感弱一些，右边工作台像装饰图，用户被大标题和图形吸引，到头来却理不顺产品怎么帮团队工作、怎么形成闭环。
移动端还能看，但标题断行有点生硬。
用Taste Skill：
提示词：
请使用 Taste Skill 中的 design-taste-frontend 和 full-output-enforcement，帮我从零实现一个AI Agent 产品官网首屏。
产品名：LoopPilot
产品定位：一个帮助团队自动规划、执行、复盘任务的 AI Agent 工作台。
目标用户：独立开发者、小团队、AI 产品经理。
页面气质：不要普通 SaaS 模板感，不要大面积蓝紫渐变，不要堆卡片。希望有高级、克制、清晰的信息层级，同时带一点未来感和工具感。
请完成以下内容：
- 设计一个完整首屏
– 包含产品名、主标题、副标题、主要 CTA、次要 CTA
– 展示 3 个核心能力：自动拆解任务、持续执行、复盘优化
– 需要有一个产品界面预览区域，但不要像普通 dashboard 模板
– 首屏要有明显视觉记忆点
- 设计风格要求
– 使用非模板化布局，避免所有内容居中堆叠
– 字体层级清晰，标题有冲击力但不能粗糙
– 色彩控制在 3-5 个主色以内
– 动效可以有，但要服务信息表达，不要炫技
– 页面需要适配移动端和桌面端
- 代码要求
– 请直接输出完整可运行代码
– 不要使用占位符，不要省略任何关键代码
– 不要只给设计建议，要真正实现页面
– 如果使用组件，请确保所有组件都完整写出
– 如果需要样式，请完整写出 CSS / Tailwind class
- 验收标准
– 页面第一眼不能像 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 产品准备上线的官网，而不是模板页。
请完成以下内容：
- 首屏重构
– 保留产品名 Content Desk
– 保留产品定位：给内容团队使用的公众号选题管理平台
– 需要有清晰主标题、副标题、主 CTA、次 CTA
– 不要使用“效率提升 300%”这种浮夸表达
– 首屏必须展示一个可信的产品界面预览，不要做成普通装饰图
– 视觉上要有记忆点，但不能花哨
- 产品能力展示
需要展示以下能力：
– AI 推荐选题
– 多平台选题管理
– 状态与负责人跟踪
– 截止时间与优先级管理
– 内容风险提醒
– 发布表现复盘
展示方式不要简单堆 6 张大卡片，要根据内容运营场景重新组织信息层级。
- 工作流程展示
展示一个内容团队从选题到复盘的流程：
– 收集热点
– 评估选题
– 分配写作
– 审核发布
– 数据复盘
流程要和产品界面呼应，不要只是普通 1、2、3 步卡片。
- 页面风格要求
– 偏 Notion / Linear / 飞书多维表格 / 现代 B2B SaaS 工具感
– 克制、清爽、可信
– 信息密度适中，不要太空
– 不要大面积蓝紫渐变
– 不要圆角大卡片堆叠
– 不要浮夸阴影
– 不要营销腔
– 要有清晰的版面节奏、留白、字体层级和状态色
– 桌面端优先，同时移动端也要自然成立
- 代码要求
– 直接修改项目中的现有文件
– 输出完整可运行版本
– 不要省略代码
– 不要使用 lorem ipsum
– 不要只给设计建议，要真正实现页面
– 保证桌面端和移动端文本不溢出、不重叠
– 保留纯静态 HTML / CSS 实现即可，不需要引入复杂框架
- 验收标准
– 第一眼不能像 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 生产力。
原文链接：GitHub 狂揽 4 万多 Star，让 AI 生成有品味的前端页面
