Skill

wireframe

Creates wireframes for UI mockups using SVG for precise layouts or HTML/Tailwind for standard UI patterns. Use for wireframing, mockups, skeletal layouts.

HTML

npx claudepluginhub bendrucker/claude --plugin ui-design

Popularity

Parent stars

Parent forks

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/ui-design:wireframe

User invocable

Model invocable

Inline context

Default effort

Tool Access

This skill is limited to the following tools:

Bash(bun ${CLAUDE_SKILL_DIR}/scripts/render.ts:*)Bash(bun ${CLAUDE_SKILL_DIR}/scripts/render-html.ts:*)

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Create wireframes for UI mockups with two approaches.

Supporting Files

SKILL.md

70 lines · ~665 tokens

Similar Skills

wireframe

Creates and renders UI wireframes from Markdown using wiremd. Converts descriptions, Jira tickets, PRDs, or React/JSX into visual HTML mockups for prototyping screens.

13 files

wireframe

draft-wireframe

Wireframes UI screens in ASCII text (default) or hand-drawn HTML (on 'sketch', 'whiteboard' keywords). Outputs buildable specs or visual whiteboard-style files.

11 tools

tonone

Wireframes & Mockups

Generates UI/UX wireframes and mockups in draw.io at lo-fi, mid-fi, hi-fi fidelity levels using mockup shape libraries, frames for browser, iOS/Android mobile, and tablets.

drawio-diagramming

Stats

LanguageTypeScript

Parent stars12

Parent forks1

MaintenanceExcellent

Last CommitApr 5, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Stats

Actions

Help us improve

Share bugs, ideas, or general feedback.

Wireframe

Create wireframes for UI mockups with two approaches.

Wireframes are skeletal, black-and-white representations of UI layout. They focus on structure, content priority, and function—not visual design. No colors, no styling, minimal fidelity.

Choose Your Approach

Use

When

Render Script

SVG

Precise positioning, overlapping elements, custom shapes, artistic layouts

render.ts

HTML/Tailwind

Standard UI patterns (forms, grids, navigation, modals), flexbox layouts

render-html.ts

Before creating any wireframe: Read the reference file for your chosen approach. The references contain required patterns, component examples, and the exact rendering workflow.

References

SVG Reference — Absolute positioning with validation

HTML Reference — Tailwind/flexbox patterns

Rendering

Use ONLY the provided render scripts. Do not improvise alternative methods (Chrome headless, third-party CLI tools, etc.).

Format

Command

SVG

bun {SKILL_DIR}/scripts/render.ts [--scale N] <file.svg> [output.png]

HTML

bun {SKILL_DIR}/scripts/render-html.ts [--scale N] <file.html> [output.png]

Common Sizes

Device

Width

Height

iPhone

375

667

iPad

768

1024

Desktop

1280

800

Mobile web

360

640

Iteration Process

Create wireframe in the scratchpad directory

Run validation (SVG) or render directly (HTML)

Render to PNG (1x for quick verification)

Read the PNG file to visually inspect

Iterate until satisfied

Render final version at 2x for sharing

Wireframe

Create wireframes for UI mockups with two approaches.

Wireframes are skeletal, black-and-white representations of UI layout. They focus on structure, content priority, and function—not visual design. No colors, no styling, minimal fidelity.

Choose Your Approach

Use	When	Render Script
SVG	Precise positioning, overlapping elements, custom shapes, artistic layouts	`render.ts`
HTML/Tailwind	Standard UI patterns (forms, grids, navigation, modals), flexbox layouts	`render-html.ts`

Before creating any wireframe: Read the reference file for your chosen approach. The references contain required patterns, component examples, and the exact rendering workflow.

References

SVG Reference — Absolute positioning with validation
HTML Reference — Tailwind/flexbox patterns

Rendering

Use ONLY the provided render scripts. Do not improvise alternative methods (Chrome headless, third-party CLI tools, etc.).

Format	Command
SVG	`bun {SKILL_DIR}/scripts/render.ts [--scale N] <file.svg> [output.png]`
HTML	`bun {SKILL_DIR}/scripts/render-html.ts [--scale N] <file.html> [output.png]`

Common Sizes

Device	Width	Height
iPhone	375	667
iPad	768	1024
Desktop	1280	800
Mobile web	360	640

Iteration Process

Create wireframe in the scratchpad directory
Run validation (SVG) or render directly (HTML)
Render to PNG (1x for quick verification)
Read the PNG file to visually inspect
Iterate until satisfied
Render final version at 2x for sharing

wireframe

Popularity

Invocation

Tool Access

Context Preview

Supporting Files

SKILL.md

Similar Skills

Help us improve

Help us improve

Find plugins for your project

wireframe

Popularity

Invocation

Tool Access

Context Preview

Supporting Files

SKILL.md

Wireframe

Choose Your Approach

References

Rendering

Common Sizes

Iteration Process

Similar Skills

Help us improve

Wireframe

Choose Your Approach

References

Rendering

Common Sizes

Iteration Process