- Miron from Vibe Code Lab
- Posts
- How I design an interface with AI (step-by-step)
How I design an interface with AI (step-by-step)


hey — quick espresso shot (hold the foam)
We’ve just stepped into the idea → execution age. one prompt, one click, working UI. no agencies, no messy hand‑offs.
Yet good taste still matters. a sharp art director eye still matters. someone who can feel when a button is half‑pixel off or a flow just… drags. agencies that survive the next wave won’t sell mock‑ups; they’ll sell taste, crit, and context.
That’s where vibe design comes in: you + a couple of AI sidekicks turning raw ideas into neat product UI at café speed.
Idea → interface in six moves
Vanilla prompting spits out code. Vibe design keeps the loop under two hours—from rough thought to live component—so sprints vanish.
Start with a plain‑english prompt
In Cursor: “build a billing settings page for my SaaS. Use shadcn/ui for every component, friendly, no‑nonsense tone.” I was actually using this UI library for building Supertask.cxGrab a ready component
Search on v0.dev or 21st.dev for “billing settings card”, copy the component you like.Drop it into code
Paste into your repo and ask Cursor: “refactor to fit Next.js 14, keep shadcn conventions.”Collect visual references
Screenshot a layout from Behance/Pinterest, attach in Cursor, then: “mirror this header style—same spacing & typography.”bonus: clone a layout from a screenshot
drag the screenshot into Cursor
“extract only the hero section as
<MarketingHero>
using shadcn/ui. no inline styles.”“write docs/vibe‑guidelines.md for the tokens + spacing you used.”
Lock the style in markdown
When the screen feels right: “write docs/vibe‑guidelines.md that explains colors, radii, font sizes, and spacing we just used.”
Future prompts start with “follow vibe‑guidelines.md.”Tiny polish passes
Inside Cursor: “tighten card padding by 4 px, no markup changes.” merge, push, ship. Next run takes 20 min tops.
🎁 Free playbook for 5 referrals
Send Vibe Code Lab to your friends
→ unlock my $9 Debug & Implement guide.
Progress: 0 / 5
Prompt tricks that keep you flying
Style chips – offer “glassmorphism / retro terminal” pills instead of adjectives.
Rewrite button – one‑tap “make it playful” avoids new prompts.
Param sliders – expose size, radius, spacing so no one memorises Tailwind units.
One tweak per ask – prevents 400‑line diffs.
Store decisions – keep
docs/vibe‑guidelines.md
updated and reference it in every prompt.Reset often – a new chat when context feels foggy.
The stack I reach for
Cursor AI – chat inside the file; background agents while you sip.
v0.dev – natural‑language → editable React/Tailwind.
21st.dev + Magic – drop‑in shadcn/ui pieces; instant refactors.
Figma Dev Mode + MCP – streams variables and screenshots into code.
Panda CSS + CVA – semantic tokens + type‑safe variants that models respect.
Lucide‑react v2 – one‑word icon prompts; bundles stay lean.
The upgraded CTDC prompt (copy‑paste)
Context → task → details → constraints (still undefeated)
# context
stack: next.js 14, rsc, typescript, tailwind, shadcn/ui
figma node: 3XJ4 – wireframe for billing page
tokens in /theme/tokens.ts (panda)
# task
build the responsive billing settings page.
# details
1. header → plan name, price, “change plan” button.
2. invoices table: date, amount, status, download.
3. primary actions use colors-brand-accent; dangerous ones colors-brand-destructive.
# constraints
- tailwind classes only, no inline styles.
- each component ≤120 loc.
- don’t touch app/(api)/billing/route.tsx.
- set aria‑sort on sortable headers.
- never expose env vars.
Feed that to Cursor and get typed, accessible React in ~90 seconds.
Common face‑plants (and fixes)
“Generate the whole screen” – chunk into components; keep diffs reviewable.
Context drift past 50 messages – open a fresh chat per feature.
Hard‑coded hex colours – surface tokens via MCP.
Infinite tweak loop – call v0 good, merge, polish later.
Secrets in output – always say “never expose secrets”.
Where this is heading
Cursor memories will learn your component library. Slack agents will fix UI drift while you sleep. MCP makes prompt templates shareable. Each drop slices more human toil.
Closing sip
A good design system today is a prompt, a reference image, and your taste. Lead the machines, ship anyway, then find a new café.
stay caffeinated.
☀️ miron