Git, Claude Code, and why a designer should care

Git is a memory system for files. Every time you or Claude change something, Git takes a snapshot called a commit. You can rewind to any snapshot, start a new timeline from it, or merge two timelines together. Those parallel timelines are called branches. A pull request is how a branch gets reviewed and merged back into the main timeline.

Here is the part that matters: when you work with Claude Code, you always work on a branch. If the output is wrong, you throw the branch away. Nothing on main changes until a pull request is merged. You cannot accidentally break the live product - the system literally does not let you.

You do not have to rely on the terminal to see what Claude did. GitHub Desktop is a free app from GitHub that lists every changed file, shows you the exact lines that were added or removed, and lets you send the branch up for review with a button. It is the designer-friendly surface over everything Git does.

24 const heading = useMemo(() => (−    <h1 className="text-5xl font-bold">Join our community</h1>+    <h1 className="text-5xl font-bold">+      Welcome to the <RotatingWord words={words} />+    </h1>28  ), [words]);

Three things to know when you open GitHub Desktop for the first time:

1. 1

   The left pane is your review queue

   Every file Claude edited appears here. Click one to see the diff on the right. Uncheck a file to exclude it from the commit - a fast way to cherry-pick what you like.

2. 2

   The right pane is the source of truth

   Red lines were removed, green lines were added. You do not need to understand the syntax - scan for obvious mistakes, hardcoded text that looks wrong, or missing alt text on images.

3. 3

   The commit box is your message to the team

   Claude usually writes this for you. Read it. If the message says something different from what you asked, the change may not match your intent.

Or skip the app entirely and ask Claude

Everything GitHub Desktop does, you can also ask Claude Code to do. These are not technical commands you need to memorize - they are sentences you say in a chat. A short starter set:

Claude Code is Anthropic’s coding assistant. You open it inside a project, describe what you want in plain English, and Claude reads the relevant files and edits them. It pauses before every change so you can approve or reject it.

Think of it as a very patient junior developer who has already read the entire codebase, will never miss a typo, and asks permission before doing anything risky.

Your first session, in designer terms

Forget about commands. The actual rhythm of working with Claude Code is five steps, and only the middle three involve you at all:

You do not need to know the codebase, and you definitely do not need to know file names. Designers describe changes the way designers already think — point at a page, point at a section on that page, and say what should change. Claude finds the files on its own.

We want you working fast. In practice that means running Claude Code in auto mode — it stops asking you to approve every tiny step and just does the work, the way any thoughtful collaborator would. You review the final result, not the individual edits.

The cheat sheet has the exact command to launch in that mode. For now, here are the few things it is still worth paying attention to:

1. 1

   Check the outcome, not the code

   Open the preview in the browser. Walk through the flow you asked about. If it looks right on desktop and mobile, you are done. You do not need to read the code.

2. 2

   If something looks off, just ask Claude to revert

   Nothing is permanent until the branch is merged. "Undo the last change" or "go back to how it was before" gets you back to a clean slate in seconds.

3. 3

   Let a developer merge the PR

   Opening a pull request is yours. Clicking "merge" is a developer's job - not a gatekeeping ritual, just a second pair of eyes before the change goes live.

4. 4

   If Claude wants to do something dramatic, pause

   If it suggests resetting the project, deleting files, or force-pushing, that is the moment to ask in the design or engineering channel before proceeding.

What this actually produces

Enough theory. The screenshots below are all from a single Claude Code session where a designer asked for variations of a countdown card on the Tampa JUG community site. The full case study is Part 2, but here is a preview of what one session can produce in under an hour:

Where AI gets it wrong (and why that is fine)

Honesty check. In the same session that produced the screenshots above, Claude also made three mistakes worth calling out. None of them reached production, but all three are instructive.

Everything you need as a quick reference - the nine slash commands worth remembering, copy-ready prompt patterns for seven common design tasks, and links to the UI/UX skills on GitHub we recommend bookmarking - is on a dedicated page so you can keep it open in a tab.