How to use the UI Design and Visual Polish agent skill

What the ui skill makes the agent do

The skill is for building or restyling pages, components, and typography. Once it is active, the agent treats interface work as a design task. Before writing code, it works through five direction questions: who uses the surface and in what context, what the aesthetic direction is, what the design signature is, what the hard constraints are, and what the signature micro-interaction is.

When the work is an existing product, the agent looks for sibling components and reuses their container, motion, and typography tokens rather than inventing a new style. For visual complaints or screenshots, it names the specific visual problem and iterates against the rendered result. Generated images and printed documents are routed to other paths or skills.

• Builds new pages, components, or visual systems with a stated point of view.
• Restyles existing screens using the product's own tokens and components.
• Reviews a screenshot and names the visual problem before changing code.
• Checks the rendered surface across the relevant viewport states.

Install the ui skill from the ZIP

Download the ZIP for the ui skill from this page and unzip it. The skill is a folder containing SKILL.md and a references folder. Place that folder in one of two locations, depending on how you want to use it.

For a personal skill available across your projects, put it in ~/.claude/skills/. For a skill that only applies to one project, put it in that project's .claude/skills/ folder.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/ (available across projects).
• Project only: .claude/skills/ inside the project folder.
• Claude apps: Settings → Capabilities → Skills, then upload.

Trigger the skill with natural requests

You do not need a special command. Describe the task in plain language and mention the interface work. The skill's description covers building or restyling pages, components, or typography. Requests such as 'build a settings page', 'make this card look good', or 'the font looks wrong in this header' fit its scope.

For visual problems, attach a screenshot. The skill uses screenshots as evidence, so a screenshot with a short description of what feels wrong gives it the most to work with. Requests in Chinese about things looking 很傻, 很怪, 突兀, or 不协调 are also recognised by the skill.

• Build a new page or component with a clear description of its purpose.
• Attach a screenshot and say what feels off, for example 'the spacing is cramped'.
• Ask to add a panel or dialog that matches the existing app.
• Ask for a fix to a font or typography problem.

Examples of useful requests

Specific requests give the agent a direction to lock. Name the audience and context where you can, and point to the existing product if one exists. The agent will ask a short clarifying question only when a missing answer would materially change the result; otherwise it states its assumptions and proceeds.

For a new dialog in an existing app, say so directly. The skill will look for the app's existing dialog or sheet components and reuse them, instead of drafting a new style that does not match.

• 'Add a confirmation dialog for deleting a project. It should match the other dialogs in this app.'
• 'Here is a screenshot of the pricing page. The layout feels cramped on mobile. Fix the spacing and check the narrow viewport.'
• 'Restyle the dashboard header for an analyst audience. Keep our existing color tokens.'
• 'Build an onboarding card component with a single clear accent and keyboard-accessible buttons.'

What the skill needs and what it does not do

The skill needs a working UI codebase or rendered output to check against. Screenshots help a great deal. The quality bar depends on real screenshots and viewports, so a project with no rendered surface gives the skill nothing to verify.

The optional companion is a document typesetting skill, used for print or document layouts. Backend logic and data pipelines are out of scope. The source states that the skill does not run scripts and does not use the network.

• Required: a working UI codebase or rendered output.
• Helpful: screenshots of the current state.
• Optional: a document typesetting skill for reports, decks, resumes, or PDFs.
• Out of scope: backend logic, data pipelines, and shippable print documents.

Safety notes on scripts and network access

The skill is documentation-driven. According to its listing, it runs no scripts and uses no network access. It reads your source files, tokens, and screenshots, and it changes code in your project. Review the diffs it produces like any other code change.

When the agent reads a repository you point it to, it reads the actual theme, token, and stylesheet files rather than reconstructing the UI from memory. Check that the files it reads are the ones you intend it to use.

• No scripts are run by the skill, according to its listing.
• No network use, according to its listing.
• Review every file change before merging.

Tips for better results

Give the agent the current product first. Existing tokens, sibling components, and screenshots settle most design decisions before any guesswork begins. Where the skill finds a reference site or product, it extracts concrete properties rather than copying the name.

Always check a screenshot of the result at more than one width. The skill's own method is to iterate against the rendered output, so plan for a second round if the first render still has a visible problem.

• Point the agent at your theme and token files before asking for a new component.
• Attach a screenshot for any visual complaint.
• Name the viewport sizes that matter, such as mobile width.
• Expect a short clarifying question only when an answer would change the outcome.