Wireframe Annotated

What it does

When your agent uses it

• The brief asks for annotated wireframe
• Redline wireframe
• Wireframe with spec
• Lo-fi landing wireframe

Example prompts

• “wireframe + redline spec”
• “annotated wireframe”
• “redline wireframe”
• “/wireframe-annotated”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Skip finished UI. This skill explicitly wants a low-fidelity greybox
2. 2Set the two-column shell. LEFT is the wireframe canvas: a browser-chrome
3. 3Lay out the canvas, top to bottom, each block a greybox with a numbered
4. 4Mirror every pin in the spec panel. Each spec row = the circled number in
5. 5Self-check

What it can do on your machine

Read from SKILL.md and the folder at commit 3449fa6. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md.

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Wireframe Annotated loads about 960 tokens when it runs. Until then it costs about 145 tokens; SKILL.md has 380 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~145

When it runs · the whole SKILL.md, loaded when a task matches

~960

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nexu-io/open-design at commit 3449fa6, republished under its Apache-2.0 licence (© nexu-io). 380 words, ~960 tokens.

name

wireframe-annotated

description

An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note. This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT hand-drawn. Use when the brief asks for "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity", "线框图", "标注线框", or "redline".

triggers

annotated wireframe, redline, wireframe spec, lo-fi landing, wireframe, low fidelity, 标注线框图, redline 标注

od.mode

prototype

od.platform

desktop

od.scenario

design

od.fidelity

wireframe

od.example_prompt

Draw an annotated redline wireframe for a desktop landing page — greybox nav, hero, logo strip, 3-up feature grid and footer, numbered pins ①–⑤ and a…

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

© nexu-io, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in design-templates/wireframe-annotated of nexu-io/open-design.

• SKILL.md
• example.html

Open the folder on GitHubat commit 3449fa6