Which technologies does it use for layout generation?

It supports SVG for absolute positioning and custom artistic layouts, as well as HTML combined with Tailwind CSS for standard UI components and flexbox patterns.

Does this skill support full-color mockups?

No, it is specifically designed for wireframing, focusing on structure and content using a black-and-white skeletal approach to avoid distraction from visual styling.

Can I design for specific mobile devices?

Yes, the skill includes specific presets for iPhone, iPad, desktop, and mobile web dimensions to ensure your skeletal UI fits standard screen sizes.

How do I iterate on a design using this skill?

You create the wireframe in a scratchpad directory, run the render script to generate a PNG, inspect the image, and refine the code until the structural requirements are met.

Can I preview the wireframes visually within Claude?

Yes, the skill includes specialized rendering scripts that convert SVG and HTML code into PNG files for immediate visual inspection.

Wireframe & UI Mockup Generator

Name: Wireframe & UI Mockup Generator
Author: bendrucker

bybendrucker

•

Design Tools

Generates structural UI wireframes and skeletal mockups using SVG or HTML/Tailwind to define layout and content priority.

About

This skill empowers Claude to create low-fidelity UI mockups and wireframes, focusing on layout, content hierarchy, and functionality rather than aesthetic polish. By supporting both SVG for precise, custom shapes and HTML/Tailwind for standard web patterns, it provides a flexible workflow for prototyping across various screen sizes like mobile and desktop. It includes built-in rendering capabilities to turn code into visual PNG previews, allowing for rapid iteration and visual validation within the development environment.

Key Features

Predefined screen sizes for iPhone, iPad, Desktop, and Mobile Web
5 GitHub stars
Dual rendering modes using SVG for precision or HTML/Tailwind for standard patterns
Structured validation workflow to ensure layouts meet skeletal UI standards
Supports iterative design cycles with 1x and 2x resolution exports
Built-in image rendering scripts to generate PNG previews from code

Use Cases

Rapidly prototyping a new dashboard layout to align on content priority before styling
Visualizing complex mobile navigation flows and form structures during the planning phase
Creating low-fidelity skeletal representations for documentation or architectural reviews

About

Key Features

Predefined screen sizes for iPhone, iPad, Desktop, and Mobile Web
5 GitHub stars
Dual rendering modes using SVG for precision or HTML/Tailwind for standard patterns
Structured validation workflow to ensure layouts meet skeletal UI standards
Supports iterative design cycles with 1x and 2x resolution exports
Built-in image rendering scripts to generate PNG previews from code

Use Cases

Rapidly prototyping a new dashboard layout to align on content priority before styling
Visualizing complex mobile navigation flows and form structures during the planning phase
Creating low-fidelity skeletal representations for documentation or architectural reviews