project colordrop

Step 1: Starting the Project

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Create the project and get the basic structure in place.

Create the Project Folder

In Terminal:

terminal
mkdir ~/Desktop/ColorDrop
cd ~/Desktop/ColorDrop

You now have an empty folder for your project.

Start Claude

terminal
claude

Claude Code is now running and ready for your first prompt.

Your First Prompt

Copy and paste this:

terminal
I want to build a macOS menu bar app called ColorDrop.

What it does:
- Lives in the menu bar with a small icon
- When clicked, shows a popover with the color currently under the cursor
- Displays the color as hex, RGB, and HSL
- Has buttons to copy each format to clipboard

Platform: macOS (SwiftUI)
Target: macOS 14+

Let's start with just the basic project structure and menu bar presence.
Keep it simple.

Press Enter and let Claude work.

What to Expect

Claude will:

  1. Create the project structure (Package.swift, source files, etc.)
  2. Set up the basic macOS app
  3. Add menu bar presence (you'll see an icon in the menu bar)

Watch what Claude creates.

Verify It Works

After Claude finishes, it should offer to build and run the app. Say yes, or:

Build and run the app so I can see the menu bar icon.

If successful, you should see a new icon in your menu bar.

That's your app. It doesn't do much yet, but it's real.

Create CLAUDE.md

Before we continue, let's create a context file:

Create a CLAUDE.md file for this project with our current state and goals.

This helps Claude remember the project context in future sessions.

Optional: For a more polished result, consider adding the Apple HIG skill file to your project. It teaches Claude native macOS conventions — SF Symbols, system fonts, platform-standard navigation. Reference it from your CLAUDE.md and Claude will follow these patterns automatically.

Checkpoint

By now you should have:

  • Project folder created
  • Basic macOS app structure
  • Menu bar icon appearing
  • CLAUDE.md file

If anything isn't working, describe the problem to Claude.

What You Learned

  • How to start a new project with Claude
  • The "describe what you want" approach
  • Projects are just folders with files
  • Claude can build and run apps for you

Exercises

  1. Create the project folder and launch Claude, then paste the full "first prompt" exactly as written and let Claude scaffold the app.
  2. Build and run the app, and confirm a new icon appears in your menu bar before moving on.
  3. Generate a CLAUDE.md file for the project and open it — read what Claude recorded about your current state and goals, and add one line of your own if anything is missing.