Leonxlnx/taste-skill

Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages

TL;DR

Taste Skill 是一系列 Agent Skills（微型、可移植的指令文件），能告诉基于 LLM 的编程助手（如 ChatGPT、Claude、Codex、Cursor 等）如何生成更简洁、更精致的前端 UI 代码与设计素材。您只需通过单一 npx skills add … 指令安装技能，代理程序便会遵循内嵌规则（布局变化、动态强度、视觉密度、防草率准则）来生成 HTML/CSS/JS 或设计草图。

功能特色

以设计为导向的代码生成 – 读取简介、选择设计语言，并输出完整的前端实现（基于 GSAP 的动画骨架、严格的间距、排版等）。
可调整的“旋钮” – 三个数值参数（DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY）让您能控制输出的实验性或密度程度。
专业变体 – 例如用于更严格 GPT/Codex 输出的 gpt‑taste、用于高级 UI 外观的 soft‑skill、用于高对比工业风格的 brutalist‑skill，以及用于审计与修复现有代码库的 redesign‑skill。
图像生成技能 – 产出参考板（网页、移动设备、品牌套件），您可以将其提供给具备图像能力的代理程序，再将框架交给代码技能（image‑to‑code）。
可移植的 SKILL.md 文件 – 每个技能都位于 skills/ 下的专属文件夹中，可通过 Vercel‑Labs 的 npx skills add CLI 安装，或直接复制到项目或聊天中。

适用对象

使用 AI 编程助手的开发者，希望在不手动编写每个 CSS 规则的情况下获得一致且高质量的 UI。
设计转代码流程，先生成草图（通过 ChatGPT Images、DALL‑E 等），然后自动将其转化为生产就绪的代码。
需要跨 React、Vue、Svelte 或任何前端框架重复使用风格指南的团队 – 无论底层库为何，该技能都能强制执行布局与动态规则。

如何开始

安装默认技能（v2，实验性）：

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

在给 LLM 的提示词中，引用技能名称，例如：

Use skill "design‑taste‑frontend" to build a landing page for a fintech startup. Keep motion intensity low and visual density high.

如果您只需要原始行为，请改为安装 design‑taste‑frontend‑v1。
对于以图像为先的工作流程，请加入 imagegen-frontend-web（或 mobile/brandkit），然后运行 image‑to‑code。
若想要更具实验性的布局，请在 SKILL.md 顶部加入如 DESIGN_VARIANCE: 7 的行来调整三个旋钮。

仓库内容

skills/ 文件夹 – 每个子文件夹包含一个 SKILL.md，定义了提示词模板、旋钮默认值以及任何辅助脚本。
research/ – 关于防草率设计原则的背景笔记，这些原则为技能提供了依据。
CHANGELOG.md – v1 到 v2 重写的详细信息与未来路线图。
MIT 授权 – 可自由使用与修改。

限制与待解决问题

这些技能生成的是 框架无关的标记语言；您可能仍需根据特定的组件库调整输出。
图像生成技能仅产生参考图像；它们依赖独立的图像模型（例如 ChatGPT Images、Kimi）来实际渲染视觉效果。
默认的 design‑taste‑frontend 被标记为 实验性 (v2)；稳定性与边缘情况处理仍在发展中。

快速链接

网站： https://tasteskill.dev
安装文档： 上方的 #installing 区段
完整技能列表： #skills
授权： MIT