DevOps Peach

Claude Code in Practice · Getting started – From chat box to teammate · Lesson 4 of 4

Building a feature: plan, build, look, refine

The loop we use for every visible change on DevOps Peach: options or a plan first, a build in small steps, a screenshot to look at, then one round of focused corrections.

Practice interactively →

One long prompt asking for a whole feature usually produces something that works and looks nothing like what you imagined. We use a short loop instead. Here it is with a real example: the learner profile page.

flowchart LR
  B["Brief + references"] --> O["Options or plan"]
  O --> K["Build"]
  K --> L["Look: screenshot at 3 widths"]
  L --> R["Refine: 1-3 corrections"]
  R --> L
  L --> S["Ship"]
  %% step B: Outcome, constraints and a picture of what you like.
  %% step O: Three mock-ups for visual work, a written plan for logic.
  %% step K: Claude builds the chosen option in the real code.
  %% step L: Claude opens the page in a headless browser and sends screenshots; you look too.
  %% step R: Name what is wrong in one message, not one per message.
  %% step S: Commit only when you have seen it.

1. Brief with references

We wrote: "When a learner clicks their avatar, show a profile page: level, rank, streak, badges, track progress. Only data the site already stores. Show three designs first." For visual work a reference image says more than adjectives. If you like a site, take a full-page screenshot (Chrome DevTools → Ctrl+Shift+P → "Capture full size screenshot"), shrink it to a few hundred KB, put it in the project folder and point Claude at it with @.

2. Options before code

Claude produced one HTML file with three designs: a dashboard, a game-style card with level and XP, and a "learning passport". Choosing between three real pages took two minutes; describing the one we wanted would have taken twenty.

3. Build the chosen one

"Build design B, with an avatar picker" was enough, because the brief and the mock-up were already in the conversation.

4. Look

The request always ends with "check it at desktop and phone width, light and dark". Claude ran a headless browser, took screenshots and looked at them. We looked too, and saw that the left column was dark in light mode.

5. Refine in one message

Collect what is wrong and send it together: "Left column should follow light mode; badges in two columns on phones; don't replay the animation when I change avatar." Three fixes, one round.

What makes the loop work

Use case: A story video in three rounds

The situation

We had a 15-second vertical video for social media: a phone mock-up, big captions on each scene, a title card at the start and a "visit us" card at the end. The owner wanted it to look like a normal story someone recorded on their computer.

Round 1: change the genre

Feedback: "Make it look like a normal story recorded on a computer, not an ad. Remove the opening card and the ending card, put the question text across the main page."

Claude recorded the real site with a headless browser (dashboard → roadmap → a module map → a case study → the profile page), placed the recording in a plain browser window with the address bar, and kept one text sticker above it for the whole video.

Round 2: readability

Feedback: "Light theme, and the page is a bit small to read." Claude re-recorded in light mode at a narrower width so the text was larger, and made the window taller.

Round 3: two details

Feedback: "Don't colour 'Claude token', and zoom in more, cut the empty space." The sticker went to plain text, the window grew to fill almost the whole frame.

Round Kind of change Time
1 Concept and structure ~6 min
2 Theme and scale ~3 min
3 Small details ~2 min

What we took away

Practice interactively →