Overview
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.
Best for
What’s inside
The SKILL.md for antfu-design is organised into these sections:
- Core Rules
- Starter shortcuts
- Core References
- Best Practices
- Features
- Advanced
Installation
Add antfu-design to your agent with:
git clone https://github.com/antfu/skills ~/.claude/skills/antfu-designReview a skill’s source before installing it — skills can instruct your agent to run commands. This command comes from the skill’s public repository, which is the source of truth for setup steps. New to skills? Read how to install Claude Code skills.
Supported agents
Neither the skill nor its repository names a specific agent. It uses the SKILL.md format, which several agents can load — check the repository for any agent-specific requirements.
License
antfu-design is published under the MIT license.
Strengths
- Clear MIT license — safe to read and adapt within its terms
- Ships in antfu/skills, an established project with 5,770 GitHub stars
Author
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.
