仓库地址：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 落地代码，形成"图 → 分析 → 代码"的流水线。
核心能力
| 维度 | 说明 |
|---|---|
| 布局（Layout） | 网格、栅格、非对称版式、留白节奏 |
| 排版（Typography） | 字重层级、行高、字号比例、可读性 |
| 动效（Motion） | 过渡曲线、进入/退出动画的克制使用 |
| 间距（Spacing） | 8pt 系统、模块呼吸感 |
| 参考图生成 | Web / Mobile / 品牌 Kit 参考板 |
二、Skill 清单
实现类（输出代码）
| Skill 名称 | 用途 |
|---|---|
design-taste-frontend |
默认首选（v2），通用最安全 |
design-taste-frontend-v1 |
兼容旧版 |
gpt-taste |
针对 GPT / Codex 调优的严格变体 |
image-to-code |
图像优先流水线：生图 → 分析 → 编码 |
redesign-existing-projects |
审计并改造已有 UI |
high-end-visual-design |
高端、克制、premium 风格 |
full-output-enforcement |
防止生成结果被截断 / 半成品 |
minimalist-ui |
Notion / Linear 风格编辑器 UI |
industrial-brutalist-ui |
Swiss 排版、粗野主义、实验风 |
stitch-design-taste |
兼容 Google Stitch 规则 |
图像生成类（输出参考图）
| Skill 名称 | 用途 |
|---|---|
imagegen-frontend-web |
Web 页面参考图 |
imagegen-frontend-mobile |
移动端界面与流程图 |
brandkit |
品牌视觉体系板 |
三、安装
方式 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.mdClaude Code 启动时会自动加载 .claude/skills/ 下的可用 Skill。
验证安装
在 Claude Code 中输入 / 查看命令列表，或直接输入 /design-taste-frontend，如出现补全即安装成功。
四、使用方式
4.1 基本流程
- 选择 Skill：不确定时默认使用
design-taste-frontend。 - 在对话中触发：直接引用 Skill 名，或以斜杠命令触发。
- 给出需求描述：越具体越好（业务上下文、目标用户、参考对象）。
- 调节风格旋钮（见 4.2）。
- 迭代：不满意时明确指出需要改动的维度（如"降低视觉密度到 4"）。
4.2 三个风格旋钮（1–10 分制）
Taste Skill 支持在 Prompt 中显式设置三个参数：
| 参数 | 含义 | 低值 | 高值 |
|---|---|---|---|
DESIGN_VARIANCE |
布局大胆程度 | 保守、对称 | 大胆、非对称 |
MOTION_INTENSITY |
动效强度 | 静态 | 丰富过渡 |
VISUAL_DENSITY |
信息密度 | 稀疏留白 | 高信息量 |
示例 Prompt：
/design-taste-frontend
帮我做一个「配置发布审批」页面。
DESIGN_VARIANCE=6
MOTION_INTENSITY=3
VISUAL_DENSITY=7
技术栈：Vue 3 + Element Plus4.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 code4.4 改造现有页面（redesign-existing-projects）
针对当前配置中心已有的 Demo（如 docs/应用加密管理页面Demo.html、docs/权限自助申请页面Demo.html）：
/redesign-existing-projects
目标文件：docs/应用加密管理页面Demo.html
改造方向：提升视觉层级，减少表格视觉噪音，保留业务字段不变
DESIGN_VARIANCE=5 VISUAL_DENSITY=5五、在本项目（配置中心）中的推荐用法
配置中心是研运一体平台的 Web 后台，业务表单、列表、审批弹窗较多，推荐组合：
| 场景 | 推荐 Skill | 建议参数 |
|---|---|---|
| 新增管理页（列表 + 详情） | design-taste-frontend |
Variance 4 / Motion 2 / Density 6 |
| 审批 / 灰度发布类流程 | minimalist-ui |
Variance 3 / Motion 2 / Density 5 |
| 大屏 / 监控类展示 | high-end-visual-design |
Variance 6 / Motion 4 / Density 7 |
| 已有 Demo 优化 | redesign-existing-projects |
保持业务字段 |
| 前期概念快速探索 | imagegen-frontend-web → image-to-code |
— |
约束（结合项目规范）：
- 生成代码前先阅读
CLAUDE.md中的 UI 技术栈约束（如已选定 Vue3 / Element Plus，则要在 Prompt 中显式声明）。 - 生成结果需通过
code-reviewer/security-reviewskill 走一次审查。 - 视觉稿如涉及用户敏感数据字段，禁止使用真实数据示例（参见
.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 精确安装。
除非注明，否则均为李锋镝的博客原创文章，转载必须以链接形式标明本文链接
文章评论