ux-create-wireframe

Start by reviewing personas, goals, and pain points from research, then define the wireframe scope and fidelity level. Build a content inventory per screen, sketch layouts, document interaction flows, and annotate design decisions before preparing the developer handoff package.

Use low-fidelity for early exploration and quick iteration (30 minutes to 2 hours), mid-fidelity for stakeholder review and usability testing (4-8 hours), and high-fidelity for developer handoff and final approval (1-3 days).

Yes. The workflow includes prompt templates for v0.dev and Lovable that describe components, features, styling, framework (React, TypeScript, Tailwind CSS), and accessibility requirements so AI tools can generate implementation code from the designs.

Atomic design breaks interfaces into atoms (buttons, inputs, labels), molecules (form fields, search bars), and organisms (headers, forms, modals). The inventory lists every unique component so developers can build a consistent, reusable component library.

Common pitfalls include adding too much detail too early, designing in isolation without feedback, ignoring edge cases like empty and error states, using inconsistent patterns, and neglecting mobile responsiveness from the start.