wireframing — Claude Code skill: wireframes and user flows
A skill for interface design work: it walks from rough sketches and screen structure to a layout close to the final design.
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a claude-codeWhat wireframing 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.
What it helps with
- 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 for the agent
- 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
How to install wireframing
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a claude-code2Manually: put the files in place
~/.claude/skills/wireframing/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/wireframing/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a codex2Manually: put the files in place
.agents/skills/wireframing/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a cursor2Manually: put the files in place
.cursor/skills/wireframing/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace wireframing2Manually: put the files in place
.github/skills/wireframing/SKILL.md1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a gemini-cli2Platform CLI
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-design-toolkit/skills/wireframingManually: put the files in place
.devin/skills/wireframing/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about wireframing
How do I install wireframing in Claude?
Run npx skills add manutej/luxor-claude-marketplace --skill wireframing -a claude-code. The skill file then sits at ~/.claude/skills/wireframing/SKILL.md.
What does the wireframing skill do?
It covers the interface design process: wireframe types, information architecture, user flows, annotation and iteration. It helps you pick the right level of detail for the current stage.
Which platforms does this skill support?
Besides Claude, there are install paths for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each uses its own command and its own skill file location.
