I was building a dashboard. The card layout was almost right — just needed a bit more breathing room, a tighter border radius on the inner rows, and the label font to feel slightly lighter. Three small things.
I typed the description into Cursor. It came back with 180 lines rewritten. Every sx prop touched, four components restructured, a new wrapper div appeared. The layout looked the same. The diff was enormous.
I hit Ctrl+Z and went back to staring at the code.
That was the moment I stopped thinking of AI as a universal tool and started thinking of it as a specific tool — an exceptionally good one, for specific things.
What AI is actually good at
AI editors are brilliant at the parts of React development that are fundamentally about thinking: data flow, state architecture, API wiring, conditional rendering logic, form validation, accessibility semantics, refactoring towards patterns. These are tasks where the right answer involves reasoning across the whole codebase, holding context, understanding intent.
When I ask an AI to "add optimistic update to this mutation handler" or "extract this form logic into a custom hook" — I get back something genuinely useful, usually on the first try.
What AI is genuinely bad at
UI polish is a different category. Not because AI can't read CSS — it clearly can. But because getting a layout exactly right is an iterative, visual, trial-and-error process. You need to see the result immediately. You need to tweak a value, check it, tweak again.
The AI-for-UI workflow is fundamentally broken:
- Describe what you want in words (already lossy)
- Wait for the model to generate a response
- Review 200 lines of diff
- Wait for the build
- See the result — probably not right
- Repeat, burning tokens each round
The bigger the model's context about your component, the more it rewrites. It doesn't know how to make a surgical one-property change, because its job is to understand and regenerate, not to minimally diff.
AI is expensive at precision. It's cheap at breadth. UI tuning needs precision. Logic needs breadth. Match the tool to the task.
Where each tool belongs
AI Editor (Cursor / Claude / Copilot)
- Component architecture and refactoring
- State management and data flow
- API integration and async logic
- Accessibility and semantics
- Test generation
- Large-scale rewrites and migrations
CrossUI Studio
- Spacing, sizing, layout tweaks
- MUI
sxand responsive breakpoints - Color, typography, visual hierarchy
- Deep-layer UI drill-down and isolation
- Rapid iterative visual feedback
- Surgical one-property diffs
Notice there's no overlap. That's not accidental — these tools solve genuinely different problems. The goal was never to have one tool do everything. It was to cover the full surface of React development without gaps.
The pairing in practice
Since we shipped Local Folder access in v0.9.6, the workflow is concrete: point both your AI editor and Studio at the same folder on your machine. They work on the same files simultaneously. One writes logic, the other tunes UI. The diff in Git is always clean because every change is surgical.
Step 1 — AI builds the component
Cursor or Claude writes the data-fetching hook, the conditional render, the event handlers. Full context, full reasoning, exactly what it's good at.
Step 2 — Studio opens the same folder
No upload, no sync, no token. Studio reads the files directly off disk — the canvas shows your component live.
Step 3 — You tune visually
Adjust spacing, colors, and layout directly on the canvas. The code updates in real-time. One property changed = one property in the diff.
Step 4 — PR lands clean
Logic changes from AI. UI changes from Studio. Both are minimal, reviewable, and traceable. No 200-line rewrites for a border-radius tweak.
What this means for "AI replacing developers"
There's a lot of anxiety right now about AI eating programming jobs. Some of it is warranted — the volume of boilerplate code a developer needs to write by hand has dropped dramatically, and it's not coming back.
But the anxiety assumes AI is a single homogeneous capability that scales linearly. It isn't. There are things AI does cheaply and well (reasoning, pattern-matching, generation at scale) and things it does poorly or expensively (precise iterative feedback loops, visual judgment, knowing when to stop).
The developer who understands this boundary — and builds a workflow around it — is faster than the developer who either ignores AI entirely or tries to use it for everything. The job doesn't disappear. It shifts: less time writing boilerplate, more time designing systems and judging quality.
Studio is a bet on that shift. Not a replacement for AI. Not a rejection of it. A tool for the part of your work that AI handles badly — so you can let AI fully own the part it handles well.
If you've been using an AI editor and hitting the same wall on UI iteration — try the pairing. Open Studio, point it at your project folder, and see if the division of labor clicks for you.
No account needed — Guest mode opens a workspace instantly. Or connect a local folder and work on your real files.
About CrossUI Studio — A visual IDE for React & MUI. Code and canvas stay in two-way sync on the same AST: edit code and the canvas updates live; click an element on the canvas, edit its props visually, and the code changes with a surgical one-line diff. No build, no localhost — it runs in the browser, works on your real Git repo or a local folder, with no vendor lock-in.