SCHEDULE

Week 1 Install and Claude Basics
Week 2 Research and Writing with Claude
Week 3 Chrome Use, Computer Use & MCPs
Week 4 Build your first feature
Week 5 Build your own software part 2
Week 6 Build your own software part 3
Week 7 Demo Day

TODAY

1. The software development lifecycle
2. Build your first feature: setup, planning, coding, running

THE SOFTWARE DEVELOPMENT LIFECYCLE

Plan → Build → Test → Review → Ship → Learn

1. PLAN

What are you building and why?

• Define the problem you’re solving
• Describe how it should work
• Decide what features matter first

Claude works much better when you clearly define the goals.

2. BUILD

Write the code.

This is where Claude Code shines. But building doesn’t mean writing everything at once.

• Start small — get one thing working first
• Build in layers
• Don’t try to build the whole app in a single prompt

3. TEST

• Run the app, click around, try to break it
• Ask Claude: “How can we make sure this part works correctly?”

Don’t assume the code works just because Claude said it does!

4. REVIEW

• Read what Claude wrote — don’t just accept it blindly
• Can you follow what’s happening, even roughly?
• Ask Claude to explain anything you don’t understand

5 & 6. RUN & LEARN

• Get it running on your machine — even if it’s rough
• Click around, try things, see what breaks
• Watch what works, what doesn’t, and what’s missing
• Use what you learned to plan the next cycle

THE GOAL

By the end of this class, we will have one working feature running on your machine.

We’ll walk through the full cycle together: plan it, build it, run it.

PLAN: DECIDE WHAT YOU’RE BUILDING

You probably have a bigger project in mind. Let’s start by breaking that down into pieces.

PLAN: WRITE IT DOWN

Answer these three questions:

• What’s the bigger project? 
• What’s the single feature you’ll build today?
• What does “done” look like for that feature?

PLAN: EXAMPLES

• From a realtime drawing app → “black & white drawing tool”
• From a portfolio site → “a gallery page that shows my work in a grid”
• From a mood board tool → “drag and drop images onto a canvas”

Pick the smallest feature that feels usable.

THE PIECES OF AN APP

Frontend: what users see
Backend: the logic behind the scenes
Database: where information is stored

Knowing these terms will help tell Claude what you need.

CHOOSING YOUR TOOLS

My recommendation: Next.js

Next.js handles both frontend and backend in one project. Claude knows it extremely well.

Tell Claude in your CLAUDE.md file: “We are building a Next.js app.”

SET UP: CREATE YOUR PROJECT

Create a new folder and initialize git:

mkdir my-creative-tool && cd my-creative-tool

Then open Claude Code in that folder.

WHY GIT?

• If Claude breaks something, you can always go back
• Ask Claude to commit for you: “commit what we have so far”
• Also ask Claude to create a .gitignore file — it keeps junk out of your repo

No git = no way to track and undo changes.

SET UP: GITHUB

If you don’t have an account yet, create one at github.com.

Then ask Claude:
“Help me install the GitHub CLI, authenticate, create a repo for this project, and push it.”

Claude will walk you through every step. Just follow along and approve the commands.

SET UP: CLAUDE.md

Every project should have a CLAUDE.md file in the root.

• What the project does
• How to run it
• What tech stack you’re using
• Any conventions or rules to follow

Claude reads this file automatically every time you start a session.

SET UP: STARTING YOUR CLAUDE.md

Ask Claude: “Create a CLAUDE.md file for this project.”

Then tell it the basics:
• “This is a [your project description] built with Next.js”
• “The main feature I’m building is [your feature]”

It doesn’t need to be perfect. You’ll update it as your project grows. The point is to give Claude something to work with from the start.

SET UP: COMPOUND ENGINEERING

The Compound Engineering Plugin gives Claude Code a structured SDLC workflow.

Brainstorm, Plan, Build, Review. Then takes notes and repeat.

SET UP: INSTALL CE

In Claude Code, run:

/install-plugin EveryInc/compound-engineering-plugin

Verify it works by typing /ce: and seeing the autocomplete options.

PLAN: BRAINSTORM WITH CE

Run /ce:brainstorm

This starts a guided conversation that helps you scope a realistic v1. It asks questions, pushes back on vague ideas, and writes up a clear description of what you’re making.

PLAN: CREATE A BUILD PLAN

Run /ce:plan

This turns your brainstorm into a concrete, step-by-step technical plan. It researches your codebase and picks the right approach.

Read the plan carefully.

BUILD: ONE PIECE AT A TIME

Don’t try to describe your entire app in one giant prompt.

Bad: “Build me a full e-commerce site with user auth, a cart, payments, and an admin panel”

Good: “Create a page that displays a list of products from a JSON file”

BUILD: START CODING

Run /ce:work to build your feature.

• Follow your plan step by step
• Build one piece at a time, not everything at once
• Commit after each piece works
• If something breaks, paste the error back to Claude

BUILD: READ THE DIFF

After Claude makes changes, check what actually happened:

• What files were created or changed?
• Roughly what does each file do?
• Does the approach make sense to you?

You don’t have to understand every line. But you should know what changed and why. Ask Claude: “Explain what you just did.”

RUN: SEE IT WORK

Ask Claude: “How do I run this locally?”

It’ll tell you the command — usually something like npm run dev. Run it, open your browser, and see your feature working.

• Click around. Does it do what you expected?
• Try to break it. What happens with weird inputs?

DEBUGGING

1. Don’t panic. It’s a computer, not a crisis.
2. Read the error. The red text in your terminal is a clue.
3. Tell Claude. Copy the entire error message and paste it back. Say: “I got this error. What does it mean and how do we fix it?”

REVIEW: CHECK YOUR WORK

Once your feature is finished, run /ce:review

This checks your code for common issues: bugs, security problems, missing error handling, things you might not think to look for yourself.

It’s like having a second pair of eyes. Fix what it flags, then commit.

EASY WAYS TO IMPROVE YOUR APP

Design: “Make this look more polished — better spacing, typography, and color”
Mobile: “Make this responsive so it works on phones”
Loading states: “Show a spinner or skeleton while data loads”
Error handling: “Show a friendly message if something goes wrong”
Performance: “Optimize the images and make the page load faster”

You don’t need all of these today, but you can iterate this week.

ACCESSIBILITY QUICK WINS

Contrast: “Make sure text is readable against the background”
Semantic HTML: “Use proper headings and labels, not just divs”
Alt text: “Add alt text to all images”
Keyboard nav: “Make sure I can tab through the interface”

These are small asks that make your tool usable by more people.

HOMEWORK 1: FINISH YOUR FEATURE

If you didn’t finish building your feature in class, complete it this week.

• It should run locally and do one thing
• Make sure your CLAUDE.md file describes your project
• Commit your working code to git
• Don’t worry about how it looks yet

HOMEWORK 2: WRITE DOWN WHAT’S NEXT

Now that you have one feature working, what comes next?

• What’s the second feature you’d add?
• What didn’t work the way you expected?
• What would you do differently next time?

Write a few sentences in a notes file. Next week we’ll build on what you have.