The most expensive mistake in web design happens before any design work begins -- during the initial client hearing. Miss a key question, and the first draft comes back to "that is not what I had in mind." Having completed over 100 website projects on CrowdWorks (Japan's largest freelance platform), where I was selected for the Top Class Directory, this pattern is unmistakable. Now focused on building FORMLOVA, this article distills that experience into a repeatable workflow.
The questions you need to ask are almost always the same. Yet the process -- hopping between Zoom calls, Slack threads, and email attachments, then compiling meeting notes -- eats up time on every project. If the questions are predictable, they belong in a form. And with MCP orchestration, the structured responses can go straight into Figma as a wireframe.
Why Turn Hearings into Forms
Verbal hearings have three recurring problems.
Information scatters. Requirements discussed on a video call, follow-up details sent via Slack, logo files arriving by email. Consolidating everything into one place becomes a project in itself.
Questions get skipped. Conversations drift. The client starts talking about color preferences, and you forget to ask about first-view layout or design elements to avoid. These gaps surface later as revision requests.
Meeting notes take time. A one-hour hearing plus thirty minutes of note-taking. Ninety minutes consumed before any design work begins, repeated on every project.
A structured form eliminates all three. Responses arrive in a consistent format with no consolidation needed. The question list prevents omissions. And there are no notes to write -- the responses are the record. As a side benefit, clients get time to think through their answers, which raises the quality of the input.
Hearing Sheet Design -- 5 Steps, 28 Questions
The hearing sheet is designed as a multi-page form with five steps containing 28 questions total.
Why Five Steps
Presenting 28 questions on a single page causes clients to abandon the form immediately. Splitting into five steps keeps each page to five or seven questions, which significantly lowers the perceived effort.
The step order is intentional.
| Step | Content | Purpose |
|---|---|---|
| Step 1 | About Your Business | Understand who the client is. This becomes the foundation of the site |
| Step 2 | Target Audience and Goals | Who is the site for, and what should visitors do? Design direction is determined here |
| Step 3 | Content to Include | Headlines, CTA copy, performance metrics. The more specific, the more accurate the wireframe |
| Step 4 | Design Direction | Mood, colors, fonts, first-view layout, elements to avoid. The most important step |
| Step 5 | Assets and Requests | Logos, photos, reference screenshots, additional requirements. Collect materials last |
The sequence moves from business context to audience, then content, design, and finally assets. This mirrors the order a designer naturally processes information.
Three Questions That Matter Most
Out of 28 questions, three consistently make the biggest difference in first-draft accuracy.
"Design elements you want to avoid" (Step 4). Asking what clients want produces vague answers. Asking what they do not want produces specific ones. "No cheap-looking stock illustrations." "Nothing cluttered." A single constraint like this narrows the design direction more than three positive preferences combined.
"First-view layout" (Step 4). This question offers five choices: full-width photo with text overlay, split layout (text left, image right), illustration with text, text-centered (no image), and video background. Without options, clients say "something nice." With options, they pick the one closest to their mental image. A dropdown turns a vague conversation into a concrete decision.
"Sites or designs you want to reference" (Step 4). Free text. URLs, service names, even "something like Apple" are all useful. Having a reference -- any reference -- changes the accuracy of the first draft entirely.
Why Dropdowns
Industry, mood, font direction, first-view layout, and primary conversion action all use dropdown selectors instead of free text. Structured options raise response quality.
When "industry" is a free text field, you get "IT-related," "technology," and "SaaS" for the same category. A dropdown with "IT / SaaS" keeps the data consistent and reusable across projects.
MCP Orchestration: Auto-generate Figma Wireframes
Turning hearings into a form is already a significant improvement. But the real payoff comes next. With MCP orchestration, hearing responses feed directly into Figma to generate a wireframe automatically.
How It Works
FORMLOVA and Figma both operate as MCP servers. When both are connected to an MCP client such as Claude Desktop or Cursor, the LLM acts as an orchestrator, executing a cross-service workflow.
The flow works like this:
- Retrieve the latest hearing response from FORMLOVA
- Interpret the response data and create a new design file in Figma
- Build wireframe sections using the Figma Plugin API
- Return the completed Figma file URL
You paste the prompt and run it. That is the entire interaction.
Time Required
| Task | Time |
|---|---|
| Generate the hearing form (Recipe 1) | ~2 min |
| Fill in test responses | ~1 min |
| Generate Figma wireframe (Recipe 2) | ~3 min |
| Total | ~7 min |
The traditional flow -- a one-hour hearing, thirty minutes of notes, three to four hours of wireframe construction -- takes at least half a day. The auto-generated wireframe is not a finished deliverable. It is a starting point that a designer refines. But the higher the quality of that starting point, the faster every subsequent step becomes.
Generated Figma File
The test case used here is "GreenLeaf Analytics," an AI-powered SaaS that helps e-commerce stores recover abandoned carts. The hearing responses were entered into the form, and the wireframe was generated automatically.
.webp)
How Hearing Items Map to the Wireframe
The table below shows where each hearing response appears in the generated wireframe.
| Category | Hearing Item | Wireframe Reflection |
|---|---|---|
| Content | Headline "Stop losing sales. Start recovering them." | Hero section heading |
| Content | Subheadline | Hero subtitle |
| Content | CTA "Start free trial" | Nav + Hero + Final CTA (3 locations) |
| Content | 5 metrics (2,800+, 35%, $48M, 5 min, $0) | Numbers section |
| Content | FAQ | 5 items auto-generated from business context |
| Design | Main color #059669 (green) | CTA buttons, accents, labels |
| Design | Sub color #1E293B (dark slate) | Dark sections, navigation |
| Design | First view "split" | Left text + right dashboard mockup |
| Design | Tone "Modern & tech-forward" | Dark hero, generous whitespace |
| Structure | 10 sections selected | All 10 sections generated |
| Avoid | No stock photos | Gray placeholders only |
| Avoid | No cluttered layouts | Generous padding, clean cards |
| Requirements | 3-tier pricing (Growth highlighted) | Pricing cards, center dark + badge |
| Requirements | Security badges | SOC 2, GDPR, 256-bit in final CTA |
Of 28 hearing items, 14 are reflected directly. The remaining items -- target audience, business description, competitive advantages -- are used indirectly in section copy and FAQ question generation.
Figma vs Canva
The same hearing data was also tested with Canva MCP for comparison. The conclusion: different tools for different purposes.
Figma produces structurally accurate wireframes. 1440px width, Auto Layout, each section in its own frame. A designer can pick up exactly where the automation left off -- adjust typography, swap in real images, refine colors -- and move straight into production.
Canva is template-based and looks polished out of the box, but the output is not structured for handoff to production design. It works well for proposals, pitch decks, or concept presentations. For production wireframes, use Figma. For visual storytelling in early-stage discussions, Canva has its place.
How to Use -- for Designers and Indie Developers
This workflow serves two different audiences.
For designers: send the form URL to your client
Share the hearing form URL with your client. Structured responses come back without scheduling a call. No calendar coordination needed.
The questions are customizable. If your industry requires different items, duplicate the form and adjust. In FORMLOVA, telling the chat "duplicate this form and adapt it for restaurants" produces an adjusted draft.
For indie developers: use it as a self-hearing
If you have ever opened Figma to build your own service site and stared at a blank canvas, this form is for you. What should the headline say? Where does the CTA go? What sections does the page need? There are too many decisions to make at once, and the screen stays empty.
Answer the 28 questions yourself. By the time you finish, "what to build" becomes clear. Then run the wireframe generation and start with a populated canvas instead of a blank one.
Prompt Recipes
This workflow requires two prompts. Both are published on FORMLOVA's Workflow Place and can be copied with one click.
Recipe 1: Auto-generate the Hearing Form
This prompt contains the complete form definition for a 5-step, 28-question hearing sheet. Field names, types, dropdown options, and page assignments are all specified, so the same hearing form is reproduced every time. Run it once and share the published form URL with clients.
Recipe 2: Hearing Responses to Figma LP Wireframe
This prompt retrieves the latest response from your hearing form, creates a new Figma design file, and builds wireframe sections using the Figma Plugin API. It includes rules for interpreting mood selections, first-view layout choices, color mappings, and section construction. Requires both FORMLOVA and Figma MCP servers to be connected.
Full prompts available on Workflow Place -- copy with one click.
Wrap-up
Turning hearings into a form is a small change with outsized impact. Information stops scattering. Questions stop getting skipped. Meeting notes stop needing to be written. Clients get time to think, which raises the quality of their answers.
The critical insight is that wireframe quality depends on hearing sheet design. What you ask, which options you provide, and in what order -- the 28 questions directly determine how accurate the generated wireframe will be.
The recipes on Workflow Place can be used as-is or customized for your industry and project type. Better hearings produce better designs. The form is where that improvement starts.
