Source profileQuality 70/100

nexu-io/open-design/design-templates/wireframe-annotated/SKILL.md

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

Source repository stars
82,073
Declared platforms
0
Static risk flags
0
Last source update
2026-07-28
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and where it fits

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

Best for

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

Not for

  • Tasks that require unconfirmed production actions or broad system permissions.
  • Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

PlatformStatusEvidenceWhat to check
CodexNot declaredNo explicit evidencePortability before use
Claude CodeNot declaredNo explicit evidencePortability before use
CursorNot declaredNo explicit evidencePortability before use
Gemini CLINot declaredNo explicit evidencePortability before use
Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/wireframe-annotated"
Safe inspection promptEditorial

Inspect the Agent Skill "wireframe-annotated" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/design-templates/wireframe-annotated/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

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

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

    Output contract

    One sentence before the artifact, nothing after.

    One sentence before the artifact, nothing after.

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial
SignalValueEvidence typeMeaning
Quality score70/100ComputedDocumentation, specificity, maintenance, and trust rules
Repository stars82,073SourceRepository attention, not individual Skill quality
Compatibility0 platformsSourceDeclared in the catalog source record
Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository
nexu-io/open-design
Skill path
design-templates/wireframe-annotated/SKILL.md
Commit
89d6d4ef21baf80f871595abdf6f7de6e941dd44
License
Apache-2.0
Collected
2026-07-28
Default branch
main
View the original SKILL.md

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.

Alternatives

Compare before choosing

Computed 9438,313

wshobson/agents

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 —

2026-07-220 platforms
Computed 92165

JasonColapietro/suede-creator-skills

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.

2026-07-280 platforms
Computed 9227

MoizIbnYousaf/marketing-cli

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

2026-07-280 platforms
Computed 9027

MoizIbnYousaf/marketing-cli

conversion-flow-cro

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

2026-07-280 platforms