DevOps Peach

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

From answering to doing: what changes with Claude Code

A chat assistant gives advice you carry out yourself. Claude Code opens the files, runs the commands and shows you the result, so your job moves from typing code to giving clear work and checking it.

Practice interactively →

This course is not a feature tour. It is what we learned building DevOps Peach, the learning site you are reading now, almost entirely by asking Claude Code for changes in plain Vietnamese and English. The outline follows a Vietnamese Claude Code walkthrough by 5 Minutes AI on YouTube; every example below is from our own repository.

The difference in one picture

flowchart LR
  A["Chat assistant"] --> B["You copy the answer"]
  B --> C["You edit files and run commands"]
  D["Claude Code"] --> E["Reads the repo itself"]
  E --> F["Edits, runs checks, shows the result"]
  F --> G["You review and steer"]
  %% step A: In a browser chat the model never sees your machine, so every answer has to be carried over by hand.
  %% step C: Most of the time goes into copying, pasting and explaining the context again.
  %% step D: Claude Code runs in your terminal or IDE, inside one project folder.
  %% step F: It opens files, edits them, runs the build or the tests and reports what happened.
  %% step G: Your job is the brief and the review, not the typing.

A comparison we use with new teammates: a chat assistant is a repair person who only answers the phone. Claude Code is the one who comes to the house, opens the toolbox and fixes the tap while you watch.

What it looked like for us

A real request from this project, sent as one message: "The roadmap cards wrap their text badly and take too much space. Redesign them." with a screenshot. Claude read site/index.html, found the card renderer, rewrote the layout and CSS, opened the page in a headless browser at three widths and sent back screenshots. We answered with two small corrections. No code was typed by a person.

The new job: giving work, not writing code

You do not need to be a strong programmer to get value, but you do need to be a good manager:

Is it worth paying for?

Claude Code needs a paid plan (Pro or above) or API credits. Count it in hours, not dollars: if it saves you one afternoon a month, it has paid for itself. Most of DevOps Peach (tracks, tests, labs, this course) was built this way by one person in a few weeks.

Use case: One sentence, one redesigned page

The situation

The roadmap page showed one card per track. On a laptop the titles wrapped onto three lines and every card was twice as tall as it needed to be.

First attempt: the complaint only

We sent a screenshot and one sentence: "These cards wrap badly and waste space, redesign them." Claude came back with a compact card: title on its own row, logos and counts on a second row, three topic chips, and a footer with a level colour and a progress bar. It had checked the result at 1440, 1024 and 390 pixels and in dark mode.

Two things were still wrong: the level colours did not match the rest of the site and the "+N" chip was hard to read. One more message fixed both.

Second time: a better brief

For the next redesign (the profile page) we wrote the brief like this:

Part of the brief What we wrote
Outcome "Clicking the avatar shows a profile with level, rank, badges and progress"
Options first "Show me three designs to choose from before building"
Constraints "Only data the site already stores; no new database tables"
Evidence "Check light, dark and phone width; no horizontal scroll"

Claude produced three mock-ups in one HTML file. We picked one, asked for an avatar picker, and the real page shipped the same morning.

What we took away

Practice interactively →