味觉技能

这是一套能够提升 AI 工具编写前端代码质量的技能集合。它不会生成千篇一律、乏味无趣的界面，而是会构建现代感十足、具备精美动画、合理间距和高视觉品质的高端设计。

味觉技能 v2 测试版

重大更新正在进行中。如果您想抢先体验，请注册参与测试：

加入候补名单

反馈与贡献

非常欢迎您的宝贵意见！如果您有任何建议或发现任何问题：

• 请直接在 GitHub 上提交 Pull Request 或 Issue
• 在 x.com/lexnlin 私信我
• 发送邮件至 hello@learn2vibecode.dev

安装

可通过 CLI 用于所有主流 AI 编码助手（Cursor、Antigravity、Claude Code、Codex、Windsurf、Copilot 等）：

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

技能列表

技能	描述
taste-skill	主要的设计技能，用于生成高端前端代码。涵盖布局、排版、颜色、间距和动效。
redesign-skill	用于升级现有项目，先进行设计问题的审计与修复。
soft-skill	聚焦于昂贵而柔和的 UI 风格，采用高端字体、留白、层次感以及流畅的弹簧动画效果。
output-skill	防止 AI 懒惰。避免占位注释、跳过代码块以及半成品输出。
minimalist-skill	适用于简洁、编辑风格的界面，灵感来自 Notion 和 Linear 等工具。单色设计，边缘清晰锐利。
brutalist-skill	⚠️ BETA 原始机械风界面，融合瑞士排版印刷与 CRT 终端美学。
stitch-skill	兼容 Google Stitch 的语义化设计规则，用于生成高端 AI 界面。包含 DESIGN.md 文件以便导出。

设置（仅限 taste-skill）

taste-skill 在文件顶部设有三个设置项。根据您正在开发的内容，可调整这些数值（1–10）：

• DESIGN_VARIANCE — 布局的实验性程度。（1–3：整洁居中 | 8–10：不对称/现代）
• MOTION_INTENSITY — 动画的丰富程度。（1–3：简单的悬停效果 | 8–10：磁性/滚动触发的动效）
• VISUAL_DENSITY — 单屏内容的密集程度。（1–3：宽敞奢华 | 8–10：紧凑型仪表盘）

示例

使用 taste-skill 创建：

支持本项目

如果您觉得 taste-skill 很有用，请考虑赞助其开发。

在 GitHub 上赞助

当前赞助者

研究

这些技能的构建基于背后的研究工作。详情请参阅 research/ 文件夹。

常见问题

与其他 AI 设计技能相比，它有何不同？ 味觉技能包含 7 种专门变体，而非单一文件；提供三旋钮参数化系统以灵活调整输出；并基于原创研究制定了防重复规则。它不依赖特定框架，可在所有主流 AI 助手中使用。

它是否适用于 React、Vue、Svelte 等框架？ 是的。味觉技能与框架无关。其规则专注于设计决策，而非框架特有的代码模式。

什么是 SKILL.md 文件？ 这是一种可移植的指令文件，AI 编码助手能够自动检测并遵循。无需任何配置，只需安装即可，您的助手会自行读取。

Taste Skill 快速上手指南

Taste Skill 是一套专为 AI 编程助手设计的技能集合，旨在让 AI 生成具有现代感、高端设计质感的前端代码（包含合理的动画、间距和视觉细节），告别通用且枯燥的界面。

环境准备

• 系统要求：支持所有主流操作系统（Windows, macOS, Linux）。
• 前置依赖：
  • 已安装 Node.js (推荐 v18+)，以便使用 npx 命令。
  • 正在使用支持 Agent Skills 的 AI 编程工具，例如：Cursor, Claude Code, Antigravity, Windsurf, GitHub Copilot 等。
• 网络提示：该工具托管于 GitHub。如果在中国大陆地区访问 GitHub 或 npm 源较慢，建议配置国内镜像源或使用网络加速工具以确保安装顺利。

安装步骤

在终端中运行以下命令，将 Taste Skill 添加到你的 AI 代理环境中：

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

安装完成后，AI 代理会自动识别并加载相关的 .md 技能文件，无需额外配置。

基本使用

安装成功后，你只需在对话中直接指示 AI 使用特定的技能风格即可。以下是几种最常用的场景：

1. 生成高端前端界面

请求 AI 使用主技能生成代码，它将自动应用布局、排版、颜色和动效规则。

提示词示例： "请使用 taste-skill 为我创建一个落地页，包含英雄区域和功能介绍。"

2. 切换设计风格

Taste Skill 包含多种变体，你可以指定特定风格：

• 柔和高端风：

  "使用 soft-skill 生成一个设置面板，需要昂贵的软 UI 质感和弹簧动画。"

• 极简编辑风：

  "使用 minimalist-skill 设计一个仪表盘，参考 Notion 风格，单色且边框清晰。"

• 重构现有项目：

  "使用 redesign-skill 审计并优化当前项目的首页设计。"

3. 调整设计参数（进阶）

对于主技能 taste-skill，你可以在提示词中指定三个维度的强度（1-10）：

• DESIGN_VARIANCE (布局实验性): 1-3 (规整居中) | 8-10 (不对称/现代)
• MOTION_INTENSITY (动画强度): 1-3 (简单悬停) | 8-10 (磁吸/滚动触发)
• VISUAL_DENSITY (内容密度): 1-3 (宽松/奢华) | 8-10 (密集数据看板)

提示词示例： "使用 taste-skill 生成一个数据大屏，设置 DESIGN_VARIANCE 为 9，MOTION_INTENSITY 为 8，VISUAL_DENSITY 为 9。"

4. 防止代码偷懒

如果担心 AI 省略代码，可以强制启用输出约束：

"请使用 output-skill 编写完整的组件代码，不要包含任何占位符注释或跳过任何逻辑块。"