Step 1: Starting

Create the project and basic structure.

Create the Project Folder

In Terminal:

mkdir ~/Desktop/MoodBoard
cd ~/Desktop/MoodBoard

Start Claude

claude

Your First Prompt

I want to build a visual mood board tool called MoodBoard.

What it does:
- A full-page canvas where you can add visual items
- Items include: color swatches, image cards, and typography samples
- Items display on a responsive grid
- Clean, minimal UI — the board itself is the focus

Keep it simple — single page, no framework needed.
Use vanilla HTML, CSS, and JavaScript.
Start with the basic HTML structure, a top toolbar, and an empty board area.

What to Expect

Claude will create:

• An index.html file with the page structure
• CSS for the toolbar and board area
• A clean starting layout

Verify It Works

Open the HTML file in your browser:

Or manually open the file. You should see a toolbar at the top and an empty board area below.

Checkpoint

• Project folder created
• Basic HTML file with structure
• Page opens in browser
• Toolbar and empty board area visible

What You Learned

• Starting web projects with no build tools
• Vanilla HTML/CSS/JS is enough for real tools
• A toolbar + canvas is a common app layout pattern

Tip: A drag-and-drop app benefits from smooth interactions. As you progress, the Animation skill file can teach Claude tasteful motion defaults for drags, drops, and transitions.

Exercises

1. Run the folder-creation commands and paste "Your First Prompt" into Claude, then open index.html and confirm you see a toolbar plus an empty board area.
2. If the starting layout doesn't match your sketch from the intro, write one follow-up prompt describing the specific change (e.g., "make the toolbar shorter and the board area fill the rest of the screen").
3. Note one thing you'd want to add to the toolbar later — you'll wire up real buttons in Step 2.