Agent skill · design visual · nexu-io
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.
Why this skill is useful
Codifies a structured approach to creating web prototypes using predefined templates and layouts, reducing guesswork for the AI.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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 Workflow Step 0 — Pre-flight (do this once before writing anything) 1. 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. 2. 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. 3. 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 index.html from the seed Use assets/template.html as the seed for the canonical project file, normally index.html. 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 project 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/web-prototype