Web Prototype

You need a single HTML file for a landing page, pricing sheet, or marketing site, and you don't want to write CSS from scratch. This skill copies a pre-built template with typography and spacing already dialed in, then you paste section layouts from a reference library: hero, feature grid, stat blocks, comparison tables. The template enforces a single accent color budget and serif headings. It's explicitly not for writing new styles or building multi-page apps. The workflow is rigid by design: read the seed file first, pick your sections before writing copy, fill in the placeholders, ship the artifact. Good for when you want something clean in one pass without fighting a framework.

skills.sh installs: 301
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill web-prototype --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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