Preview – Work in progress. Anything unclear? Feedback welcome
Back

Chapter 2 of 3

Let Claude Be Your Teacher

Give yourself a head start: tell Claude where you stand, so it guides you instead of racing ahead.


In Chapter 1 you got Claude running and shipped something. It's a powerful tool, but it's built for developers. So it assumes a lot: that you know the Terminal, Git, frameworks, the dozen things nobody ever explained to you.

You probably don't yet, so it likely did what it does by default: moved fast, assumed knowledge, built more than it explained.

Originally I planned a chapter on each of those things: Terminal, Git, deployment, databases, the whole list. But the more I wrote, the more it felt like the wrong call. You don't learn this stuff by reading explanations up front. You learn it by doing, with someone who explains things the moment they actually come up. And you already have that someone sitting in your Terminal.

So instead of me explaining everything, this chapter does one small thing: it tells Claude where you stand, so it can meet you there instead of racing ahead.


What Is CLAUDE.md?

CLAUDE.md is a plain text file that Claude reads automatically at the start of every session. Think of it as a note you leave for Claude that it always reads before doing anything.

You can put anything in it: who you are, what you're working on, how you like to be helped, rules it should follow. Claude treats it as standing instructions.


The Template

Here's a starter CLAUDE.md written for a designer learning this stuff. It tells Claude your background, what you don't know yet, a sensible starting stack, and, importantly, to show you things one at a time instead of dumping everything at once.

Download CLAUDE.md

Or copy it:

Assume I am Designer who wants to work with code and create actual product.

I'm reading this tutorial: https://tomreinert.de/vibe-coding-for-designers/the-magic-trick/

I have no or little experience with

- Terminal (cwd, multiple tabs, running processes, multiple claude sessions)
- Git / Github
- Deployments & Hosts (vercel, netlify, self-hosted, VPS)
- Databases
- Frameworks (react, nextjs, etc)
- Local Development (localhost, ports, workers)
- MCP Tools

My machine probably does not have the expected tools installed:
- homebrew
- git or gh cli
- node & npm
- vercel cli
- and more of a typical dev stack

Check before assuming, and help me install what we need.

A good starting stack for an app would be something like

- private github repo
- nextjs
- shadcn
- hosted supabase, free plan
- vercel hobby plan
- playwright mcp connected to claude, so that claude can open localhost in a playwright browser

Other ideas might require other stacks.
The important thing is that we are building something for real, not a throwaway single-file html.


Let me experiment freely, but help me understand all these concepts and building blocks above, so that eventually I can deploy a serious production app or service and shape it with my design skills.

Not everything all at once, help me understand these concept one by one. Learning by doing. Don't explain, show me and let me try it.

Read through it, and don't panic. It's full of words you might not know yet: frameworks, MCP, VPS, shadcn, half of it jargon you've maybe seen but couldn't define. That's fine, you're not supposed to yet. You don't need to know what Supabase is to let Claude set it up and explain it when it comes up. Ignore whatever looks confusing and let Claude do the work. Change anything you like, but you don't have to.

Almost all of this is free

Vercel, Supabase, GitHub, most of the tools in that list have generous free tiers made for exactly this: personal projects, prototypes, messing around. You can build and ship real things without paying a cent beyond your Claude subscription. So experiment freely. Spin up a database, deploy ten versions, break things. It costs nothing.


Getting It In There

You want Claude to use this in every project, so the file goes in your home folder at ~/.claude/CLAUDE.md. That folder starts with a dot, which on a Mac means it's hidden. Finder won't show it unless you press Cmd+Shift+. (period) to reveal hidden files. Good trick to know.

There's also a per-project CLAUDE.md you can put inside a project folder, which only applies to that project. The one in ~/.claude/ applies everywhere. For learning, you want the everywhere one.

You could hunt that file down and paste the template in yourself. But the nicer move: Claude is already open in your Terminal, and this is exactly the kind of chore it's good at. Paste the template in and say:

Put this in my global CLAUDE.md file.

Claude knows where that file lives, creates it if it's missing, and writes it for you. That's the pattern for a lot of this: worth knowing how it works under the hood, but you rarely have to do it by hand.

It also means Claude can update its own instructions. That's handy as you go. When you notice something that works, or something that keeps going wrong, just tell Claude to add it to the CLAUDE.md. Do read the file yourself once in a while though. It has a habit of getting messy.


Try It

Once the file is saved, start a fresh Claude session in any folder:

claude

Then ask it something like:

What do you know about me and how I like to work?

Claude should tell you back the gist of your CLAUDE.md: that you're a designer, new to this stuff, and want to learn one thing at a time. That confirmation means it's reading the file.

From now on, every session starts with Claude already on your side. Keep editing the file as you learn. Add rules that work, delete ones that don't. It grows with you.

Chapter 2 complete.

Claude now knows where you stand and how to guide you. One more thing trips up almost everyone: Claude only ever sees the folder you start it in. Chapter 3 makes that click, and shows you how to organize your projects.

Chapter 3: Where Claude Works