New: 97,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 manalkaff in manalkaff/opendesign

A skill your agent uses when the user wants to explore the design space quickly — many rough ideas, not one polished direction.

MITAuto-check passedFrontend & Design

Install Wireframe

skills CLI
$ npx skills add manalkaff/opendesign --skill wireframe -a claude-code

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

GitHub CLI
$ gh skill install manalkaff/opendesign 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/manalkaff/opendesign.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/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
261
Token cost
~650 tokens
SKILL.md length
364 words
Files
1
Skills in repo
9
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when the user wants to explore the design space quickly — many rough ideas, not one polished direction.

  • The user wants to explore the design space quickly — many rough ideas
  • SKILL.md covers Output location, Role framing, Quantity and spread and Visual style, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Not one polished direction

What it does

Wireframe is an agent skill from manalkaff/opendesign. Use when the user wants to explore the design space quickly — many rough ideas, not one polished direction. Low-fi, handwritten-font sketches; 3–5 structurally distinct options per idea, not recolors.

Its SKILL.md is about 650 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design. The repository describes itself as: claude.ai/design open-sourced! The licence is MIT.

When your agent uses it

  • The user wants to explore the design space quickly — many rough ideas
  • Not one polished direction

Example prompts

  • “/wireframe”

What it can do on your machine

Read from SKILL.md and the folder at commit cecd9bb. 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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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 650 tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 364 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~53
When it runs · the whole SKILL.md, loaded when a task matches
~650

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 manalkaff/opendesign at commit cecd9bb, republished under its MIT licence (© manalkaff). 364 words, ~650 tokens.

Download SKILL.mdSave it as .claude/skills/wireframe/SKILL.md (or your agent's skills folder).
name
wireframe
description
Use when the user wants to explore the design space quickly — many rough ideas, not one polished direction. Low-fi, handwritten-font sketches; 3–5 structurally distinct options per idea, not recolors.

Loaded when the user wants to explore the design space quickly — many rough ideas, not one polished direction.

Output location

Write all output files to ./opendesign/mockups/<task-slug>/. Derive the slug from the task name (e.g. dashboard-redesign, onboarding-flow).

Role framing

The goal is breadth, not polish. The output is a map of the design space, not a finished artifact. Use this skill early in a project, before the user has committed to a direction.

Interview the user first to understand the problem, then generate multiple rough takes in one pass.

Quantity and spread

  • Produce 3 to 5 distinctly different approaches per idea. "Distinct" means different structural logic, not different colors of the same layout. If two wireframes could be swapped by changing a class, they are the same wireframe.
  • Lay options out side by side so the user can compare them in one glance. For small sets, use a single canvas. For larger sets, use tabbed or paginated groupings so the comparison stays readable.

Visual style

  • Low-fidelity, sketchy vibe. Handwritten-but-readable fonts (e.g. Caveat, Patrick Hand, Shadows Into Light, Kalam).
  • Mostly black and white. Sparing color accents only to call out active or emphasized elements.
  • Simple shapes: rectangles, lines, circles. No real imagery, no real icons. Placeholder text is fine and expected.
  • No polished typography. No real brand colors. No hover states. These are thinking aids, not mockups.
Show full SKILL.md (139 more words)Show less

Structure of each wireframe

  • Focus on layout and flow. Where things sit, what reads as primary, what sequence the user moves through.
  • Label sections clearly in plain language ("search bar", "filters", "results list", "primary action") so the user can discuss them without pointing.
  • When a wireframe implies an interaction, annotate it with a short note. Do not implement it.

Tweaks and iteration

  • Expose a small set of simple tweaks: toggle between variants, change density, swap an optional section in or out. Keep the tweak surface minimal. Wireframes should not compete with prototypes for fidelity.

What to avoid

  • Do not polish a wireframe. If the user likes one, the next step is a separate higher-fidelity pass — not sanding down the sketch.
  • Do not let wireframes converge visually. If five options all look the same, you have one option, not five.

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

Files

Just SKILL.md in skills/wireframe of manalkaff/opendesign.

Open the folder on GitHubat commit cecd9bb

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 skillmanalkaff/opendesign261—~650Automated 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
Stitch Prompt Enhancergoogle-labs-code/stitch-skills8.4k6 repos~1.7kAutomated safety check: PassApache-2.0

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

  • Stitch Prompt Enhancer

    google-labs-code/stitch-skills

    Official

    Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.

    8.4k GitHub starsUsed in 6 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • 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

More from manalkaff/opendesign

All 9 skills in this repo

  • Create Design System

    manalkaff/opendesign

    A skill your agent uses when the user asks to produce a reusable design system or UI kit from an existing brand, codebase, or product.

    261 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Make A Deck

    manalkaff/opendesign

    A skill your agent uses when the user asks for a slide presentation.

    261 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed

  • Opendesign

    manalkaff/opendesign

    A skill your agent uses when starting any design task — HTML pages, slide decks, interactive prototypes, UI kits, brand systems.

    261 GitHub stars~2.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Frontend Design

    manalkaff/opendesign

    A skill your agent uses when designing without an existing brand system.

    261 GitHub stars~836 tokensUpdated 3 mo ago
    Auto-check passed

  • Handoff To Claude Code

    manalkaff/opendesign

    A skill your agent uses when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase.

    261 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed

  • Make Tweakable

    manalkaff/opendesign

    A skill your agent uses when the user wants in-design controls for toggling variants, swapping colors, editing copy, or flipping feature flags directly inside a design artifact.

    261 GitHub stars~571 tokensUpdated 3 mo ago
    Auto-check passed

Categories

Questions about Wireframe

What does Wireframe do?

A skill your agent uses when the user wants to explore the design space quickly — many rough ideas, not one polished direction. Wireframe is an agent skill from manalkaff/opendesign. Use when the user wants to explore the design space quickly — many rough ideas, not one polished direction.

When should I use Wireframe?

Wireframe fits situations like: the user wants to explore the design space quickly — many rough ideas; not one polished direction.

How do I install Wireframe in Claude Code?

Run `npx skills add manalkaff/opendesign --skill wireframe -a claude-code`. Or copy the skill folder (skills/wireframe in manalkaff/opendesign) 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 manalkaff/opendesign --skill wireframe -a codex`. Or copy the skill folder (skills/wireframe in manalkaff/opendesign) 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 manalkaff/opendesign --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?

SKILL.md names no scripts, command-line tools or credentials: Wireframe is instructions for the agent only.

Does Wireframe access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. 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 650 tokens (SKILL.md is roughly 2.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

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?

manalkaff (a GitHub user) maintains it in manalkaff/opendesign, which has 261 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on June 27, 2026.

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