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

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

02

项目实际测试

• Codex 初体验

为了直观地对比效果，我们将分别在不使用 Skill 和使用 Skill 的两种情况下，让 AI 生成一个网页，并对比其最终呈现效果。

未使用 Skill 的情况：

提示词：

请为一款名为 LoopPilot 的 AI Agent 产品，从零开始设计一个官网首屏，并且不使用任何 Skill。

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

目标用户：开发者、小型团队以及 AI 产品经理。

页面风格：避免普通 SaaS 模板的风格，不要大面积使用蓝紫渐变，也不要堆砌卡片。我希望页面能呈现出高级、克制、清晰的信息层级，同时带有一丝未来感和工具属性。

请完成以下内容：

1. 设计一个完整的首屏

– 包含产品名称、主标题、副标题、主要行动号召（CTA）和次要 CTA。

– 展示产品的三个核心能力：自动拆解任务、持续执行以及复盘优化。

– 需要包含一个产品界面预览区域，但请避免使用普通 Dashboard 模板的样式。

– 首屏应具备显著的视觉记忆点。

2. 设计风格要求

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

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

– 色彩应控制在 3-5 种主色以内。

– 可以加入动效，但必须服务于信息传达，避免过度炫技。

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

3. 代码要求

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

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

– 除了设计建议，请务必真正实现页面。

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

– 如果需要样式，请完整提供 CSS 或 Tailwind class。

4. 验收标准

– 页面在第一眼看上去，不应像 AI 默认生成的 SaaS 模板。

– 视觉层级要清晰，CTA 按钮要醒目。

– 移动端（9:16 比例截图）的显示效果也应成立。

– 所有文本都不能出现溢出或重叠的情况。

– 最终效果应如同一个真实产品准备发布的首屏。

请先简要阐述你的设计思路，然后直接提供完整的实现代码。

桌面端效果：

移动端效果：

在未使用 Skill 的情况下，AI 生成的页面确实避开了“标题居中 + 三张卡片 + 蓝紫渐变”这种常见的 SaaS 首屏套路。然而，它在产品感方面略显不足，右侧的工作台预览更像是一种装饰性的图形，用户虽然会被大标题和图形吸引，但却难以清晰理解产品如何为团队工作、如何形成一个完整的闭环。

移动端的表现尚可，但标题的断行处理显得有些生硬。

引入 Taste Skill 后的情况：

提示词：

请使用 Taste Skill 中的 design-taste-frontend 和 full-output-enforcement 技能，为 LoopPilot 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 二度尝试

当然，对于已有的项目，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%”这类夸张的表述。

– 首屏必须展示一个具有说服力的产品界面预览，而非普通的装饰性图片。

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

2. 产品能力展示

需要清晰地展示以下核心能力：

– AI 智能推荐选题。

– 支持多平台选题管理。

– 状态跟踪与负责人分配。

– 截止日期与优先级管理。

– 内容风险预警提示。

– 发布效果数据复盘。

展示方式不应是简单堆砌六张大卡片，而是要根据内容运营的实际场景重新组织信息层级。

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 代码工具的市场预计将从 2023 年的 43 亿美元飙升至 2028 年的 126 亿美元。

然而，AI 能够编写代码，并不意味着它就能做出优秀的产品。尤其是在前端页面开发领域，许多 Agent 生成的结果仍然停留在演示（Demo）阶段。

Taste Skill 的出现，将前端设计师的经验和审美能力封装成了技能规则，使得 AI Agent 能够生成更接近真实产品交付标准的前端界面。它有效解决了 AI 前端开发中普遍存在的几类痛点：页面模板化、卡片堆叠与渐变滥用、移动端适配粗糙、产品预览缺乏可信度、后台信息层级混乱以及已有项目重构成本高昂等问题。

通过 Taste Skill，我们可以更高效地完成 AI 产品官网首屏、SaaS 落地页、后台管理系统、内容运营工作台、Agent 产品 Demo、客户项目原型以及已有项目 UI 的重构等工作。对于缺乏完整设计团队的小型团队而言，它能够显著降低从创意到 MVP（最小可行产品）、从 Demo 到可展示产品的成本。

Taste Skill 的核心价值在于，它将前端的审美判断和产品设计能力，转化为一种可以被 AI 复用和放大的生产力。