# Low-Fi Wireframes

Produces black-and-white UI wireframes as SVG files or viewer pages.

- Repository: https://github.com/paperclipai/paperclip (109885 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add paperclipai/paperclip --skill wireframe -g -a claude-code -y`
Codex: `npx skills add paperclipai/paperclip --skill wireframe -g -a codex -y`
Cursor: `npx skills add paperclipai/paperclip --skill wireframe -g -a cursor -y`
Gemini CLI: `npx skills add paperclipai/paperclip --skill wireframe -g -a gemini-cli -y`

## Description

Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Wireframe

Produce low-fidelity, black-and-white UI wireframes as **standalone SVG files**. The goal is to communicate **structure**, what goes where, in what order, at roughly what size, without committing to colour, brand, or polish.

## When to use

Trigger on phrases like:

- "wireframe a [screen / page / flow] for X"
- "low-fi / lo-fi mockup of X"
- "draft a layout for X"
- "rough sketch of the [dashboard / settings / login / ...] page"
- "show me how X would lay out before I build it"

Skip and defer to `frontend-design` (or similar) when the request mentions: brand, polish, real components, "production-ready", colour palettes, hi-fi, Figma export, or actual code/HTML/React deliverables.

## House style, non-negotiable

Wireframes are diagnostic, not decorative. Lock these tokens on every output:

The rest: https://github.com/paperclipai/paperclip/blob/HEAD/packages/skills-catalog/catalog/bundled/product/wireframe/SKILL.md