Awesome Design Skills
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skills provide styling rules and tokens; the agent writes code under your control
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/awesome-design-skillsDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Assembled automatically, review before installing.
Run in a terminal in the project folder
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Install the design skill with npx typeui.sh pull <name>, for example npx typeui.sh pull bento, then ask the agent to style the interface by that skill's rules.
Other ways from the author
npx typeui.sh pull bentoInstalls one design skill by style name; the style list is on the project site.
This is third-party code. Review the repository files before installing.
What it does
This is a curated registry of design skills for agentic tools such as Claude Code, Cursor and Codex. Each skill is a folder with two files: SKILL.md with agent instructions (tokens, component rules, accessibility constraints, quality gates) and DESIGN.md with a human-readable statement of intent and implementation notes. The styles span many directions: minimal, brutalism, bento, corporate, editorial and dozens more. Any skill installs with a single pull command, after which the agent styles the interface in the chosen direction by consistent rules.
Who it is for. For designers and frontend developers who want the agent to style an interface in a specific direction by consistent rules.
Good fit when
- You want to set a specific design direction for the agent's interface
- You need tokens, component rules and quality gates for a chosen style
- You want to quickly try different styling directions
Not a fit when
- You need ready code components rather than style rules and tokens
- You already have your own design system with rules
Example request
Style the landing page in the bento direction following this design skill's rulesLimitations
The skills set style rules and tokens, but the agent does the markup and accessibility checks under your control. It is a set of design instructions, not a component library. Choosing a fitting style and matching it to the brand is up to you.
How to disable. Remove the installed design skill folder from the agent's skills directory.
Security check
- The skills provide styling rules and tokens; the agent writes code under your control
README in short
The README presents Awesome Design Skills as a curated registry of design skills for agentic tools such as Claude Code, Cursor and Codex. Each skill ships as a folder with SKILL.md for the agent and DESIGN.md for humans and covers a specific styling direction. Any skill is pulled with a single command, and styles have previews on the site. The set includes dozens of directions from minimal to brutalism and bento. MIT licensed.
FAQ
How does SKILL.md differ from DESIGN.md?
SKILL.md holds agent instructions with tokens and rules, while DESIGN.md is a human-readable statement of intent and implementation notes.
How do I install one style?
Use npx typeui.sh pull with the style name; only the chosen skill is installed.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys