html-mockup-builder

$npx mdskill add zapier/gtm-cheat-codes/html-mockup-builder

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

  • Turns a web or campaign idea into a reviewable HTML artifact.
  • Uses Zapier MCP to read briefs, assets, and design guidance.
  • Determines page type, audience, goal, sections, and content hierarchy.
  • Delivers a self-contained HTML file with embedded CSS and responsive behavior.

SKILL.md

.github/skills/html-mockup-builderView on GitHub ↗
---
name: html-mockup-builder
description: Build self-contained HTML mockups from campaign, product, or page briefs.
---

# HTML Mockup Builder

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

## Workflow

1. Identify page type, audience, and conversion goal.
2. Determine required sections and content hierarchy.
3. Build a self-contained HTML file with embedded CSS.
4. Use the team's design system tokens and component patterns.
5. 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.

More from zapier/gtm-cheat-codes

SkillDescription
ai-audit-account-reportTurn account usage data into a concise AI audit outreach package.
brand-guidelines-builderHelp non-designers evaluate work against brand guidelines and know what to fix.
campaign-postmortemBuild sourced campaign retrospectives from goals, launch context, performance data, team feedback, and follow-up actions.
company-recording-clipTurn a company meeting or event recording into a short, approved, postable clip.
cross-crm-opportunity-syncCoordinate opportunities and customer records across multiple CRMs while preserving attribution, visibility, commissions, and governance.
customer-deck-builderBuild tailored customer-facing sales or customer success decks from approved account context and generate the presentation with Gamma through Zapier MCP.
customer-story-writerDraft customer stories from approved transcripts, notes, briefs, quotes, and proof points. Use for narrative customer stories, campaign stories, and metric-forward customer story pages.
daily-lead-stewardMaintain a daily review cockpit for high-intent leads and hand-raisers.
find-customer-social-proofFind approved customer proof for campaigns, pages, decks, emails, and sales conversations. Use when a team needs relevant case studies, quotes, stats, slides, logos, or peer examples.
find-lead-account-ownerResolve the right account owner for a lead using contact, company, and deal ownership evidence.