{"id":"35d594fe-d1fa-405e-a1eb-256e6ae10857","shortId":"uBM2gC","kind":"skill","title":"web-prototype","tagline":"General-purpose desktop web prototype. Single self-contained HTML file built\nby copying the seed `assets/template.html` and pasting section layouts from\n`references/layouts.md`. Default for any landing / marketing / docs / SaaS\npage when no more specific skill matches.","description":"# Web Prototype Skill\n\nProduce 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.\n\n## Resource map\n\n```\nweb-prototype/\n├── SKILL.md                ← you're reading this\n├── assets/\n│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)\n└── references/\n    ├── layouts.md          ← 8 paste-ready section skeletons\n    └── checklist.md        ← P0/P1/P2 self-review\n```\n\n## Workflow\n\n### Step 0 — Pre-flight (do this once before writing anything)\n\n1. **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.\n2. **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.\n3. **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.\n\n### Step 1 — Copy the seed\n\nCopy `assets/template.html` to the project root as `index.html`. Replace the six `:root` variables with the active design system's tokens. Replace the page `<title>` and the topnav brand.\n\n### Step 2 — Plan the section list\n\n**Pick layouts before writing copy.** Default rhythms (from `layouts.md`):\n\n| Page kind | Default rhythm |\n|---|---|\n| Landing | 1 hero → 3 features → 4 stats *or* 5 quote → custom split → 6 cta |\n| Marketing / editorial | 1 hero-center → 7 log list → 6 cta |\n| Pricing | 1 hero-center → 8 comparison table → 6 cta |\n| Docs index | 1 hero-center → 7 log list (sections of docs) → 6 cta |\n\nState the chosen list in one sentence to the user *before* writing — they can redirect cheaply now and not after 200 lines of HTML.\n\n### Step 3 — Paste and fill\n\nFor each chosen layout, copy the `<section>` block from `layouts.md` into `<main id=\"content\">` of your `index.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.\n\n### Step 4 — Self-check\n\nRun through `references/checklist.md` top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.\n\n### Step 5 — Emit the artifact\n\nWrap `index.html` in `<artifact>` tags. One sentence before describing what's there. Stop after `</artifact>`.\n\n## Hard rules (the seed protects most of these — don't fight it)\n\n- **Single accent, used at most twice per screen.** Eyebrow + primary CTA is the default budget.\n- **Display font is serif** (Iowan Old Style / Charter / Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.\n- **Image placeholders, not external URLs.** Use the `.ph-img` class — never link to a stock photo CDN.\n- **Mobile reflow already works** via the seed's media query at 920px. Don't break it by adding fixed widths.\n- **`data-od-id` on every `<section>`** so comment mode can target it.\n\n## Output contract\n\n```\n<artifact identifier=\"kebab-case-slug\" type=\"text/html\" title=\"Human Title\">\n<!doctype html>\n<html>...</html>\n</artifact>\n```\n\nOne sentence before the artifact. Nothing after.","tags":["web","prototype","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-web-prototype","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/web-prototype","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (3,441 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:27.867Z","embedding":null,"createdAt":"2026-05-01T18:52:34.375Z","updatedAt":"2026-05-11T06:52:27.867Z","lastSeenAt":"2026-05-11T06:52:27.867Z","tsv":"'0':116 '1':126 '8':103 'accent':74 'alreadi':68 'anyth':125 'asset':92 'assets/template.html':21,128 'budget':75 'built':16 'bundl':55 'checklist.md':109 'chrome':98 'class':96 'compos':80 'contain':13,50 'copi':18 'css':63 'default':28,71 'desktop':7 'doc':33 'encod':69 'end':130,132 'end-to-end':129 'file':15 'first':100 'flight':119 'general':5 'general-purpos':4 'good':70 'html':14,51 'job':77 'land':31 'layout':25,58 'layouts.md':102 'librari':59 'map':83 'market':32 'match':41 'minimum':134 'p0/p1/p2':110 'page':35 'past':23,105 'paste-readi':104 'pre':118 'pre-flight':117 'produc':45 'prototyp':3,9,43,52,86 'purpos':6 're':89 'read':90,99,127 'readi':106 'refer':101 'references/layouts.md':27 'resourc':82 'review':113 'saa':34 'scratch':65 'section':24,107 'seed':20,56,67,94 'self':12,49,112 'self-contain':11,48 'self-review':111 'singl':10,47 'skeleton':108 'skill':40,44 'skill-web-prototype' 'skill.md':87 'source-nexu-io' 'space':73 'specif':39 'step':115 'system':97 'template.html':93 'token':95 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'typographi':72 'use':53 'web':2,8,42,85 'web-prototyp':1,84 'workflow':114 'write':62,124","prices":[{"id":"515e661a-f428-4fe3-9732-7f7d1b18e7a4","listingId":"35d594fe-d1fa-405e-a1eb-256e6ae10857","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:34.375Z"}],"sources":[{"listingId":"35d594fe-d1fa-405e-a1eb-256e6ae10857","source":"github","sourceId":"nexu-io/open-design/web-prototype","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/web-prototype","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:34.375Z","lastSeenAt":"2026-05-11T06:52:27.867Z"},{"listingId":"35d594fe-d1fa-405e-a1eb-256e6ae10857","source":"skills_sh","sourceId":"nexu-io/open-design/web-prototype","sourceUrl":"https://skills.sh/nexu-io/open-design/web-prototype","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:26.405Z","lastSeenAt":"2026-05-07T22:41:36.227Z"}],"details":{"listingId":"35d594fe-d1fa-405e-a1eb-256e6ae10857","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"web-prototype","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"d2b54690ad48dfb65a9d0fc1c3325c9feb09b32a","skill_md_path":"skills/web-prototype/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/web-prototype"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"web-prototype","description":"General-purpose desktop web prototype. Single self-contained HTML file built\nby copying the seed `assets/template.html` and pasting section layouts from\n`references/layouts.md`. Default for any landing / marketing / docs / SaaS\npage when no more specific skill matches."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/web-prototype"},"updatedAt":"2026-05-11T06:52:27.867Z"}}