nexu-io/open-design

web-prototype

General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.

75CollectingWrites files

See how to use it View GitHub source

npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/web-prototype"

Automated source guideDocumentationDeep source

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

Reorganized from the pinned upstream SKILL.md

Source-grounded documentation guide: web-prototype

Produce a single, self-contained HTML prototype using the bundled seed and layout library — not by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.

npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/web-prototype"

Check the pinned source

The pinned source contains enough sections and task detail for a source-grounded deep guide; automated content is still not an independent test.

600 source words · 10 usable sections

Documentation outputs

Open Design derives the canonical HTML artifact from this identifier. Do not also write another root HTML file for the same generation turn.
One sentence before the artifact. Nothing after.

Documentation workflow

Read web-prototype through these 5 source sections

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

Workflow

1. Read assets/template.html end-to-end — at minimum through the block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to rather than re-defining it inline on every section. 2. Read references/layou…

SKILL.md · Workflow

Read assets/template.html end-to-end — at minimum through the block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to rather than re-defi…Read references/layouts.md so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.Read the active DESIGN.md (already injected into your system prompt). Map its colors to the six :root variables in the seed; don't introduce new tokens.

Step 0 — Pre-flight (do this once before writing anything)

SKILL.md · Step 0 — Pre-flight (do this once before writing anything)

Step 1 — Prepare the artifact from the seed

Choose one kebab-case artifact slug before composing the page. Use assets/template.html as the seed for the final artifact HTML.

SKILL.md · Step 1 — Prepare the artifact from the seed

Choose one kebab-case artifact slug before composing the page. Use assets/template.html as the seed for the final artifact HTML.Do not write a project-root HTML draft with file-write before emitting the final . The live-artifact output is the canonical HTML file for this generation turn; an extra index.html, cast.html, or brief-derived draft can…Replace the six :root variables with the active design system's tokens. Replace the page and the topnav brand.

Step 2 — Plan the section list

Pick layouts before writing copy. Default rhythms (from layouts.md):

SKILL.md · Step 2 — Plan the section list

Pick layouts before writing copy. Default rhythms (from layouts.md):State the chosen list in one sentence to the user before writing — they can redirect cheaply now and not after 200 lines of HTML.

Step 3 — Paste and fill

For each chosen layout, copy the block from layouts.md into of the artifact HTML. Replace bracketed [REPLACE] strings with real, specific copy from the user's brief. No filler — if a slot is empty, the section is the wrong choice; pick a different layout.

SKILL.md · Step 3 — Paste and fill

SkillSignal prompt templates

Provide the task, context, and acceptance criteria

These prompts were written by SkillSignal from the source structure; they are not upstream text.

Source-grounded prompt

Use for a documentation task while explicitly checking the source sections.

Use web-prototype for this documentation task: [task]. Inputs and constraints: [details]. Work through these pinned SKILL.md sections: “Workflow”, “Step 0 — Pre-flight (do this once before writing anything)”, “Step 1 — Prepare the artifact from the seed”, “Step 2 — Plan the section list”, “Step 3 — Paste and fill”. Cite the concrete requirements that shape each step, do not invent capabilities absent from the source, and verify the result against: [acceptance criteria].

Documentation checklist

Verify each item before delivery

The source section “Workflow” has been checked.

The source section “Step 0 — Pre-flight (do this once before writing anything)” has been checked.

The source section “Step 1 — Prepare the artifact from the seed” has been checked.

The source section “Step 2 — Plan the section list” has been checked.

Source output checked: Open Design derives the canonical HTML artifact from this identifier. Do not also write another root HTML file for the same generation turn.

Source output checked: One sentence before the artifact. Nothing after.

Static permission evidence

Inspect the exact source lines that triggered a signal

These are source excerpts matched by deterministic rules, not findings of malicious behavior, safety, or actual execution.

medium · write-files

SKILL.md · L29

Do not write a project-root HTML draft with file-write before emitting the final `<artifact>`. The live-artifact output is the canonical HTML file for this generation turn; an extra `index.html`, `cast.html`, or brief-derived draft can be s

The documentation asks the agent to create, modify, or delete local files.

medium · write-files

SKILL.md · L75

Open Design derives the canonical HTML artifact from this identifier. Do not also write another root HTML file for the same generation turn.

The documentation asks the agent to create, modify, or delete local files.

Choose a different workflow

When another Skill is the better fit

web-prototype

A separate implementation from nexu-io/open-design; compare its source, maintenance signals, and permission requirements.

Open source detail

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

brand-voice

Build a source-derived writing style profile from real posts, essays, launch notes, docs, or site copy, then reuse that profile across content, outreach, and social workflows. Use when the user wants voice consistency without generic AI writing tropes.

A separate implementation from affaan-m/ECC; compare its source, maintenance signals, and permission requirements.

Open source detail

FAQ

What does the web-prototype source document cover?

How do I install web-prototype?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/web-prototype". Inspect the command and pinned source before running it.

Which permission-related actions were detected?

Static rules flagged write-files in the source; the page lists the matching lines and excerpts.

Repository stars

82,073

Repository forks

9,485

Quality

75/100

Source repository last pushed

2026-07-28

Quality breakdown

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

75/100

Documentation26/30

Specificity14/25

Maintenance20/20

Trust signals15/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.

web-prototype by nexu-io

brand-landingpage by wshobson

brand-voice by affaan-m

biopython by k-dense-ai

Comprehensive molecular biology toolkit. Use for sequence manipulation, file parsing (FASTA/GenBank/PDB), phylogenetics, and programmatic NCBI/PubMed access (Bio.Entrez). Best for batch processing, custom bioinformatics pipelines, BLAST automation. For quick lookups use gget; for multi-service integration use bioservices.

markdown-mermaid-writing by k-dense-ai

Comprehensive markdown and Mermaid diagram writing skill. Use when creating any scientific document, report, analysis, or visualization. Establishes text-based diagrams as the default documentation standard with full style guides (markdown + mermaid), 24 diagram type references, and 9 document templates.

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

Web Prototype Skill

Produce a single, self-contained HTML prototype using the bundled seed and layout library — not by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.

Resource map

web-prototype/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready section skeletons
    └── checklist.md        ← P0/P1/P2 self-review

Workflow

Step 0 — Pre-flight (do this once before writing anything)

Read assets/template.html end-to-end — at minimum through the <style> block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to <style> rather than re-defining it inline on every section.
Read references/layouts.md so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.
Read the active DESIGN.md (already injected into your system prompt). Map its colors to the six :root variables in the seed; don't introduce new tokens.

Step 1 — Prepare the artifact from the seed

Choose one kebab-case artifact slug before composing the page. Use assets/template.html as the seed for the final artifact HTML.

Do not write a project-root HTML draft with file-write before emitting the final <artifact>. The live-artifact output is the canonical HTML file for this generation turn; an extra index.html, cast.html, or brief-derived draft can be stranded beside it as an orphan.

Replace the six :root variables with the active design system's tokens. Replace the page <title> and the topnav brand.

Step 2 — Plan the section list

Pick layouts before writing copy. Default rhythms (from layouts.md):

Page kind	Default rhythm
Landing	1 hero → 3 features → 4 stats or 5 quote → custom split → 6 cta
Marketing / editorial	1 hero-center → 7 log list → 6 cta
Pricing	1 hero-center → 8 comparison table → 6 cta
Docs index	1 hero-center → 7 log list (sections of docs) → 6 cta

State the chosen list in one sentence to the user before writing — they can redirect cheaply now and not after 200 lines of HTML.

Step 3 — Paste and fill

For each chosen layout, copy the <section> block from layouts.md into <main id="content"> of the artifact HTML. Replace bracketed [REPLACE] strings with real, specific copy from the user's brief. No filler — if a slot is empty, the section is the wrong choice; pick a different layout.

Step 4 — Self-check

Run through references/checklist.md top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.

Step 5 — Emit the artifact

Wrap the completed HTML in <artifact> tags using the artifact slug as the identifier. One sentence before describing what's there. Stop after </artifact>.

Hard rules (the seed protects most of these — don't fight it)

Single accent, used at most twice per screen. Eyebrow + primary CTA is the default budget.
Display font is serif (Iowan Old Style / Charter / Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.
Image placeholders, not external URLs. Use the .ph-img class — never link to a stock photo CDN.
Mobile reflow already works via the seed's media query at 920px. Don't break it by adding fixed widths.
data-od-id on every <section> so comment mode can target it.

Output contract

<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
<!doctype html>
<html>...</html>
</artifact>

Open Design derives the canonical HTML artifact from this identifier. Do not also write another root HTML file for the same generation turn.

One sentence before the artifact. Nothing after.

Source repo: nexu-io/open-design
Skill path: plugins/_official/examples/web-prototype/SKILL.md
Commit SHA: 89d6d4ef21ba
Repository license: Apache-2.0
Data collected: Jul 28, 2026