Codex

5 essential UI design skills for Codex

Generate design tokens, audit components, translate Figma to code, and apply brand consistency without losing visual integrity.

5 skill files — download free

How to install

Install into Codex

Run the command below for any skill, or drop the .md directly into the path and restart Codex.

npx skills add <repo-url> --skill <skill-name> -g -a codex -y

Skill files

Install into Codex · Drop in your project root

Skill .md

Frontend Design

frontend-design.md

UI/UX standards: design tokens, component patterns, spacing systems, accessibility heuristics. Anthropic's official base layer.

Skill .md

Theme Factory

theme-factory.md

Apply professional font and colour themes to artifacts (slides, docs, reports, landing pages). Ten pre-set themes plus custom.

Skill .md

Brand Guidelines

brand-guidelines.md

Apply brand colours and typography consistently across every artifact your tools produce.

Skill .md

Figma Implement Design

figma-implement-design.md

Translate Figma designs into production code with pixel-perfect accuracy via Figma MCP. The category-defining design-to-code skill.

Skill .md

Awesome Design MD

awesome-design-md.md

Generate UI from real design system tokens of 55+ brands (Apple, Stripe, Vercel, Cursor, Spotify, Linear). Build me a page like Stripe works literally.

Same use case, different tool

Claude Code

5 essential UI design skills for Claude Code

0 prompts · 5 skill files

Cursor

5 essential UI design skills for Cursor

0 prompts · 5 skill files

Gemini CLI

5 essential UI design skills for Gemini CLI

0 prompts · 5 skill files

← Back to resource library