# Wireframe Annotated

> |

- **Type:** Skill
- **Install:** `agentstack add skill-nexu-io-open-design-wireframe-annotated`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [nexu-io](https://agentstack.voostack.com/s/nexu-io)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [nexu-io](https://github.com/nexu-io)
- **Source:** https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/wireframe-annotated
- **Website:** https://open-design.ai

## Install

```sh
agentstack add skill-nexu-io-open-design-wireframe-annotated
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

1. **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.

2. **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.

3. **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 ⑤.

4. **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`.

5. **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 `` tags:

```

...

```

One sentence before the artifact, nothing after.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [nexu-io](https://github.com/nexu-io)
- **Source:** [nexu-io/open-design](https://github.com/nexu-io/open-design)
- **License:** Apache-2.0
- **Homepage:** https://open-design.ai

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-nexu-io-open-design-wireframe-annotated
- Seller: https://agentstack.voostack.com/s/nexu-io
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.