How to use the Web Prototype Builder agent skill (web-prototype)

What is an agent skill and what does this one do?

An agent skill is a folder of instructions and supporting files that an AI agent can load when a task matches it. The web-prototype skill is one of these. Its main file is SKILL.md, and it works from a bundled seed file, assets/template.html, rather than writing styling from scratch.

The seed contains predefined colors, fonts and spacing. The agent pastes in prepared section layouts from references/layouts.md, such as a hero, features, stats, a pricing table or a call to action, and fills them with your copy. Before saving, it runs a self-review checklist from references/checklist.md. The output is a single HTML file, normally index.html.

• Produces one desktop-focused HTML file with no build step.
• Uses a bundled design seed instead of custom CSS from scratch.
• Asks for or sources real images rather than inventing them.
• Targets landing, marketing, docs and SaaS pages, not mobile apps or complex web applications.

Install the web-prototype skill

Download the ZIP for this skill from this page and unzip it. To make it available across your projects, place the folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload

Check what the skill needs before you start

The skill needs an agent that can read and write files in your project folder, because it creates index.html there. If you want real photos sourced automatically, the agent also needs image search or fetch capability. The skill uses the network, but it does not run scripts.

• Read and write access to the project folder (required)
• Image search or fetch capability (optional, for real photos)
• Runs scripts: no
• Uses network: yes

How to trigger the skill with natural requests

You do not need special syntax. The skill's description and triggers include words such as prototype, mockup, landing, single page, marketing page and homepage. Describe the page, its audience and its sections in plain language, and the agent will choose this skill when it matches.

Give the agent your copy or a clear brief. The skill is built to avoid filler, so a vague request produces a thinner page. Naming the section list you want also helps.

• "Make a single-page landing mockup for a note-taking app for students."
• "Prototype a marketing page for our spring campaign with a hero, three features and a pricing table."
• "Build a homepage mockup for a documentation tool, with a call to action at the end."

What happens during a run

The agent reads the seed template and the layout list, then states the section list in one sentence before writing copy so you can redirect it early. It then copies each chosen section into the page, replaces placeholder text with your copy and checks the result against the checklist.

Placeholder image blocks are treated as temporary. The skill asks for real images where a real-world subject is named, and says so in its summary if no suitable image could be acquired.

• Section list is proposed before the HTML is written.
• The final reply is a short summary naming the file, not the full source.

Safety notes: scripts and network

The skill does not run scripts. Its network use is limited to fetching images when you have image search or fetch available. Review any image the agent sources for licence and suitability before you publish, because the skill itself does not verify rights.

Placeholder images and generated copy still need human review. Treat the output as a draft for approval, not a finished production site.

• Runs scripts: no
• Uses network: yes (image fetching, if enabled)
• Check image licences and all copy before publishing

Tips for better results

Supply real copy, product names and audience details. The skill replaces bracketed placeholders with specific text from your brief, and empty slots make it pick a different layout.

Review the file in a desktop browser. The layouts reflow for smaller screens, but the skill is designed for desktop single-page layouts.

• Give exact headings and feature names where you have them.
• Ask for a different section order if the first proposal does not fit.
• Keep the output as a draft to react to, then move to a proper build.