The Wireframe agent creates low-fidelity HTML/CSS wireframes for every screen defined in your information architecture. These grayscale, layout-focused wireframes establish the structural foundation before visual design begins.
Each wireframe focuses on content hierarchy, layout composition, and responsive behavior — deliberately stripped of color, imagery, and detailed styling to keep the conversation focused on structure and function.
The wireframes include responsive annotations showing how layouts adapt across breakpoints, making them ideal for stakeholder review and early usability validation before investing in high-fidelity visual design.
- ✅ Grayscale HTML/CSS wireframes for all screens
- ✅ Content hierarchy and layout composition
- ✅ Responsive annotations for multiple breakpoints
- ✅ Stakeholder-ready presentation format
- Install the SDD VS Code Agents extension
- Open VS Code Copilot Chat
- Use
@wireframeto invoke this agent
@wireframe Create wireframes for the dashboard screens from the IA document
This agent is one of 13 specialized Copilot Chat participants in the SDD VS Code Agents ecosystem.
| Agent | Role |
|---|---|
| spec-writer | Specification Architect |
| implementer | Implementation Engineer |
| reviewer | Compliance Reviewer |
| packager | Package Engineer |
| ui-lifecycle-master | UI Lifecycle Orchestrator |
| ux-research | UX Researcher |
| info-arch | Information Architect |
| wireframe | Wireframe Designer |
| ui-design | Visual Designer |
| ux-design | UX Designer |
| frontend-impl | Frontend Engineer |
| design-reviewer | Design Reviewer |
| ux-testing | UX Tester |
MIT