产品页总像 AI 模板？61 万人装的 Skill 把设计决定提前

你把一句「做个产品介绍页」丢给 Coding Agent，它十分钟后多半会还你一个能跑的页面：居中大标题、渐变背景、三张圆角功能卡、几句“重新定义效率”的文案。

不难看。也确实没什么可挑的。

问题是，换成另一个产品，这套骨架大概率还能原样用。页面看起来像是被做出来的，不像是为谁设计过。

最近持续走高的 design-taste-frontend，专门拦在这一步前面。它在 skills.sh 目前约有 61 万次安装；它所属的 Taste Skill 官方仓库 也已经接近 9.7 万 Star。但我觉得它最值钱的地方不在于多给 AI 一份审美禁令，而是强迫 Agent 在敲第一行 CSS 前，先回答一个很土、也很管用的问题：

这是谁的页面？为什么只能长成这个样子？

这篇不把它说成“装上就能做高级网页”的魔法包。官方示例能证明它有产物，不能替你证明自己的项目一定会变好；本文也没有对同一 brief 做本机 Before／After。能带走的是它把网页交付拆成的一条线：先立论，后选方向，最后看截图。

它先要的不是配色，是页面的理由

很多工具的开工方式是“给我产品名、风格、功能列表”。design-taste-frontend 的第一步更像设计师做现场笔记：列出 8 到 12 个只属于这个项目的东西。

产品名字为什么这样叫，用户会在哪条街、哪个场景里用它，页面里有什么真的存在的照片或界面，价格、日期、材料、限制条件是什么。这些听上去很不“AI”，恰好是重点。

假设你要做一个面向独立开发者的部署工具页面。“云原生、现代、极简”不算材料，别的工具也能拿去用。“一次部署要经过三次人工确认”“团队每周只发布两次”“用户最怕半夜回滚找不到日志”才算。它们能决定首屏该放什么、文案该怎么写、哪一段值得做成交互，而不是只决定按钮用蓝色还是紫色。

接着，官方流程要求给每一段先写「主张＋证据」。没有主张的 section 就删掉。

这个动作会把最常见的网页流水线卡住：hero、客户 logo、三个 feature card、报价、CTA。它们并不天然有错，只是经常在没有内容理由时自动出现。一个页面能少掉几个无话可说的区块，通常比再加一个会动的光斑有用得多。

官方把这件事说得很直白：好的页面概念应该来自项目本身，而不是来自“这是一个 SaaS”这种品类印象。把最近的竞品名字代进你的设计句子，若仍然成立，说明这个点还不够属于你。

上图为 Taste Skill 官方 README 的成品示例，不是本账号或本文的实测。

接下来才是“选一个方向”，不是让模型随便发挥

这套 Skill 研究了 247 个精选网站。它不让模型凭概率选一个最安全的“高级感”，而是用 draw.mjs 从 20 个研究过的方向里先发三张方向单：构图、字体、色彩、hero、段落组合都会一起给出来。

你不是在三套漂亮皮肤里点一个最顺眼的，而是在问：哪一套真的能装下刚才那些项目事实？

比如一个以现场预约为主的工作室，页面的独有物可能是它的门牌、材料和一天的节奏；一个 API 产品，独有物可能是一段可运行的请求、真实响应和用户从失败到修好的路径。方向选定后，后面的 hero、图像和段落布局都要沿着同一个想法走，不能首屏像海报、往下又退回千篇一律的卡片墙。

官方 README 还强调了一个我很认同的点：删装饰只是前半段，剩下的空白得用真实内容、真实图片和更有分量的排版填起来。

不少“去 AI 味”教程容易把页面做成另一种薄：不再有渐变和卡片，但也没有信息。这个 Skill 的要求反而更苛刻——每一段都得把该交代的内容交代完整，不能把“克制”当作少写一点。

你可以先用官方的单 Skill 安装命令，把它装到自己的 Agent 环境里：

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

它需要 Node 22+ 与 Chrome、Edge 或 Chromium，官方说明是不需要 API Key。对于有固定品牌色、字体和组件库的项目，别让它把已有设计系统推翻；更合适的用法是把品牌约束交给它，再让它帮你决定页面应该怎样组织，而不是替你重发明品牌。

两张示例来自同一官方 README，但不是同一任务的前后对照；它们只用来说明官方交付的可见产物。

真正该抄的，是最后那轮 390px 截图

设计方向这件事很容易变成一段好听的开工宣言。它有没有落到页面上，还是得看浏览器。

Skill 的检查脚本会在 1440、768、390px 三种宽度打开页面，检查标题是不是挤成三四行、颜色和对比度有没有跑掉、文字是否溢出、字体是否真的加载、阴影和渐变有没有变成习惯性装饰，然后把截图存下来。

通过检查不等于页面已经好看。官方后面还有一道更笨但更有效的流程：打开截图，按评审表挑出最明显的三个问题，改完再看，最多三轮。

这正好能挪到日常交付里。你不一定需要完整跑它的所有脚本，至少可以在提交产品页前固定留下三张图：

1. 桌面首屏：用户第一眼知道这是干什么的吗？
2. 中段内容：每一块是不是都在说一件真的不同的事，还是换了图标的同一张卡？
3. 390px 手机图：标题有没有被挤碎，图片里的关键信息能不能读，主要动作还在拇指够得着的位置吗？

这是一个很小的验收动作，却能把“我觉得这里有点怪”变成团队能一起看的证据。Coding Agent 最怕的不是被要求有审美，最怕的是审美只停留在一句“再高级一点”。截图摆出来，问题才有坐标。

哪些时候，别把它当万能前端药

官方给的边界很清楚：它主要服务公开产品页、营销页、作品集、活动页和一页式介绍页，不是 dashboard 或多步骤应用界面的默认方案。

如果你在做的是后台表格、审批流、密集表单或一个已有严密设计系统的业务应用，首先要解决的是信息架构、状态、错误处理和组件一致性。硬把“每一段都要像海报”搬进去，用户只会更累。

它也不适合素材还没准备好、却想靠一张假产品图撑起整页的情况。官方流程反复强调图像要诚实：先用项目自己的照片、界面或可核验素材；没有时宁可用与主题相关的绘制或留白，也别拿一张无关的科技人像冒充产品现场。

所以我会把它当成一个前台网页的“开工刹车”。不是给 Agent 增加更多形容词，而是在它最容易凭惯性生成的地方，逼它先做决定，再把决定拿到真实屏幕上复查。

下次你让 Agent 做产品页时，可以先不问“做得高级一点吗”。试着补一句：这个产品有什么是竞争对手绝对没有的？再把答案放到第一屏。

页面也许不会立刻拿奖，但至少不再像一套谁都能穿的工服。

你最近一次觉得“这页面怎么又长这样”的时刻，问题出在内容、方向，还是最后根本没看手机截图？

— 小岛 AI
记录一线实战、踩坑与成长