Skip to content
Get packs

Low-fi Wireframe Maker

Draft black-and-white UI wireframes as SVG files and optional browsable review pages.

Source Download skill
Repository
paperclipai/paperclip
Stars
110,078
Licence
MIT
Files
5 files

What it does

Once installed, the agent produces simple, black-and-white layout sketches of app or web screens as standalone SVG files, instead of colourful designs. It follows a fixed visual style (grid snapping, limited colours and font sizes), writes the file to disk, and lists each numbered region in text so the layout can be reviewed without seeing the image. It can also bundle several wireframes into a single static HTML review page.

Great for

  • Product managers or designers who want to test a page structure before committing to visual design
  • Developers who need a quick layout sketch to discuss with a team before building
  • Students learning UX layout basics

Skip it if

  • Production-ready or branded UI work: the skill tells the agent to defer those requests to a separate front-end design skill, since wireframes intentionally avoid colour and polish
  • Running untrusted or unreviewed scripts: the skill itself is mostly instructions, but the agent may write and open files on your machine, so review output paths before trusting them

Try asking

  • “Wireframe a mobile login screen for our banking app”
  • “Draft a layout for an admin dashboard with a sidebar and metric tiles”
  • “Make a low-fi mockup of a settings page with an account form”
  • “Publish these wireframes as a single clickable review page”
Step-by-step guide: how to use Low-fi Wireframe MakerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    wireframe.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip wireframe.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip wireframe.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • State the viewport up front (desktop, tablet or mobile) so the agent picks the right canvas size.
  • Ask for one of the bundled examples (login, dashboard, settings, modal) as a starting point for faster results.
  • Review the written SVG file path and the numbered annotation list, since the agent writes files into the working directory by default.

What's inside

  • assets/site-template.html
  • references/components.md
  • references/examples.md
  • references/grid-system.md
  • SKILL.md

Redistributed unmodified from paperclipai/paperclip under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.