What is the purpose of this skill?

The Wireframe Annotated skill is designed to create low-fidelity wireframes with accompanying annotations that facilitate communication between designers and developers.

Can I customize the wireframe colors?

The skill specifies the use of a single accent color for annotation pins and spec numbers, while the rest of the wireframe remains in greyscale.

Is this skill suitable for high-fidelity designs?

No, this skill focuses on low-fidelity wireframes and is not intended for high-fidelity or pixel-perfect designs.

What types of projects is this skill best suited for?

It is ideal for projects that require early-stage wireframes, especially for landing pages, where structure and functionality are prioritized over visuals.

How does the output look?

The output is a clean HTML document containing the wireframe layout with annotation pins and a specification panel, all designed to be easily readable.

Wireframe Annotated

Name: Wireframe Annotated
Availability: InStock
Author: nexu-io

Free

Create clean, low-fidelity wireframes with specs.

by nexu-io84.9k stars on nexu-io/open-design

2 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What Wireframe Annotated does

The Wireframe Annotated skill provides a straightforward method for generating low-fidelity wireframes specifically designed for landing pages. This skill emphasizes structure and handoff notes over pixel-perfect designs, making it ideal for teams that prioritize clarity in the early stages of web design. Users can create a wireframe that includes greyboxes representing different sections of the page, each marked with numbered annotation pins that correspond to a detailed specification panel.

The workflow begins with the creation of a two-column layout: the left side serves as the wireframe canvas, framed within a browser chrome, while the right side features an annotations/spec panel. Each section of the wireframe, such as the top navigation, hero section, logo strip, feature grid, and footer, is represented as a greybox, with each area labeled by a unique pin. This setup allows designers and developers to communicate effectively about the intended layout and functionality without getting bogged down in visual details.

The skill is particularly useful for UX/UI designers and product teams who need to produce wireframes that facilitate discussions and feedback without the distractions of high-fidelity visuals. By maintaining a clean and flat aesthetic, the Wireframe Annotated skill ensures that all stakeholders can focus on the essential elements of the design, such as layout and functionality, rather than getting caught up in colors and images. This makes it an excellent choice for initial design phases or when presenting concepts to clients or team members.

Overall, this skill is a valuable addition to any design toolkit, streamlining the process of creating annotated wireframes that serve as a bridge between design and development. By following the structured approach outlined in the skill, users can produce consistent and effective wireframes that enhance communication and collaboration within their teams.

When to use it

Use this skill when you need to create low-fidelity wireframes that include detailed engineering and UX notes for development handoff.

When not to use it

This skill is not suitable for high-fidelity design work or when detailed visual aesthetics are required early in the design process.

What you can build with it

Initial Design Phase

Use this skill to create wireframes during the initial design phase, focusing on layout and functionality.

Client Presentations

Generate annotated wireframes to present to clients, ensuring clear communication of design intentions.

Team Collaboration

Facilitate discussions among team members by providing a structured wireframe that includes essential UX notes.

How to install Wireframe Annotated

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/wireframe-annotated --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Wireframe Annotated Skill

Produce a single flat, low-fidelity landing-page wireframe with a redline spec. The whole point is "structure + handoff notes, not pixels" — greyboxes carry the layout, numbered pins call out regions, and a right-hand spec panel turns each pin into a short engineering / UX note. Keep it clean and flat; never hand-drawn or scribbly.

Workflow

Skip finished UI. This skill explicitly wants a low-fidelity greybox look. Honor type tokens only loosely (one clean sans like Inter / system-ui for labels, one mono like IBM Plex Mono for the spec notes and pin numbers). Use medium-grey fills with defined darker borders so the page reads as a thumbnail — avoid near-white-on-white, which renders blank.
Set the two-column shell. LEFT is the wireframe canvas: a browser-chrome framed greybox page. RIGHT is a narrow "ANNOTATIONS / SPEC" panel. Pick ONE accent color (coral or blue) and use it ONLY for the numbered pins and the matching spec numbers — everything else stays greyscale.
Lay out the canvas, top to bottom, each block a greybox with a numbered pin absolutely positioned on it:
- Top nav — logo greybox + nav lorem-bars + a primary button block. Pin ①.
- Hero — big headline lorem bars + subhead + two CTA button blocks on the left; a large image placeholder (rect with a diagonal X) on the right. Pin ②.
- Logo strip — a row of 5 small greybox partner logos. Pin ③.
- Feature grid — 3 cards, each an icon square + title bar + 2 text bars. Pin ④.
- Footer — columns of lorem link-bars. Pin ⑤.
Mirror every pin in the spec panel. Each spec row = the circled number in the accent color + a short mono/sans note, e.g. "① Sticky nav, 64px, condenses on scroll", "② Hero H1 48/56, CTA pair primary+ghost", "③ 5 partner logos, greyscale", "④ 3-up at ≥960px → 1-up mobile", "⑤ 4-col footer, legal row". Mark the panel and each row with data-od-id.
Self-check:
- Every numbered pin on the canvas has exactly one matching spec row.
- The accent color appears ONLY on pins + spec numbers; the rest is greyscale.
- The page should read clearly at thumbnail size; if blocks vanish into the background, darken the fills/borders.
- It must NOT look pixel-perfect or hand-drawn — flat greyboxes only.

Output contract

Emit between <artifact> tags:

<artifact identifier="wireframe-slug" type="text/html" title="Annotated Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

Frequently asked questions about Wireframe Annotated

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.