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

•

设计工具

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

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.

主要功能

01Predefined screen sizes for iPhone, iPad, Desktop, and Mobile Web

025 GitHub stars

03Dual rendering modes using SVG for precision or HTML/Tailwind for standard patterns

04Structured validation workflow to ensure layouts meet skeletal UI standards

05Supports iterative design cycles with 1x and 2x resolution exports

06Built-in image rendering scripts to generate PNG previews from code

使用场景

01Rapidly prototyping a new dashboard layout to align on content priority before styling

02Visualizing complex mobile navigation flows and form structures during the planning phase

03Creating low-fidelity skeletal representations for documentation or architectural reviews

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bendrucker/claude wireframe

For use in Claude.ai and ChatGPT

Download Skill