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
Provides a structured workflow for creating web prototypes with specific design patterns and templates that the AI wouldn't reliably generate on its own.
What it needs
About 4k 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 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/web-prototype--590501