A reflection on bridging UX Design and UX Engineering - what AI tools genuinely unlock, where they quietly fall short, and what designers still need to learn before claiming the title.
Recently, I picked up something I'd tried before and failed at.
Out of nowhere. Not for a client. Not for work. Just for myself.
I'd attempted this once already - designing a dashboard, building the design system behind it, and actually shipping it. I never got past the design part. The moment code entered the picture, the project stalled.
Before we start - what's the difference between UX Design and UX Engineering?
UX Design (UXD) decides what the product should be. Who it's for, how it should feel, what the flow looks like, what the interface needs to do. It shapes the vision.
UX Engineering (UXE) decides how that vision survives contact with real code. How components are built, how state behaves, how the design system holds up across frameworks and screens. It makes the vision usable.
One sees the product. The other ships it. Most teams keep them in separate seats.
This post is about what happens when one person tries to do both.
This time I told myself I'd see it through.
I designed the design system behind it - components, tokens, states, the works. Launch-ready. Pick a card, drop it on a page, ship.
And I didn't stop at one framework. The components were built to be framework-adaptive - usable in React, Vue, Solid, Angular - with Zag.js handling the state machines underneath. One component model. Four ecosystems.
Atoms -> Components -> Pro Blocks -> Launch ready
Then I did something I wouldn't have been able to do two years ago.
I built it - of course using AI :)
Not by learning React from scratch. By prompting my way through it with Claude and ChatGPT in a tab. Vibe coding, as people are calling it now.
And it worked. The dashboard rendered. Components were reusable. I shipped something that would have needed a frontend developer for at least a month, three years ago.
So when people ask whether the UX Engineer is really rising - whether the line between design and code is dissolving - my answer is yes.
But also: be careful.
Vibe coding feels like magic. Until it doesn't.
The hype version: describe what you want, the AI writes the code, you ship.
The reality: you describe what you want, the AI writes code that looks right, and you ship something that breaks in ways you don't understand.
A button that worked in three places broke in the fourth. A modal that animated smoothly lagged when nested inside a card. Tokens drifted in implementation - a colour here, a radius there - because the AI made subtly different choices each time.
The code compiled. The UI rendered. But the system underneath was fragile in a way I couldn't see until I tried to scale it.
And here's the uncomfortable part: I couldn't always tell why it was fragile.
The UX Engineer is real. The shortcut isn't.
Designers who can build are going to own more of the product than ever. That's exciting. I'm doing it.
But the role is rising for the people who learn the craft, not for the people who skip it.
Because vibe coding doesn't give you:
• Why a component is structured the way it is - and what breaks when you change it.
• How state should flow through a dashboard with 20 widgets versus 3.
• When to abstract a pattern, and when abstracting early creates more pain than it saves.
• What accessibility actually means at the DOM level - not just alt text but focus order, ARIA semantics, the 30% an AI gets wrong.
You can ship without knowing these things. I did. But you feel the gap the moment the product meets real users.
Three things the Process taught me
1. The AI is an excellent typist. It is a mediocre architect.
It can write clean code. It cannot make clean decisions about how a codebase should hold together over time. If you don't bring the architectural thinking, you end up with a quilt of plausibly-correct snippets that never quite form a system.
2. A design system in Figma is not a design system in code.
I had pristine tokens, neat components, beautiful variants in Figma. Turning that into a real framework-adaptive library - one that worked across React, Vue, Solid, and Angular - meant making hundreds of small engineering decisions the design file never captures. Naming. Prop APIs. Defaults. Edge cases. How state machines behave when wrapped by four different reactivity systems. The Figma file was the start. The code was a whole second design problem - and a much bigger one.
3. Don't ship code you can't read.
There were moments where 80 lines worked and I couldn't have explained line by line why they worked. Fine for a prototype. Not fine for a launch-ready system. The discipline I had to build was: slow down, ask the AI to explain it back, refactor until I'd be comfortable defending it in a code review.
The pattern is the same as Figma
Figma didn't make me a designer. AI doesn't make me an engineer.
Both are tools that make the output faster. They don't replace the thinking that decides what to build, how to structure it, and what to leave out.
The UX Engineer worth becoming isn't "designer who vibe-codes in a weekend." It's the designer who understands enough about how the interface works underneath that they can defend it in front of a senior engineer, not just a product manager.
Because here's the truth I keep coming back to:
UX Design shapes the vision. UX Engineering makes it usable.
One without the other is incomplete. The vision without the build is a pretty Figma file. The build without the vision is a working product nobody wants to use.
That version of the UX Engineer - the one who can hold both - is rare. And valuable. And the AI gets you to the doorway, not through it.
Where I'm landing
I'm going to keep building. Vibe coding made it possible. But the real learning came from the moments the AI failed me - where I had to sit down and figure out what was actually going on.
If you're a designer thinking of jumping into the UX Engineer trend: do it.
Just don't mistake the speed of the tool for the depth of the craft.
The shortcut gets you a working prototype.
The craft gets you a product.
P.S. - If you've vibe-coded something and felt that creeping suspicion that you don't fully understand what you shipped, you're not behind. That suspicion is the signal. It's where the learning starts.
Discussion
1 commentFigma doesn't make someone a designer and Ai doens't make an engineer. Hard truth 🤌🙂↕️