Your guide to building with Claude Code.
You type what you want in plain English. Claude writes the code. You look at the result in the browser. That's the whole job. This guide is your reference — look things up as you need them, don't memorize it.
1 How This Works
The entire workflow is one loop. Forever.
You don't need to understand code. You don't need to learn programming. You just need to describe what you want clearly and know when it looks right.
2 Setting Up Your Environment
Two Ways to Use Claude Code
claude, hit Enter — that's it. You don't need to navigate folders or learn commands. Just tell Claude "go to my project folder" and it handles it. The terminal version can: spawn teams of agents, run background tasks, access all MCP servers, and give you full control.
Getting Everything Installed
Open Claude Code (Desktop or terminal) and tell it to do the work:
I need to set up my dev environment for building and deploying websites. Check if I have the following installed, and install anything that's missing: 1. Node.js (LTS version) 2. Git 3. GitHub CLI (gh) 4. Claude Code CLI (@anthropic-ai/claude-code) 5. Wrangler (Cloudflare's deploy tool) For each one: - Check if it's already installed - If not, install it using the right method for my OS - Set up Git with my name: Christian Froehlich, email: chris@hinescreative.xyz - Log me into GitHub CLI (gh auth login) - Log me into Wrangler (npx wrangler login) After everything is installed, verify all of them work and show me the versions.
Claude handles the rest — it knows your OS, picks the right install method, and walks you through any login steps. When it's done, you should see versions for all 5 tools. If any are missing, tell Claude to try again.
Desktop vs Terminal — When to Switch
| I want to... | Use |
|---|---|
| Build/edit a website page by page | Desktop is fine |
| Fix a visual issue | Desktop is fine |
| Deploy to preview | Either works |
| Run multiple agents in parallel | Terminal |
| Have Claude email Wes for me | Terminal (needs Gmail MCP) |
| Spawn a team to research + build | Terminal |
| Anything involving MCP servers | Terminal (unless Desktop has them) |
3 Setting Up CLAUDE.md
A file that tells Claude who you are and how to work with you. It reads it automatically at the start of every session — like a briefing document.
This lives in your home folder at ~/.claude/CLAUDE.md and applies to everything you do — not just one project. Keep it short. 20-30 lines max. Here's your starter:
# Christian Froehlich — Hines Creative New to Claude Code. Ran a pest control business for 2 years. Doing some work with Wes Hines at Hines Creative and seeing where it goes. Building client websites and learning back-end work. Based in Lake Zurich, IL. ## Personality Be direct but patient. Check in often — don't assume I'm following. If something's complex, ask if I need it broken down differently. Don't be condescending. Plan first, build second — don't assume to build, assume to plan. ## Hines Creative AI-powered creative agency based in Chicago. We build websites, automations, and marketing systems for small/local businesses. Owner: Wes Hines. **Stack:** Static HTML/CSS/JS, React, Cloudflare Pages + Workers, GoHighLevel (CRM/automations), Claude Code, MCP servers, GitHub (hinescreative org). ## Rules - **Prefer editing over creating** — modify existing files rather than making new ones - **Don't change things I didn't ask about** - **Ask before doing anything destructive** — deleting files, overwriting work - **Ask before building** — 30-second check-in over 10-minute wrong assumption - **Always look it up** — never guess or say "I don't know" without trying first - **Show me results before moving on** - **Deploy to Cloudflare Pages preview only** — Wes promotes to production - **GitHub org:** hinescreative - **Email:** chris@hinescreative.xyz - **Wes:** weshines17@gmail.com — subject "Christian - [topic]"
You can also put a CLAUDE.md inside a specific project folder if that project has unique instructions (like a particular client's phone number or build command). The project one adds to your global one — it doesn't replace it.
4 Memory
Claude remembers things across sessions so you don't have to repeat yourself.
You don't need to manage this much. Just know these three things:
- To remember: "Remember that the client prefers blue tones"
- To fix: "That's wrong, update your memory — the phone number is 555-1234"
- To forget: "Forget that" or "Stop remembering X"
5 MCP Servers
Plugins that give Claude extra abilities. Think of them like power-ups — email, browser control, GitHub, and more.
| Server | What it does | How you use it |
|---|---|---|
| Gmail | Send and read emails | "Email Wes about this issue" |
| Playwright | Open a browser, take screenshots | "Take a screenshot of the homepage" |
| GitHub | Create repos, push code | "Push this to GitHub" |
| Context7 | Look up library documentation | "Look up the docs for [library]" |
You don't configure these — just ask Claude to use them naturally. If Claude says it can't do something (like send email), that MCP probably isn't set up yet. Email Wes.
Adding an MCP Server
If Wes sends you setup info for a new server:
Add the [server-name] MCP server to my config. Here's the setup info Wes gave me: [paste what Wes sent]
6 Skills
Pre-built workflows Claude can follow automatically. Like recipes for common tasks.
You don't need to learn these. Just know:
- Type
/skillsto see what's available - Claude will use the right skill automatically when it applies
- If Claude says "Using [skill name] to..." — that's a skill running. Let it do its thing.
7 Spawning Agent Teams
Terminal only. Multiple Claudes working on different tasks at the same time.
I need a team to help me build this site faster. Spawn 3 agents: 1. One to build the About page 2. One to build the Services page 3. One to research competitors and write better copy for the homepage Run them all in parallel. When they're done, show me what each one produced.
When to Use Teams
- Building multiple pages at once
- Research + build at the same time
- Reviewing the whole site (mobile, SEO, content — in parallel)
- Any time you're thinking "I wish I could do 3 things at once"
When NOT to Use Teams
- Simple single-page edits — just ask Claude directly
- When tasks depend on each other (page B needs page A first)
- When you're not sure what you want yet — figure it out first, then parallelize
8 Quick Reference
Starting a Session
Open terminal. Type claude. Hit Enter. That's it. Tell Claude what you're working on and it'll navigate to the right folder for you.
Git
You don't need to learn git commands. Just tell Claude: "commit and push my changes" or "save my work to GitHub." If Claude mentions conflicts or errors — stop and ask Wes.
Deploying to Preview
Tell Claude: "Build and deploy this to Cloudflare Pages preview." Claude runs the commands. You get a preview URL to check. Wes promotes to production when it's ready.
When Claude Goes Sideways
"Undo that. Only change [specific thing]. Do not modify anything else."
Start a new session. Type /exit, then claude again. Fresh context fixes most loops.
"That broke [describe what]. Revert your last change and try a different approach."
Have Claude email Wes. Move on to something else while you wait.
Self-Review Checklist
Run through this before sending anything to Wes:
- ✓ Open every page on your phone. Anything broken?
- ✓ Read every word out loud. Any placeholder text? Typos?
- ✓ Click every link. Do they all go somewhere?
- ✓ Try the contact form. Does it submit?
- ✓ Would you show this to a client right now?
If you can't check all 5 boxes, keep working. Don't send it to Wes half-baked.
Asking Wes for Help
When you're stuck (3 tries and Claude can't fix it):
Email Wes at weshines17@gmail.com with my question. Include: - What I'm trying to do - What's going wrong - What I've already tried - A screenshot or description of the problem Subject: "Christian - [short description of issue]"
9 Prompt Cheat Sheet
Copy-paste these. Fill in the blanks. That's it.
I need to build a website for [BUSINESS NAME]. They are a [TYPE OF BUSINESS] in [CITY, STATE]. Here's what I know about them: - Phone: [PHONE] - Address: [ADDRESS] - Services: [LIST THEM] - What makes them different: [UNIQUE SELLING POINTS] Build a complete 5-page website: Home, About, Services, Contact, and [5TH PAGE]. Use the project brief in PROJECT-BRIEF.md for all the details. Make it look professional — clean, modern, mobile-first. The phone number should be clickable and prominent on every page.
[Paste screenshot or describe what you see] This doesn't look right. [Describe what's wrong — be specific about which page and which section]. It should look like [describe what you want instead]. Only fix this issue. Do not change anything else on the page.
On the [PAGE NAME] page, in the [SECTION — like "hero section" or "about paragraph"]: Change [what's there now] to [what it should say]. Do not modify the layout, styling, or any other content.
Build the site and deploy it to Cloudflare Pages preview. Walk me through each step and wait for me to confirm before moving on.
When I open [PAGE] on my phone, [describe what looks wrong — e.g., "the text overlaps the image" or "the menu doesn't open"]. Fix the mobile layout for this page. Test at 375px width. Only change what's needed to fix the mobile issue.
Add proper SEO to this site: - Title tags and meta descriptions for every page (use the business info from PROJECT-BRIEF.md) - Schema markup (LocalBusiness) with correct name, address, phone, hours - Sitemap - Alt text on all images - Make sure the phone number and city name appear naturally in the content Do not change the visual design of any page.
10 Glossary
Every term you'll hit, in plain English.
node build.js. If it fails, paste the error into Claude.commit to save, push to upload.http://localhost:3000. Only you can see it.node --version).future-windows-abc.pages.dev./skills. Let Claude use them.npx wrangler pages deploy dist puts the site on the internet.11 Rules to Live By
You never need to read or understand code. Look at the site in the browser and describe what needs to change.
"Fix the header" could mean 50 things. "Make the phone number in the header larger and move it to the right side" is one thing.
Claude is eager. It will "improve" things you didn't ask about. Always scope your request and tell it not to touch other stuff.
If Claude is going in circles, exit and start over. It's not a failure — it's how the tool works.
When something looks wrong, screenshot it. A picture of the problem is worth 100 words of description.
Run the self-review checklist first. He's not on call — respect the async.
If Claude can't get it in 3 tries, stop. Have Claude email Wes. Move on to something else while you wait.
The first output is never perfect. The loop of prompt-review-fix IS the process. 10 rounds of revision means you're doing it right.