product-design-wireframes

Convert user flows into wireframe specifications by mapping them through atomic design hierarchy—atoms to molecules to organisms to templates to pages. This Skill organizes each level with design tokens, component specs, and layouts to create complete UI architecture from flow diagrams.

Atomic design breaks UI into five levels: atoms (basic elements), molecules (simple groups), organisms (complex sections), templates (page structure), and pages (complete screens). This Skill applies this hierarchy to wireframe creation, ensuring consistent component reuse and scalable design token management across your specs.

Yes. This Skill generates design tokens for colors, typography, and spacing, then produces component specifications organized by atomic level. These specifications feed directly into wireframe layouts, establishing a single source of truth for UI architecture and AI UX pattern integration.

Structure wireframes by first defining atoms and design tokens, then compose them into molecules and organisms, map to templates, and finalize page layouts. This Skill applies this progression across product design sprints and UX workflows, ensuring outputs satisfy both visual specifications and AI feature design requirements.

You receive visual wireframe layouts with component usage at each atomic level, design token definitions, and full UI specifications ready for implementation. Outputs integrate AI UX patterns and satisfy requirements for both traditional wireframe workflows and modern feature design across design sprints.

No. This Skill establishes design tokens as part of the conversion process. You begin with user flows or screen requirements, and the Skill generates the token definitions, component specs, and wireframe layouts required before handoff to development.