---

name: wireframe-to-code description: Convert wireframe descriptions to code version: 1.0.0

Wireframe to Code

Transform wireframe descriptions into production-ready UI code.

Instructions

1. Accept a wireframe description (text or structured layout)
2. Identify UI components: header, nav, cards, forms, footers
3. Choose the target framework (HTML/CSS, React, Vue, Tailwind)
4. Generate semantic, accessible markup
5. Add responsive breakpoints (mobile-first)
6. Include placeholder content and realistic data
7. Ensure proper ARIA labels and keyboard navigation

Output Format

Complete component code with inline comments explaining layout decisions.