mcpbeat

Html Mockup Builder

zapier/html-mockup-builder

Build self-contained HTML mockups from campaign, product, or page briefs.

1k tokens
context cost
the whole folder, loaded on every use
6
files
instructions only
0
copies elsewhere
how many repositories repackaged it
317
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/zapier/gtm-cheat-codes --skill html-mockup-builder

The instruction itself

4 sections, as written by the author

HTML Mockup Builder

Use this skill to turn a web or campaign idea into a reviewable HTML artifact.

Workflow

  • Identify page type, audience, and conversion goal.
  • Determine required sections and content hierarchy.
  • Build a self-contained HTML file with embedded CSS.
  • Use the team's design system tokens and component patterns.
  • Verify responsive behavior before sharing.

Zapier MCP And SDK Role

  • Use Zapier MCP to read briefs, approved assets, design guidance, and source copy.
  • Use Zapier SDK for mockup request intake, artifact logging, and review routing when the workflow repeats.
  • Do not publish, deploy, or use customer assets without approval.

Guardrails

  • Do not publish or deploy unless explicitly requested.
  • Do not use unapproved customer logos or private screenshots.
  • Keep the mockup reviewable and easy to edit.

How to use it

Copy the folder

Take zapier/html-mockup-builder from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.