GlossaryProduct and performance

Vibe Coding

Vibe coding is iterative building with AI coding tools (Cursor, Claude Code, Lovable, etc.) where natural language steers rapid prototypes,“make it feel calmer,” “add citation chips.”

For designers, it shifts deliverables from static mocks to working surfaces that expose real AI states.

What it means

Using agents to generate and refine UI in code with taste and guardrails, not one-shot prompts without design constraints.

Why designers should care

Vibe-coded prototypes surface loading, errors, and trust issues early. Designers who pair vibe coding with patterns ship more realistic AI UX.

Example

A designer prototypes a streaming composer in Cursor, restarts the demo to test interrupt, then links the pattern catalog URL in the PR.

Common mistakes

  • Accepting first AI output without testing edge states.
  • No design system or accessibility constraints in agent context.
  • Treating prototype code as production without review.

Explore more

Frequently asked questions

What is Vibe Coding?

Vibe coding is iterative building with AI coding tools (Cursor, Claude Code, Lovable, etc.) where natural language steers rapid prototypes,“make it feel calmer,” “add citation chips.”

Why should designers care about Vibe Coding?

Vibe-coded prototypes surface loading, errors, and trust issues early. Designers who pair vibe coding with patterns ship more realistic AI UX.

What are common mistakes with Vibe Coding?

Accepting first AI output without testing edge states; No design system or accessibility constraints in agent context; Treating prototype code as production without review.

Weekly AI UX notes

Patterns, prompts, and glossary updates for designers building AI products on Substack. No spam.

Subscribe on Substack