← AIAP Tool GuidesAll programsHomeSearch
AIAP Tool Guides·AI for Design·43:01

Research Synthesis to First Build: a PRD by Prompt-for-a-Prompt, Mood Boards in ChatGPT and Figma Weave, Grounding, and Claude Code

Amlan Designer, "a fellow builder and designer" with entrepreneurial stints; builds one expense-management app (FinLit India) across the series

The short version

  1. Ask Claude to write the prompt that writes the PRD from the research document; the PRD lists goals, metrics, personas, must/should/nice-to-have features, flows and open questions (0:00-0:05).
  2. Cheap visual exploration: a ChatGPT mood board, then a Figma Weave node graph (concentrator, enhancer, Nano Banana Pro) - which hallucinated the document as an image until a Claude-written grounding prompt fixed it (0:05-0:27).
  3. Image describer to JSON prompt to an accessible design system, then Claude Code in the desktop app builds the app from four files until the plan's usage limit runs out (0:27-0:42).

At a glance, three clicks deep

Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.

01A PRD from the research doc, via a prompt for a promptAsk the model to write the prompt that will generate the PRD from your research, then paste that prompt back.›

Ask the model to write the prompt that will generate the PRD from your research, then paste that prompt back.

Prompt (0:00-0:02)

PRD contents (0:03-0:05)

↓ Full write-up of this concept

02Figma Weave node graphs - and why exploration must be groundedWeave chains text, image and model nodes;›

Weave chains text, image and model nodes; feeding raw PRD text to an image model made it draw the document, so a Claude-written grounding prompt (palette, mood, illustration style) replaced it.

ChatGPT mood board (0:05-0:10)

Weave graph (0:10-0:16)

Hallucination and grounding (0:16-0:27)

Describer to JSON to design system (0:27-0:36)

↓ Full write-up of this concept

03Building in Claude Code from a prepared folderPoint Claude Code at the project folder with four documents (mood board, build instructions, design-system…›

Point Claude Code at the project folder with four documents (mood board, build instructions, design-system JSON, PRD) and ask it to build from the PRD.

Setup (0:36-0:38)

Build and limits (0:39-0:42)

↓ Full write-up of this concept

The concepts in full

01

A PRD from the research doc, via a prompt for a prompt

how-to

A PRD that "used to take a couple of weeks" now takes a couple of minutes.

Attach the research document (or stay in the same chat). The generated PRD covered executive summary, goals and success metrics, personas, must/should/nice-to-have features, step-by-step user flows, non-functional requirements, out-of-scope and open questions, with accessibility in scope and INR display (swap for a currency picker). Keep downloaded copies in case regeneration is slow.

Do it in this order
Why it matters

Gives every later tool a precise spec to follow.

02

Figma Weave node graphs - and why exploration must be grounded

how-to

"This is a great example to understand why these exploration tools need to be grounded."

After a ChatGPT mood board (first too technical, second more consumer-friendly), the trainer builds Weave graphs: text nodes (PRD and research as Claude-written prompts, since docx cannot be uploaded), a Prompt Concentrator to merge them, and Nano Banana Pro as the generator because it handles text-plus-image (one run cost about 11 credits). The fix was a single grounding prompt through a Prompt Enhancer into the generator - less hallucination, somewhat less creativity. An Image Describer then turns the chosen board into a JSON prompt that Claude converts into a style guide that "fairly follows most of the accessibility guidelines".

Do it in this order
Why it matters

Visual exploration before spending build tokens, without the model drifting.

03

Building in Claude Code from a prepared folder

how-to

Prompting was done earlier - the build needs almost none.

Claude desktop app > Claude Code > new session > change folder to the project > add files > "build the app based on the PRD" > allow folder and terminal access. About ten minutes in, screens matched the mock-ups and saving an expense worked on localhost; statement import and settings were missing, and the plan's usage limit ran out.

Do it in this order
Why it matters

Shows the payoff of front-loading context.

Tools referenced

ToolCoverageMomentContext
Claudedemonstrated
ChatGPTdemonstrated
Figma Weavedemonstrated
Nano Banana Prodemonstrated
Claude Codedemonstrated
Runwaymentioned
Seedancementioned

Action items

    Resources mentioned

    Resources
    • docLesson page on the platform

    Extraction notes

    This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

    Transcript corrections applied

    The transcript saysThe trainer actually means
    Plot / God / CloudClaude
    seat danceSeedance
    wipe codingvibe coding
    BRDPRD

    True on recording day — verify before relying