Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Black-and-white SVG wireframes v1.0.0

Use this resource to sketch the structure of a screen or flow before designing it

New

  • 309 downloads
  • 227 likes
  • 197 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install lowfi-svg-wireframes

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent builds each screen from basic black-and-white components (buttons, inputs, cards, tables, dialogs) on an 8px grid. It writes one SVG file per screen and adds a numbered list explaining each region. For a multi-screen flow it also produces an overview with arrows.

Mostly picked by

Updated November 2, 2026

Black-and-white wireframe of a dashboard with numbered regions and red dashed annotations.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: style tokens, a six-step procedure and annotation rules
  • components.md: a library of copy-ready SVG components (inputs, navigation, tables, dialogs)
  • grid-system.md and examples.md: grid, type scale and four complete examples

Good fit for

  • Showing a client the structure of a page before the final design
  • Comparing several screen layouts for an app
  • Documenting a flow (sign-in, settings, confirmation) in a few images

Not for

  • Colorful or brand-faithful mockups
  • Clickable prototypes or production code
  • Technical architecture diagrams or illustrations

Tags

  • wireframe
  • mockup
  • svg
  • ux
  • prototype

About

You say

"Wireframe the mobile sign-in screen and the dashboard for my order-tracking app."

Black-and-white wireframe of a dashboard with numbered regions and red dashed annotations.

Skill published by paperclipai under the MIT license.

Show more

Prerequisites

You bring
The list of screens and their purpose and The target format: desktop, tablet or mobile

How to use it

  1. Copy the skill folder into your agent's skills folder.
  2. Describe the screens you need and the format (desktop, tablet or mobile).
  3. Open the SVG files and review the annotation list.

Content preview

Files

  • assets/template-mobile.svg0.9 KB
  • assets/template.svg1.3 KB
  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/components.md14.9 KB
  • references/examples.md16.1 KB
  • references/grid-system.md4.6 KB
  • SKILL.md11.4 KB

Origin and licence

Modified by PalateKit

Author
paperclipai
Source
github.com/paperclipai/paperclip/tree/c2163b3ecf08c1d574685504fd1271a301d7bd1d/packages/skills-catalog/catalog/bundled/product/wireframe
Licence
MIT

Notice

Version modifiée de « wireframe » (paperclipai, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Is the HTML viewer page included?

No, the HTML template was removed from the PalateKit version. The starter SVG templates are still provided, and the agent can build a simple viewer page itself.

Does the skill publish wireframes online?

For hosting it points to another skill (here-now) that is not included. That part is optional: creating the SVGs works on its own.