3 min read
Step 1: Starting
Create the project and basic structure.
Create the Project Folder
In Terminal:
mkdir ~/Desktop/MoodBoard
cd ~/Desktop/MoodBoardStart Claude
claudeCreate CLAUDE.md
First, give Claude a file that describes what you’re building. This is called CLAUDE.md — Claude reads it automatically every time you start a session in this folder.
Create a CLAUDE.md file for this project.
Here's what it should say:
# MoodBoard
A visual mood board tool for collecting and arranging design inspiration.
## What This Is
- A single-page web app for creating mood boards
- Drag-and-drop interface for arranging items on a canvas
- Supports color swatches, images, and typography samples
## Design Goals
- The board is the UI — minimal chrome, maximum canvas
- Smooth drag-and-drop that feels natural
- Clean toolbar that stays out of the way
## Tech
- Vanilla HTML, CSS, and JavaScript
- No build tools or frameworks
- Single page appClaude creates the file in your project folder. From now on, every session starts with full context.
Want to understand why this matters? Read the Your Project’s Brain guide.
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.htmlfile 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:
Open index.html in my browserOr manually open the file. You should see a toolbar at the top and an empty board area below.
Checkpoint
- Project folder created
- CLAUDE.md 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.