What kind of UI components can I include?

The skill supports a wide range of components including AppBars, Buttons, Inputs, Checkboxes, Switches, Avatars, and flexible spacers for layout control.

Does it support multi-screen user flows?

Absolutely. By using the 'screen' component and directional layouts like 'LR' (Left-to-Right), you can visualize how a user moves through multiple app screens.

What are the most important syntax rules?

You must use exactly 2 spaces for indentation (no tabs), wrap labels in quotes, and place modifiers like 'primary' or 'disabled' after the label.

Can I design for different screen sizes?

Yes, the skill supports mobile (375x600), tablet (768x1024), and desktop (1200x800) viewports to help you test responsive layouts.

Why should I use this skill instead of standard ASCII art?

Mermaid wireframes render as actual visual diagrams rather than plain text, providing a much clearer and more professional representation of spatial relationships and UI hierarchy.

GUI Wireframe Generator

Name: GUI Wireframe Generator
Author: ben-mad-jlp

byben-mad-jlp

Design Tools

Generates visual UI mockups and screen layouts using Mermaid wireframe syntax to replace low-fidelity ASCII art representations.

About

This skill enhances Claude's ability to communicate design concepts by providing a structured framework for creating visual wireframes. Instead of relying on crude ASCII art, it utilizes Mermaid syntax to render professional-grade UI mockups for mobile, tablet, and desktop interfaces. It is ideal for developers and designers who need to quickly visualize app screens, dashboards, and multi-step user flows directly within their workflow, ensuring that interface requirements are clearly understood before high-fidelity prototyping begins.

Key Features

Device-specific viewports including mobile, tablet, and desktop presets
0 GitHub stars
Extensive UI component library with buttons, inputs, switches, and more
Visual styling modifiers for primary, secondary, and status-based states
Hierarchical layout containers for complex row and column nesting
Support for multi-screen user journey visualization

Use Cases

Communicating UI layout requirements during collaborative design sessions
Rapid prototyping of mobile application onboarding and login flows
Visualizing complex administrative dashboards and data grids

About

Key Features

Device-specific viewports including mobile, tablet, and desktop presets
0 GitHub stars
Extensive UI component library with buttons, inputs, switches, and more
Visual styling modifiers for primary, secondary, and status-based states
Hierarchical layout containers for complex row and column nesting
Support for multi-screen user journey visualization

Use Cases

Communicating UI layout requirements during collaborative design sessions
Rapid prototyping of mobile application onboarding and login flows
Visualizing complex administrative dashboards and data grids