My step-by-step vibe-coding workflow (brief)

1. Moodboard → tokens:

extract 4–8 tokens (colors, radius, spacing, animation-duration).

2. Wireframe context:

build the smallest context that matters (single page or modal).

3. Component prototype:

vibe-code 1–3 components that carry the personality (CTA, card, loader).

4. Quick validation:

demo to teammates, watch 5 users or stakeholders react for 5–10 minutes.

5. Measure & document:

record what worked/failed and export tokens + acceptance notes for devs.

6. Handoff:

provide CSS variables, animation timings, and a short rationale for decisions.

7. Hand-test accessibility & keyboard usage.

Using GPT as your vibe-coding buddy

Sometimes, you might not know the exact CSS syntax or JavaScript pattern to bring your design intent to life. That’s where GPT or any AI code assistant can help. You provide the vibe in plain English, and it generates starter code you can adjust.

But remember: the quality of your code depends on the quality of your prompt. Treat it as you would when briefing a junior developer.

Prompt formula for vibe coding

When prompting GPT, follow this structure:

1. Context (the why):

“I’m a UI/UX designer making a prototype to show the feel of a button, not production-ready code.”

2. Vibe description (the mood)

“The button should feel playful and soft: pastel gradient, rounded corners, hover lift, subtle scale animation.”

3. Constraints (the must-haves)

“Use only HTML/CSS/vanilla JS. Keep it minimal, in one file, so I can run it in the browser. Respect prefers-reduced-motion.”

4. Output format (the deliverable)

“Give me the full code, inside … tags, so I can copy-paste and run.”

Example prompts you can actually use

When prompting GPT, follow this structure:

1. To start from scratch:

“Generate a minimal HTML/CSS/JS snippet for a call-to-action button. The vibe is playful and soft — pastel gradient, rounded corners, hover lift, and a quick scale animation. Keep it in one file I can paste into CodePen.”

2. To tweak an existing design:

“Here’s my current button code [paste your snippet]. Make the vibe more professional and sharp: dark navy background, smaller radius, slower hover animation, high contrast text.”

3. To explore alternatives:

“Show me three variations of this button with slightly different vibes: (1) dreamy/slow, (2) energetic/sporty, (3) elegant/ . minimal. Use CSS variables so I can quickly adjust.”

4. To check accessibility:

“Review this button code [paste snippet]. Suggest improvements for color contrast, keyboard accessibility, and aria attributes.”

Quick warning

GPT is excellent for speed — but not always for correctness. It may:

• Suggest colors that fail accessibility contrast.
• Add code that works in isolation but not in production.
• Over-engineer a simple interaction.

So always treat AI outputs as draft prototypes — you’re still the designer responsible for vibe and validation.

Validation: the non-negotiable step

Vibe ≠ truth. A prototype shows feel but not accessibility, security, performance, or edge cases. Always validate:

• Contrast & color accessibility: run checks (aim WCAG AA or better where needed).
• Keyboard & screen-reader: can someone tab and activate the UI? Does aria state make sense?
• Performance & memory: animations can be cute — but heavy shadows and large repaints kill battery on mobile.
• Real data & edge states: test empty states, long text, localization (long labels).
• User testing: show the prototype to people who represent your users. Does the vibe help them understand and act?

If you skip validation, you might ship a delightful-looking feature that’s unusable for many users.

Final note - be playful, but be scientific

Vibe coding is one of my favourite shortcuts to clarity. You turn feelings into something tangible that people can react to. But feelings are subjective, so measure them. Use quick prototypes to provoke reactions, then validate those reactions with tests and checks that matter.