About awesome-design-skills
awesome-design-skills is a catalogue of design-style skills installable with typeui.sh, for agents applying different visual directions to interface tasks. Each skill includes agent instructions and a design rationale to guide choices such as color, typography, spacing, and motion.
Key features
- 01Catalogue of 67 design styles
- 02Browse and install skills via CLI
- 03Includes SKILL.md and DESIGN.md
- 04Covers color, typography, spacing, and motion
Use cases
- 01Choose a visual style for an interface task
- 02Install styles such as glassmorphism or editorial
- 03Give an agent consistent design constraints
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/awesome-design-skillsin Claude Code to confirm it loaded.
Bundled filesstub.yaml
Details
From the project READMEawesome-design-skills
Catalogue stub — full registry: bergside/awesome-design-skills
Install a style skill
Browse available skills:
npx typeui.sh list
Install a specific style:
npx typeui.sh pull <slug>
# examples:
npx typeui.sh pull glassmorphism
npx typeui.sh pull brutalism
npx typeui.sh pull claymorphism
npx typeui.sh pull editorial
npx typeui.sh pull bento
Skills install to your local agents directory and are immediately available.
Available styles (67 total)
Aesthetic moods: agentic, ant, artistic, bento, bold, brutalism, cafe, claymorphism, clean, colorful, contemporary, corporate, cosmic, creative, dashboard, dithered, doodle, dramatic, editorial, elegant, energetic, enterprise, expressive, fantasy, fiction, flat, friendly, futuristic, glassmorphism, gradient, immersive, luxury, minimal, modern, mono, neobrutalism, neon, neumorphism, paper, perspective, premium, professional, publication, refined, retro, riso, simple, sketch, skeuomorphism, sleek, spacious, storytelling, vibrant, vintage, and more.
What it does
Each skill in the registry includes:
- SKILL.md — agent instructions: token palette, component rules, accessibility constraints, quality gates
- DESIGN.md — human-readable rationale: brand mission, style foundations, do/don't patterns
The agent reads both files to apply the aesthetic consistently across any UI task — colors, typography, spacing, shadows, motion, tone of voice.
When NOT to use
- Functional design tooling (Figma, tokens, accessibility audits) — use the relevant tool skill
- Brand-specific tokens for a real product — use
design-tokens-skillor author your own DESIGN.md - Material Design 3 / platform HIG — use
material-3-skillorplatform-design-skills