I’m building a web application in Cursor and have been using it to create a competitive sales Battle Card.
Functionally, Cursor is doing a good job. It understands the data, comparison logic, components, PDF generation, tests, etc. The problem is visual design.
No matter how detailed I make the prompt, it keeps producing something that looks like a basic developer dashboard: square cards, lots of boxes, flat colours, poor use of whitespace, weak visual hierarchy and very little character.
I’ve specifically asked for things such as:
modern sales-enablement design rather than a database/report look
icons and meaningful shapes
stronger typography and visual hierarchy
traffic-light/status indicators
more interesting use of colour
less reliance on rectangular cards
professionally designed VS/comparison areas
a polished two-page PDF version
examples of exactly how individual sections should look
It will rearrange the content correctly, but the fundamental visual design barely improves. I can tell it that I dislike a particular design and explain why, and the next version often feels like essentially the same design with the boxes moved around.
How are people getting genuinely high-quality UI/UX work from Cursor?
Is the best approach to design one component/block at a time, give it screenshots/reference designs, use a separate design tool first, or use another AI/model specifically for the visual design and then have Cursor implement it?
I’m particularly interested in workflows from people who use Cursor for production React applications, rather than simple landing pages.
Curious to hear which models you typically use. Different models have different strengths theseshift with every new release and some simply have better “taste” than others.
I usually leave it on Auto, as I multi task a lot. Right now I am designing the card block by block, which seems to be working well. small changes seem to make it look better
I prefer to use a dedicated design tool outside of Cursor, first, before handing over for the implementation part, and then keep a design document in the codebase so there is a design system to adhere to.
Otherwise, I think there’s quite a bit of risk that the design starts to erode the deeper I get into an implementation.
But if already well into the work, or it’s someone else’s, I think what you mentioned - making small changes - is the way to go.
One of the two things I use Claude for is “Claude Design”. I find that, while it burns a lot of tokens, it comes up with rather nice results.
The other thing is Claude CoWork, which is actually why I justify the monthly “base level” payment. I tend to have just enough tokens left over each month that I batch up design work to make use of them.
I then tend to screenshot the result, and add that to a cursor agent (attach file → Photo) and tell it to build.
I know that Claude Code is fashionable, but I find that Cursor is stronger at implementation, and Claude stronger at design.
[In operations, we also use Gemini and Deepseek a lot, so I’m firmly not wedded to any particular ecosystem.]
I tried this with ChatGPT, as I have a paid subscription. The mock-ups it creates actually look great, but the problem comes when I attach them to Cursor and say, “This is how I want it to look.” Somehow, what comes back often looks nothing like the design!
I’ve now decided to take a completely different approach and build it block by block — get the header right, lock it down, then move on to the body, footer, etc. It’s a much slower process, but I’m finally starting to see it come together the way I originally envisioned.
This is one of the main features of my app, so I don’t really want to compromise on it. It needs to look and work exactly right.
Why is running on Auto when Multi Tasking my own fault ? Each LLM has it’s own strengths, and changing it for each prompt is counter productive and expensive
Because every model has its own strengths and its own personality. What’s more, you might like a personality that I don’t, and vice versa.
If you set your own behavior rules and create your own subagent cards, you’ll have better control over the results. When you use Auto, you have almost no control. For example, the Cursor team currently believes that their Kimi K3 is well-designed and accurately identifies images based on the support model’s descriptions — but people don’t like that the support model mistakes circles for squares and calls blue “red” (this is literally from my own experience). And I’m almost certain that Auto sides with the Cursor team rather than the users.
I use Composer 2.5, Grok 4.5, Grok 4.6, Kimi K3, Gemini 3.7 Flash and GPT 5.6 Terra for various things, and I know exactly when one of these models activated.