Taste Skill

拒绝粗糙产出的 AI Agent 前端框架

可移植的 Agent 技能集，全面提升 AI 生成界面的品质：更强的布局、字体排版、动效和间距，告别千篇一律的模板式 UI。本仓库还包含用于设计参考板的图片生成技能（网页、移动端、品牌套件）。配合 ChatGPT Images 或类似生成器使用，然后将设计稿交给 Codex、Cursor 或 Claude Code 进行实现。

免责声明

Taste Skill 与任何官方代币、硬币或加密项目无关。任何使用我的姓名、头像或项目名称的代币均与本人无关联，且未经本人授权。

反馈与贡献

我们非常欢迎您的反馈。建议和问题报告可以通过以下方式：

在 GitHub 上提交 Pull Request 或 Issue
私信 @lexnlin 或 @blueemi99
发送邮件至 hello@tasteskill.dev

安装

npx skills add CLI 会扫描本仓库中的 skills/ 文件夹，因此以下所有技能（代码和图片生成类）的安装方式完全相同。

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

通过 安装名称（SKILL frontmatter 中的 name: 字段，而非文件夹名称）安装单个技能：

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

您也可以将任何 SKILL.md 文件复制到项目中，或粘贴到 ChatGPT / Codex 对话中。

从旧版本升级

默认的 taste-skill（安装名称为 design-taste-frontend）现为 v2（实验性版本），是对原始 v1 版本的重大重写。如果您已安装 v1，重新运行安装命令即可升级：

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

安装名称未变，因此无需更新任何脚本。新版 SKILL.md 会原地替换旧版。

如果您依赖 v1 的精确行为并希望显式锁定该版本：

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

完整的 v1 到 v2 差异及变更理由请参阅 CHANGELOG.md。

技能集

每个技能各司其职，您无需同时使用全部。实现类技能输出代码。图片生成类技能仅输出参考图片。

安装名称 列是传递给 --skill 参数的确切值。

技能（文件夹）	安装名称	描述
taste-skill	`design-taste-frontend`	🆕 v2（实验性） - 默认技能的重大重写版本。读取需求文档，推断设计语言，调优三个旋钮（VARIANCE / MOTION / DENSITY）。支持需求推断、设计系统映射、禁止使用破折号、标准化 GSAP 代码骨架、重设计审查协议、严格的预检流程。正在积极迭代至 v2.0.0 稳定版。
taste-skill-v1	`design-taste-frontend-v1`	taste-skill 的原始 v1 版本，保留供依赖其精确行为的项目使用。仅在 v2 默认版在您的工作流中造成特定问题时才使用。
gpt-tasteskill	`gpt-taste`	面向 GPT/Codex 的更严格变体：更高的布局变化度、更强的 GSAP 指导、激进的反垃圾风格。
image-to-code-skill	`image-to-code`	图片优先流程：生成网站参考图、分析参考图、然后实现匹配的前端代码。
redesign-skill	`redesign-existing-projects`	面向现有项目：先审查 UI，然后修复布局、间距、层级和样式。
soft-skill	`high-end-visual-design`	精致、沉稳、高端的 UI，更柔和的对比度、更多留白、高级字体、弹性动效。
output-skill	`full-output-enforcement`	当模型输出半成品时：强制完整输出，不留占位注释。
minimalist-skill	`minimalist-ui`	编辑式产品 UI（Notion/Linear 风格），克制的配色、清晰的结构。
brutalist-skill	`industrial-brutalist-ui`	硬核机械语言：瑞士字体排版、锐利对比、实验性布局。
stitch-skill	`stitch-design-taste`	兼容 Google Stitch 的规则集，支持可选的 `DESIGN.md` 导出格式。

图片生成技能

这些技能仅生成设计图片（不输出代码）。与 ChatGPT Images、Codex 图片模式或任何能生成图片的智能体配合使用。

技能（文件夹）	安装名称	描述
imagegen-frontend-web	`imagegen-frontend-web`	网站设计稿：Hero 区域、落地页、多区块布局，配合强大的字体排版、间距和反垃圾艺术指导。
imagegen-frontend-mobile	`imagegen-frontend-mobile`	移动端屏幕和流程：iOS/Android/跨平台、模型图、可读性强的字体、统一的组件集。
brandkit	`brandkit`	品牌套件设计板：Logo 方向、配色方案、字体、跨类别的品牌身份应用。

我应该用哪个？

从 taste-skill 开始，这是最安全的通用默认选择。（现在是 v2 实验版 - 查看 CHANGELOG 了解变化详情。）
如果您依赖原始 taste-skill 的精确行为，请安装 taste-skill-v1。
当您需要更严格的 GPT/Codex 规则以及动效/布局强制执行时，使用 gpt-taste。
使用 image-to-code-skill 实现图片 → 分析 → 代码的网站工作流。
使用 redesign-skill 来改进现有代码库而非全新样式开发。
当视觉方向已确定时，添加 soft-skill、minimalist-skill 或 brutalist-skill。
如果智能体经常截断输出，添加 output-skill。
当交付物是图片（设计稿、流程图、身份设计板）时，使用 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，然后将结果交给您的编码智能体。

图片优先技巧

使用 image-to-code-skill 时，在提示词中声明工作流程，例如：follow the skill: generate images, then analyze, then code。

ChatGPT Images 和 Codex

附加或粘贴 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，然后请求您需要的页面设计稿，再将渲染图交给 Codex、Cursor 或 Claude Code。当您需要一个同时生成参考图并用代码实现网站的工作流时，使用 image-to-code-skill。

配置（仅 taste-skill）

文件顶部的数字（1-10）是可调节的旋钮：

DESIGN_VARIANCE：布局探索度（较低：居中/简洁 · 较高：不对称/现代）。
MOTION_INTENSITY：动效深度（较低：悬停效果 · 较高：滚动/磁吸效果）。
VISUAL_DENSITY：每视口的信息密度（较低：宽松 · 较高：密集仪表盘）。

示例

使用 taste-skill 创作的作品：

支持项目

如果 Taste Skill 对您有帮助，欢迎考虑赞助：

在 GitHub 上赞助

常见问题

这与其他 AI 设计技能有何不同？
多种专业变体、关键技能中的可调节旋钮、以及基于专项研究的反重复规则。全部兼容主流编码智能体，不依赖特定框架。

支持 React、Vue、Svelte 吗？
支持。规则针对设计意图，而非某个特定框架的 API。

什么是 SKILL.md？
一种可移植的指令文件，智能体可自动加载；通过 npx skills add 安装，或复制到仓库/对话中使用。

图片生成技能也能用 npx skills add 安装吗？
可以。它们与代码技能共存于 skills/ 目录下，同一个 CLI 可以发现它们。