# wireframing

A skill for interface design work: it walks from rough sketches and screen structure to a layout close to the final design.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 566 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-design-toolkit/skills/wireframing/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/wireframing

## What it does

The skill covers wireframes at different levels of detail, from paper sketches to layouts with precise spacing and defined component states. It includes sections on information architecture, user flows, wireframe elements, annotation and specification, plus iteration and common mistakes.

The material follows the stages of a project. Requirements gathering and concept checks come first, then content and navigation structure, then layouts and developer handoff. There is a separate breakdown of low-fi versus high-fi and when each level of detail makes sense: early phases call for fast sketches, while handoff needs exact specs.

The skill ships through the `luxor-claude-marketplace` marketplace and installs with `npx skills add`. The skill file lands at `~/.claude/skills/wireframing/SKILL.md`. It is a written guide, not a mockup generator, so it draws nothing on its own. What you get back depends on how precisely you describe the screen and the flow.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/wireframing/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/wireframing/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/wireframing/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/wireframing/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace wireframing
```

2. **Manually: put the files in place**
- File: `.github/skills/wireframing/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-design-toolkit/skills/wireframing
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/wireframing/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-design-toolkit/skills/wireframing/SKILL.md

## When to use it
- turn stakeholder requirements into a list of screens and blocks
- compare several layout options before visual design starts
- map the path a user takes from entry to the target action
- pin down navigation structure and section hierarchy
- prepare a layout spec for developer handoff

## Example prompts
- sketch a low-fi wireframe of the signup screen from this description
- break the checkout flow into steps and screens
- propose a navigation structure for the account area and justify the hierarchy

## Similar
- [prototype](https://affpapa.org/en/nevibecode/skills/plugin87-prototype.md) — skill · 484 installs
- [information-architecture](https://affpapa.org/en/nevibecode/skills/information-architecture.md) — skill · 5900 installs
- [journey](https://affpapa.org/en/nevibecode/skills/journey.md) — skill · 2800 installs
- [prototype-strategy](https://affpapa.org/en/nevibecode/skills/prototype-strategy.md) — skill · 2100 installs
- [parallel-concepts](https://affpapa.org/en/nevibecode/skills/parallel-concepts.md) — skill · 650 installs
- [user-flows-and-guided-paths](https://affpapa.org/en/nevibecode/skills/user-flows-and-guided-paths.md) — skill · 879 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 31 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md