Leonxlnx / taste-skill
Leonxlnx / taste-skill
Taste Skill: The Anti-Slop Frontend Framework for AI Agents Taste Skill：专为 AI Agent 设计的“反平庸”前端框架
Portable Agent Skills that upgrade AI-built interfaces: stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs. This repo also includes image-generation skills for reference boards (web, mobile, brand kits). Pair them with ChatGPT Images or similar generators, then hand the frames to Codex, Cursor, or Claude Code for implementation. 这是一套可移植的 Agent 技能，旨在升级 AI 构建的界面：通过更强的布局、排版、动效和间距，告别千篇一律的“样板化”UI。该仓库还包含用于生成参考图（网页、移动端、品牌套件）的图像生成技能。你可以将其与 ChatGPT Images 或类似生成器配合使用，然后将生成的画面交给 Codex、Cursor 或 Claude Code 进行实现。
Disclaimer 免责声明
Taste Skill has no official token, coin, or crypto project. Any token using my name, image, or project is unaffiliated and not endorsed by me. Taste Skill 没有官方代币、硬币或加密货币项目。任何使用我的名字、形象或项目的代币均与我无关，且未经我本人认可。
Disclaimer · Install · Skills · Settings · Examples · Sponsor · Research · FAQ · License 免责声明 · 安装 · 技能 · 设置 · 示例 · 赞助 · 研究 · 常见问题 · 许可协议
Feedback & Contributions 反馈与贡献
We would love your feedback. Suggestions and bug reports: 我们非常期待您的反馈。建议与错误报告请通过以下方式提交：
- Open a Pull Request or Issue on GitHub 在 GitHub 上提交 Pull Request 或 Issue
- DM @lexnlin or @blueemi99 私信 @lexnlin 或 @blueemi99
- Email us at hello@tasteskill.dev 发送邮件至 hello@tasteskill.dev
Installing 安装
The npx skills add CLI scans the skills/ folder in this repo, so all skills below (code and image-generation) install the same way.
npx skills add 命令行工具会扫描本仓库中的 skills/ 文件夹，因此下方所有的技能（代码类和图像生成类）安装方式相同。
npx skills add https://github.com/Leonxlnx/taste-skill
Install a single skill by its install name (the name: field inside the SKILL frontmatter, not the folder name):
通过安装名称（SKILL 元数据中的 name: 字段，而非文件夹名称）安装单个技能：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
You can also copy any SKILL.md into your project or paste it into ChatGPT / Codex conversations.
你也可以将任何 SKILL.md 文件复制到你的项目中，或者直接粘贴到 ChatGPT / Codex 的对话中。
Updating from the previous version 从旧版本更新
The default taste-skill (install name design-taste-frontend) is now v2 (experimental), a substantial rewrite of the original v1. If you already have v1 installed, just re-run the install command and you will be upgraded:
默认的 taste-skill（安装名为 design-taste-frontend）现已升级至 v2（实验性版本），这是对原 v1 版本的重大重写。如果你已经安装了 v1，只需重新运行安装命令即可升级：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
The install name did not change, so no script updates are needed. The newer SKILL.md replaces the older one in place. If you depend on the exact behavior of v1 and want to pin to it explicitly:
安装名称未变，因此无需更新脚本。新的 SKILL.md 会直接替换旧版本。如果你依赖 v1 的特定行为并希望锁定该版本，请使用：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
See CHANGELOG.md for the full v1 to v2 diff and the rationale.
查看 CHANGELOG.md 以获取 v1 到 v2 的完整差异说明及设计思路。
Skills 技能列表
Each skill does one job; you do not need all of them at once. Implementation skills output code. Image-generation skills output reference images only. The Install name column is the exact value you pass to --skill.
每个技能各司其职；你不需要同时使用所有技能。实现类技能输出代码，图像生成类技能仅输出参考图。“安装名称”列即为你传递给 --skill 参数的具体值。
| Skill (folder) | Install name | Description |
|---|---|---|
| 技能（文件夹） | 安装名称 | 描述 |
| taste-skill | design-taste-frontend | 🆕 v2 (experimental) - substantial rewrite of the default skill. Reads the brief, infers the design language, tunes three dials (VARIANCE / MOTION / DENSITY). Brief inference, design-system map, hard em-dash ban, canonical GSAP code skeletons, redesign-audit protocol, strict pre-flight check. Actively iterating toward v2.0.0 stable. 🆕 v2（实验性）- 默认技能的重大重写。读取需求简报，推断设计语言，调整三个维度（差异性/动效/密度）。包含需求推断、设计系统映射、强制禁用长破折号、规范的 GSAP 代码骨架、重设计审计协议、严格的预检流程。正积极迭代至 v2.0.0 稳定版。 |
| taste-skill-v1 | design-taste-frontend-v1 | The original v1 of taste-skill, preserved for projects depending on its exact behavior. Use only if the v2 default breaks something specific in your workflow. 原版 v1，为依赖其特定行为的项目保留。仅当 v2 默认版本破坏了你的工作流时使用。 |
| gpt-tasteskill | gpt-taste | Stricter variant for GPT/Codex: higher layout variance, stronger GSAP direction, aggressive anti-slop. 针对 GPT/Codex 的更严格变体：更高的布局差异性、更强的 GSAP 指导、激进的“反平庸”策略。 |
| image-to-code-skill | image-to-code | Image-first pipeline: generate site references, analyze them, then implement the frontend to match. 图像优先流水线：生成网站参考图，进行分析，然后实现匹配的前端代码。 |
| redesign-skill | redesign-existing-projects | Existing projects: audit the UI first, then fix layout, spacing, hierarchy, styling. 现有项目：先审计 UI，再修复布局、间距、层级和样式。 |
| soft-skill | high-end-visual-design | Polished, calm, expensive UI with softer contrast, whitespace, premium fonts, spring motion. 精致、冷静、高级感的 UI，具有更柔和的对比度、留白、优质字体和弹簧动效。 |
| output-skill | full-output-enforcement | When the model ships half-finished work: full output, no placeholder comments. 当模型输出半成品时使用：强制完整输出，不包含占位符注释。 |
| minimalist-skill | minimalist-ui | Editorial product UI (Notion/Linear vibes), restrained palette, crisp structure. 编辑类产品 UI（Notion/Linear 风格），克制的配色，清晰的结构。 |
| brutalist-skill | industrial-brutalist-ui | Hard mechanical language: Swiss type, sharp contrast, experimental layout. 硬核机械语言：瑞士风格字体、强烈对比度、实验性布局。 |
| stitch-skill | stitch-design-taste | Google Stitch-compatible rules, including optional DESIGN.md export format. 兼容 Google Stitch 的规则，包含可选的 DESIGN.md 导出格式。 |
Image generation skills 图像生成技能
These produce design images only (no code). Use with ChatGPT Images, Codex image mode, or any agent that generates images. 这些技能仅生成设计图像（无代码）。可与 ChatGPT Images、Codex 图像模式或任何支持图像生成的 Agent 配合使用。
| Skill (folder) | Install name | Description |
|---|---|---|
| 技能（文件夹） | 安装名称 | 描述 |
| imagegen-frontend-web | imagegen-frontend-web | Website comps: hero, landing, multi-section with strong typography, spacing, anti-slop art direction. 网站设计稿：首屏、落地页、多板块，具备强排版、间距和“反平庸”艺术指导。 |
| imagegen-frontend-mobile | imagegen-frontend-mobile | Mobile screens and flows: iOS/Android/cross-platform, mockups, readable type, coherent sets. 移动端界面与流程：iOS/Android/跨平台，模型图，易读字体，连贯的视觉集。 |
| brandkit | brandkit | Brand-kit boards: logo directions, palettes, type, identity applications across categories. 品牌套件板：Logo 方向、配色方案、字体、跨类别的品牌识别应用。 |
Which one should I use? 我该用哪一个？
- Start with
taste-skillfor the safest general default. (Now v2 experimental - see what changed in the CHANGELOG.) 从taste-skill开始，这是最稳妥的通用默认选择。（现为 v2 实验版，查看 CHANGELOG 了解变更。） - If you depend on the exact behavior of the original
taste-skill, installtaste-skill-v1instead. 如果你依赖原版taste-skill的特定行为，请安装taste-skill-v1。 - Use
gpt-tastewhen you want the stricter GPT/Codex-oriented rules and motion/layout enforcement. 当你需要更严格的 GPT/Codex 导向规则以及动效/布局强制执行时，使用gpt-taste。 - Use
image-to-code-skillfor image → analyze → code website workflows. 对于“图像 → 分析 → 代码”的网站工作流，使用image-to-code-skill。 - Use
redesign-skillto improve an existing codebase instead of greenfield styling. 使用redesign-skill来改进现有代码库，而非从零开始设计。 - Add
soft-skill,minimalist-skill, orbrutalist-skillwhen the visual direction is already chosen. 当视觉方向已确定时，添加soft-skill、minimalist-skill或brutalist-skill。 - Add
output-skillif the agent keeps truncating output. 如果 Agent 总是截断输出，请添加output-skill。 - Use
imagegen-frontend-web,imagegen-frontend-mobile, orbrandkitwhen the deliverable is images (comps, flows, identity boards), then pass results to your coding agent. 当交付物为图像（设计稿、流程图、品牌板）时，使用imagegen-frontend-web、imagegen-frontend-mobile或brandkit，然后将结果传给你的编码 Agent。
Image-first tip 图像优先提示
For image-to-code-skill, state the pipeline in the prompt, e.g.: follow the skill: generate images, then analyze, then code.
对于 image-to-code-skill，请在提示词中说明流水线，例如：遵循此技能：先生成图像，然后分析，最后编写代码。
ChatGPT Images and Codex ChatGPT Images 与 Codex
Attach or paste imagegen-frontend-web, imagegen-frontend-mobile, or brandkit and ask for the frames you need, then feed the renders to Codex, Cursor, or Claude Code.
附上或粘贴 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit 的内容，要求其生成你需要的画面，然后将渲染图喂给 Codex、Cursor 或 Claude Code。
Use image-to-code-skill when you want one workflow that both generates references and implements the site in code.
当你希望通过一个工作流同时完成参考图生成和网站代码实现时，使用 image-to-code-skill。
Settings (taste-skill only) 设置（仅限 taste-skill）
Numbers at the top of the file are 1-10 dials: 文件顶部的数字为 1-10 的调节旋钮：
DESIGN_VARIANCE: Layout experimentation (lower: centered/clean · higher: asymmetric/modern).DESIGN_VARIANCE：布局实验性（越低：居中/简洁 · 越高：非对称/现代）。MOTION_INTENSITY: Animation depth (lower: hover · higher: scroll/magnetic).MOTION_INTENSITY：动效深度（越低：悬停 · 越高：滚动/磁吸）。VISUAL_DENSITY: Information per viewport (lower: spacious · higher: dense dashboards).VISUAL_DENSITY：视口信息密度（越低：宽敞 · 越高：密集仪表盘）。