之前看乔木老师做了一个超详细的前端设计 Skill 测评！！

我根据他的测试结果 + 自己的实际使用，把这些 Skill 分成了三个档位：

第一档：视觉冲击型（适合营销页、作品集）

frontend-design 核心特点：反 generic AI 美学，强制大胆独特方向 适合场景：营销页、作品集、需要视觉冲击的场景

安装：npx skills add anthropics/skills –skill frontend-design

这是 Anthropic 官方维护的 Skill，最大的优势是它会主动推 AI 做出“不安全”的设计选择——不是那种四平八稳的模板风格，而是真正有视觉冲击力的方向

但也因此，生成的结果稳定性稍弱，有时候会过于大胆

taste-skill

核心特点：1200 行严格 pre-flight，反模板纪律 适合场景：去 AI 味、文案简洁、纪律控制 安装：npx skills add https://github.com/Leonxlnx/taste-skill… –skill design-taste-frontend

这个 Skill 的作者很较真，写了一套“反 AI 垃圾设计”的六条铁律：

禁止从空白画布凭空发明设计，要先问有没有设计系统 不确定时用灰色占位块，不要用劣质 SVG 图标 给 2-3 个差异化方向，不要一个“最终版” AI 生成的表情包图标直接禁，换 SF Symbols 元素存在必须有理由，不能每个像素都填满 紫色-蓝色渐变直接拉黑

装完之后，AI 生成的页面会明显“克制”很多，不再是那种恨不得把所有特效都堆上去的感觉

qiaomu-design（乔木融合版）

核心特点：吸收多家优点 + 风格试衣间 + 58 站设计系统库 + 中文排版优化

适合场景：全面、中文友好、可迭代

安装：npx skills add joeseesun/qiaomu-design 这个是乔木老师做完横向测评之后，自己设计的skill

他的思路很直接：既然每个 Skill 都有各自的强项，那我直接把它们缝到一起不就行了

frontend-design 的视觉个性 web-design-guidelines 的工程规范 taste-skill 的反 AI 味纪律 再加了两个别人没有的机制

风格试衣间：不直接给你一个“最终版”，而是先生成 4 个方向的 HTML 预览页，你像挑衣服一样实际看着选，确认了才往下走

58 站真实设计系统库：把 Framer、SpaceX、Linear 这些真实大厂的设计 DNA 直接注入，蓝色光环阴影、幽灵按钮、层级底色这些都能变成可溯源的具体值

横评数据也很能打：视觉个性追平 frontend-design，工程规范追平 web-design-guidelines

如果你写中文内容、或者想要那种“定制感”而不是模板感，这个融合版是我在第一档里最推荐先试的

第二档：工程规范型

web-design-guidelines（Vercel Labs）

核心特点：布局/排版/动效/无障碍完整规范 适合场景：生产级产品 UI、合规验收 安装：从 Vercel Labs 获取

这是我测试下来工程规范最强的 Skill，焦点陷阱、aria、tabular-nums、reduced-motion 这些细节都会自动检查 如果你的项目需要过无障碍审查或者要给客户交付，必装这个

但视觉创造性偏弱，生成的页面会比较“正统”

ui-ux-pro-max

核心特点：50+ 风格、大量配色/字体可检索数据库 适合场景：系统化、电商、团队量产

安装：npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill… –skill ui-ux-pro-max

这个 Skill 的优势是“准则库”——内置了 84 种风格、192 个配色方案、74 组字体配对、192 种产品类型的推理规则 你说“帮我做一个美容院的落地页”，它会自动完成：

匹配行业风格（从 161 个产品类型里找最合适的） 推荐设计模式（Hero 优先？社交证明？转化优化？） 生成完整配色（主色、辅助色、CTA 色、背景色、文字色） 配对字体（57 组 Google Fonts 精选组合） 输出可执行清单（hover 动效、响应式断点、可访问性检查项）

特别适合电商或者需要快速量产的场景，但模板感会稍微重一点

第三档：细节打磨型

emil-design-eng 核心特点：动效、缓动、交互细节工艺 适合场景：组件库、App 手感、交互密集 安装：npx skills add https://github.com/emilkowalski/skills… –skill emil-design-eng

这个 Skill 专门解决交互反馈的问题

举个例子：两个登录按钮，一个点击后页面立刻跳转，反应快到有点吓人；另一个在点击的瞬间，按钮会缩小到原来的 97%，像是被手指轻轻压了一下，然后页面再跳转 后者就是 emil-design-eng 会帮你做的事

如果你的产品需要“手感”，这个 Skill 是必装的

impeccable

核心特点：后置打磨/审计型，色彩种子 + 分流 适合场景：抛光现有页面、稳定性 安装：从 GitHub pbakaus/impeccable 获取

这个 Skill 不是用来生成新页面的，而是用来“审计”现有页面

它会主动问你的项目定位、品牌资产，然后给出 2-3 个差异化方向让你选，而不是直接塞给你一个紫蓝渐变界面 Reddit 上有人说“Impeccable 特别适合改进现有设计”，我试了一下确实如此！！

Leonxlnx/taste-skill

Source: https://github.com/Leonxlnx/taste-skill

Taste Skill

The Anti-Slop Frontend Framework for AI Agents

Thanks to Kimi (Moonshot AI), our Open Source Friend, for supporting taste-skill! With 2.8T parameters, native vision, and a 1-million-token context window, Kimi K3 delivers frontier performance across long-horizon coding, knowledge work, and reasoning.

Get a Kimi API key. Taste-skill users get 10% bonus API credits on their first purchase.

Sponsors

	interfaces.dev · A design engineering magazine by Jakub Krehel
	React Bits · animated React components for creative interfaces
	Emil Kowalski · animations.dev
	IMG.LY · CreativeEditor SDK
	Sent.dm · messaging APIs for SMS, WhatsApp, and RCS

_{Become a sponsor}

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.

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.

_{Disclaimer · Install · Skills · Settings · Examples · Sponsors · Research · FAQ · License}

Feedback & Contributions

We would love your feedback. Suggestions and bug reports:

• Open a Pull Request or Issue on GitHub
• DM @lexnlin or @blueemi99
• Email us at [email protected]

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 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):

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.

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:

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:

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.

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.

Image generation skills

These produce design images only (no code). Use with ChatGPT Images, Codex image mode, or any agent that generates images.

Which one should I use?

• Start with taste-skill for the safest general default. (Now v2 experimental - see what changed in the CHANGELOG.)
• If you depend on the exact behavior of the original taste-skill, install taste-skill-v1 instead.
• Use gpt-taste when you want the stricter GPT/Codex-oriented rules and motion/layout enforcement.
• Use image-to-code-skill for image → analyze → code website workflows.
• Use redesign-skill to improve an existing codebase instead of greenfield styling.
• Add soft-skill, minimalist-skill, or brutalist-skill when the visual direction is already chosen.
• Add output-skill if the agent keeps truncating output.
• Use imagegen-frontend-web, imagegen-frontend-mobile, or brandkit when the deliverable is images (comps, flows, identity boards), then pass results to your coding 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.

ChatGPT Images and 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. Use image-to-code-skill when you want one workflow that both generates references and implements the site in code.

Settings (taste-skill only)

Numbers at the top of the file are 1-10 dials:

• DESIGN_VARIANCE: Layout experimentation (lower: centered/clean · higher: asymmetric/modern).
• MOTION_INTENSITY: Animation depth (lower: hover · higher: scroll/magnetic).
• VISUAL_DENSITY: Information per viewport (lower: spacious · higher: dense dashboards).

Examples

Created with taste-skill:

Support the project

If Taste Skill helps you, consider sponsoring:

Sponsor on GitHub

Community Sponsors

Research

Background writing that shaped these skills lives in research/.

Common Questions

How is this different from other AI design skills?
Multiple specialized variants, adjustable dials in key skills, anti-repetition rules informed by dedicated research. All are framework agnostic across major coding agents.

Does it work with React, Vue, Svelte?
Yes. Rules target design intent, not a single framework API.

What is SKILL.md?
A portable instruction file agents can load automatically; install via npx skills add or by copying into a repo or conversation.

Do image-generation skills install with npx skills add?
Yes. They live under skills/ alongside the code skills so the same CLI discovers them.

License

MIT License · Copyright (c) 2026 Leonxlnx

超级个体｜柿子 (@yaohui12138): 昨天帮一个做个护品牌的朋友省了 8 万块，他差点给我跪下，哈哈哈

事情是这样的： 他做了一个头皮护理的新品牌，准备上市前做一轮消费者测试，找了两家调研公司报价

一家 8 万，一家 12 万，周期都要一个多月

8 万块买什么呢？招募 8-10 个真实用户，坐一起聊两个小时，录音整理成报告，完事…