Guide · Agent skill
How to use the Low-fi Wireframe Maker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The wireframe skill is an add-on for an AI agent that makes it draw simple, black-and-white layout sketches of app or web screens as SVG files. It is useful when you want to test where things go on a page before anyone spends time on colour or visual design. This guide explains what the skill does, how to install it, how to ask for wireframes in plain language, and what to check before you trust the output.
Low-fi Wireframe Makerpaperclipai/paperclip · MIT Download the skill Quick start
- 1Download the ZIP. Download the wireframe skill as a ZIP file from this page.
- 2Install it. Unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
- 3Start a new session. Open a fresh session so the agent loads the skill, then confirm the folder contains SKILL.md.
- 4Ask in plain language. Request a wireframe with the screen, purpose and viewport, such as 'wireframe a mobile login screen'.
- 5Review the output. Open the SVG at the stated path and read the numbered annotation list against the picture.
What the wireframe skill makes the agent do
Without the skill, a request like 'sketch a login screen' can produce anything from a colourful mockup to written code. With the skill installed, the agent follows a fixed house style. It produces a standalone SVG file in black and white, with a 1.5 stroke, white boxes, light grey placeholders for images and avatars, and a single typeface. The goal is to show structure: what goes where, in what order, and at roughly what size.
The skill also locks the layout to an 8px grid and a small set of canvas sizes: 1280×800 desktop, 375×812 mobile and 768×1024 tablet. After drawing, the agent lists each numbered region in text, such as '1 — primary nav, 2 — search input', so you can review the layout without seeing the image.
- Output: one SVG per screen, written to disk, usually at wireframes/<slug>.svg in the working directory
- Colour: none beyond black, white, two greys and a red dashed annotation layer for callouts
- Reusable parts: buttons, inputs, cards, navbars, tables, modals and similar primitives
How to install the wireframe skill
Download the wireframe skill as a ZIP file from this page. Then add it to the agent in one of two ways. For Claude Code, unzip it into your personal skills folder at ~/.claude/skills/, or into a project's .claude/skills/ folder if you want it limited to one project. For the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
After installing, start a new session and ask for a wireframe. If the agent does not seem to use the skill, check that the unzipped folder contains SKILL.md at its top level, since that file is what describes the skill to the agent.
- Personal (Claude Code): ~/.claude/skills/
- Project only (Claude Code): .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How to trigger the skill with natural requests
You do not need a special command. The skill is meant to be triggered by ordinary phrasing. The source lists phrases such as 'wireframe a screen', 'low-fi mockup of X', 'draft a layout for X', 'rough sketch of the dashboard page' and 'show me how X would lay out before I build it'. Name the screen, the purpose and the viewport if you have a preference.
If the request is vague, the agent is designed to ask one question about scope, such as which screen, which viewport, or whether it is a single screen or a multi-screen flow. It then proceeds with its most likely default.
- Good: 'Wireframe a mobile login screen with email, password and a Google sign-in option.'
- Good: 'Draft a layout for an admin dashboard with a sidebar, metric tiles and a recent activity table.'
- Good: 'Make a low-fi mockup of the settings page, desktop size, account section first.'
What you get back and how to review it
Each wireframe response should include the SVG file path, the SVG drawn inline in the reply, a numbered annotation list mapping each region to its intent, and any assumptions the agent made, such as the viewport or whether a user is signed in. The text list is the quickest way to check the layout, especially if your chat window does not render SVG.
For multi-screen requests, the skill produces one SVG per screen and a summary flow.svg with thumbnails arranged left to right and arrows between them.
- Check the stated viewport matches what you meant
- Read the numbered annotation list against the picture
- Check the output path before you open or move files
Bundle several wireframes into a review page
When you want to click through several screens, ask for a viewer page, for example 'show them all on one page' or 'let me click through the wireframes'. The skill then builds one static index.html that loads the SVG files directly, with a sidebar table of contents, a flow diagram, a click-to-zoom lightbox (closed with Esc or a backdrop click) and an open questions section.
The skill says this is a review surface, not a production site or a React app. The default layout keeps the HTML, a wireframes/ folder and a screenshots/ folder together under design/<task-slug>/.
- Output: design/<task-slug>/index.html with wireframes/ and screenshots/ beside it
- Uses a built-in template from assets/site-template.html rather than new CSS
What the skill needs and safety notes
The skill lists no special requirements. It does not run scripts and does not use the network. It is mostly written instructions, plus reference files for components, the grid system and worked examples. Because the agent can write and open files on your machine, review the output paths before trusting them, and keep an eye on what the agent writes into your project folder.
Do not use the skill for production or branded UI work. The skill tells the agent to hand requests that mention brand, polish, colour palettes, hi-fi, Figma export or real code to a separate front-end design skill such as frontend-design.
- Requires: nothing listed by the source
- Runs scripts: no
- Uses network: no
- Writes files: yes, SVGs and optionally an index.html viewer
- Not for: production-ready, branded or hi-fi work
What people use it for
- Testing the page structure of a new signup or checkout flow with a product team before visual design starts
- Sketching an admin dashboard layout to discuss with engineers before building it
- Drafting a settings page with a form section and a modal confirmation for a design review
- Teaching layout basics by generating simple screens and comparing their annotated regions
Frequently asked questions
How do I install the wireframe agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills. Start a new session afterwards so the skill loads.
Does the wireframe skill need anything else installed?
The source lists no requirements, does not run scripts and does not use the network. It is mainly written instructions and reference files that the agent reads while working.
Is the wireframe skill free to use?
The skill is listed under the MIT licence, which the source names for this item. Check the licence text in the download for the exact terms before reusing it in another project.
What is the difference between a wireframe and a mockup here?
The skill makes low-fidelity wireframes: black-and-white SVG layouts that show structure, not colour or brand. For polished or branded visuals, the skill tells the agent to use a separate front-end design skill instead.
Why did the agent not draw my screen in colour?
Colour is intentionally excluded. The house style uses black strokes, white fills, light grey placeholders and a red dashed accent only for annotations. If you need colour or brand styling, the skill says that work should go to a front-end design skill.
Where does the wireframe file get saved?
By default the agent writes the SVG to wireframes/<slug>.svg in the working directory, where the slug describes the screen. Check the path stated in the reply, because the agent writes to your disk and you should review output locations before trusting them.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want quick, monochrome layout sketches to test structure or discuss a page with a team before building it. Pick something else if you need production-ready, branded or colourful UI, since the skill intentionally hands those requests to a front-end design tool.
Download the skill