project colordrop

ColorDrop

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

Full Lesson Reference

A macOS menu bar color utility. Your first real app.

Platform note: This project requires macOS and Xcode. Windows users: check out the web projects (LinkPreview, Weather, Portfolio, Playground) for cross-platform alternatives.

What You'll Build

ColorDrop — a menu bar app that:

  • Lives in your Mac's menu bar
  • Shows the color under your cursor when clicked
  • Displays hex, RGB, and HSL values
  • Copies colors to clipboard with one click

It's small, visual, useful, and entirely yours.

Why This Project

This project teaches the full loop:

  1. Starting — How to begin a project from nothing
  2. Building — Adding features incrementally
  3. Iterating — Refining based on what you see
  4. Polishing — Making it feel finished
  5. Shipping — Running it as a real app

The skills transfer to everything else you'll build.

Before You Start

Make sure you've completed:

  • Claude Code installed and working (Guide: The Setup)
  • Xcode installed
  • The "Just Ask" test from the setup guide

The Steps

Work through these in order:

  1. Starting the Project — Create the project and basic structure
  2. Getting the Foundation — Menu bar presence, basic window
  3. Color Detection — Pick colors from the screen
  4. Clipboard — Copy colors in different formats
  5. Polish — Make it look and feel right
  6. Building — Create the actual app
  7. What's Next — Ideas for extending

If You Get Stuck

Getting stuck is normal. Here's what to do:

  1. Describe the problem to Claude — "I tried X and expected Y but got Z"
  2. Share error messages — Copy and paste the full error
  3. Ask for explanation — "I don't understand what's happening here"

Claude can help you debug. That's part of the workflow.

Let's Start

Ready? Open Terminal and go to where you want to create the project:

terminal
cd ~/Desktop

Exercises

  1. Write down, in one sentence each, what ColorDrop should do at every stage of the five-step loop (start, build, iterate, polish, ship) — this primes you to recognize each phase as you work.
  2. Confirm your environment is ready: verify Claude Code launches, Xcode is installed, and you can run the "Just Ask" test from the setup guide.
  3. Run cd ~/Desktop in Terminal and decide where you want the project to live before moving on to Step 1.