In this post, I’ll show you how I use Cursor Agent Mode to refine UI and polish tests — fast, visually, and interactively.#ai #cursor #ui #refactoring

It’s a natural follow-up to our scaffolding with Claude Code, and a powerful tool for targeted improvements. Check out AI Architecture and Scaffolding with Claude Code in the AI development Mindset: Coach series. We continue from our scaffolding the project with help from Claude Code.

UI Edits with Screenshots

Cursor’s multi-modal capabilities are extremely undervalued. Screenshots help your coworkers understand what you’re aiming for, and Cursor is no exception! Here’s my typical workflow:

1. Take a screenshot of the current app
2. Take a screenshot of the design
3. Prompt with specific changes:

   “Make the app look more like the design. Flatten the form header, move the input to the left, and use the brand color for the background.”

I iterate with more screenshots and feedback:

Refactoring and Test Updates

Cursor’s also great for test updates and refactoring. I often ask:

“Make @this_test.exs work like @my_gold_standard_test.exs. Share test setup. Reduce file length, keep coverage.”

Just like UI edits, focused prompts and examples help. When context matters (e.g., not using Mox in Elixir tests), Cursor Rules let you inject project-specific instructions. If you want a deep dive, this article (You are using Cursor AI incorrectly…) and this case study were really impactful to me.

The Review Process

As with Claude Code, I review each diff like a PR. Feedback goes directly into the prompt. I stage the changes I like. I commit once a full thought is resolved. Cursor’s addition is the ability to reference Rules, and Notebooks where you can store extra context and even directly reference functions by starting to type @function_name and it will auto suggest as you type.

Knowing When to Stop

Eventually, you’ll hit the wall: if the change is small, tedious, or personal-style-based, stop asking AI and do it yourself. There are diminishing returns as code changes get smaller. More specific changes need more description and start changing fewer and fewer lines, you will cross a point where you need to type more than the the changes that you know how to code.

Stop when your explanations are getting longer and changes are getting smaller.

Heuristics for Success

1. Use Visual Context
   • Screenshots are worth a thousand words
   • Show before and after states
   • Reference existing patterns
2. Keep Prompts Focused
   • One change at a time (I cheat with numbered lists)
   • Be specific about what to change
   • Reference existing code
3. Know Your Limits
   • Stop when prompts get too long
   • Switch to manual changes for small tweaks
   • Use AI for what it’s good at (css)

The Bottom Line

Cursor shines when you need to turn good-enough code into nearly-production-ready polish—without writing every line yourself. It’s uniquely powerful for UI work with images. and test refinement for UI, where visual context and pattern matching are key. If you liked this series, send word! I’m excited to share more if it’s valuable to folks out there (or future me as well).

Praise the editor: Sam Roberts