Taste Skill 说明与使用

仓库地址：https://github.com/Leonxlnx/taste-skill
License：MIT
定位：Anti-Slop Frontend Framework for AI Agents —— 让 AI 生成的前端界面更有"设计品味"

一、Skill 简介

Taste Skill 是一组可移植的 Agent Skills 集合，用于改造 AI 生成前端 UI 时"千篇一律、模板感强"的问题。它不绑定任何框架（React / Vue / Svelte / 原生 HTML 均可），通过在 SKILL.md 中固化设计规则，让 Claude Code、Codex、Cursor 等 AI 编码工具生成的界面在布局、排版、动效、间距、层级上都具备一致且可控的视觉水准。

除了实现类 Skill，仓库还提供图像生成类 Skill，先产出参考图，再交由编码 Agent 落地代码，形成"图 → 分析 → 代码"的流水线。

核心能力

二、Skill 清单

实现类（输出代码）

图像生成类（输出参考图）

三、安装

方式 1：CLI 一键安装（推荐）

安装全部 Skill：

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

只安装指定 Skill：

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

方式 2：手动拷贝

将仓库中对应 Skill 目录下的 SKILL.md 复制到项目的 .claude/skills/<skill-name>/ 目录，或用户级 ~/.claude/skills/<skill-name>/ 目录。

.claude/skills/design-taste-frontend/SKILL.md

Claude Code 启动时会自动加载 .claude/skills/ 下的可用 Skill。

验证安装

在 Claude Code 中输入 / 查看命令列表，或直接输入 /design-taste-frontend，如出现补全即安装成功。

四、使用方式

4.1 基本流程

1. 选择 Skill：不确定时默认使用 design-taste-frontend。
2. 在对话中触发：直接引用 Skill 名，或以斜杠命令触发。
3. 给出需求描述：越具体越好（业务上下文、目标用户、参考对象）。
4. 调节风格旋钮（见 4.2）。
5. 迭代：不满意时明确指出需要改动的维度（如"降低视觉密度到 4"）。

4.2 三个风格旋钮（1–10 分制）

Taste Skill 支持在 Prompt 中显式设置三个参数：

示例 Prompt：

/design-taste-frontend
帮我做一个「配置发布审批」页面。
DESIGN_VARIANCE=6
MOTION_INTENSITY=3
VISUAL_DENSITY=7
技术栈：Vue 3 + Element Plus

4.3 图像先行工作流（image-to-code）

适合"知道大概想要什么感觉但说不清楚"的场景：

1. 触发 imagegen-frontend-web，生成 3-5 张参考图
2. 挑选最贴近意图的 1-2 张
3. 触发 image-to-code，附上图像，让它输出代码

Prompt 里明确写清流水线，例如：

follow the skill: generate images, then analyze, then code

4.4 改造现有页面（redesign-existing-projects）

针对当前配置中心已有的 Demo（如 docs/应用加密管理页面Demo.html、docs/权限自助申请页面Demo.html）：

/redesign-existing-projects
目标文件：docs/应用加密管理页面Demo.html
改造方向：提升视觉层级，减少表格视觉噪音，保留业务字段不变
DESIGN_VARIANCE=5  VISUAL_DENSITY=5

五、在本项目（配置中心）中的推荐用法

配置中心是研运一体平台的 Web 后台，业务表单、列表、审批弹窗较多，推荐组合：

约束（结合项目规范）：

• 生成代码前先阅读 CLAUDE.md 中的 UI 技术栈约束（如已选定 Vue3 / Element Plus，则要在 Prompt 中显式声明）。
• 生成结果需通过 code-reviewer / security-review skill 走一次审查。
• 视觉稿如涉及用户敏感数据字段，禁止使用真实数据示例（参见 .claude/rules/common/security.md）。

六、常见问题

Q1：安装后 Claude 没识别到 Skill？
检查是否放在 .claude/skills/<name>/SKILL.md；重新打开 Claude Code 会话刷新 skill 索引。

Q2：生成结果风格不稳定？
在 Prompt 中显式给出三个旋钮的数值，避免让模型自选；同时可加一句 "严格遵守 SKILL.md 的所有约束"。

Q3：能否与项目自有 Skill 组合？
可以。Taste Skill 只影响前端视觉输出，java-code-implementation 等后端 Skill 不受影响；两者可在同一次任务中串行调用。

Q4：会不会覆盖已有 .claude/skills？
npx skills add 会在同名目录下提示；建议先备份或使用 --skill 精确安装。