wireframe-annotated

Generate annotated low-fidelity wireframes with redline specifications for desktop landing pages.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#prototype #ux #wireframe #landing-page #redline #Design

One-click install

npx skills add https://github.com/nexu-io/open-design --skill wireframe-annotated

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: wireframe-annotated
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/wireframe-annotated
Command: npx skills add https://github.com/nexu-io/open-design --skill wireframe-annotated

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill addresses the communication gap between designers and engineers by providing a standardized, low-fidelity wireframe format that clearly maps UI elements to technical specifications, preventing ambiguity during the handoff process.

Core Features & Use Cases

Redline Specification: Automatically generates a two-column layout with a wireframe canvas and a corresponding engineering spec panel.
Numbered Annotation System: Uses a standardized pin system (①–⑤) to link visual UI blocks to specific UX or engineering notes.
Use Case: When a project brief requires a quick, clear layout for a marketing landing page, this Skill produces a clean, greybox-style wireframe that defines structure and functional requirements without the distraction of final visual design.

Quick Start

Generate an annotated redline wireframe for a desktop landing page featuring a navigation bar, hero section, logo strip, feature grid, and footer.

Frequently Asked Questions about wireframe-annotated

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate an annotated wireframe?▼

Use the wireframe-annotated skill to create a landing page layout by providing a prompt that specifies the required sections like navigation, hero, and feature grids.

What is the purpose of the redline spec panel?▼

The redline spec panel maps numbered pins on the wireframe to specific engineering or UX notes, ensuring that layout requirements and functional details are clearly communicated.

Can I use this for mobile design?▼

The current implementation is optimized for desktop landing pages, though the CSS includes media queries to handle responsive collapsing of elements on smaller screens.

Why use greyboxes instead of high-fidelity designs?▼

Greybox wireframes focus on structure, hierarchy, and functional requirements rather than visual aesthetics, which helps stakeholders and engineers agree on the layout before pixel-perfect design begins.