AI-Driven Product Design / Vibe Coding Workflow (One-Sentence Requirement → Interrogation → PRD → DRD + Coding Prompt → Figma Make Demo → Launch → Visual Iteration)
Will’s complete pipeline for non-technical PMs to go from “idea to runnable prototype”, breaking vibe coding into 7 copyable steps: ① Use 3 tiers of templates to turn a one-sentence product idea into structured input; ② Have AI act as a “requirements interrogator” to ask follow-up questions in sequence and force out a Grill Summary; ③ Use a “top-tier product architect” role prompt to expand the 5 answers into an investment-grade PRD; ④ Extract feature points from the PRD to generate 3 non-overlapping interaction DRD options, then convert the chosen option into a coding prompt that can directly produce a product; ⑤ Feed it to Figma Make (to produce an interactive demo) or Claude (to produce a real launch-ready product) to generate a prototype; ⑥ Feed screenshots back in to let AI spot errors and iterate on its own; ⑦ Publish to mobile (Claude outputs HTML → Netlify Drop drag-and-drop hosting → add to home screen as an App) + one-click reskinning with ReferoStyle. Each step provides reusable prompt skeletons + Why + examples + pitfalls. Three parallel methods (Method 1 Document-driven mainline / Method 2 Document-driven HTML output / Method 3 GPT+Figma natural language UI building). The audience is non-technical product managers who care about “when to use which step, how to copy the prompts” rather than code. Division of labor with [[newtype-ai-coding]]: that article covers tool stack selection and mindset (how to choose Cursor/Claude Code/Codex), while this article covers the concrete action chain and prompt templates for non-technical PMs to run through a prototype from scratch.