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
- 3,616 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills provide styling rules and tokens; the agent writes code under your control
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/awesome-design-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills provide styling rules and tokens; the agent writes code under your control
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.
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.
Discussion
No questions or reviews yet.
Related
SkillsA UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
A prompt-as-code design system for Codex, Cursor and Claude Code: style catalogs, layouts, blocks and personal UI rules.
35 skills for Cursor, Claude and Codex: design systems from HTML and mocks, image generation, plan interviews and handoff.
An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look
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.