[Github] taste-skill – 让 AI 前端设计摆脱模板感的开源 Skill

Taste Skill（taste-skill）是 Leonxlnx 开源的前端设计 Agent Skill，面向已经在用 AI 编程工具做网页或应用界面的人。它把设计方向选择、图片素材和浏览器检查连成一套流程，让 Agent 在动手前作出具体的视觉决定。当前主技能的安装名是 design-taste-frontend；如果你的页面功能都能用，却总像同一张落地页换了标题，这正是它想解决的问题。

让页面长出自己的样子

给 AI 一句“做得高级一点”，它很容易交回居中大标题、三张功能卡片和渐变背景。Taste Skill 把这个模糊要求拆成了可以追问的设计决定：这个项目有什么独有材料？哪种版式能承载它？照片、字体和颜色为什么放在这里？

它的方向库来自项目方对 247 个精选网站的研究。负责选方向的 draw.mjs 会从 20 个研究方向中给出 3 个候选，再由 Agent 根据当前项目选择，并继续获得字体、配色、首屏和章节构图。选择时还要判断品牌约束、素材是否存在，以及版式能否装下真实内容。

官方咖啡店示例很能说明它想达到的效果。首屏把店面本身画成主视觉，招牌、门窗、烘焙设备和营业信息共同构成页面；右侧导航也成了画面的一部分。这里的设计记忆点来自咖啡店的门面，而不是给通用模板加几颗咖啡豆图标。

这也是它最有意思的取舍：去掉模板痕迹之后，还得补上属于当前主题的内容。只删卡片、删装饰、把字排得更稀，可能只会得到一个空页面。

图片与检查进入流程

先找能解释内容的图

Taste Skill 会优先利用项目自己的图片；有图像生成工具时可以生成，也可以通过 assets.mjs 从 Wikimedia Commons、Openverse、芝加哥艺术博物馆和大都会艺术博物馆等来源找图。素材脚本不要求 API Key，查找图片需要联网，并会记录来源与署名。

同一咖啡店案例的烘焙段落没有继续重复首屏。它把生豆、浅烘、深烘和冷却画面排成递进关系，让图片参与讲解。对餐厅、活动、作品集这类题材，找到与主题相关的材料，往往比多加一种动效更能改变页面。

这些素材来自开放馆藏，也各有许可。公共领域、CC0、CC BY 和 CC BY-SA 的要求不同；保留自动生成的署名，仍需核对具体文件的条件。找到某个城市或行业的图片，也不能把它标成客户自己的门店、产品或团队。

代码过关后还要看页面

lint.mjs 检查源码中的一批禁用模式与套话；inspect.mjs 则在真实浏览器中，以 1440、768 和 390 像素三种宽度检查页面，并把截图存到 .taste-skill/inspect/。它检查文字溢出、字体实际加载、颜色、对比度、间距、边界与空白区域等问题。有构建步骤的项目，最终检查对象应是生产构建。

随后 Agent 还要打开截图，按视觉评审规则找出最值得改的三个问题，修改后再看，最多进行三轮。自动检查没有失败项，只说明这组规则通过；画面是否有重点、是否适合当前品牌，还要看实际截图。这些截图和修改记录，是检查交付时能回看的依据。

安装后怎样开始

按当前官方文档，脚本需要 Node.js 22 或更新版本，以及已安装的 Chrome、Edge 或 Chromium。你还需要一个能够读取并执行 Skill 的编程 Agent。技能的设计规则不绑定框架，可用于 React、Vue、Svelte 或普通 HTML 项目。

在准备使用技能的前端项目目录打开终端，运行 README 给出的安装命令：

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

这条命令通过 npx skills 安装指定技能，按安装器提示选择目标编程工具。确认工具能发现 design-taste-frontend 后，再把页面任务交给它。现有用户也可以重新运行这条命令更新；安装名没有随 v2 改掉。

下面是一份可改成自己项目事实的需求示例，重点是交代具体材料和动作：

使用 design-taste-frontend 为独立咖啡店制作单页网站。
使用项目现有的 React 工程，保留店名和 Logo。
主要任务是让附近访客找到地址、营业时间并查看菜单。
先读取现有图片目录和菜单内容，再选择设计方向。
缺少的照片可从开放来源寻找，并保留署名；不要虚构客户评价。
完成后检查生产构建，并提供桌面和手机截图。

正常执行时，设计选择和检查记录会进入项目根目录的 .taste-skill/。你可以沿着“选了什么方向 → 用了哪些素材 → 三种宽度的截图 → 哪些问题已修正”检查交付，再亲自点一次菜单和地址入口。页面截图漂亮、按钮却没有真实去处，仍然没有完成这份需求。

应用界面与旧技能

从 v2.1 开始，仪表盘、后台、设置页和收件箱等应用界面有独立流程，使用 draw.mjs --app 选择样式，并通过 inspect.mjs --app 检查。这里允许工作界面需要的重复面板和较小标签，更关注数字对齐、表格、图表以及手机上的导航收纳。不能把宣传页的表达方式原样搬进后台。

查旧教程时还会遇到一个变化：当前主仓库只维护一个主技能，已经不适合再照着旧清单“一次安装十几套”。这些名字仍可能有用，但入口换了：

• high-end-visual-design、minimalist-ui、industrial-brutalist-ui、gpt-taste 等旧技能迁到 Leonxlnx/taste-skill-classics。
• imagegen-frontend-web、imagegen-frontend-mobile、brandkit 和 image-to-code 迁到 Leonxlnx/imagegen-skills。
• redesign-existing-projects 的流程并入当前 design-taste-frontend，改造已有页面时先做浏览器审查。

旧版文章里出现的“变化度、动效、密度三旋钮”，也不宜当作现行主技能的完整说明。现行流程围绕方向库、主题材料、浏览器检查和截图迭代展开。

要投入多少，适合何时用

项目方在 README 中估计，一次完整构建大约需要 30～45 分钟、数十万 Token。这是作者给出的量级，不是本文实测，也不是每个模型和任务都能复现的固定开销。脚本本身无需 API Key，所用编程 Agent 的模型用量、图片生成和部署费用仍按各自服务计算。

因此，它更适合愿意为落地页、品牌站或作品集投入一轮设计时间的人。它有明确的审美规则和较强的动效要求；如果只想改一个按钮的颜色或修一处间距，整套流程可能太重。已经有稳定设计系统、主要想做界面评审和局部打磨，也可以看看本站介绍的 Impeccable 前端设计与审查 Skill。

截至 2026 年 10 月 27 日核验，最新公开 Release 为 v2.1.5，于北京时间 10 月 25 日发布，包含截图命名、字体加载、键盘操作与检查器等修正。项目采用 MIT 许可证；重分发相关代码或文档时须保留版权和许可声明，示例图片中的第三方素材另按各自许可处理。本文根据官方 README、技能文件和示例整理，未安装或复现整套生成流程。

项目资料

• GitHub：Leonxlnx/taste-skill
• 安装、现行流程和技能迁移：README
• 版本记录：Releases
• 官网：https://tasteskill.dev（技能数量与迁移信息尚未和仓库同步，安装按当前 README）