skills.rest
nabitllc
nabitllcOFFICIAL
Explore all skills by this author →
GitHub

wireframe

Generate low-fidelity black-and-white UI wireframes as standalone SVG files.

Updated Mar 26, 2026
Search Tags:#layout#prototyping#svg#ui design#wireframe#mockup#low-fidelity
One-click install
npx skills add https://github.com/nabitllc/todero --skill wireframe-nabitllc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe
Source: https://github.com/nabitllc/todero/tree/main/packages/skills-catalog/catalog/bundled/product/wireframe
Command: npx skills add https://github.com/nabitllc/todero --skill wireframe-nabitllc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? It lets you quickly draft and communicate screen layouts and structure before investing in high-fidelity design or production code, producing reviewable SVG wireframes and optional viewer pages. ## Core Features & Use Cases - SVG Wireframe Generation: Produce monochrome, 8px-grid-snapped wireframes for desktop, tablet, and mobile viewports using a fixed palette and type scale. - Primitive Component Library: Assemble screens from copy-paste SVG snippets for inputs, navigation, tables, modals, and annotation callouts. - Review Viewer Pages: Bundle multiple wireframes into a single static HTML page with a sticky table of contents, flow diagram, and click-to-zoom lightbox. - Use Case: Ask for a lo-fi mockup of a settings page, and receive a standards-compliant SVG file, an inline preview, and a numbered annotation list explaining each region. ## Quick Start Wireframe a desktop dashboard screen with a sidebar, metric tiles, and a recent activity list as an SVG file.

Frequently Asked Questions about wireframe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a low-fidelity wireframe as an SVG?▼

Pick a canvas preset such as 1280x800 desktop or 375x812 mobile, then compose the screen from copy-paste SVG primitives like buttons, inputs, and navbars. Snap all coordinates to multiples of 8 and follow the fixed monochrome palette and type scale.

What tool should I use for lo-fi mockups before building UI?▼

Use SVG wireframes when you need to communicate structure and layout without brand or polish. Defer to high-fidelity design tools or frontend code when the request involves color palettes, real components, or production-ready deliverables.

Can I build a page to browse multiple wireframes together?▼

Yes, you can generate a single static index.html viewer from the provided site template. It includes a sticky table of contents, one section per screen, a flow diagram, and a click-to-zoom lightbox, with responsive behavior down to phone widths.

Why does my SVG wireframe text have an outline or halo?▼

The halo appears because text elements inherit the stroke set on the root SVG element. Always set stroke="none" on every text element and explicitly set its fill color to fix this.

When should I not use SVG wireframes?▼

Avoid them for production UI code, hi-fi branded mockups, interactive prototypes, and system architecture diagrams. SVG wireframes are static and monochrome by design, so use Figma, React, or diagram tools like mermaid for those cases.

Related Skills

Explore More Design & Creative Skills→
gridi-aigridi-ai
1

wireframer

Generate per-screen ASCII wireframes and Mermaid flowcharts from user stories.

Official
Intermediate
launchapp-devlaunchapp-dev
38

design-review-process

Codify a four-gate design review process with criteria, checklists, and approvals.

Official
Advanced
gabrielnsmntogabrielnsmnto
3

ux-create-wireframe

Creates wireframes, interaction flows, and component inventories for developer handoff.

Community
Intermediate
DeiblerDeibler
8

iteration-prototype-fidelity

Selects the appropriate prototype fidelity for each iteration and research question.

Community
Intermediate