Skip to content
mcp/skillhub

Agent Skill

UI Design skill

ui-designuizze/uizzeskills/ui-design/SKILL.md

Design, build, or improve web and mobile interfaces using real product examples from UIZZE’s 800,000+ web and iOS screens. Use for UI design, UX design, frontend or web design, mobile app UI, responsive layouts, design systems, redesigns, visual polish, interface critique, and requests like “make this UI better.”

65MIT

always on

74 tokname + description

once used

644 tokSKILL.md body

bundled files

1543 KB

repo stars

65GitHub

Install the UI Design skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/uizze/uizze --skill ui-design

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/uizze/uizze.git /tmp/uizze
mkdir -p ~/.claude/skills
cp -R /tmp/uizze/skills/ui-design ~/.claude/skills/ui-design

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description74 tok
When the agent uses itThe SKILL.md instructions644 tok
Only if opened15 bundled files (43 KB)varies

Until it is used, ui-design costs about 18× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 12 skills from uizze/uizze would load 1,205 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Uizze UI Design
  • Work from the product
  • Select the workflow
  • Optional Uizze evidence
  • Finish

More skills from uizze/uizze

All skills in this repo
  1. uizze-uiuizze/uizze

    The official Uizze skill for building and improving UI/UX. Work with your project's code and assets, and use uizze.com for real app examples, design systems, licensed fonts, icons and interaction resources.

    134k49 tok idle · 972 in use
  2. image-to-uiuizze/uizze

    Recreate an image, screenshot, or mockup as a 1:1 UI implementation. Match the reference rather than redesigning it, then render and compare the result to correct visible differences.

    60k43 tok idle · 563 in use
  3. anti-ui-slopuizze/uizze

    Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".

    65122 tok idle · 883 in use
  4. ui-radaruizze/uizze

    Find and compare real UI examples from UIZZE’s 800,000+ web and iOS screens. Use for UI inspiration, UI research, design references, comparable apps, user flows, layouts, navigation, components, interaction states, and product patterns before designing or redesigning an interface.

    6563 tok idle · 959 in use