Building “Squares” with ChatGPT: From Prompts to a Commercial-Ready App (Day 10)



This content originally appeared on DEV Community and was authored by Nando Rama

Day 10 — Vibe Coding, Smarter Hand-offs, and Using Downtime Well

Today’s theme was orchestrating the work between a human and AI so neither of us just… waits.

What worked today

  • Smarter chat hand-offs. When I start a new chat, I first ask the old chat to update its memory with what we just shipped. Then I open the new chat with a crisp question and share context—like the current file tree or a single file. The AI shouldn’t guess what’s in my repo; I give it the exact source of truth.
  • Always upload the current file. Before asking for edits, I upload the file I’m about to change and then re-ask for the change on that file. This avoids “ghost edits.”
  • Pictures beat paragraphs. Screenshots were a cheat code for quickly converging on the time-zone picker UI. The AI and the human both see the same thing, so feedback is concrete.
  • Systemic editing, not YOLO. I open files via the file manager first, then let AI propose edits. Flow: open → propose → apply → verify.
  • Brainstorm first, code second. For thorny UX or policy choices, I ask AI for a brief, no-code brainstorm to align on best practices. Then we implement. Fewer rewrites, faster merges.

Vibe coding = use the gaps

There are natural pauses: a long code render, or a Vercel build (mine is ~1:30 now and will grow). Instead of staring at a spinner:

  • Do a tiny chore (dishes, vacuum, reset your brain).
  • Or open a parallel chat to explore adjacent ideas. Today I used side chats to compare domains and sketch how managers might collect card fees. Progress compounds.

My working playbook (repeatable)

  1. Close the loop: Ask old chat to “save what we did today” to memory.
  2. New chat kickoff: Post a clear question + paste the current file or a file tree.
  3. If visuals matter: Drop a screenshot; ask the AI to react to what it sees.
  4. Brainstorm (no code): Align on approach, edge cases, and UX first.
  5. Targeted edits: Request a single-file change against the uploaded file.
  6. Verify quickly: Run it, screenshot if needed, iterate.
  7. Use downtime: Chore or parallel chat—never idle.

Tiny gotchas logged

  • ZIP uploads: Too large to be useful; stick to single files or short bundles.
  • Context drift: Don’t assume the AI remembers your repo layout—paste it.
  • UI clarity: Regional noise in time zones is real; we curated canonical zones and a “nearby” slice to keep the list readable.

Scaffolding & drift (new lesson)

Sometimes the AI’s response scaffolding (how it structures diffs/sections internally) can get out of sync with a long discussion. That’s when previously fixed screen widths reappear, or a “diff” doesn’t match the current file. This should improve as AI evolves—but the practical fix right now is a stricter “Do It” hand-off.

My “Do It” packet before any code:

  • Exact target(s): File path(s) and only those files.
  • Decisions recap: Bullet points from the brainstorm (UX choices, constraints, widths).
  • Acceptance criteria: What success looks like (e.g., “matches Manager width,” “time-zone list shows ‘nearby’ first”).
  • Source of truth: Paste the current file contents (even if we edited earlier).
  • No extras: Ask AI to touch nothing outside the stated files.

When I collect and paste that packet, the AI’s output is consistent, the diffs line up, and the “wrong code showed up” problem disappears.

Closing thought

Vibe coding isn’t about rushing; it’s about keeping both the human and the AI in flow. Small, well-framed tasks; tight feedback; and making the most of the quiet moments—plus a clean “Do It” packet—made Day 10 surprisingly productive.


This content originally appeared on DEV Community and was authored by Nando Rama