Pineflow · Build loop

Claude Code in VS Code reading a file and writing tests
Real build loop: Claude Code in VS Code ↗

Build

Build loop

Build your app one small task at a time: plan it, build it, check it, commit it.

From here you work more on your own. Until now every step was the same for everyone, but every app is built differently, so you get short lessons and a checklist and choose your own order. Onboarding and the paywall have their own chapters next, so leave them out for now.

30-90 min per task

1

What is the build loop

Official Claude Code best practices ↗
  1. One task
  2. Plan
  3. Build it
  4. Try it
  5. Read the change
  6. Commit
  7. Tick it off

The build loop is how your whole app gets built: one small task at a time, round the same loop. Small tasks give small changes you can read, test and undo.

VideoThe explore, plan, code, commit workflow in Claude Code

UI and UX

UI is how your app looks, UX is how it feels to use. Good apps borrow before they build: save 3 to 5 screens you love from the tools below and let the agent turn them into one theme every screen shares.

Apple Design Awards 2026: apps picked for how they look and feelView more ↗

Prompting

The clearer you ask, the less you fix. Say what you want, where it goes and how you'll check it. Easiest of all: talk. Type /voice once, then hold Space and say it like you'd explain it to a friend.

Bug fixing

An error
Paste the error, the file and the steps. Ask for the cause first.
It changed too much
/rewind puts the code back, then plan again.
It goes in circles
/clear and ask again with what you learned.
It looks wrong
Paste a screenshot and say how it should look.
2

Best practices

Scope

UI and UX

  • Mostly white, gray or black, with one accent color.
  • In dark mode, cards get lighter as they rise.
  • The same theme on every screen: colors, fonts, spacing.
  • Small press effects and smooth transitions.
  • Empty screens say what to do next, never blank.

Prompting

  • Say what, where and how you'll check it: "Add today's lifts under the save button, newest first."
  • Talk it with /voice, you say more than you type.
  • Paste a screenshot of the bug or the screen you want.
  • Type @ and the file name, so it works in the right place.

Bugs

  • Try every screen with 0 items, 1,000 items and no internet before you call it done.
  • Corrected the agent twice? Start a clean chat with /clear.
3

Plan it

Turn your PRD into a task list once. Small tasks in order, without onboarding or the paywall.

Prompt
Read docs/PRD.md and AGENTS.md. Create docs/TASKS.md: a numbered checklist of small tasks that build the MVP in order. Each task is one screen or one action, touches 3 files or fewer, and ends with how I check it on my phone. Leave out onboarding, the paywall and analytics: later chapters add them. Also set up Jest with jest-expo, so you can prove each task works: add @types/jest too, and "jest" to types in tsconfig.json, so the tests pass the type check.
4

Build it

Take one task at a time round the loop. Start each task with /clear, plan it with /plan, try it on your phone with npx expo start, read what changed with /diff, then commit and tick it off in docs/TASKS.md.

Start your channel this week, too. Open Get users, pick the one channel where your people are and post while you build. A new account takes weeks to reach anyone, so the launch needs an audience waiting.

A package won't run in Expo Go? Some need their own phone code. Make a development build then, the way the Paywall chapter shows, and keep building in it.

Make your first task the look. Paste the screens you saved and ask:

Prompt
These are screens I like. Use the Expo design system skill to create one theme for my app: colors, fonts, spacing and corner radius, with a light and a dark mode. Mostly neutral colors with one accent color. Then restyle the home screen with it.

Our favorite tools