Ui Ux Polish logo

Ui Ux Polish

Community
Dicklesworthstone
ui-ux-polish

Iterative UI/UX polishing workflow for web applications. The exact prompt and methodology for achieving Stripe-level visual polish through multiple passes.

Overview

PublisherDicklesworthstone
Repositoryagent_flywheel_clawdbot_skills_and_integrations
Skill nameui-ux-polish
Stars
73
Forks
16
Bundled files
Instructions only
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • Self-contained

    Everything the model needs lives in the instructions — no extra files to sync.

  • Open source

    Published by Dicklesworthstone on GitHub. Read the source before you install it.

Installation

Install the Ui Ux Polish AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/Dicklesworthstone/agent_flywheel_clawdbot_skills_and_integrations/tree/main/skills/ui-ux-polish
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/Dicklesworthstone/agent_flywheel_clawdbot_skills_and_integrations.git /tmp/agent_flywheel_clawdbot_skills_and_integrations
mkdir -p .claude/skills
cp -r /tmp/agent_flywheel_clawdbot_skills_and_integrations/skills/ui-ux-polish .claude/skills/ui-ux-polish
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Ui Ux Polish in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Ui Ux Polish on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Ui Ux Polish is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

UI/UX Polish — Iterative Enhancement Workflow

When to Use: This is for when your site/app already works and looks decent and you want to improve it. There's a different approach when it looks bad and needs a complete overhaul.

Key Insight: Something about asking for agreement from the model ("don't you agree?") somehow motivates it to polish things up better. Also, instructing it to separately think through desktop vs mobile leads to much better outcomes.


The Workflow

Overview

  1. App already works and looks decent
  2. Run the polish prompt
  3. Agent makes incremental improvements
  4. Repeat many times (10+ iterations)
  5. Each pass adds small improvements that compound

Why Multiple Passes Work

  • Each time, it tries to make some incremental improvement, even if it's minor
  • These really add up after 10 iterations!
  • Multiple agents can work on this simultaneously
  • Cumulative effect is dramatic

THE EXACT PROMPT — UI/UX Polish

This prompt is used so frequently it's worth putting on a Stream Deck button:

I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way.  Use ultrathink.

Why This Prompt Works

1. Asks for Agreement

The phrase "don't you agree?" engages the model's reasoning about whether improvements are possible, rather than just executing instructions.

2. Separates Desktop and Mobile

"carefully consider desktop UI/UX and mobile UI/UX separately...
hyper-optimize for both separately to play to the specifics of each modality"

This prevents the model from making compromises that work "okay" on both but great on neither.

3. Sets High Standards

References:

  • "world class"
  • "best practices like those used by Stripe"
  • "makes people gasp at how stunning and perfect it is"

These anchors push the model toward higher quality than generic "make it better" instructions.

4. Uses Ultrathink

Extended thinking allows the model to:

  • Analyze the current state thoroughly
  • Consider multiple improvement options
  • Choose the highest-impact changes
  • Think through edge cases

Best Models for This Task

ModelEffectiveness
Claude Code + Opus 4.5Excellent
Codex + GPT 5.2 (High/Extra-High reasoning)Excellent
Gemini CLIGood

Tech Stack Compatibility

This prompt works with:

  • Next.js 16 + React 19 + Tailwind 4
  • Any modern web framework
  • Applications using Framer Motion or similar animation libraries
  • Pretty much anything—it's generic enough to adapt

Iteration Protocol

Single Agent

# First pass
[Run the UI/UX polish prompt]

# Review changes
[Agent makes improvements]

# Second pass
[Run the same prompt again]

# Repeat 10+ times until changes become minimal

Multiple Agents

You can have more than one agent working on UI/UX polish simultaneously:

  • They'll focus on different areas
  • Use file reservations to avoid conflicts
  • Compound improvements faster

When to Use vs. When NOT to Use

USE This Prompt When:

  • App works correctly
  • Basic styling is in place
  • You want to elevate from "decent" to "world-class"
  • Ready for iterative refinement
  • Want to optimize for both desktop and mobile

DON'T Use This Prompt When:

  • App is broken or buggy (fix bugs first)
  • Styling is fundamentally wrong (need complete overhaul)
  • No basic design system in place
  • Starting from scratch

For complete overhauls, use a different approach focused on establishing a design system and component library first.


What the Model Typically Improves

Visual Polish

  • Spacing and padding consistency
  • Typography hierarchy
  • Color contrast and accessibility
  • Shadow and depth effects
  • Border radius consistency
  • Hover/focus states

Interaction Design

  • Button feedback
  • Loading states
  • Transitions and animations
  • Error state handling
  • Empty state design

Mobile Optimization

  • Touch target sizes
  • Responsive breakpoints
  • Mobile-specific navigation
  • Gesture support
  • Performance on mobile devices

Desktop Optimization

  • Keyboard navigation
  • Hover states
  • Multi-column layouts
  • Sidebar navigation
  • Power user shortcuts

Tracking Progress

After each iteration, you might notice:

  • Subtle shadow improvements
  • Better spacing rhythm
  • More consistent typography
  • Smoother animations
  • Better responsive behavior

These small changes compound. An app after 10 passes looks dramatically better than after 1 pass.


Integration with Beads

For systematic UI/UX work, create beads:

bash
br create "Polish homepage UI/UX for desktop" -t enhancement -p 2
br create "Polish homepage UI/UX for mobile" -t enhancement -p 2
br create "Polish dashboard UI/UX for desktop" -t enhancement -p 2
br create "Polish dashboard UI/UX for mobile" -t enhancement -p 2

This lets agents work on UI/UX polish as part of the normal bead workflow.


Complete Prompt Reference

Main Polish Prompt

I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way.  Use ultrathink.

Alternative: General Scrutiny (from agent-swarm-workflow)

Great, now I want you to super carefully scrutinize every aspect of the application workflow and implementation and look for things that just seem sub-optimal or even wrong/mistaken to you, things that could very obviously be improved from a user-friendliness and intuitiveness standpoint, places where our UI/UX could be improved and polished to be slicker, more visually appealing, and more premium feeling and just ultra high quality, like Stripe-level apps.

Tips

  1. Don't skip iterations — Even when changes seem small, keep going
  2. Review changes — Make sure the model isn't breaking things
  3. Test on real devices — Desktop browser != mobile experience
  4. Consider accessibility — WCAG compliance matters
  5. Keep performance in mind — Pretty but slow is bad UX

Frequently asked questions

What does the Ui Ux Polish AI skill do?

Iterative UI/UX polishing workflow for web applications. The exact prompt and methodology for achieving Stripe-level visual polish through multiple passes.

Why use Ui Ux Polish on TypingMind?

Because you install it once and use it with any model. Ui Ux Polish is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Ui Ux Polish in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/Dicklesworthstone/agent_flywheel_clawdbot_skills_and_integrations/tree/main/skills/ui-ux-polish. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Ui Ux Polish?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Ui Ux Polish?

As many as you like. As long as a model supports skills, you can use Ui Ux Polish with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Ui Ux Polish AI skill free?

It is published on GitHub by Dicklesworthstone. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇