What Designers Need to Know Before They Start Vibe Coding
Most vibe coding tutorials assume you think in code. I don't. I think in layouts and systems.
I built usamazahid.design, PakalignStudio.com, and The Laila Majnu with Cursor. Three sites. Designer in the loop. The difference: I had a clear design before I asked the AI to write a single line. Components, hierarchy, and breakpoints lived in Figma first.
If you're a designer and you want to vibe code, start with the design. Not the prompt.
The Friction Moment
On the first site I tried, I prompted without a structure. "Make a landing page." The output was fine. It was also generic. I had to refactor because I hadn't defined the system—spacing, type scale, components—before coding. Once I brought a real Figma file and a small design token list, Cursor produced something I could ship. The second and third sites were faster because I'd learned: design first. Code second.
What Designers Have That Developers Don't
You already know what good looks like. You know when a layout is off. You know when type hierarchy is wrong. Use that. Write Cursor rules that describe your design system—not only "use Tailwind" but "headings use this scale, cards have this radius, spacing is in multiples of 8." I did that for Laila Majnu. The AI had a lens. So should you.
One clear take: vibe coding is not a replacement for design. It's a way for designers to own the build. What designers need before they start is a finished design and clear rules. Then the code follows.
Brand identity and UI/UX work on the site is design-led. Development is where I bring that same discipline to the build. My process is discover, design, develop, deliver. For designers who code, the middle two steps stay in your hands.
