Vibe coding is the habit of describing what you want in plain language and letting an ai assistant write the code, while you stay the one deciding whether the result is right. for a designer it isn't a shortcut around craft — it's a way to stop handing off static frames and start handing off working screens.
my loop is short. i design the frame in figma first, because the ai needs a decision to build, not a mood. then i describe the screen the way i'd brief a developer: the layout, the spacing scale, the type ramp, the states, and what happens on the edges. vague prompts produce vague interfaces, exactly like vague briefs do.
the second rule is to build the system before the pages. i set the colour tokens, the fonts and the spacing rhythm first, then every generated screen inherits them instead of drifting. on this portfolio that meant one paper-and-ink system — instrument serif headings, work sans body, the same grid on every route — and the ai never had to guess a colour.
the third rule is to review like a designer, not accept like a user. i check the built screen against the frame at real sizes, on mobile and tablet, and i fix in small passes: one prompt, one change, look again. an ai will happily ship a layout that is technically correct and visually wrong; catching that is still your job.
i've run this loop on real work. ats hiregate went from problem statement to a clickable hiring flow this way, and the secure online examination system was scoped, designed and built with the same back-and-forth between figma and code.
what it actually changed for me: the gap between design and implementation stopped being a handoff. i can test an interaction the same afternoon i draw it, and the feedback i get is about the product rather than about a prototype pretending to be one.
if you're a designer starting out, don't begin by asking for a whole app. start with one component you already know how to draw, get it built exactly the way you designed it, and grow from there.