Decision topic

Design or improve a web UI

Figure out whether you need a new interface, a polish pass, a design-system pass, or critique before choosing a UI skill.

Last meaningful review July 21, 2026

Start here

You are trying to make a web page or application interface clearer, more useful, and more credible without becoming a design-tools expert first.

This topic coversnew web UI concepts · existing UI improvement · visual polish · usability critique · design-system alignment

Not this topicbackend architecture · native mobile-only UI · logo-only brand identity · ranking UI skills by taste alone

Choose your scene

Pick the closest situation, not the perfect one.

Each scene hides the noisy marketplace ranking behind one practical recommendation, one optional alternative, and one fallback when a public skill is not the right intervention.

I need a new web UI from a product idea or rough brief.

I know what the page or app should do, but I need the interface designed and implemented.

Decision moment

Choose a generative UI workflow that can turn product intent into structure, copy, visual direction, and code.

Not this

If you already have a working UI and only dislike the surface quality, use the polish scene instead.

Recommended skillSource

frontend-design

It is a broad frontend design workflow, so it fits greenfield web interface creation better than narrow polish or review skills.

Use when: Use it when you want the agent to propose and implement the UI.
Avoid when: Avoid it when you only want critique or a small component-library correction.
Signal: skills.sh all-time: 685,673 installs; official Anthropic skill source.

Recommended skillSource

web-design-guidelines

It is a strong guardrail skill for design quality and frontend taste, especially in Vercel/React contexts.

Use when: Use it as a companion guideline when your own app stack is already set.
Avoid when: Avoid treating it as a complete product-design workflow by itself.
Signal: skills.sh all-time: 477,326 installs; official Vercel Labs source.

Build

Project-local UI brief

When the product direction is unclear, a local brief and acceptance criteria matter more than the skill choice.

Use when: Use this when stakeholders have not agreed on the screen goal.
Avoid when: Do not keep comparing UI skills before the product problem is stated.
Signal: No public skill can know your product strategy, brand constraints, or conversion goal by default.

I have a working UI, but it looks generic or unprofessional.

The page works, but it feels template-like, visually weak, or hard to trust.

Decision moment

Choose a skill that improves visual hierarchy, spacing, color, typography, and composition without changing the product goal.

Not this

If the issue is flows, information architecture, or missing behavior, use the usability scene.

Recommended skillSource

ui-ux-pro-max

It is high-signal for broad UI/UX improvement and appears frequently in SkillsMP UI recommendations.

Use when: Use it when a working interface needs a broad visual and UX improvement pass.
Avoid when: Avoid it if you need a restrained critique with no code changes.
Signal: skills.sh all-time: 276,334 installs; SkillsMP popular source.

Recommended skillSource

frontend-design

It is safer when the polish pass also needs better product copy, layout structure, or component-level implementation.

Use when: Use it for substantive visual redesigns in code.
Avoid when: Avoid it for a one-line CSS cleanup.
Signal: skills.sh all-time: 685,673 installs; official Anthropic skill source.

Adapt

Visual QA checklist

A small page may only need spacing, contrast, and responsive checks.

Use when: Use it for small visual regressions.
Avoid when: Do not invoke a full redesign skill for cosmetic patching.
Signal: Manual checklist beats over-broad automation for tiny visual fixes.

I have a UI, but users may not understand what to do.

The interface exists, but I am unsure whether the flow, labels, hierarchy, or actions make sense.

Decision moment

Choose review-first workflows before letting an agent modify files.

Not this

If the visual direction is already the main known problem, use visual polish.

Recommended skillSource

grill-me

It is useful as a critique pattern when you want strong feedback before implementation.

Use when: Use it when you want the agent to challenge weak assumptions and surface decision risks.
Avoid when: Avoid it when you need the agent to produce final code immediately.
Signal: skills.sh all-time: 608,830 installs.

Recommended skillSource

webapp-testing

It helps when usability doubts must be checked in a running browser, not just from code.

Use when: Use it for observable UI behavior and screenshot-backed checks.
Avoid when: Avoid it when no runnable app or browser target exists.
Signal: Official Anthropic skill source.

No skill

User interview or heuristic review

If the problem is user comprehension, a human review or test may be the right next step.

Use when: Use it when the stakes involve real user behavior.
Avoid when: Do not claim a skill has validated user understanding without observation.
Signal: Some usability questions need user evidence, not another agent workflow.

I need the UI to follow an existing component library or design system.

The agent must respect existing tokens, components, routes, and product patterns.

Decision moment

Choose a constraint-heavy workflow that reads local patterns before changing UI.

Not this

If there is no design system yet, start with new UI or visual polish.

Recommended skillSource

figma-create-design-system-rules

It directly maps to extracting and formalizing design-system rules from Figma-oriented workflows.

Use when: Use it when Figma or design-system rules should govern implementation.
Avoid when: Avoid it when the work is pure CSS polish without shared rules.
Signal: OpenAI curated skill source.

Recommended skillSource

react-best-practices

It is a practical companion when the design-system concern is React implementation quality.

Use when: Use it when component structure and framework conventions matter.
Avoid when: Avoid it for non-React stacks.
Signal: skills.sh all-time: 565,985 installs; official Vercel Labs source.

Adapt

Local component rules

Encode tokens, component usage, forbidden patterns, and screenshot examples locally.

Use when: Use it when public skills cannot know your design system.
Avoid when: Do not expect a public skill to infer private design decisions perfectly.
Signal: Project-specific UI rules are durable local context.

Why this topic exists

skills.sh shows frontend-design, web-design-guidelines, ui-ux-pro-max, and related UI skills among high-install agent skills, while SkillsMP contains many near-duplicates and language/path variants that should not be exposed as separate user choices.

skills.sh: frontend-design from anthropics/skills has 685,673 installs in the all-time leaderboard snapshot.
skills.sh: web-design-guidelines from vercel-labs/agent-skills has 477,326 installs.
SkillsMP and GitHub source inspection show many UI duplicates; scene fit should precede popularity.

Still unsure?

Describe the job in your own words.

Request a topic or scene ↗