If you've done any design with Claude Code or Codex, whether a dashboard or a landing page, they will look almost identical. Purple and white gradient, Inter front, same colour palette.
Four cards in a grid. A faint hover state if you're lucky. And it is simply impossible to ship something so atrocious. At this point, everyone can identify vibe-coded web pages apart.
The result is the same: every prompt produces the median, and the median is exhausted.
So what's the solution?
Skills, they're SKILL.md files that ship with both Claude Code and Codex, loaded into context when relevant, and they override the model's default aesthetic instincts with explicit constraints.
They force the LLMs to obey guidelines so you can reliably generate websites with your brand palettes and designs.
Below are 10 skills I have personally used that are worth installing in your coding agent, whether it's Claud Code or Codex.
1. frontend-design (anthropic) and frontend-skill (openai)
the canonical starting point on both sides. Anthropic's version has 277,000+ installs as of March 2026 and explicitly bans Inter, Roboto, Arial, and Space Grotesk. openai's parallel skill for Codex was published alongside GPT-5.4 with similar guardrails: no generic SaaS card grid as the first impression, no carousel without narrative purpose, no app UI made of stacked cards instead of a real layout.
What it does
Bans overused fonts (Inter, Roboto, Arial, Space Grotesk) before any code is written
Forces the model to commit to an explicit aesthetic direction up front — brutalist, editorial, retro-futuristic, maximalist
Codifies failure modes to reject: carousels without narrative, generic SaaS card grids, app UIs built from stacked cards
Provides litmus checks — single visual anchor per screen, scannable headlines, motion only where it adds hierarchy
💡NB: banning fonts is a band-aid for a training-data problem, not a design philosophy. seniors know taste comes from understanding constraints, not from a blocklist. still the right starting point because it's the floor everyone agrees on. install: `claude plugin add anthropic/frontend-design` / `frontend-skill` inside codex.
2. impeccable
Most design skills, including Anthropic's own frontend design, collapse everything into a single vocabulary, but a landing page and a dashboard live by contradictory rules.
Impeccable runs in two modes (brand and product) with commands like typeset, colorize, bolder, quieter that adjust based on which one you're in. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
What it does
Runs in two distinct modes: brand (marketing, portfolios, editorial) and product (app UI, dashboards, internal tools)
Bundles 23 commands in one skill:
typeset,colorize,animate,layout,bolder,quieter,delightShips with 27 deterministic anti-pattern detection rules across typography, colour, layout, and motion
Works across Claude Code, Cursor, Codex CLI, and Gemini CLI without separate configs
💡NB: the brand-vs-product split is exactly how seniors actually think. a marketing site and an internal admin tool need opposite things, and most skills pretend they don't. one of the few that respects the distinction. install: `npx skills add pbakaus/impeccable`.
3. Figma implement design
for when the Figma file already exists, and you want faithful translation instead of riffing.
On Codex, it ships as figma-implement-design. In Claude's code, there's a parallel public Figma skill that gives Claude a more structured way to move from design to implementation, keeping the gap between what's designed and what's built as small as possible.
What it does
Translates Figma files into production code that respects your existing design system
Handles multiple states per design (hover, selected, empty, loading) without separate prompts
Pairs natively with Playwright to verify visual fidelity across viewport sizes
Reduces the gap between what was designed and what gets shipped
💡NB: the gap between design intent and shipped UI is where junior teams lose all their craft. anything that closes it is high value. pair with playwright for verification.
4. playwright / webapp-testing
With playwright wired in, Codex can open the app in a real browser, compare the implementation to your screenshots for different screen sizes, and iterate on layout or behaviour until the result is closer to the target.
Claude Code runs the same loop through MCP: it opens a headless browser, navigates the application, takes screenshots of every page, and then runs the design review skill against those screenshots autonomously.
What it does
Opens the app in a real headless browser and screenshots every page automatically
Compares implementation against reference screenshots across multiple viewports
Iterates on layout and behaviour until visuals match the target without manual review
Verifies state transitions, navigation flows, and responsive breakpoints
NB: the visual feedback loop is the single highest-leverage thing you can give an agent doing design work. without it, you're trusting a blind model. with it, the model can grade itself. nothing else in this list comes close.
5. designer skills collection (owl-listener)
63 design skills and 27 commands organised into 8 plugins covering research, systems, strategy, UI, interaction design, prototyping and testing, design ops, and the everyday toolkit stuff like writing rationale and building case studies.
Commands chain skills together so /discover runs a full research discovery cycle, /strategise builds a UX strategy from vision through to metrics, and /handoff generates a developer handoff package with measurements, behaviours, edge cases, and a QA checklist.
What it does
63 skills across 8 plugins: research, systems, strategy, UI, interaction, prototyping, design ops, toolkit
27 commands chain skills into full workflows —
/discover,/strategize,/handoffGenerates dev handoff packages with measurements, behaviours, edge cases, and QA checklists
Encodes scaffolding for writing design rationale and building case studies
💡NB: strong on process, weaker on taste. the value is in the unglamorous parts (handoff specs, rationale writing, QA checklists) that juniors skip and seniors live by. install: `/plugin marketplace add Owl-Listener/designer-skills`.
6. theme-factory (composio's awesome-codex-skills)
Creates reusable theme tokens and palettes. The cleanest way to stop the agent from inventing one-off colour values for every component.
What it does
Generates reusable theme tokens — colours, spacing scales, typography ramps
Outputs CSS variable systems with consistent naming conventions
Produces palette variations (light, dark, high-contrast) from a single source
Stops the agent from inventing one-off hex values for every new component
NB: theme tokens are foundational. A system without them is just a mood board. Surprised this skill isn't more widely installed.
7. Design process pack (Julian Oczkowski)
7 skills that follow a professional design workflow from vague idea to a working, accessible, reviewed frontend. requirements gathering → design brief → information architecture → design tokens → task decomposition → frontend generation → review.
The requirements skill is the unglamorous hero: the LLM becomes relentless and stress-tests your requirements before a single line of code gets written, and you might spend 20 minutes answering questions, which is the point.
What it does
7 skills covering the full flow: requirements gathering, design brief, IA, tokens, task decomposition, generation, review
Requirements skill stress-tests your input with 20+ minutes of questions before any code is generated
Design review skill runs autonomously when paired with Playwright MCP
Output mirrors a real professional design workflow rather than a vibe-coded prompt loop
💡NB: the requirements-first ordering is the whole game. Juniors prompt-first, seniors spec-first. This skill enforces the discipline that experienced designers carry in their heads.
8. Composio Skill
Connects Codex to apps like GitHub, Slack, and Notion. Let it work beyond your local repo and across the apps you already use. Useful when your work lives across tools, not just inside the repo.
For designers, this means the agent can pull assets and specs from Figma, sync tokens to Linear, and post review screenshots to Slack.
What it does
Connects Codex and Claude Code to 1000+ apps via the Composio CLI — GitHub, Slack, Notion, Figma, Linear, and more
Pulls Figma assets and design specs directly into the agent's context
Syncs design tokens across Linear, Notion, and your repo without manual copy-paste
Post review screenshots and progress updates to Slack channels automatically
NB: not a craft skill, but design rarely lives in one tool. seniors spend half their time stitching across figma, notion, linear, and slack. anything that automates that stitching frees up time for the actual thinking.
9. Excalidraw diagram skill
Most agent-generated diagrams are placeholder garbage. This one isn't. The Excalidraw skill generates a diagram you can actually share, not a placeholder you'd redraw yourself.
What it does
Generates Excalidraw-format diagrams that open natively in Excalidraw, not just screenshots
Supports flowcharts, system architecture, sequence diagrams, and ER diagrams
Produces
.excalidrawfiles you can share, edit, and version-controlWorks across Claude Code and Codex via the standard SKILL.md format
💡NB: narrow scope, high quality output. a senior would rather have one skill that produces shareable diagrams than ten that produce pretty mermaid charts no one reads.
install:
npx skills add https://github.com/coleam00/excalidraw-diagram-skill --skill excalidraw-diagram10. accesslint
High skill quality, focused scope. Useful for any UI/UX engineer who takes accessibility seriously, design system teams that need to enforce WCAG compliance, and developers preparing for accessibility audits. handles contrast checks, semantic HTML review, and colour-only signal detection.
What it does
Colour contrast checks against WCAG AA and AAA thresholds
Semantic HTML review — heading hierarchy, ARIA usage, form label associations
Detects colour-as-only-signal patterns in status indicators, links, and error states
Flags accessibility regressions before shipping instead of after a failed audit
**Senior take:** the unsexy stuff that separates seniors from juniors. Nobody installs this until they fail an audit, and by then, they've shipped a dozen accessibility regressions. Install it before you need it.
install:
git clone https://github.com/accesslint/claude-marketplace.git && cp -r claude-marketplace/plugins/accesslint/skills/* ~/.claude/skillsFAQs
Why does every AI-generated landing page look the same?
It's a training-data problem the article calls "distributive convergence" (Anthropic's term) or "high-frequency patterns from training data" (OpenAI's). Models default to the median of what they've seen — Inter font, purple-on-white gradients, four-card grids, faint hover states — because that's what dominates their training corpus. Skills work around this by injecting explicit constraints into context that override those defaults: banning specific fonts, forcing a committed aesthetic direction, or rejecting failure modes like generic SaaS card grids before any code is written.
Which design skill should I install first if I only pick one?
Playwright / webapp-testing — it scored 10/10 in the article, and the reasoning is simple: the visual feedback loop is the single highest-leverage thing you can give an agent doing design work. Without it, the model is shipping blind, and you're doing a manual review.
What's the difference between frontend design and Impeccable—should I run both?
Frontend-design (Anthropic) and its Codex twin frontend-skill (OpenAI) are the floor — they ban overused fonts, force an explicit aesthetic commitment, and codify failure modes.
Which design skills should a senior designer prioritise, and which are overrated?
The article's senior-lens scoreboard: install first — Playwright/webapp-testing (10), Impeccable (9), Accesslint (9), Oczkowski's design process pack (9). These are the ones that change output even when nobody's prompting carefully — feedback loops, brand/product split, accessibility discipline, and requirements-first ordering. Solid mid-tier — theme-factory (8), Owl-Listener's collection (8), Figma implement-design (8). Useful but band-aid-shaped — frontend-design (7), Composio Connect (7), excalidraw (7). The senior take throughout: aesthetic-preset skills compound across a thousand prompts only when they encode discipline (constraints, feedback loops, process). Skills that just decorate output read as band-aids.