Why I Built Decise: A Designer's Frustration with the Code Gap

I've been a designer who codes for over a decade. I've shipped multiple SaaS products — from the initial sketch to the final deploy. And for all that time, I've been annoyed by the same thing.

Design and development are artificially separated.

Figma for design. VS Code for code. Browser DevTools for "wait, why does it look like that?" And then back to Figma to re-explain what you meant, because the handoff lost something in translation. Again.

Every tool in the chain assumes someone else will handle the gap. Figma assumes a developer will interpret the mockup. VS Code assumes you can visualize the output from reading JSX. DevTools lets you tweak CSS, but those changes evaporate when you refresh.

I've always wanted to work in one medium. The actual code. The actual running app. Click things, move things, see the result. No intermediaries.

Then AI made it worse

When tools like Claude Code and Cursor arrived, I was thrilled. I could scaffold entire Next.js applications in minutes. Full routing, data fetching, component structure — done before my coffee got cold.

But then I'd look at the result. And it would be... fine. Functionally correct. Visually mediocre. The kind of layout where everything is technically in the right place but nothing feels right.

The spacing is slightly off. The heading is too close to the card above it. The buttons are the right size but the wrong weight. You know — the 200 small decisions that separate "AI-generated" from "someone cared about this."

And here's the absurd part: I could see exactly what was wrong. I could point at the screen and say "that needs 8 more pixels of padding" and "that element should be to the left of this one." But the only way to fix it was to open the source file, find the right JSX element in a sea of Tailwind classes, mentally map px-4 to actual pixels, change it to px-6, save, wait for HMR, check the result, and repeat.

I was spending more time tweaking AI-generated layouts than it took to generate the entire app.

The realization

One evening, after the third hour of adjusting gap- values and justify- variants, I had the thought that became Decise:

My codebase is already a design tool. It just needs to become visual.

The running app is the design. Every element I see in the browser maps to a JSX expression in a .tsx file. Every visual property — position, spacing, color, size — is a Tailwind class I can read and write. The information is all there. I just couldn't interact with it directly.

What if I could click any element in my running app, see exactly which source file and line it came from, and edit its visual properties through direct manipulation? Drag to reposition. Inspector panel for fine-tuning. And have those changes write back to my actual source files as clean, minimal diffs?

Not a new proprietary format. Not an abstraction layer. Not a design tool that generates code. Just... my code, made visual.

What I built

Decise is a native macOS app that does exactly this.

Open your Next.js project. Decise launches your project, maps what you see on screen back to the source, and renders your app in a live preview. Click any element — it highlights with a selection overlay, and the inspector shows you its current Tailwind classes. Drag it to reposition. Change styles in the inspector. The changes write back to your .tsx files as clean code. HMR refreshes the preview in about 50 milliseconds.

Your event handlers? Untouched. Your state management? Untouched. Your data fetching? Untouched. Decise only modifies layout and styling. The code it writes is the code you would have written — just faster.

I built it in Swift because a visual editor needs to feel instant. Dragging an element should feel like dragging an element — not like dragging a web page that's pretending to be an element. Native performance matters here in a way it doesn't for most developer tools.

What this means for the way we work

I think we're at an inflection point. AI can generate the structure of an app in minutes, but the visual layer — the part that makes software feel like someone gave a damn — still needs a human eye and human taste.

The tools for that human refinement step shouldn't require reading code. They should let you work directly with what you can see.

That's what Decise is. Not a replacement for your code editor. Not a replacement for AI code generation. A new layer between them — where you take what AI built and make it yours.

Your codebase is already a design tool. Decise just makes it visual.