Taste Skill 说明与使用

合集：Skills第 1 篇 / 共 3 篇

仓库地址：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.md

Claude 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 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 后台，业务表单、列表、审批弹窗较多，推荐组合：

场景	推荐 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-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 精确安装。

除非注明，否则均为李锋镝的博客原创文章，转载必须以链接形式标明本文链接
本文链接：https://www.lifengdi.com/ren-gong-zhi-neng/4779