Skip to content
Get packs

Web Prototype

Builds a clickable, responsive SaaS-style landing page prototype in a single HTML file.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
3 files

What it does

When installed, the agent produces a full product landing page mockup: navigation bar, hero section, feature cards, how-it-works steps, social proof, optional pricing and a footer. The output is a single, styled web page with hover effects, scroll animations, responsive layouts and expandable FAQ sections built with native HTML and CSS. It is aimed at looking polished enough to feel ready to launch, which makes it useful for quickly visualising a product idea.

Great for

  • Designers who want a fast, clickable concept of a SaaS or product homepage
  • Founders or product managers pitching an idea to stakeholders
  • Front-end developers who want a starting layout to refine

Skip it if

  • Production launches without review: the page is a high-fidelity mockup, so copy, claims, pricing and accessibility still need checking before publishing
  • Projects needing real backend features such as sign-up, payments or data storage, since the skill only produces static page markup

Try asking

  • “Make a clickable landing page prototype for a project management SaaS tool”
  • “Create a responsive product homepage with hero, features, pricing and FAQ sections”
  • “Mock up a landing page for a new app at desktop 1440x900 width”
Step-by-step guide: how to use Web PrototypeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    prototype-web.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip prototype-web.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

  • Describe your product, audience and key features in the request so the sections and copy are relevant.
  • Ask for specific sections to be added or removed, such as pricing or testimonials.
  • Review the generated page on mobile and desktop widths before sharing it.

What's inside

  • example.html
  • example.md
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything 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.