Your AI-Built Websites Look Identical to Everyone Else’s. These 10 Skills Fix That — Permanently.

Every AI-generated website in 2026 looks the same.

Purple gradient. Inter font. Four cards in a grid. A faint hover state if you’re lucky. Anyone can identify a vibe-coded page from across the room.

The problem isn’t the AI. The problem is that every Claude Code and Codex user is pulling from the same default aesthetic training data — and getting back the same median output.

The people shipping visually distinctive products right now are not prompting more cleverly. They’re loading SKILL.md files into their agents before a single line of code gets written — forcing the model to obey explicit design constraints instead of defaulting to generic.

Here are the 10 skills worth installing. The people who already have them are shipping things you’d actually want to use.

1. frontend-design (anthropic) + frontend-skill (openai)

The mandatory starting point. 277,000+ installs as of March 2026.

You don’t get to skip this one.

Anthropic’s frontend-design skill explicitly bans Inter, Roboto, Arial, and Space Grotesk before your agent writes a single component. OpenAI’s parallel skill for Codex does the same — and adds hard guardrails against generic SaaS card grids, carousels without narrative purpose, and app UIs built entirely from stacked cards.

What it does:

• Bans the fonts responsible for 90% of look-alike AI-coded sites
• Forces the model to commit to an explicit aesthetic direction up front — brutalist, editorial, retro-futuristic, maximalist
• Codifies specific failure modes to reject: carousels without narrative, generic card grids, stacked-card app UIs
• Adds litmus checks: single visual anchor per screen, scannable headlines, motion only where it earns its place

claude plugin add anthropic/frontend-design

NB: banning fonts is a band-aid for a training-data problem, not a design philosophy. this is still the right starting point because it’s the floor everyone agrees on. if you haven’t installed this, your AI-coded site has Inter on it right now. guaranteed.

2. impeccable

Most design skills collapse everything into a single vocabulary. A landing page and a dashboard live by opposite rules. Impeccable is the only skill that actually respects that distinction.

Two modes — brand (marketing, portfolios, editorial) and product (app UI, dashboards, internal tools) — with 23 commands that adjust based on which context you’re in. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.

What it does:

• Runs in two distinct modes: brand (marketing/editorial) and product (app UI/dashboards)
• 23 commands in one skill: typeset, colorize, animate, layout, bolder, quieter, delight
• 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

npx skills add pbakaus/impeccable

NB: the brand-vs-product split is how seniors actually think. a marketing site and an internal admin tool need opposite things. most skills pretend they don’t. the people shipping polished work know the difference. now you do too.

3. figma implement design

For when the Figma file already exists and you need faithful translation — not riffing.

This is the skill that closes the gap between what your designer approved and what your agent actually ships. Every pixel that diverges from the Figma file is a credibility problem. This skill is the fix.

What it does:

• Translates Figma files into production code that respects your existing design system
• Handles every component state (hover, selected, empty, loading) without separate prompts
• Pairs natively with Playwright to verify visual fidelity across every viewport size
• Reduces the gap between design intent and shipped UI to near zero

NB: the gap between design intent and shipped UI is where junior teams lose all their craft. pair this with Playwright and you have an automated reviewer that never misses a regression.

4. playwright / webapp-testing

The single highest-leverage skill in this entire list. Everything else is input. This one verifies output.

With Playwright wired in, your agent opens the app in a real browser, screenshots every page, compares implementation against your reference designs across viewport sizes, and iterates on layout and behaviour until the result matches — without you touching anything.

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 — no manual review loop
• Verifies state transitions, navigation flows, and responsive breakpoints

NB: without a visual feedback loop, your agent is blind. it generates code and hopes for the best. with playwright, it grades its own work and fixes its own failures. this is the difference between an agent that tries and an agent that ships.

5. designer skills collection (owl-listener)

63 design skills. 27 commands. 8 plugins. One install.

Covers research, systems strategy, UI, interaction design, prototyping, design ops, and the unglamorous everyday work — writing rationale, building case studies, generating dev handoff specs. Commands chain into full workflows: /discover runs a complete research cycle, /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 into full workflows — /discover, /strategize, /handoff
• Generates dev handoff packages with measurements, behaviours, edge cases, and QA checklists
• Scaffolding for writing design rationale and building case studies — the parts juniors skip

/plugin marketplace add Owl-Listener/designer-skills

NB: strong on process, weaker on taste. the value is in the unglamorous parts — handoff specs, rationale writing, QA checklists. juniors skip these. seniors live by them. if you’re skipping them, you’re producing output that only looks finished.

6. theme-factory

The simplest skill in this list with the highest-leverage impact on visual consistency.

Creates reusable theme tokens and palettes — the foundational layer that stops your agent from inventing a new hex value for every component it writes. A design system without tokens is just a mood board.

What it does:

• Generates reusable design 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 of truth
• Stops the agent from inventing one-off hex values for every new component

NB: every agent-generated file that hard-codes a colour value is technical debt. every component that picks its own spacing is a consistency problem. this skill prevents both from happening before they start.

7. design process pack (Julian Oczkowski)

7 skills. Full professional workflow from vague idea to accessible, reviewed frontend.

Requirements → design brief → information architecture → design tokens → task decomposition → frontend generation → review. In that order. No shortcuts.

The requirements skill is the critical differentiator: the agent becomes relentless, stress-testing your brief with 20+ minutes of questions before a single line of code gets written. That 20 minutes is the point.

What it does:

• 7 skills covering the full flow: requirements, design brief, IA, tokens, task decomposition, generation, review
• Requirements skill runs 20+ minutes of interrogation 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: juniors prompt-first. seniors spec-first. every hour you save by skipping requirements, you spend three times over in revisions. this skill enforces the discipline that experienced designers carry in their heads.

8. composio skill

Connects your agent to the 1,000+ apps your design work actually lives in — GitHub, Slack, Notion, Figma, Linear, and more.

The agent can pull assets and specs directly from Figma, sync tokens to Linear, and post review screenshots to Slack — without you manually stitching across tools.

What it does:

• Connects Claude Code and Codex to 1,000+ apps via the Composio CLI
• 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
• Posts review screenshots and progress updates to Slack automatically

npx @composio-dev/cli add composio-skill

NB: design rarely lives in one tool. seniors spend half their time stitching across figma, notion, linear, and slack. every hour on tool-switching is an hour not spent on actual design thinking. this skill automates the stitching.

9. excalidraw diagram skill

Narrow scope. Exceptional output quality. No substitutes.

Most agent-generated diagrams are screenshots you’d redraw yourself. This skill generates actual .excalidraw files — shareable, editable, version-controlled — that open natively in Excalidraw.

What it does:

• Generates Excalidraw-format diagrams that open natively — not screenshots
• Supports flowcharts, system architecture, sequence diagrams, and ER diagrams
• Produces .excalidraw files you can share, edit, and version-control
• Works across Claude Code and Codex via standard SKILL.md format

npx skills add https://github.com/coleam00/excalidraw-diagram-skill --skill excalidraw-diagram

NB: one skill that produces shareable diagrams beats ten that produce mermaid charts nobody reads. if your agent is generating diagrams you wouldn’t send to a client, replace it with this.

10. accesslint

The skill nobody installs until after they fail an audit.

Install it before.

Handles contrast checks, semantic HTML review, and colour-only signal detection — the unglamorous work that separates production-ready UI from things that break under real users and fail compliance reviews.

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 rather than after a failed audit

git clone https://github.com/accesslint/claude-marketplace.git
cp -r claude-marketplace/plugins/accesslint/skills/* ~/.claude/skills

NB: the unsexy stuff separates seniors from juniors. nobody installs this until they fail an audit. by then they’ve shipped a dozen regressions. install it before you need it.

end note

Every week you don’t have these skills loaded, your agent is producing the median — and the median is exhausted.

Every Claude Code user without design constraints gets Inter, purple gradients, and four-card grids. It’s not the model’s fault. It’s a defaults problem. These skills fix the defaults.

Install the ones relevant to your workflow.

The people who already have them are shipping things worth looking at.