My Experience With “Vibe Coding” — A Designer Becoming a Design Engineer

My experience with vibe coding.

A Long Road to a New Frontier

I’ve been shaping digital experiences for almost two decades. Long enough to remember when “systems” weren’t called systems, and design was still mostly about pushing pixels on isolated screens. It’s a strange privilege to have lived the before and the after of the digital transformation — and now, somehow, to be helping define the during.

Throughout my career, I’ve drifted between classic design and the technical underbelly of products. The gap between designers and engineers used to feel cosmic. Today, that gap is shrinking fast. We are in a renaissance where designers can engineer, and engineers can design, and the tools around us bend to imagination rather than the other way around.

This is where “vibe coding” entered my world — and changed the way I build.

Finding My Stack in the Vibe Era

Figma Make… Claude’s generative prototypes… the sudden explosion of app integrations that translate ideas into deployable interfaces… the momentum is undeniable. Designers are finally equipped to test workflows, build small systems, and ship ideas without asking permission from anyone’s backlog.

But the real trick is discovering your stack — the one that aligns with how you think, design, and solve problems.

I went wide at first. Lovable, Aura Build, Gemini 3, Figma Make, Figma MCP, Cursor, GitHub, Vercel, V0… even LinkedIn became a sort of “meta-tool” while talking to other designers who were going through the exact same transformation. Communities like Into Design Systems and Memorisely became my unexpected compass.

Eventually, my workflow settled into something that feels graceful and powerful:

Figma (MCP) → GPT (as my architectural thinking partner) → Cursor (my design-to-code bridge) → GitHub → Vercel

Once that clicked, everything else started falling into place.

The Process

Understanding the Code Counterparts of Your Design System**

My roots are in multimedia engineering, long before I abandoned that path for pure design. I always kept a soft spot for HTML and CSS, enough to master concepts like auto layout and the box model. But modern component-driven frameworks? That felt like a language I could read but not speak.

Vibe coding forced me to reconnect the dots.

I asked Cursor to structure my project using Next.js (App Router). What came back wasn’t just a folder tree. It was a mirror — a reflection of my design practice translated into a codebase.

And suddenly, the logic clicked.

Before Prompting: Understand the Component’s Purpose

A component is not just a block of UI. It has behavior, conditions, states, constraints. Before touching a prompt, I ask myself:

• What behaviors or variants does it need?
• Is the content static or dynamic?
• How should it behave at different breakpoints?
• What accessibility expectations should it meet?
• What is its parent container? Its purpose within the page?

The clearer this is, the stronger the automation.

The Matrix Grid — Designing Before Designing

Before opening Figma, I sketch variants like this:

A simple grid like this exposes the combinatorial explosion. It becomes your contract with Cursor and your blueprint in Figma.

Storing Your Personal Commands in Markdown

Cursor loves markdown prompt files. They are reusable, organizable, editable, and become your internal API.

GPT tends to interpret them more creatively; Cursor tends to execute them more literally. Together, they form a powerful loop.

## Component Creation Tem

You are helping me build a reusable UI component for a case-study detail page in my portfolio.

### Tech / Stack context
- Framework: Next.js App Router + React + TypeScript
- Styling: Tailwind CSS using my existing tokens/utilities
- Use semantic design tokens only.

---

### Component Name
[[ComponentName]]

### Purpose
[[Describe what this component communicates or enables.]]

---

### Props Structure

```ts
type [[ComponentName]]Props = {
  [[Define required data: title, subtitle, images, items[], variants, flags]]
}

Getting Even More Sophisticated

Once your foundation is solid, the playground expands.

You start noticing beautiful interaction templates, 3D particle effects, animated components driven by WebGL, Spline scenes that add depth and motion to otherwise flat UI surfaces. You begin experimenting with layers of visual storytelling that were once reserved for high-end studios.

These tools — Unicorn Studio, Spline, advanced canvas-based libraries — aren’t gimmicks. They’re giving interfaces a new sense of spatiality. A new texture. And vibe coding turns them from “cool inspiration” to achievable building blocks.

The most exciting part? You can reuse, modify, and remix these experiences into your own visual identity.

We’re entering an era where “interface” doesn’t have to mean flat rectangles. Depth, motion, physics, and immersion are becoming part of everyday design vocabulary.

Conclusions & Takeaways

The crossover between design and engineering is no longer a niche path. It’s becoming the default reality for people who shape digital products. If you haven’t stepped into this world yet, now is a brilliant moment to start. The tools are forgiving, the learning curve is friendlier, and AI has lowered the barrier between idea and execution.

What I’ve discovered through vibe coding is less about writing perfect code and more about changing my mental model. Understanding components, props, breakpoints, accessibility, data flow — all of this sharpens the way I design, even when I’m not touching a line of code.

The frontier ahead is automation.

Agentic tools like 8n8 and emerging workflow engines hint at a future where repetitive tasks become scripts we orchestrate, not chores we endure. Imagine defining a button once and having the system generate all its variants, states, documentation, and code. Imagine writing a narrative prompt and receiving an entire working prototype. We’re closer to that world than people realize.

The important part is staying curious — experimenting, refining, developing your own methods, and keeping your creative intuition in the loop. The machine accelerates you, but you’re still the one steering.

The more we embrace this hybrid mindset, the more possibilities open up. And that, to me, is the true magic of this moment.