Design with code

For our latest project, we don’t have a designer. And we don’t have the budget to hire one either.

In recent years, I’ve received polished Figma prototypes from designers I’ve worked with, so when this project started, signing up for Figma felt like the obvious next step. I dove into the “regular” design tooling first.

It quickly became clear that this was a lot of tool to learn just to design a relatively simple app. Figma is great, but it’s also a discipline in itself.

Next, I tried Figma’s AI features. They were impressive, but the output leaned toward web design frameworks rather than native mobile UI elements. That immediately raised a red flag: I didn’t want to introduce a “design conversion” problem later, where we’d have to reinterpret web-ish designs into native mobile components. I want production-ready design, not something that looks good but breaks down in implementation.

At the same time, we were already debating whether to build the app in Flutter or React Native.

That’s when it clicked. Why not design in code?

Instead of fighting a design tool, I spun up a new project in Cursor, chose a design framework I liked (React Native Paper), and started building the UI directly in the same environment we’d use for the actual app.

There were the usual setup hiccups, dependencies, theming, small configuration annoyances, but nothing unexpected. And within less than an hour, I had set the tone for the entire app: colors, spacing, typography, component style, and overall feel.

The crazy part is that my “vibe-coded” app isn’t a throwaway prototype. It’s now the actual foundation for our upcoming native apps.

No handoff. No translation. No design-to-code loss.

Just design decisions made directly where they’ll live: in production code.

This won’t replace designers, and it’s definitely not the right approach for every project. But for small teams, tight budgets, and developer-led products, designing with code can be simple, practical, and surprisingly efficient.