antfu-design

antfu-design is an open-source design skill for Claude Code and compatible agents, published by antfu. Its author describes it as: “antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and p…”. The project has 5.8k stars on GitHub and is available under the MIT license. Add it to your setup with `git clone https://github.com/antfu/skills ~/.claude/skills/antfu-design`.

What antfu-design does

Use this when building interfaces with UnoCSS in any framework (React, Vue, Svelte, Solid, or plain HTML), from dense devtools panels to landing pages. Read core-design-read first to set the direction, then apply the token system plus the polish and anti-slop rules.

Installation

Add antfu-design to your agent with:

git clone https://github.com/antfu/skills ~/.claude/skills/antfu-design

Always review a skill's source before installing it. This command comes from the skill's public repository; the linked repo is the source of truth for exact setup steps.

What's inside

The SKILL.md for antfu-design is organised into these sections:

• Core Rules
• Starter shortcuts
• Core References
• Best Practices
• Features
• Advanced

When to use it

Reach for antfu-design when you want design help from your agent without writing the same instructions every session. Load the skill and the agent picks it up automatically for relevant tasks.

Strengths

• Clear MIT license — safe to read and adapt
• Ships in antfu/skills, an established project with 5,770 GitHub stars
• Actively maintained (recent commits)

Topics

Frequently asked questions

What does antfu-design do?

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

How do I install antfu-design?

Run git clone https://github.com/antfu/skills ~/.claude/skills/antfu-design in your agent, then reload your skills. Review the source at https://github.com/antfu/skills before installing.

Is antfu-design free to use?

Yes. antfu-design is free and open source under the MIT license, so you can read, run, and adapt it within that license's terms.

Where does antfu-design come from?

antfu-design ships inside antfu/skills, a repository that contains 19 catalogued skills in total. The repository's 5,770 GitHub stars apply to that whole collection, not to this skill on its own.