Skip to content
Get packs

Web Prototype Builder

Builds a single self-contained HTML landing, marketing, or docs page from a bundled template and layouts.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
5 files

What it does

When installed, the agent produces a single HTML file for a desktop web page such as a landing, marketing, docs, or SaaS page. Instead of writing styling from scratch, it starts from a bundled seed template with predefined colors, fonts, and spacing, then pastes in prepared section layouts (hero, features, stats, pricing table, call to action) and fills them with your copy. It also follows a self-review checklist before saving the file, and asks for or sources real images rather than inventing them.

Great for

  • Designers who want a quick, polished first draft of a landing page to react to
  • Marketers mocking up a product or campaign page before development
  • Developers who need a clean static HTML starting point with no build step

Skip it if

  • Mobile app screens or complex interactive web apps, since it targets desktop single-page layouts and does not build application logic
  • Final production sites needing real content and imagery approval, because placeholder images and generated copy still need human review

Try asking

  • “Make a landing page prototype for a note-taking app with a hero, three feature sections, and a call to action”
  • “Build a single-page marketing mockup for a coffee subscription service”
  • “Create a docs index page for an open-source CLI tool”
Step-by-step guide: how to use Web Prototype BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the Apache-2.0 licence and an attribution note.

    web-prototype.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip web-prototype.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip web-prototype.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give a specific brief with product name, audience, and key messages so the copy is not filler
  • Review the stated section list the agent proposes before it writes the HTML, since changes are cheap at that stage
  • Check any sourced images for licensing before publishing, because the skill asks for real imagery but does not verify rights

What's inside

  • assets/template.html
  • example.html
  • references/checklist.md
  • references/layouts.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.