Help us improve
Share bugs, ideas, or general feedback.
From ui-design
Creates wireframes for UI mockups using SVG for precise layouts or HTML/Tailwind for standard UI patterns. Use for wireframing, mockups, skeletal layouts.
npx claudepluginhub bendrucker/claude --plugin ui-designHow this skill is triggered — by the user, by Claude, or both
Slash command
/ui-design:wireframeThis skill is limited to the following tools:
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.
assets/form.htmlassets/form.svgassets/grid.htmlassets/grid.svgassets/login-screen.htmlassets/login-screen.svgassets/modal.htmlassets/modal.svgassets/nested-groups.htmlassets/nested-groups.svgassets/table.htmlassets/table.svgassets/two-column.htmlassets/two-column.svgreferences/html.mdreferences/svg.mdscripts/fixtures/element-out-of-bounds.svgscripts/fixtures/group-out-of-bounds.svgscripts/fixtures/hidden-div.htmlscripts/fixtures/missing-dimensions.svgCreates and renders UI wireframes from Markdown using wiremd. Converts descriptions, Jira tickets, PRDs, or React/JSX into visual HTML mockups for prototyping screens.
Wireframes UI screens in ASCII text (default) or hand-drawn HTML (on 'sketch', 'whiteboard' keywords). Outputs buildable specs or visual whiteboard-style files.
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.
Share bugs, ideas, or general feedback.
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.
| 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.
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] |
| Device | Width | Height |
|---|---|---|
| iPhone | 375 | 667 |
| iPad | 768 | 1024 |
| Desktop | 1280 | 800 |
| Mobile web | 360 | 640 |