Taste Skill：为 AI Agent 提供“好品味”的反模板化前端设计技能集

Taste Skill 自称“The Anti-Slop Frontend Framework for AI Agents”，是一套面向 AI Agent 的可移植技能包，目标是升级 AI 构建的界面：更强的布局、字体排印、动效与间距，而不是一眼看去就是样板代码的 UI。仓库还包含用于参考板（网页、移动端、品牌套件）的图像生成技能，可先与 ChatGPT Images 或同类生成器搭配产出画面，再把画面交给 Codex、Cursor 或 Claude Code 实现。

【技能分类】每个技能只做一件事，不必一次全部安装。实现类技能输出代码，图像生成类技能只输出参考图。Install name 列是传给 --skill 的确切取值（取自 SKILL frontmatter 的 name 字段，而非文件夹名）。

代码/实现类技能：

1. taste-skill（安装名 design-taste-frontend）：v2（实验性），对默认技能的大幅重写。读取需求简报、推断设计语言、调节三个旋钮（VARIANCE / MOTION / DENSITY）；包含简报推断、设计系统映射、硬性禁用 em-dash、规范化 GSAP 代码骨架、重设计审计协议、严格飞行前检查，正在向 v2.0.0 稳定版迭代。
2. taste-skill-v1（安装名 design-taste-frontend-v1）：保留的原始 v1，仅当 v2 默认行为破坏了你工作流中的特定环节时才使用。
3. gpt-tasteskill（安装名 gpt-taste）：面向 GPT/Codex 的更严格变体，更高的布局变化度、更强的 GSAP 方向、激进的反 slop 规则。
4. image-to-code-skill（安装名 image-to-code）：图像优先流水线——先生成网站参考图，分析它们，再实现与之匹配的前端。
5. redesign-skill（安装名 redesign-existing-projects）：面向已有项目，先审计 UI，再修布局、间距、层级与样式。
6. soft-skill（安装名 high-end-visual-design）：精致、平静、昂贵感的 UI，更柔和的对比、留白、高级字体、弹簧动效。
7. output-skill（安装名 full-output-enforcement）：当模型交付半成品时使用，要求完整输出、不留占位注释。
8. minimalist-skill（安装名 minimalist-ui）：编辑型产品 UI（Notion/Linear 气质），克制的配色、清晰的结构。
9. brutalist-skill（安装名 industrial-brutalist-ui）：硬朗机械语言——瑞士字体、锐利对比、实验性布局。
10. stitch-skill（安装名 stitch-design-taste）：兼容 Google Stitch 的规则，包含可选的 DESIGN.md 导出格式。

图像生成类技能（只产出设计图，不产出代码；可与 ChatGPT Images、Codex 图像模式或任意能生成图像的 Agent 配合）：

1. imagegen-frontend-web（安装名 imagegen-frontend-web）：网站构图——hero、落地页、多区块，强调字体排印、间距与反 slop 艺术指导。
2. imagegen-frontend-mobile（安装名 imagegen-frontend-mobile）：移动端界面与流程——iOS/Android/跨平台、mockup、可读字体、成套一致的画面。
3. brandkit（安装名 brandkit）：品牌套件板——logo 方向、配色、字体、跨类别的识别应用。

【如何选择】默认从 taste-skill（现为 v2 实验性）开始最稳妥；若依赖原版 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。

【设置项（仅 taste-skill）】文件顶部数字是 1-10 的旋钮：DESIGN_VARIANCE 布局实验性（低：居中/干净；高：非对称/现代）；MOTION_INTENSITY 动画深度（低：hover；高：滚动/磁性效果）；VISUAL_DENSITY 每个视口的信息量（低：宽松；高：密集仪表盘）。

【免责声明】Taste Skill 没有官方代币、硬币或加密项目；任何使用作者姓名、形象或项目的代币均与其无关且未获背书。

【反馈与贡献】可提交 PR 或 Issue，联系 @lexnlin 或 @blueemi99，或发邮件至 [email protected]。

【赞助与合作】页面列出 Kimi（Moonshot AI）为 Open Source Friend，并说明 Kimi K3 具备 2.8T 参数、原生视觉与 100 万 token 上下文窗口，面向长周期编码、知识工作与推理；taste-skill 用户首次购买可获得 10% 额外 API 额度。其他赞助方包括 interfaces.dev、React Bits、Emil Kowalski 的 animations.dev、IMG.LY CreativeEditor SDK、Sent.dm，以及 Vercel 等标识。

【研究】塑造这些技能的背景写作位于仓库 research/ 目录。

【常见问题】与其他 AI 设计技能的区别：多种专用变体、关键技能可调旋钮、由专门研究支撑的反重复规则，且跨主流编码 Agent 保持框架无关。兼容 React、Vue、Svelte：是，规则针对设计意图而非单一框架 API。SKILL.md 是什么：Agent 可自动加载的可移植指令文件，可通过

npx skills add 安装或复制进仓库/对话

。图像生成技能是否也用 npx skills add 安装：是，它们与代码技能同在 skills/ 目录下，由同一 CLI 发现。

【配图说明】配图 1 为 “Taste Skill - Anti-slop Agent Skills for premium frontends” 横幅；配图 2 为 Visit tasteskill.dev 按钮；配图 3 为赞助方 Kimi K3；配图 4 为 Interfaces；配图 5 为 React Bits；配图 6 为 animations.dev；配图 7 为 IMG.LY；配图 8 为 Sent.

dm；配图 9 为 Kimi；配图 10 为 Kimi Open Source Friends；配图 11 为 Vercel；配图 12 为 MIT License 按钮。

— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。