taste-skill

一套Anti-Slop前端设计技能包，通过可移植的Agent Skills让AI生成更精致、不模板化的UI界面，支持Layout、Typography、Motion等多项调校。亮点是提供了多种设计风格（极简、粗野、高端）和图像生成技能，可调参数（VARIANCE/MOTION/DENSITY）让用户控制输出风格，且兼容Codex、Cursor、Claude Code等主流AI编码工具。

README

Taste Skill - 为高端前端提供的去模板化 Agent 技能

Taste Skill

面向 AI Agent 的去模板化前端框架

赞助商

	Emil Kowalski · animations.dev

成为赞助商

可移植的 Agent Skills（技能），用于升级 AI 构建的界面：提供更强大的布局、排版、动效和间距，告别千篇一律的模板化界面。本仓库还包含用于参考板（网页、移动端、品牌套件）的图像生成技能。可将它们与 ChatGPT Images 或类似生成工具配合使用，然后将产出交给 Codex、Cursor 或 Claude Code 进行实现。

免责声明

Taste Skill 没有任何官方代币、币或加密项目。任何使用我的名字、头像或项目名称的代币均与本项目无关，也未获得我的认可。

免责声明 · 安装 · 技能列表 · 设置（仅限 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 密度）。包含需求推断、设计系统映射、硬性 em dash 禁用、规范 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-bratlist-ui`	硬朗的机械语言：瑞士排版、强烈对比、实验性布局。
stitch-skill	`stitch-design-taste`	兼容 Google Stitch 的规则，包含可选的 `DESIGN.md` 导出格式。

图像生成技能

这些技能仅生成设计图像（无代码）。可与 ChatGPT Images、Codex 图像模式或任何能生成图像的 agent 配合使用。

技能（文件夹）	安装名称	描述
imagegen-frontend-web	`imagegen-frontend-web`	网站构图：英雄区、着陆页、多区块页面，突出排版、间距、反模板化艺术指导。
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。
如果 agent 持续截断输出，添加 output-skill。
当交付物是图像（构图、流程、品牌板）时，使用 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，然后将结果传递给编码 agent。

图像优先技巧

对于 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。