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

0•

디자인 도구

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

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.

주요 기능

01Device-specific viewports including mobile, tablet, and desktop presets

020 GitHub stars

03Extensive UI component library with buttons, inputs, switches, and more

04Visual styling modifiers for primary, secondary, and status-based states

05Hierarchical layout containers for complex row and column nesting

06Support for multi-screen user journey visualization

사용 사례

01Communicating UI layout requirements during collaborative design sessions

02Rapid prototyping of mobile application onboarding and login flows

03Visualizing complex administrative dashboards and data grids

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ben-mad-jlp/claude-mermaid-collab using-gui-wireframes

For use in Claude.ai and ChatGPT

Download Skill