The best Codex skills for UI design.

Out of the box, Codex designs competent but familiar screens. Design skills give it taste: a point of view on typography, spacing, and layout. These are the skills and plugins worth knowing, what each one is good at, and how to install it.

Updated November 1, 2026 · 7 min read

What a design skill actually does

A skill is a set of instructions Codex loads when a task calls for it. A design skill typically tells Codex which fonts and type scales to use, how much whitespace to leave, which layout patterns to avoid because they look templated, and how to check the result. The model is the same; the brief it works from is much better.

Most skills below are distributed as Codex plugins, so one install adds a whole set. Start a new Codex session after installing so the skills load, then mention one with $ followed by its name, or let Codex pick it when your request matches.

1. Taste Skill (design-taste-frontend)

Best for: landing pages, marketing sites, and redesigns that should not look AI-generated.

Taste Skill is an open-source, MIT-licensed skill by Leonxlnx and one of the most popular design skills on GitHub. Its main skill, design-taste-frontend, works from a client brief, picks one of 20 researched art directions, finds open-licensed photos with credits, and checks the result in a browser at three widths. Version 2.1 extends it to dashboards and app screens. It needs Node.js 22 or later and Chrome, Edge, or Chromium.

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

2. Style skills: soft, minimalist, and brutalist

Best for: when you already know the look you want.

The same author keeps earlier, single-style skills in a separate collection. Each one runs only when you call it by name:

high-end-visual-design: calm, polished UI with gentle contrast, open spacing, and spring-based motion.
minimalist-ui: editorial product UI with a restrained palette and clean structure.
industrial-brutalist-ui: stark Swiss typography, sharp contrast, and experimental layouts.
gpt-taste: a stricter variant tuned for GPT models and Codex, with more layout variation and bolder motion.

codex plugin marketplace add Leonxlnx/taste-skill-classics
codex plugin add taste-skill-classics@taste-skill-classics

3. Image-first skills

Best for: exploring a visual direction as pictures before writing any code.

These skills ask the agent to generate design images first. imagegen-frontend-web creates one image per landing page section, imagegen-frontend-mobile creates consistent sets of app screens, and image-to-code generates the images, studies them, and then builds the page to match. They need an agent that can generate images.

codex plugin marketplace add Leonxlnx/imagegen-skills
codex plugin add imagegen-skills@imagegen-skills

4. Anthropic’s frontend-design skill

Best for: a short, general-purpose nudge toward intentional design.

Anthropic publishes frontend-design in its open anthropics/skills repository under the Apache 2.0 license. It gives guidance on aesthetic direction and typography, and on choices that do not read as templated defaults. It was written for Claude, but it uses the same SKILL.md format, so you can copy the frontend-design folder into ~/.agents/skills to use it in Codex.

5. The Figma plugin

Best for: teams whose designs and design system live in Figma.

OpenAI’s plugin catalog includes a Figma plugin covering Code to Canvas, Code Connect, and design system rules. Browse it from the Plugins Directory, or run /plugins in the Codex CLI.

Where Codex Design fits

Codex Design, our plugin, is not a style skill. It gives Codex a canvas: screens and reference images side by side, with visual editing of fonts, colors, and spacing. It works alongside any of the skills above. Let a taste skill shape the design, then compare the directions it produces on the canvas. Install Codex Design with one prompt.

Write a skill for your own design system

The best design skill is often your own. If your product has a palette, fonts, and components, write them down once and every screen Codex designs will follow them. Save this as .agents/skills/acme-ui/SKILL.md in your repository:

---
name: acme-ui
description: Acme’s visual design rules. Use when designing or reviewing any Acme screen, page, or component.
---

# Acme UI

## Foundations
- Colors: ink #1F2430, accent #3B5BDB, surface #F7F8FA. No other hues.
- Type: Inter. Body 16px/1.5, headings 600 weight, never more than 3 sizes per screen.
- Spacing: multiples of 8px. Cards use 24px padding and 12px radius.

## Components
- Primary buttons are solid accent, one per screen.
- Forms put labels above fields, never placeholders as labels.

## Before you finish
- Check contrast meets WCAG AA.
- Check the layout at 390px and 1440px wide.

Keep the description specific. Codex decides when to use a skill from its description, so “Use when designing or reviewing any Acme screen” works better than “Design rules”.

Tips

Use one style skill at a time. A minimalist skill and a brutalist skill give conflicting instructions.
Call the skill by name when it matters, for example $minimalist-ui, instead of relying on Codex to pick it.
Read a skill before you install it. Skills are instructions that run with your agent’s permissions, and plugins can add tools and hooks.