Hearing Responses to Figma LP Wireframe Generator

Sales & LeadsFree

Description

An MCP cross-service workflow that retrieves website design hearing responses from FORMLOVA and auto-builds an LP wireframe in Figma using the Plugin API. Places headlines, CTA text, metrics, pricing plans, FAQ content directly into the wireframe. Color, layout composition, and tone selections are reflected in the design. Generates a Figma file ready for designer handoff or first-round client presentation. Best used in combination with the Website Design Hearing Sheet Generator recipe.

4 steps

  1. 1

    Get FORMLOVA response data

    Retrieve the latest hearing sheet response

  2. 2

    Create Figma file

    Create a new Figma design file named after the company

    Figma
  3. 3

    Build wireframe

    Build all LP sections from response data using Plugin API

    Figma
  4. 4

    Output reflection checklist

    Display which section each hearing item was reflected in

    Figma

Setup steps

Setup Steps

This workflow includes external service integrations. Follow the steps below to set it up.

  1. 1

    Get FORMLOVA response data

    Retrieve the latest hearing sheet response

    Integration: FORMLOVA
  2. 2

    Create Figma file

    Create a new Figma design file named after the company

    Integration: Figma
  3. 3

    Build wireframe

    Build all LP sections from response data using Plugin API

    Integration: Figma
  4. 4

    Output reflection checklist

    Display which section each hearing item was reflected in

    Integration: Figma

Prompt Example

Generate an LP wireframe in Figma based on FORMLOVA hearing sheet responses. Step 1: Retrieve the latest response from FORMLOVA form ID [enter form ID here]. Step 2: Create a new Figma design file named "[Company Name] - LP Wireframe". Step 3: Build the wireframe using Figma Plugin API (use_figma) with these rules: Base: 1440px wide, vertical Auto Layout, FILL width per section. Use main/sub colors from responses as accents. Greyscale base. Inter font. Gray placeholders for images (8px radius, labeled). Sections: Build only sections selected in "Sections to include". - hero = Nav + first view. Use headline, subheadline, CTA text from responses. Layout follows "First view layout" answer. - problem = 3 pain point cards extracted from target user info - solution = 3-step flow diagram from business description and strengths - features = 3 strength cards with main/sub color accents - numbers = Dark background, metrics displayed as large numbers - pricing = 3-tier plan cards, center highlighted - cases = 3 testimonial cards with quote + avatar placeholder - flow = 4-step numbered flow with arrows - faq = 5 Q&A items generated from business context - cta_bottom = Dark background + CTA + security badges - Footer with company info + links Tone interpretation: modern_tech=dark sections, wide spacing; warm_friendly=soft colors, rounded; minimal_clean=maximum whitespace Reflect design NOs from responses. Step 4: Show Figma file URL and output a reflection checklist.

Likes

steps
4 steps
Required plan
Free
Required integrations
FORMLOVAFigma

More in this category