What problem does it solve? Building landing, marketing, docs, or pricing page prototypes from scratch leads to inconsistent styling, filler copy, and generic-looking output. This Skill produces a single self-contained HTML page by copying a pre-designed seed template and pasting proven section layouts, so every prototype follows consistent typography, spacing, and accent-color rules. ## Core Features & Use Cases - Seed-based composition: Copies assets/template.html with six design tokens, a full class system, sticky nav, and mobile reflow already built in, then fills sections instead of writing CSS from scratch. - Eight paste-ready layouts: Hero (centered or split), feature triplet, stat row, pull quote, CTA strip, log list, and comparison table skeletons from references/layouts.md cover landing, marketing, pricing, and docs pages. - P0/P1/P2 self-review checklist: references/checklist.md enforces rules like one accent per screen, no invented metrics, no emoji icons, and data-od-id on every section for comment-mode targeting. - Use Case: Ask for a landing page for a SaaS product and receive one index.html artifact with a hero, three features, a stat row, and a closing CTA, all bound to your design system's colors. ## Quick Start Ask the assistant to create a landing page prototype for your product using the web-prototype skill and provide your brand colors and page copy.
