Design and frontend skills for coding agents
Skill packs that help a coding agent produce better interfaces: layout, typography, color, motion and UX review. Ranked by GitHub stars.
10 packs are listed for design and frontend. UI UX Pro Max suits developers who build interfaces with a coding agent and want style, color and font choices matched to the product type. Taste Skill suits front-end builders who are tired of generic gradient-and-card landing pages from an agent. Archify suits engineers who need an architecture or sequence diagram that stays editable as JSON.
Packs checked on . Stats update every day.
Skill packs compared
How to choose
Start with one pack
Design packs overlap. Each one you add is more instruction text for the agent to read, and two packs can give conflicting direction.
Check what it runs
Some packs are plain instructions. Others ship scripts, hooks or a binary. Each page lists this.
Match your agent
Install steps differ by agent. Each page lists the agents the maker names.
Questions
Can I use more than one design and frontend skill pack at once?
Yes, but start with one. The agent picks a skill by its description, and packs that cover the same job can compete or give conflicting instructions.
Do design and frontend skills work without Claude Code?
Most do. Skills use an open format that Codex, Cursor, Gemini CLI and other agents also read. Each skill page lists the agents the maker names and the install command for each.