🔍 它到底解决什么问题

用 AI 写前端的人大概率遇到过这种情况：让模型做一个 SaaS 落地页，出来的东西深色背景、紫蓝渐变、三张并排的功能卡片、居中大标题——代码没毛病，但看起来像从同一个模板里倒出来的。这种“能用但一眼假”的界面，在英文技术圈里有个专门的词叫 slop。

design-taste-frontend 做的事情很直接：它不给你组件库，也不替你选框架，而是把一套前端审美和验收规则写进一个叫 SKILL.md 的文件里，让 AI 编码工具在动手写代码之前先读规则、先做判断。你可以把它理解为给 Codex、Claude Code、Cursor 这类工具装了一个“设计审稿人”。

它的核心思路是：AI 生成页面之所以“廉价感”重，问题出在值层——颜色、字号、间距都是模型现编的。这个插件自带 30 套真实品牌的设计系统素材，每套拆成 DESIGN.md、tokens.json、variables.css、theme.css 四个文件，生成时值层 1:1 兑现，再过四道机器 QA 门，不靠感觉，靠对照。

📦 安装方式：三种任选

方式一：npx 一键安装（推荐）

如果你在用 Node.js 环境，这是最省事的方式。在项目根目录执行：

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

命令会自动把 skill 文件写入你的项目，AI 工具下次启动时即可识别。

方式二：Git Clone 手动安装

如果你更倾向于把 skill 放在跨工具的通用目录里，可以直接克隆：

git clone --depth 1 https://github.com/changemaner/design-taste-frontend.git ~/.agents/skills/design-taste-frontend

~/.agents/skills/ 是一个被多个 AI 工具共同识别的目录，不绑定任何一个 Agent。如果你的工具只认自家目录（比如 ~/.claude/skills/），把克隆目标改一下就行。

方式三：交给 AI 自己装

把下面这段直接发给你的 AI 助手，它会自己完成克隆和目录配置：

帮我把 https://github.com/changemaner/design-taste-frontend 装成 skill。浅克隆到 ~/.agents/skills/design-taste-frontend。装完告诉我装到了哪里。之后的前端设计任务按这个 skill 的 SKILL.md 走。

如果你用的是 Claude Code，也可以先跑一次 claude mcp add --transport http qumge https://qumge.com/mcp，之后直接在对话里说“装一下 design-taste-frontend 这个技能”，它会在聊天窗口内完成安装，不用离开对话。

🛠️ 装好之后怎么用

安装完成后不需要额外启动什么，AI 工具会在处理前端任务时自动读取 SKILL.md。但它的工作方式和“直接让 AI 写代码”不太一样，理解这个流程能帮你拿到更好的结果。

先读 brief，再调旋钮

design-taste-frontend 要求 AI 在写任何代码之前，先输出一行 Design Read，把页面类型、受众、风格倾向和约束说清楚。比如：“Reading this as: B2B SaaS landing for technical buyers, with a Linear-style language.”

接着 AI 会从 brief 中推断三个 1 到 10 的旋钮值：

  • DESIGN_VARIANCE：控制布局变化程度。低值偏规整对称，高值允许不对称和更强的视觉表达。
  • MOTION_INTENSITY：控制动效强度。低值只做 hover 和淡入，高值才考虑滚动叙事和复杂编排。
  • VISUAL_DENSITY：控制信息密度。低值留白多，高值接近 dashboard 的信息量。

这三个旋钮的价值在于把“做得高级一点”这种模糊指令，拆成可执行的数值约束。企业级数据分析产品可以设 5 / 3 / 6，设计工作室首页可以设 8 / 7 / 3，AI 才有理由用更大的字体和更强的滚动节奏。

素材模式与自由发挥模式

当你的 brief 能匹配到 30 套内置素材库中的一套时，插件会走素材模式：从 showcase/selection-index.json 筛选，到 showcase/gallery/ 看预览图，选定后读取该套的 DESIGN.md，然后生成。值层 1:1 兑现，四道 QA 门依次把关。

如果 brief 在素材库之外，插件会回退到自由发挥模式：先填 freeplay-declaration.md 声明自创风格方向，再按声明生成，QA 门 2 和 3 照常运行。

💡 几个让效果更好的使用技巧

  • 别一上来就让 AI “做个高级官网”。这种指令太虚，模型很容易滑回紫蓝渐变加三张卡片的老路。分三段走更稳：先让 AI 读项目和业务背景 → 再让它声明设计判断 → 确认后再写代码。
  • 用具体参考代替形容词。把竞品 URL、你喜欢的页面截图、品牌名放进 brief 里，插件的 brief inference 模块会从这些信号中提取风格方向，比说“现代简约”有用得多。
  • 配合浏览器自动化工具做验收。插件本身有 QA 门检查设计约束，但如果你想让 AI 自己“看到”页面效果再做调整，可以配合 Cursor 的 browser MCP 或 Claude 的 browser automation 能力，让 Agent 截图后自行判断。
  • 重设计场景先做审计。如果你拿它改一个已有的页面，插件会走 audit-first 流程——先检查现有设计资产（logo、色彩、字体、图片），再决定是保留还是推翻。不要跳过这一步，否则容易生成一个“好看但跟品牌没关系”的页面。

🤖 适合哪些 AI 工具

design-taste-frontend 本身是一组纯文本的 skill 文件，不绑定任何特定平台。只要你的 AI 编码工具支持读取项目目录中的 skill 文件或 MCP 协议，就能用。

目前经过验证的兼容工具包括：Claude Code、Cursor、GitHub Copilot、Windsurf、Cline、Aider，以及 Codex 等基于 CLI 的 Agent 环境。安装时选择你实际使用的工具即可，skill 会写入对应的目录或被工具自动识别。

需要注意的是，这个插件不是为 dashboard、数据表格或多步骤产品 UI 设计的。它的自定位很明确：落地页、作品集、编辑类页面和页面重设计。拿它去做后台管理界面，效果不会比一个普通的前端 skill 更好。