Plan Before You Code: Colin Matthews’ AI Prototyping Workflow

A habit-tracker demo shows how data models, small steps and review can make AI-assisted building easier to navigate.

CMColin Matthews게스트 · Tech for Product
채널
Peter Yang
게시일
2025년 2월 2일
영상
40:52
읽기
2분
원문
영어
YouTube에서 열기
스크롤하면 영상이 오른쪽 아래로 작아져 계속 재생됩니다. 자막은 읽기 언어를 따릅니다.
읽기 언어2개 언어로 읽을 수 있음
이 글은 아직 한국어 번역이 없어 영어 원문으로 표시합니다.
요약

30초 요약

Colin Matthews builds a habit-tracker prototype and explains how to plan, inspect generated code and test product ideas with customers.

  1. 1Start with a sketchDefine the screens, behavior and data the prototype needs.
  2. 2Plan before codingAsk for an implementation plan without writing code, then review assumptions.
  3. 3Choose storage deliberatelyBrowser local storage persists locally but is not a shared database or backup.
  4. 4Debug in small stepsProvide specific errors and make focused changes.

핵심 정리

  1. Describe the problem and data model before generating code.
  2. Ask for a plan and inspect it before implementation.
  3. Make small changes and roll back when necessary.
  4. Understand the limits of browser storage and public links.
  5. Show prototypes to customers to test assumptions.
전문

챕터별로 다듬은 전문 읽기

원본 자막만 보기
01

Choose a tool and define the goal

Understand the workflow and sketch a habit tracker.

Product educator Colin Matthews demonstrates a habit tracker and a simple technique: describe the goal, ask the AI for an implementation plan and explicitly tell it not to write code yet.

He groups tools into chatbots, cloud development environments and local coding assistants. His 2025 comparison is based on how easily a user can run, store and deploy the resulting code, not on what code a model can theoretically write.

Matthews describes personal tools for resizing images and converting GIFs, and suggests keeping a reusable prototype of an existing product to explore new features with designers and customers.

The demonstration begins with a low-fidelity mock: a list of habits, completion dates and a detail view. A sketch helps clarify what the application should do before prompting.

02

Plan and implement

Review the data model and build incrementally.

His prompt specifies the interface and a data model for habits and daily completions, including future compatibility with a calendar view. He asks for a plan starting with the data model, without code.

Reviewing the plan gives the user a chance to correct assumptions and learn how the system will work. Matthews says the technique can improve results, but it does not guarantee correctness.

After approving the plan, he implements the prototype in small steps. He demonstrates inspecting generated code, adding features and using rollback when an iteration goes wrong.

03

Storage, styling and deployment

Persist data locally and refine the prototype.

When the prototype loses entries on refresh, Matthews requests browser local storage. It can persist data in that browser, but it is not a shared database or a backup and can be cleared.

He asks the AI to propose styling changes before applying them. The same plan-first technique helps separate desired visual changes from unwanted layout or behavior changes.

The discussion covers code diffs, deployment and optional database integrations as they existed in early 2025. Public prototype links can expose content, so check access settings before sharing sensitive material.

04

Learning and customer feedback

Debug systematically and test ideas with users.

To avoid getting stuck, Matthews recommends defining requirements and data early, working in small batches, describing the exact issue and using files or error details for context.

He emphasizes system concepts such as client, server, storage and data models. Hands-on prototyping can build intuition, but production systems may need deeper engineering, security and operational review.

For product managers, start with a simple prototype of an existing experience, collaborate with designers and show a proposed change to customers. The purpose is to learn whether the idea solves a real problem.

같은 채널의 다른 글

46:40EN
Peter Yang· 2026년 11월 8일팟캐스트 · 2명Ashley Alexander: How AI Helps Me Care for My Parents With Cancer게스트 Ashley Alexander · 진행자 Peter YangA caregiver uses AI to prepare for appointments, organize records and ask better questions—while keeping doctors at the center of treatment.AI in healthcareHuman-AI CollaborationProductivity
17:50EN
Peter Yang· 2026년 11월 4일팟캐스트Peter Yang’s Five Steps for Using AI to Help Care for His MotherYang uses a shared care brief and organized records to navigate appointments, while making time for family.AI in healthcareHuman-AI CollaborationProductivity
15:03EN
Peter Yang· 2026년 11월 3일팟캐스트How Peter Yang Used an AI Phone Agent to Negotiate His Internet BillAn AI call negotiated a lower price and faster service, but Yang still had to approve the change himself.AI agentsProductivityHuman-AI Collaboration
33:09EN
Peter Yang· 2026년 11월 1일팟캐스트 · 2명Jaclyn Konzelmann: When AI Can Build More, Choose What Deserves to Exist게스트 Jaclyn Konzelmann · 진행자 Peter YangGoogle Labs pairs short strategy documents with prototypes, user co-creation and lessons from experiments that end.AI Product ManagementProduct StrategyHuman-AI Collaboration+1
슬라이드 4장13:05EN
Peter Yang· 2026년 10월 28일팟캐스트Peter Yang Tests Genie 4: Convincing Worlds, Unfinished GameplayFive live demonstrations show scenes that respond to prompts and sound, alongside inconsistent actions and limited game mechanics.Generative media비전과 영상
슬라이드1:06EN
Peter Yang· 2026년 10월 26일팟캐스트Peter Yang on Setting Up Payroll for a One-Person BusinessIn a paid partnership, Yang describes the paperwork he encountered and a payroll product integrated with a business account.EntrepreneurshipProductivity