Design & UX skills for Codex
Skills for interfaces that look intentional: a method for distinctive frontend design, UI critiques, design systems and tokens, Figma-to-code handoff, color and type systems, layout grids, landing pages and dashboards, form UX, motion, dark mode, SVG logos and illustrations, and email templates that render everywhere.
curl -fsSL codexskills.dev/install.sh | sh -s -- --category design Installs all 30 into ~/.agents/skills/. Or download the zip.
All 30 Design & UX skills
Each opens the full SKILL.md, example prompts and every way to install it.
-
Brand Guidelines
A brand book anyone can follow without asking -
Color Contrast Accessibility
Measured ratios for every color pair you ship -
Color Systems
Even OKLCH ramps, semantic roles, contrast that passes -
Dark Mode Theming
Right theme on first paint, designed not inverted -
Dashboard Design
Answer the top questions in ten seconds -
Data Visualization Design
Charts that state their point in five seconds -
Design Handoff
Specs engineers can build without a meeting -
Design Systems
A shared UI library teams actually adopt -
Design Tokens
Name roles once, theme every platform from one source -
Email Template Design
HTML email that survives Outlook and dark mode -
Figma to Code
Match the frame using your own components and tokens -
Form UX
Forms people finish on the first try -
Frontend Design
Interfaces with a point of view, not a template -
Generative Art
Seeded algorithms that make keepers, not demos -
Icon Systems
One icon family, crisp, themed and labelled -
Landing Page Design
Every section answers the visitor's next question -
Layout Grids
One spacing scale, edges that line up -
Micro-interactions
Feedback that answers did-it-work in 100 ms -
Mobile UI Patterns
Thumb-first screens that respect the platform -
Motion Design Principles
UI motion that explains, then gets out of the way -
Onboarding and Empty States
From signup to first value in fewer steps -
Responsive Design
Layouts that hold at every width, not three -
SVG Illustration
Hand-written SVG art you can still edit later -
SVG Logo Design
Marks that hold up at 16px and on a billboard -
Typography Systems
A short named type scale that reads well at any width -
UI Copy and States
No blank screens, vague errors or mute buttons -
UI Design Review
Critique backed by screenshots and measurements -
Usability Heuristics
Nielsen-based UX audits with evidence and fixes -
User Flows
Map every path, not just the happy one -
Wireframing
Settle structure before anyone argues about color
No Design & UX skill matches that.
Where to start
Install the ones that match requests you make every week. Name one with $color-contrast-accessibility when you want it for sure; otherwise Codex picks by description.
Start with
- Color Contrast AccessibilityMeasured ratios for every color pair you ship
- Frontend DesignInterfaces with a point of view, not a template
- Brand GuidelinesA brand book anyone can follow without asking
Install a few by name
curl -fsSL codexskills.dev/install.sh | sh -s -- brand-guidelines color-contrast-accessibility 104-line POSIX script. No sudo, no telemetry. Read install.sh
Design & UX FAQ
How do I install every Design & UX skill at once?
Run curl -fsSL https://codexskills.dev/install.sh | sh -s -- --category design to put all 30 in ~/.agents/skills/, or add --project to install them into the current repository's .agents/skills/. You can also download the category zip and unpack it yourself.
Does installing 30 skills slow Codex down?
Hardly. At startup Codex sees only each skill's name and description, a few dozen words apiece, and reads a full SKILL.md only when a task needs it. Install the whole category if the work fits; unused skills cost almost nothing.
Which Design & UX skill should I start with?
Start with Color Contrast Accessibility, Frontend Design, Brand Guidelines. They cover the requests that come up most in this category. Mention one with $color-contrast-accessibility to try it.