Guide · Agent skill
How to use the Annotated Wireframe Designer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Annotated Wireframe Designer is an agent skill, a packaged set of instructions that an AI agent such as Claude can load when a request matches it. When it is active, the agent produces a single low-fidelity HTML wireframe of a desktop landing page, drawn as grey placeholder blocks with numbered callout pins and a side panel of short notes. This guide explains what the skill does, how to install it, how to ask for it, and where it fits best.
Annotated Wireframe Designernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the wireframe-annotated ZIP from this page and unzip it. It contains SKILL.md and example.html.
- 2Place the skill folder. Move the unzipped folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 4Write a natural request. Ask for an annotated or redline wireframe of a desktop landing page and list the sections you need.
- 5Review the pins and spec panel. Check that each numbered pin on the canvas has one matching note in the spec panel.
- 6Use it for handoff. Share the wireframe with your team for layout review, then take it into a separate design or build step.
What the skill makes the agent produce
The skill asks the agent for one flat, low-fidelity wireframe of a desktop landing or marketing page. The page is drawn as grey placeholder blocks inside a browser frame, so the layout is clear without any visual details.
Numbered pins mark the key regions: the top nav, the hero, the logo strip, the feature grid and the footer. A right-hand spec panel lists each pin with a short design or engineering note. The output is meant for planning layout and handoff, not for finished visuals.
- Flat greyboxes with a browser-style frame, not hand-drawn or sketch-style.
- Numbered pins ① to ⑤ in one accent colour, with matching notes in a spec panel.
- One HTML file, with an example.html included in the skill package.
Install the skill from the ZIP
Download the ZIP for this skill from this page and unzip it. The package contains SKILL.md, which holds the instructions, and example.html, which shows the kind of output to expect.
For a personal install, unzip the skill into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with a natural request
You do not need a special command. The skill is picked up when your request uses words that match its description or triggers. Useful phrases include "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity" and "redline". The skill also lists Chinese terms such as 线框图 and 标注线框.
Say what the page is for and what sections it needs. The skill's example prompt names a greybox nav, hero, logo strip, 3-up feature grid and footer, with one engineering note per pin.
Draw an annotated redline wireframe for a desktop landing page: greybox nav, hero, logo strip, 3-up feature grid and footer, numbered pins 1-5 and a right-hand spec panel with one engineering note per pin.Work through a typical example
The agent builds a two-column layout. The left column is the wireframe canvas in a browser frame. The right column is a narrow annotations or spec panel. Each block gets a numbered pin, and each pin has a row in the panel.
The skill sets the pin positions in this order: the nav at pin 1, the hero at pin 2, the logo strip at pin 3, the feature grid at pin 4 and the footer at pin 5. Spec notes follow the same style, for example a sticky nav, a hero headline with a primary and ghost CTA pair, or a 4-column footer with a legal row.
- Check that every pin on the canvas has exactly one spec row.
- Check that the accent colour appears only on pins and their spec numbers.
- Check that the page still reads clearly at thumbnail size.
What it needs and how it runs
The skill lists no required tools or dependencies. It does not run scripts and does not use the network, so it works from its instructions alone and produces HTML as its output.
The skill is meant for prototype-style work in a design context. It asks for a greyscale, flat look and avoids hand-drawn or sketch-style mockups.
- Requirements: none listed.
- Runs scripts: no.
- Uses network: no.
Tips for better wireframes
Give the agent the section list in order, since the skill lays blocks out top to bottom. Name the number of feature cards if it is not three, and say whether the footer needs legal links.
Use the output for layout review and handoff, then move to a separate design or build step for final visuals. The skill itself states that it is not for pixel-perfect UI or production page code.
- List sections top to bottom in your request.
- State the number of feature cards and footer columns.
- Treat the output as a structure and spec document, not a finished design.
What people use it for
- A designer sketches the section order of a new product landing page before choosing colours and imagery.
- A product manager hands a developer a redline-style spec with one note per region.
- A team runs a quick thumbnail-style review of a marketing page structure.
- A developer checks how a 3-up feature grid should collapse on mobile, as noted in the spec panel.
Frequently asked questions
How do I install the wireframe-annotated skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
Does this skill need anything else installed?
The skill lists no required dependencies. It does not run scripts and does not use the network, so it works from its SKILL.md instructions.
Is the wireframe-annotated skill free to use?
The source lists its licence as Apache-2.0. Check the licence file in the repository for the full terms before you reuse it.
What is the difference between a wireframe and a mockup?
A wireframe is a low-fidelity layout that shows structure with grey placeholder blocks. A mockup adds visual details such as colour, type and imagery. This skill makes wireframes and explicitly avoids finished or hand-drawn looks.
Can the skill produce hand-drawn or sketch-style wireframes?
No. The source says the skill explicitly avoids hand-drawn or sketch-style mockups and uses flat greyboxes instead.
Can I use this output as production page code?
No. The skill is not meant for final pixel-perfect UI or production page code, because its output is intentionally greyscale and flat.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you need a clean, flat landing page layout with numbered notes for quick review or developer handoff. Pick a different tool if you need a sketch-style mockup, a finished visual design, or production page code.
Download the skill