New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Wireframe

by paperclipai in paperclipai/paperclip

Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages.

MITAuto-check passedFrontend & Design

Install Wireframe

skills CLI
$ npx skills add paperclipai/paperclip --skill wireframe -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install paperclipai/paperclip wireframe --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/paperclipai/paperclip.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/skills-catalog/catalog/bundled/product/wireframe .claude/skills/wireframe && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
wireframe
GitHub stars
99k
Token cost
~2.9k tokens
SKILL.md length
1,364 words
Files
7 (incl. references, assets)
Skills in repo
60
Repo updated
First seen
Licence
MIT

At a glance

Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages.

  • Works in 6 steps: Confirm scope. What screen(s)? Which… → Pick a canvas from the table above.… → Compose from primitives. Read… → …
  • Asked to wireframe
  • SKILL.md covers When to use, House style — non-negotiable, Workflow and Quick start — minimal SVG, plus 8 more sections
  • Calls npx; reaches w3.org

What it does

Wireframe is an agent skill from paperclipai/paperclip. 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.

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files and assets (for example `references/components.md`, `references/examples.md` and `references/grid-system.md`).

It sits in Frontend & Design, covering UI design. The repository describes itself as: The open-source app everyone uses to manage agents at work. The licence is MIT.

When your agent uses it

  • Asked to wireframe
  • Sketch a screen
  • Make a low-fi mockup
  • Publish wireframes

Example prompts

  • “/wireframe”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Confirm scope. What screen(s)? Which viewport (desktop / tablet / mobile)? Single screen or multi-screen flow? If unclear, ask one…
  2. Pick a canvas from the table above. State the viewport in your reply.
  3. Compose from primitives. Read references/components.md and assemble the screen from the primitive snippets. Snap every coordinate to 8px.
  4. Write the SVG to a file. Default path: wireframes/.svg in the working directory. Filename slug describes the screen (login.svg…
  5. Emit a textual annotation list in your reply, mapping each numbered region in the SVG to a one-line description ("1 — primary nav, 2…
  6. For multi-screen flows, produce one SVG per screen and a summary flow.svg that arranges thumbnails left-to-right with arrows between them.

What it can do on your machine

Read from SKILL.md and the folder at commit b9750b1. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • w3.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Wireframe loads about 2.9k tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 48 tokens; SKILL.md has 1,364 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~12k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from paperclipai/paperclip at commit b9750b1, republished under its MIT licence (© paperclipai). 1,364 words, ~2,860 tokens.

Download SKILL.mdSave it as .claude/skills/wireframe/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
wireframe
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.
key
paperclipai/bundled/product/wireframe
recommendedForRoles
designer, product, engineer
tags
design, wireframe, ux, prototyping, svg

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:

TokenValueNotes
Stroke#000 width 1.5All borders, dividers, outlines
Fill (boxes)#fffDefault for cards/containers
Placeholder fill#e6e6e6Image/avatar/empty-state regions
Text colour#000 for labels, #666 for placeholder textNo other colours
Accent#d33 (dashed) — annotation layer ONLYNever inside real UI elements
Fontfont-family="-apple-system, system-ui, sans-serif"Single typeface across the whole file
Type scale12 caption · 14 body · 20 heading · 28 titleNo other sizes
Grid8px snap, 24px gutterAll x/y/w/h must be multiples of 8
Default canvas1280×800 desktop, 375×812 mobile, 768×1024 tabletPick one and state it in the comment

If you need to highlight a specific region for a callout, use the annotation layer (red dashed). Never colourise the wireframe itself.

Workflow

  1. Confirm scope. What screen(s)? Which viewport (desktop / tablet / mobile)? Single screen or multi-screen flow? If unclear, ask one question, then proceed with the most likely default.
  2. Pick a canvas from the table above. State the viewport in your reply.
  3. Compose from primitives. Read references/components.md and assemble the screen from the primitive snippets. Snap every coordinate to 8px.
  4. Write the SVG to a file. Default path: wireframes/<slug>.svg in the working directory. Filename slug describes the screen (login.svg, dashboard.svg, settings-account.svg).
  5. Emit a textual annotation list in your reply, mapping each numbered region in the SVG to a one-line description ("1 — primary nav, 2 — search input, 3 — list of recent items"). This makes the wireframe accessible, queryable, and reviewable in text-only channels.
  6. For multi-screen flows, produce one SVG per screen and a summary flow.svg that arranges thumbnails left-to-right with arrows between them.

Quick start — minimal SVG

svg
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
  <!-- canvas border -->
  <rect x="0" y="0" width="1280" height="800" />

  <!-- example: a button -->
  <g transform="translate(48, 48)">
    <rect width="120" height="40" rx="4" />
    <text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue</text>
  </g>
</svg>

Two house-style gotchas worth memorising:

  • Always set stroke="none" on <text> elements (text inherits the parent stroke and gets a halo otherwise).
  • Always wrap text fill explicitly (fill="#000") since the parent group fill is #fff for boxes.

Primitive library

The full set of reusable primitives lives in references/components.md. Load it whenever you need a primitive whose exact markup you do not have in working memory. Do not re-derive primitives from scratch — copy the snippet and adjust coordinates.

Primitives provided:

  • Inputs: button (filled, outlined, icon), text input, textarea, dropdown, checkbox, radio, toggle, search input
  • Layout: card, section divider, sidebar, two-column, three-column
  • Navigation: navbar, tab bar, breadcrumb, pagination, sidebar nav
  • Content: heading, paragraph block, list row, table, key-value pair, metric tile
  • Media: image placeholder, avatar (circle/square), video placeholder
  • Overlay: modal, drawer, toast, tooltip, dropdown menu (open state)
  • Annotation: numbered callout, dashed region highlight, arrow connector

Grid, palette, and type scale

For exact pixel values, palette tokens, and type sizes, see references/grid-system.md.

Worked examples

references/examples.md contains four complete wireframes you can copy and adapt:

  1. Login screen (mobile, 375×812)
  2. Admin dashboard (desktop, 1280×800)
  3. Settings page with form (desktop, 1280×800)
  4. Modal confirmation overlay (desktop, 1280×800)

When the user's request is close to one of these, start from the example and modify, rather than building from blank.

Output convention

Every wireframe response should include:

  1. The SVG file written to disk (path stated explicitly).
  2. The SVG inlined in your reply (so it renders in markdown previews).
  3. A short numbered annotation list mapping regions to intent.
  4. Any explicit assumption you made (viewport, signed-in state, empty/populated, dark/light not applicable since monochrome).
Show full SKILL.md (712 more words)Show less

If the user requests a website / viewer page

Trigger on phrases like "make a page that shows the screens", "single page I can scroll", "build a viewer", "let me click through the wireframes", "show them all on one page", or any request to bundle multiple wireframes into a browsable artifact (not a production site).

Build one static index.html that loads the SVG wireframes directly. Do not turn this into a React app or component library — it's a review surface, not product UI.

File layout (default):

design/<task-slug>/
  index.html
  wireframes/    # the SVGs from this skill
  screenshots/   # any reference screenshots

Page anatomy (start from assets/site-template.html and adjust — do not re-derive the CSS):

  • Sticky sidebar TOC (240px on desktop) listing every screen with anchor links. Group by Flow / Screens / Open questions.
  • Hero header at the top: crumb (issue id), title, one-paragraph summary, pill row of meta tags (12 screens, Lo-fi · monochrome, Click any wireframe to zoom).
  • One section per screen with a 2-column grid: wireframe on the left, reference image + numbered annotations + a "Why this changes" callout on the right. The wireframe <img> points to the SVG file directly — do not inline it.
  • Click-to-zoom lightbox for any element marked [data-zoom]. Esc and backdrop click both close.
  • Flow diagram section near the top that loads wireframes/flow.svg full-width.
  • Open questions section at the bottom for unresolved decisions.

House style for the viewer (matches the wireframes themselves):

  • Palette: --bg: #fafaf8, --panel: #fff, --ink: #111, --muted: #666, --line: #e5e5e0, --accent: #d33 (red dashed callouts only).
  • System font stack only: -apple-system, system-ui, "Segoe UI", sans-serif. No web fonts.
  • 8px-based spacing, border-radius: 8px on cards, 1px --line borders, no shadows except the hover lift on .wire.
  • The viewer chrome is allowed to be slightly more polished than the wireframes (subtle hover, rounded cards) — but never colourful. The wireframes themselves stay strictly monochrome.

Responsive (verify before reporting done):

  • ≥980px: two-column grid, sidebar TOC visible.
  • 900–980px: grid stacks to one column, TOC still sidebar.
  • <900px (tablet/phone): TOC collapses to a sticky <details> disclosure at the top of the page, defaults closed; tapping a link auto-closes it. Sections get scroll-margin-top: 80px so anchor jumps clear the sticky bar.
  • <560px (phone): tighter type/spacing scale, hero shrinks, lightbox switches from flex-centered to block layout at full viewport width with touch-action: pinch-zoom so users can pinch in further.

Verification before handing off: open the file in a browser and walk it at 1440×900, 768×1024, and 390×844. Confirm anchor jumps land cleanly, lightbox opens/closes, and SVGs render at the right aspect.

If the user asks to deploy / publish / host the wireframes

Defer to the here-now skill — it owns publishing, anonymous vs. permanent sites, claim tokens, and credentials. Do not roll your own hosting.

Load the here-now skill and follow its publish.sh recipe. The shape is:

bash
cd design/<task-slug>
{path-to-here-now}/scripts/publish.sh .
# → https://{adjective-noun-suffix}.here.now/

If here-now isn't installed for the current agent, install it (npx skills add heredotnow/skill --skill here-now -g) or escalate to whoever owns the agent's skill set. Do not roll your own hosting.

Things to remember when invoking it:

  • Publish the directory containing index.html at its root, not the parent. index.html must be at the root of the published tree.
  • Without saved credentials the site is anonymous and expires in 24 hours. With a saved API key, it's permanent. If the user wants a permanent URL, follow the here-now skill's sign-in-code flow — don't fake your way around it.
  • For an update, pass --slug {existing-slug} so the URL stays stable across review rounds (the script auto-loads the claim token from .herenow/state.json).
  • Read publish_result.* lines from script stderr to determine auth_mode and the claim URL — do not read .herenow/state.json and present its contents as the source of truth.
  • Always share the siteUrl from the current run; if anonymous, also share the claim URL and the 24h expiry warning.

What this skill is NOT for

  • Production UI code — use frontend-design or write React/HTML directly.
  • Hi-fi or branded mockups — use Figma or a design tool, not this.
  • Interactive prototypes — SVG is static; export multi-screen flows as a flow.svg.
  • Diagrams of system architecture, sequence flows, or data models — use mermaid or plantuml.
  • Illustrations or art — use example-skills:canvas-design or algorithmic-art.

Bundled assets

  • assets/template.svg — blank desktop canvas with hidden 8px-grid guides; copy as a starting point.
  • assets/template-mobile.svg — same for 375×812 mobile.
  • assets/site-template.html — minimal review-viewer page (sticky TOC + responsive collapse + lightbox). Copy to design/<task-slug>/index.html and fill in the sections when the user requests a website.

© paperclipai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (references, assets) in packages/skills-catalog/catalog/bundled/product/wireframe of paperclipai/paperclip.

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

Open the folder on GitHubat commit b9750b1

Compare with similar skills

Wireframe next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Wireframe compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Wireframe this skillpaperclipai/paperclip99k—~2.9kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro MaxZxBing0066/pixel-converter18113 repos~2.6kAutomated safety check: NotesBSD-2-Clause
Design Dnazanwei/design-dna1.9k1 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    ZxBing0066/pixel-converter

    UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.

    181 GitHub starsUsed in 13 repos~2.6k tokens
    Frontend & DesignAuto-check: notes

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

More from paperclipai/paperclip

All 60 skills in this repo

  • Garden Inbox

    paperclipai/paperclip

    Scan a Paperclip user's Mine inbox, classify reversible archive candidates, request checkbox confirmation, and archive only accepted selections.

    99k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Paperclip

    paperclipai/paperclip

    Interact with the Paperclip control plane API for task coordination and governance.

    99k GitHub stars~9.6k tokensUpdated today
    Auto-check passed

  • Paperclip

    paperclipai/paperclip

    A skill your agent uses for Paperclip-managed tasks and heartbeats: reading task context, delivering task documents or files, updating completion or blockers, coordinating or delegating work, and…

    99k GitHub stars~17k tokensUpdated today
    Auto-check passed

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    99k GitHub starsUsed in 1 repo~3.1k tokens
    Auto-check passed

  • Paperclip Page

    paperclipai/paperclip

    Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.

    99k GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Paperclip Create Agent

    paperclipai/paperclip

    Create new agents in Paperclip with governance-aware hiring.

    99k GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed

Categories

Questions about Wireframe

What does Wireframe do?

Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Wireframe is an agent skill from paperclipai/paperclip. Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages.

When should I use Wireframe?

Wireframe fits situations like: asked to wireframe; sketch a screen; make a low-fi mockup; publish wireframes.

How do I install Wireframe in Claude Code?

Run `npx skills add paperclipai/paperclip --skill wireframe -a claude-code`. Or copy the skill folder (packages/skills-catalog/catalog/bundled/product/wireframe in paperclipai/paperclip) into .claude/skills/wireframe in your project. Claude Code loads it when a task matches its description.

How do I install Wireframe in Codex?

Run `npx skills add paperclipai/paperclip --skill wireframe -a codex`. Or copy the skill folder (packages/skills-catalog/catalog/bundled/product/wireframe in paperclipai/paperclip) into .agents/skills/wireframe in your project. Codex loads it when a task matches its description.

Can I use Wireframe in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add paperclipai/paperclip --skill wireframe -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/wireframe, .gemini/skills/wireframe, .github/skills/wireframe and .opencode/skills/wireframe in your project.

What does Wireframe need to run?

Going by SKILL.md and its folder, Wireframe needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Wireframe access the network?

SKILL.md names 1 domain. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Wireframe safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Wireframe use?

Wireframe is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Wireframe use?

About 2.9k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 8.9k tokens, read only when the agent opens those files.

What are the alternatives to Wireframe?

Skills that share tags, products or a category with Wireframe: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Wireframe?

paperclipai (a GitHub organization) maintains it in paperclipai/paperclip, which has 98,967 GitHub stars. The repository holds 60 skills in this directory. The repository was last updated on October 9, 2026.

Source: paperclipai/paperclip on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.