Skip to content
Get packs

UI Design and Visual Polish

Builds or restyles UI with a clear design direction, checked against real screenshots and viewports.

Source Download skill
Repository
tw93/Waza
Stars
7,493
Licence
MIT
Files
8 files

What it does

Once installed, the agent treats interface work as a design task rather than a generic template. Before writing code it settles a direction (audience, aesthetic, typography, constraints, signature interaction), reusing the existing product's tokens and components where they exist. For visual complaints or screenshots, it names the specific visual problem and iterates against the rendered result. It routes generated images and printed documents to other paths or skills.

Great for

  • Developers building or restyling web pages and components who want less generic styling
  • Designers who hand off a screenshot and want a grounded visual review and fix
  • Teams adding a new panel or dialog to an existing app that should match its current look

Skip it if

  • Backend logic or data pipelines, which the skill itself says are out of scope
  • Shippable print or long-form documents such as reports, decks, or resumes, which it hands to a document typesetting skill instead
  • Projects with no rendered surface to check, since its quality bar depends on real screenshots and viewports

Try asking

  • “Build a pricing page component that matches the look of my existing app”
  • “This settings panel looks cramped and off, fix the spacing from this screenshot”
  • “Make the onboarding screen look less generic, the font looks wrong”
  • “Add a confirmation dialog that follows the existing modal components in this repo”
Step-by-step guide: how to use UI Design and Visual PolishInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    ui.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip ui.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip ui.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give a screenshot plus the current product or repo so the agent can reuse existing tokens and components instead of inventing a style.
  • Name a specific direction (for example dense editorial or raw terminal) rather than 'clean and modern', or let the agent state an assumption to correct.
  • Ask for a specific viewport or state to check, since the skill verifies against relevant viewport states.

What's inside

  • references/design-data-viz.md
  • references/design-native-motion.md
  • references/design-reference.md
  • references/durable-context.md
  • references/mode-generated-asset.md
  • references/mode-quick-fix.md
  • references/mode-screenshot-iteration.md
  • SKILL.md

Redistributed unmodified from tw93/Waza under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.