Claude Code, Cursor & Codex skill

The design skill that builds from sites you like

Most design skills give your AI general taste rules. This one gives it your references: the components, colors and fonts you saved with PocketUI, so the UI it builds matches them.

Terminal
# 1. Connect your PocketUI library
claude mcp add pocketui --transport http --scope user https://pocketui.app/api/mcp

# 2. Add the design skill
curl -fsSL https://pocketui.app/skills/pocketui-design/SKILL.md \
  --create-dirs -o ~/.claude/skills/pocketui-design/SKILL.md

Free. Using Cursor or Codex? Install for your agent

The skill reads the library you save with the PocketUI Chrome extension. Join for early access; early supporters get 30% off their first year.

The problem

Why AI-built UI still looks generic

1

Prompts describe taste badly

"Clean, modern, premium" means something different to every model. You get the same rounded cards and purple gradients as everyone else.

2

Taste skills are general rules

Design skills tell the AI to commit to a direction and avoid clichés. Better, but it is still choosing a style for you, not using the one you like.

3

Screenshots get guessed

Paste a screenshot and the AI estimates fonts, spacing and colors from pixels. Close, never exact.

The PocketUI skill builds from the sites you saved instead.

Before you install

First, build your library

The skill is only as good as your references. Save a few sections from sites you like with the PocketUI extension.

  1. 1

    Get the PocketUI Chrome extension

    Early access through the waitlist below. It works in Chrome, Brave, Arc and Edge.

  2. 2

    Save sections from sites you like

    Click a hero, a pricing card or a navbar and PocketUI keeps its real HTML and CSS, with the page's colors and fonts.

  3. 3

    Group them in a folder

    A few saves in a folder like "@Dark UI" is enough. That folder is what the skill builds from.

How it works

Four steps, every time it builds UI

  1. 1

    Finds your reference

    A folder you name ("@Dark UI"), a saved section ("pricing"), or the folder that best matches what you asked for.

  2. 2

    Turns it into a design system

    Colors by role with one accent, the saved fonts and weights, radius, shadows and spacing, written into your Tailwind, CSS variables or shadcn theme.

  3. 3

    Starts from real component code

    A matching save's actual HTML and CSS, converted to your framework, with your content. Never another site's logo, photos or copy.

  4. 4

    Checks against your references

    Fonts, colors, spacing, hover and focus states, mobile. Then it tells you which saves it used.

Claude Code
> Build a pricing page in my @Dark UI style

  get_folder_context("@Dark UI")
    12 saves: 3 components, palette, Inter + JetBrains Mono
  get_item("@Dark UI / Pricing card")
    HTML + CSS, hover states, 16px radius

  Theme: background #0b0b0c, surface #141416,
         accent #7c5cff, radius 16px, Inter
  Built PricingSection.tsx from the saved card,
  checked fonts, colors and spacing against @Dark UI.

Every call is read-only. The skill never changes your library.

Install

One skill, in the agent you use

Connect your PocketUI library once, then add the skill in the format your agent reads.

Claude Code

Terminal
# 1. Connect your PocketUI library
claude mcp add pocketui --transport http --scope user https://pocketui.app/api/mcp

# 2. Add the design skill
curl -fsSL https://pocketui.app/skills/pocketui-design/SKILL.md \
  --create-dirs -o ~/.claude/skills/pocketui-design/SKILL.md

Cursor

Terminal
# In your project. Connect PocketUI first: pocketui.app/agents/cursor
curl -fsSL https://pocketui.app/skills/pocketui-design/cursor/pocketui-design.mdc \
  --create-dirs -o .cursor/rules/pocketui-design.mdc

Codex and other agents

Terminal
# In your project. Connect PocketUI first: pocketui.app/agents/codex
curl -fsSL https://pocketui.app/skills/pocketui-design/AGENTS.md >> AGENTS.md

Connecting PocketUI to ChatGPT, Claude, VS Code, Windsurf or Gemini CLI? Every agent

Compare

How it compares to other design skills

They stack. Use a taste skill for general craft and this one for "make it look like these sites".

PocketUI design skillAnthropic frontend-designUI UX Pro Max
What it gives your agentYour saved components, colors and fonts, as a design systemTaste guidance: commit to a clear aesthetic direction, avoid generic AI looksA searchable database of UI styles, palettes, font pairings and UX guidelines
Uses your own referencesYesNoNo
Reuses real component codeYesNoNo
NeedsThe skill + a PocketUI library (Free plan works)The skillThe skill

In detail: vs frontend-design · vs UI UX Pro Max · best Claude Code design skills

Design skill questions

A skill is a set of instructions Claude Code loads when a task matches it. A design skill tells it how to make interface decisions, so the UI it builds looks intentional instead of generic. The PocketUI design skill makes those decisions from the designs you saved, read through the PocketUI MCP server.

Anthropic's frontend-design skill gives Claude taste guidance: pick a clear direction and avoid generic AI aesthetics. The PocketUI skill gives it references instead: the components, colors and fonts you saved from sites you like. They work well together, one for general craft and one for "make it look like these sites".

Yes. Claude Code uses the SKILL.md file, Cursor uses the same instructions as a project rule (.cursor/rules/pocketui-design.mdc), and Codex and other agents that read AGENTS.md use the AGENTS.md version. All of them need the PocketUI MCP server connected.

Yes. The skill reads your PocketUI library, which you build by saving sections from websites with the PocketUI Chrome extension. The skill itself is free and the MCP connection works on every plan, Free included. Free holds 50 saves in total; Pro and Studio make the library unlimited.

The skill will not fall back to trendy defaults like purple gradients or glassmorphism. It asks you for one or two sites whose style you like so you can save a few sections, or, if you tell it to go ahead, uses a restrained system (one typeface, neutral greys, one accent) and says so.

It reuses structure and style from the sections you saved: layout, spacing, type, colors and component code. It never reuses another site's logo, brand marks, product photos or written copy, and it swaps in your content.

Purple gradient background

Stop recreating designs you've already seen

Join now and get 30% off your first year as an early supporter. A quick confirmation now, then one email on launch day.