Web Prototype
FreeQuickly create self-contained HTML prototypes for web projects.
Free · Opens the source repo
What Web Prototype does
The Web Prototype skill is designed for developers and designers who need to rapidly create web prototypes without the hassle of writing CSS from scratch. Utilizing a seed HTML file, this skill allows users to produce a single, self-contained HTML prototype by copying and pasting predefined section layouts. This approach ensures that the prototypes maintain good design principles, leveraging the pre-defined typography, spacing, and class system already established in the seed template.
To get started, users must first familiarize themselves with the bundled assets/template.html, which contains the necessary class definitions and styling. The skill provides a structured workflow that guides users through preparing their prototype by selecting from a library of layout options defined in references/layouts.md. This means that users can focus on composing content rather than worrying about the underlying design structure, making it ideal for those who want to quickly validate ideas or concepts.
The Web Prototype skill is particularly useful for creating landing pages, marketing sites, documentation, or SaaS product pages. Users can choose from various default rhythms for different page types, ensuring that their prototypes are not only functional but also visually appealing. The skill also includes a checklist for self-review, helping users ensure that their prototypes meet quality standards before finalizing them.
Overall, the Web Prototype skill is an excellent tool for anyone in need of a fast and efficient way to build web prototypes, allowing them to focus on content and layout rather than the intricacies of CSS design.
When to use it
Use this skill when you need to quickly create a web prototype for a landing page or marketing site without delving into CSS details.
When not to use it
This skill may not be suitable for highly customized designs that require unique styling beyond the provided templates.
What you can build with it
Creating a Landing Page
Use the Web Prototype skill to quickly assemble a landing page for a new product launch, leveraging the predefined layouts for a polished look.
Rapid Marketing Prototyping
When needing to present a marketing concept, this skill allows for swift creation of a prototype that can be easily shared with stakeholders.
SaaS Documentation Page
Build a documentation index page for your SaaS application using the structured layouts, ensuring users can navigate easily.
How to install Web Prototype
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/web-prototype --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioWeb 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.htmlend-to-end — at minimum through the<style>block. The class inventory at the top ofreferences/layouts.mdlists 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.mdso 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
:rootvariables 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-imgclass — 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-idon 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.
Frequently asked questions about Web Prototype
Similar skills
Penpot UI/UX Design
Create professional UI/UX designs in Penpot with ease.
UX Theming
Streamline your VS Code theming process with best practices.
Wireframe
Create low-fidelity UI wireframes in SVG format.
Waitlist Page
Create a clean, focused pre-launch landing page.
Hallmark
Design skill for creating unique, structured UIs.
UI Styling
Create beautiful, accessible user interfaces effortlessly.