Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Web Prototype

nexu-io/open-design

  • 303 installs
  • 83.7k repo stars
  • Updated August 5, 2026
  • nexu-io/open-design

web-prototype is an Open Design agent skill that generates single-file HTML landing and marketing prototypes by composing bundled layout skeletons and DESIGN.md tokens for developers who need fast clickable mocks.

About

web-prototype is a prototype-mode skill in nexu-io/open-design that produces general-purpose desktop web prototypes as a single self-contained HTML file. Agents copy the bundled assets/template.html seed—which encodes six :root design tokens and a class system—then paste section layouts from references/layouts.md containing 8 paste-ready skeletons for hero, features, stats, pricing, and CTA rhythms. The skill reads the active DESIGN.md for color, typography, layout, and components before writing index.html for sandboxed preview in Open Design. Developers reach for web-prototype when they need a landing, marketing, docs, or SaaS page mockup faster than scaffolding React or Next.js. A P0/P1/P2 checklist in references/checklist.md gates output quality, and data-od-id attributes enable comment-mode targeting. Default page rhythms cover landing, editorial, pricing, and docs index flows without writing CSS from scratch.

  • General web mocks
  • Multi-page exploration
  • Fast iteration
  • Stakeholder demos
  • Pre-build alignment

Web Prototype by the numbers

  • 303 all-time installs (skills.sh)
  • +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #828 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill web-prototype

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs303
repo stars★ 83.7k
Last updatedAugust 5, 2026
Repositorynexu-io/open-design ↗

How do you prototype a landing page without a frontend stack?

Create general-purpose web prototypes for new features, dashboards, or marketing pages when teams need fast clickable mocks without bootstrapping a full frontend stack.

Who is it for?

Developers and designers who need fast single-file HTML landing or SaaS mocks inside Open Design before production frontend work.

Skip if: Developers who already need a production React or Next.js component library rather than a disposable HTML composition prototype.

When should I use this skill?

A developer asks for a landing page prototype, marketing mockup, or single-page homepage without bootstrapping a full frontend framework.

What you get

Self-contained index.html prototype with DESIGN.md tokens, section layouts, and sandboxed HTML preview

  • index.html prototype
  • section layout plan
  • checklist-passed HTML mock

By the numbers

  • Bundles 8 paste-ready section skeletons in references/layouts.md
  • Seed template.html defines 6 :root CSS design-token variables
  • Includes P0, P1, and P2 checklist tiers in references/checklist.md

Files

SKILL.mdMarkdownGitHub ↗

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

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 kindDefault rhythm
Landing1 hero → 3 features → 4 stats or 5 quote → custom split → 6 cta
Marketing / editorial1 hero-center → 7 log list → 6 cta
Pricing1 hero-center → 8 comparison table → 6 cta
Docs index1 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-img class — 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-id` on 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.

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What file does web-prototype produce?

web-prototype writes a single self-contained index.html file composed from the bundled template.html seed and layout skeletons. Open Design renders the file as a sandboxed HTML preview without requiring a frontend framework.

How many layout skeletons does web-prototype include?

web-prototype includes 8 paste-ready section skeletons in references/layouts.md. Agents pick hero, features, stats, pricing, or CTA layouts and map six :root tokens from the active DESIGN.md before writing index.html.

Design & UI/UXuiux
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.