Vibe coding as a UX design workflow — practical guide

What the article is about

This article examines the emerging practice of “vibe coding” — using AI code generators to build functional prototypes from natural language descriptions — from a designer’s perspective. Rather than approaching vibe coding as a developer tool, the author explores how designers can use it for rapid prototyping, user testing with functional artifacts, and communicating design intent more precisely to engineering teams.

Context

Vibe coding has been discussed primarily in engineering contexts, but a growing number of designers are adopting the practice for prototyping. The article comes from a designer who used vibe coding tools (Cursor, Claude Code, Replit) alongside traditional design tools (Figma) for six months and compares the outputs and workflows.

Key takeaway

The author identifies prototyping as the strongest use case for designers. When testing design concepts with users, functional prototypes built through vibe coding produced more reliable feedback than clickable Figma prototypes, because users interacted with real inputs, real data loading, and real error states rather than idealized mock flows.

The approach fails when designers try to produce production-ready code through vibe coding. The output requires significant engineering refinement for production use, making it an effective prototyping tool but not a replacement for proper front-end development.

The practical workflow recommendation: use Figma for exploration and visual refinement, then vibe-code a functional prototype for testing, then hand off Figma files and the functional prototype together to engineering as complementary references.

Who should read this

UX designers who have heard about vibe coding from engineering colleagues and want to understand how the practice applies to design work, with honest assessment of where it helps and where it creates more problems than it solves.