Git for Designers

Git tracks changes to your code over time. Think of it as unlimited undo with labels — you can always go back to any previous version.

Why This Matters

Have you ever had this happen?

• homepage_final.fig
• homepage_final_v2.fig
• homepage_final_v2_ACTUALLY_FINAL.fig
• homepage_final_v2_ACTUALLY_FINAL_revised.fig

Version control solves this. Instead of file copies, you save snapshots called "commits" with notes about what changed. One file, infinite versions, complete history.

Save points for code

Every commit is a save point. Tried something that didn't work? Roll back to the previous commit. Made a mistake three hours ago? Find the commit before the mistake and restore it.

Automatic with Claude

Here's the good news: Claude handles most git operations for you. When you ask Claude to commit changes, it does the git commands. When something breaks, you can ask Claude to help you recover.

You don't need to become a git expert. You need to understand the concepts and know when to ask Claude to make a commit.

Core Concepts

Repository (repo) — Your project folder with git tracking enabled. Claude sets this up when you start a new project. Everything lives in this one folder.

Commit — A snapshot of your code at a point in time. Each commit has the actual changes made, a message describing what changed, a timestamp, and a unique ID. Good commits are like save points you can name: "Added save button" or "Fixed color picker bug."

Staging — Before you commit, you "stage" the changes you want to include. This is like selecting which files to save. Usually you stage everything that relates to what you just worked on.

Branch — A parallel version of your code. The main branch is the primary version. You might create a new-feature branch to experiment without affecting main, then merge it back when it works. For simple projects, you often just work on main. Branches become useful as projects grow.

What Claude Handles for You

When you're working with Claude, you can just ask for what you need:

• Commit these changes with a message about adding the settings screen
• Create a new branch for experimenting with the redesign
• Show me what files have changed since the last commit

Claude translates your intent into the right git commands. You don't need to memorize syntax.

Essential Commands

Sometimes you'll see Claude run these or want to do them yourself. Here's what they mean:

The basic flow

# See what changed
git status

# Stage everything
git add .

# Commit with a message
git commit -m "Added save button to header"

# Push to GitHub
git push

But remember — you can just tell Claude "commit these changes" and it runs the right commands.

When to Commit

Think of commits as save points. When should you save?

• After completing something. Just got a feature working? Commit. → "Commit this — the color picker is working now"
• Before experimenting. About to try something risky? Commit first so you can roll back. → "Commit everything first, then let's try a different approach for the animation"
• At the end of a session. Stopping for the day? Make sure everything is committed. → "Commit all my changes with a message summarizing what we did today"
• Don't wait too long. Small, frequent commits beat rare, massive ones. → "Commit the navigation changes first, then commit the styling updates separately"

Recovering from Mistakes

Things will go wrong. Git makes recovery possible.

• See what changed → "What's changed since my last commit?"
• Undo uncommitted changes → "Discard all changes since the last commit" (reverts to your last save point; only works for uncommitted changes)
• Go back to a previous commit → "Show me the last few commits" then "Go back to the commit from before we changed the API"
• Recover deleted code → "I deleted the helper function we had before. Can you find it in the git history?" Git keeps everything; the history is searchable.

Working with GitHub

GitHub is a website that stores your repositories online. Benefits:

• Backup — Your code isn't only on your laptop
• Sharing — Others can see and contribute
• Deployment — Many services deploy directly from GitHub

Pushing — After committing locally, push to upload: "Push these changes to GitHub." First time? Claude helps you create the repository on GitHub and connect it.

Pulling — If you work on multiple computers or collaborate, pull to get the latest: "Pull the latest changes from GitHub."

When Things Get Confusing

Git can get complicated with merges, conflicts, and branches diverging.

• Ask Claude for help → "I'm confused about the git situation. Can you explain what's happening?"
• When in doubt, commit what you have → "Let's commit everything that's working right now before we sort out the git stuff." Get to a stable save point first, then figure out the rest.
• Start fresh if needed → "Can we create a fresh git repository for this project? Keep all the current files but start the git history over." This loses history but can be worth it if the repo got into a confusing state.

Key Takeaways

1. Commits are save points — make them often
2. Claude handles the commands — just describe what you want
3. Everything is recoverable — git keeps complete history
4. When confused, ask Claude — it can explain the current state
5. Push to GitHub — back up your work off your laptop

You don't need to master git. You need to know that commits are save points, make them regularly, and ask Claude for help when something goes wrong.

Exercises

1. After your next working change, ask Claude to "commit this" with a clear message — then run git log to see your save point.
2. Before trying something risky, practice committing first so you have a rollback point, then experiment freely.
3. Ask Claude to "show me what's changed since my last commit" and read the summary — get comfortable seeing your own history.