page-mockup-builder

name	page-mockup-builder
platforms	["cowork","claude-code"]
description	Generate Tiger Data branded HTML page mockups from a brief and optional Figma reference. Use this skill when a marketer wants to visualize a new page before design resources are engaged -- especially when they say 'mock up a page', 'build a prototype', 'create a page layout', 'draft a landing page', 'show me what this could look like', or want a shareable HTML file for stakeholder review. Works in both Cowork (produces an HTML file) and Claude Code (adds optional Figma push for design team handoff). Do NOT use for implementing a finalized Figma design into production code (use design-to-code-bridge) or for writing marketing copy without a visual output (use brand-voice-writer).
references	["brand-guidelines","brand-voice-guide","product-marketing-context"]

Page Mockup Builder

Generate Tiger Data branded HTML page mockups by pulling design context from Figma and brand context from Tiger Den, then optionally pushing the rendered result back to Figma (Claude Code only).

Two tiers:

• Standard (Cowork): Figma link in, HTML file out
• Extended (Claude Code only): same as above, plus automatic push to Figma for design team handoff

When to use this skill

• A marketer wants to visualize a new page before design resources are engaged
• User asks to "mock up a page", "build a prototype", "draft a landing page", or "show me what this could look like"
• User wants a shareable HTML file for stakeholder review
• User references Figma for brand context but doesn't have a finalized design to implement

When NOT to use this skill

• The design already exists in Figma and needs to be faithfully implemented into production code — use design-to-code-bridge instead
• The user wants written marketing copy without a visual output — use brand-voice-writer instead
• The user wants to deploy content changes to the live Tiger Data website — use website-content-editor instead

Step 0: Pre-flight check

Invoke the marketing-preflight skill via the Skill tool, passing this skill's name: field value (page-mockup-builder) as the args. Do not proceed until it completes successfully. If it stops with an error, follow its instructions and stop.

If marketing-preflight returned a stale-connector footer note, append it verbatim at the end of your final response to the user.

Also fetch the No Fly List before doing any work:

get_marketing_reference(slug: "no-fly-list")

This is a list of customers who cannot be publicly referenced. Load these names as a hard constraint: never include any No Fly List customer in any output — not as named examples, proof points, customer quotes, case study references, or any other mention. If the user requests content featuring or referencing a No Fly List customer, stop and inform them that this customer cannot be publicly referenced. If a No Fly List name appears in source material you are working from, omit it from all outputs.

Once Tiger Den is confirmed, fetch this skill's reference docs:

get_marketing_context(slugs: ["brand-guidelines", "brand-voice-guide", "product-marketing-context"])

These provide the brand color tokens, typography, and spacing system (brand-guidelines), the tone, voice, and writing rules (brand-voice-guide), and audience context, terminology, and copy conventions (product-marketing-context). Do not proceed without them.

Step 1: Gather inputs

Ask the user for the following before proceeding. Collect all at once, not one at a time.

Required:

1. Page purpose — what is this page for? (e.g. "trial reactivation landing page", "product feature overview", "essay/thought leadership piece")
2. Key sections — what sections should the page include? (e.g. hero, feature list, testimonial, CTA). If unsure, Claude will propose a sensible default structure based on the page purpose.

Optional: 3. Figma reference link — a link to a specific frame or component in Figma to pull design tokens from. See guidance below. If not provided, brand defaults from Tiger Den will be used. 4. Primary CTA — what action should the page drive? (e.g. "Start free trial", "Claim $100 credit") 5. Key headline or message — any specific copy to anchor the page around 6. Target audience — who is this page for? (e.g. lapsed trialers, IoT engineers, enterprise buyers)

What to link to in Figma (if providing a link):

The Figma MCP reads context from a specific node — not the whole file or library. A top-level file URL won't work. Link to one of the following for best results:

Goal	What to link
Extract design tokens (colors, type, spacing)	A frame in the design system that shows variables/styles, or a components overview frame
Match an existing page style	A frame of an existing Tiger Data page (e.g. the current homepage, a product page)
Reference a specific component	A direct link to that component in the component library

To get a frame link in Figma: select the frame, right-click, "Copy link to selection". The URL will contain a node-id parameter — that's what the MCP uses.

Step 2: Pull Figma design context (if link provided)

If the user provided a Figma link, first verify the Figma MCP is available by attempting to call get_design_context. If the tool is not found or the call fails, do not stop — tell the user:

"The Figma MCP isn't available or couldn't reach that file. I'll build the mockup using Tiger Data brand defaults from Tiger Den instead."

Then proceed to Step 3 using brand defaults. Do not ask the user to fix their Figma connection before continuing — the mockup can be built without it.

If the Figma MCP is available, extract design context from the referenced frame or component.

Important limitations:

• The Figma MCP reads from a specific node, not the entire file or design system library. Context is scoped to whatever the link points to.
• Use get_design_context to extract layout, component structure, and a React+Tailwind representation of the frame — translate this to HTML/CSS for output.
• Use get_variable_defs to extract design tokens (color variables, spacing, typography) from the same frame.
• If the user has a Viewer or Collab seat in Figma (not Dev or Full), the MCP is limited to 6 tool calls per month. If they hit this limit, skip Figma context, use brand defaults from Tiger Den, and note the seat restriction.

From the linked frame, attempt to extract:

• Color tokens: primary, secondary, accent, background, text colors
• Typography: font families, heading sizes, body sizes, font weights
• Spacing: padding/margin patterns, section spacing, grid column behavior
• Component patterns: button styles, card styles, nav structure, CTA block patterns
• Layout conventions: max-width, section structure, full-bleed vs. contained layouts

If the link points to a single component, extract what's available and supplement the rest with brand defaults from Tiger Den. Don't attempt to traverse the whole file.

If no Figma link was provided, skip this step entirely and use brand defaults from the brand-guidelines reference fetched in Step 0.

Step 3: Propose page structure

Based on page purpose and design context, propose a section outline before building. Example for a landing page:

Proposed structure:
1. Nav — logo + primary CTA button
2. Hero — headline, subhead, primary CTA, optional hero image/graphic
3. Problem/value — 2-3 column feature or stat block
4. Social proof — customer logo strip or quote block
5. Feature detail — alternating text/visual rows
6. CTA section — full-bleed accent block, headline, button
7. Footer — minimal, links, legal

Refer to the page type defaults table at the bottom of this skill for starting structures by page type.

Confirm with the user or adjust before proceeding. If they say "looks good" or similar, proceed immediately.

Step 4: Generate HTML mockup

Build a single self-contained HTML file using the confirmed structure and design context.

Requirements

• Single file: all CSS and JS inline, no external dependencies except Google Fonts CDN
• Responsive: mobile-first, works at 375px and 1440px
• Semantic HTML: proper heading hierarchy, landmark regions, descriptive alt text placeholders
• Fidelity to design context: use extracted color tokens, type scale, and spacing exactly — do not freestyle if Figma context was provided; use Tiger Den brand defaults otherwise
• Placeholder content: use realistic placeholder copy that matches the page purpose and audience, informed by product-marketing-context. Do not use Lorem Ipsum.
• Image placeholders: use styled <div> blocks with background color and dimension labels (e.g. [1200x600 hero image]) rather than broken <img> tags
• CTA fidelity: use the exact CTA text and URL if provided by the user
• Voice and tone: apply writing style, sentence structure, and tone rules from brand-voice-guide
• Terminology and proof points: use brand name conventions, performance hooks, and audience language from product-marketing-context

Code quality

• CSS custom properties (--color-accent, --font-heading, etc.) at :root for easy theming
• Smooth scroll behavior
• Hover states on all interactive elements
• No JavaScript frameworks — vanilla JS only if needed for interactions

Step 5: Output

Cowork (Standard)

Save the HTML file to the workspace folder. Name the file descriptively based on the page purpose (e.g. trial-reactivation-mockup.html, iot-landing-page-mockup.html).

After saving, provide a computer:// link so the user can open the file directly:

Open your mockup

Then tell the user:

• The file opens in any browser and is ready to share for stakeholder review
• To request changes, they can describe what to adjust and Claude will update the file

Claude Code (Extended) — Push to Figma

This section applies only when running in Claude Code with the remote Figma MCP configured. Skip this section entirely in Cowork.

After generating and saving the HTML file, offer the user the option to push it to Figma:

"Your HTML mockup is ready. Would you like me to push it to Figma as editable design layers for the design team?"

If yes, proceed:

Requirements:

• Remote Figma MCP must be connected: https://mcp.figma.com/mcp
• Do NOT use the local desktop MCP (figma-desktop) — it is read-only and will conflict
• User must provide a target Figma file URL and optionally a target page name within that file

Steps:

1. Serve the HTML file locally:

   python3 -m http.server 8080
   

2. Prompt the user to confirm the local server is accessible at http://localhost:8080
3. Instruct the Figma MCP to capture the live UI:

   "Start a local server for my app at http://localhost:8080 and capture the UI to the Figma file at [USER'S FIGMA URL], page: [TARGET PAGE NAME]"
   

4. Use the generate_figma_design tool via the Figma MCP to perform the capture
5. Confirm success and share the Figma file link with the user

Known limitations to communicate:

• Animations and hover states don't transfer — the capture is a static snapshot
• Captured layers are editable frames, not Code Connect-linked components
• If generate_figma_design doesn't appear in available tools, the user may need to re-authenticate: claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Reference: Page type defaults

Use these default section structures if the user is unsure what sections to include.

Page type	Default sections
Landing page	Nav, Hero, Value props (3-col), Social proof, Feature detail, CTA, Footer
Essay / thought leadership	Nav, Hero (title + byline), Body (single column, wide margins), Related content, CTA, Footer
Campaign / offer page	Nav, Hero (offer-focused), How it works (steps), Objection handling, CTA (prominent), Footer
Product feature page	Nav, Hero, Feature overview, Detail rows (alternating), Comparison table, CTA, Footer
Event / webinar page	Nav, Hero (event details), Speaker bios, Agenda, Registration CTA, Footer

Dependencies

• Required: Tiger Den connector — for brand-guidelines (design tokens, typography, spacing), brand-voice-guide (tone, voice, writing rules), and product-marketing-context (copy conventions, audience, terminology). Skill cannot run without it.
• Optional: Figma MCP (figma-desktop or remote) — for extracting design tokens from a specific Figma frame. If unavailable, brand defaults from Tiger Den are used instead.
• Claude Code only: Remote Figma MCP (https://mcp.figma.com/mcp) — required for the optional Figma push step.