Back to browse

nexu-io/open-design

wireframe-annotated

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 landi

70Collecting
See how to use itView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/wireframe-annotated"
Automated source guideContent productionStandard source

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Reorganized from the pinned upstream SKILL.md

Source-grounded content guide: wireframe-annotated

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.…

npx skills add https://github.com/nexu-io/open-design --skill "design-templates/wireframe-annotated"
Check the pinned source

The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.

390 source words · 2 usable sections

Best fit

  • Use when the brief asks for "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landi

Content deliverables

  • One sentence before the artifact, nothing after.

Content workflow

Read wireframe-annotated through these 2 source sections

Sections are extracted automatically from the pinned SKILL.md and link back to the source.

01

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 t…

SKILL.md · Workflow
Skip finished UI. This skill explicitly wants a low-fidelity greyboxSet the two-column shell. LEFT is the wireframe canvas: a browser-chromeLay out the canvas, top to bottom, each block a greybox with a numbered
02

Output contract

One sentence before the artifact, nothing after.

SKILL.md · Output contract
One sentence before the artifact, nothing after.

Content checklist

Verify each item before delivery

The source section “Workflow” has been checked.

The source section “Output contract” has been checked.

Source output checked: One sentence before the artifact, nothing after.

Choose a different workflow

When another Skill is the better fit

brand-landingpage

Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens —

A separate implementation from wshobson/agents; compare its source, maintenance signals, and permission requirements.

Open source detail

suede-workflow-skills

Umbrella workflow for 67 public skills: Full Send, copy, design, code review, SEO, launch packaging, MCP QA, iOS and Android app shipping, and creator workflows. Loads the full public skill pack.

A separate implementation from JasonColapietro/suede-creator-skills; compare its source, maintenance signals, and permission requirements.

Open source detail

free-tool-strategy

Plans free tools, calculators, generators, and interactive widgets that attract target audience through search and social sharing. Engineering as marketing — build something useful, capture leads. Use when someone wants to build a free tool for marketing, says 'free tool', 'calculator', 'generator', 'engineering as marketing', 'side project marketing', 'interactive widget', 'lead generation tool', 'SEO tool', 'growth hack', 'build something to attract users', or wants to attract users through ut

A separate implementation from MoizIbnYousaf/marketing-cli; compare its source, maintenance signals, and permission requirements.

Open source detail

FAQ

What does the wireframe-annotated source document cover?

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.…

How do I install wireframe-annotated?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/wireframe-annotated". Inspect the command and pinned source before running it.

Repository stars
82,073
Repository forks
9,485
Quality
70/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

70/100
Documentation22/30
Specificity11/25
Maintenance20/20
Trust signals17/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

brand-landingpage by wshobson

Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens —

suede-workflow-skills by JasonColapietro

Umbrella workflow for 67 public skills: Full Send, copy, design, code review, SEO, launch packaging, MCP QA, iOS and Android app shipping, and creator workflows. Loads the full public skill pack.

free-tool-strategy by MoizIbnYousaf

Plans free tools, calculators, generators, and interactive widgets that attract target audience through search and social sharing. Engineering as marketing — build something useful, capture leads. Use when someone wants to build a free tool for marketing, says 'free tool', 'calculator', 'generator', 'engineering as marketing', 'side project marketing', 'interactive widget', 'lead generation tool', 'SEO tool', 'growth hack', 'build something to attract users', or wants to attract users through ut

conversion-flow-cro by MoizIbnYousaf

Optimizes multi-step conversion flows including signup, onboarding, upgrade, and checkout. Maps each step, identifies friction and drop-off risks, then recommends specific copy/UX changes with A/B test plans. Use when someone says 'signup flow', 'onboarding optimization', 'checkout conversion', 'paywall optimization', 'activation rate', 'funnel analysis', 'why are users dropping off', 'registration flow', 'trial conversion', 'free to paid', 'upgrade flow', 'user journey', or wants to improve any

suede-code-review by JasonColapietro

Find the bugs a diff can actually ship: TypeScript, React, Next.js, OWASP, accessibility, SEO, database, and deploy-risk review. Return findings, not a grade.

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min

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

Skill path
design-templates/wireframe-annotated/SKILL.md
Commit SHA
89d6d4ef21ba
Repository license
Apache-2.0
Data collected