Step 1: Starting
Create the project and basic structure.
Create the Project Folder
In Terminal:
mkdir ~/Desktop/LinkPreview
cd ~/Desktop/LinkPreviewStart Claude
claudeGive Claude Context
Before you build anything, give Claude a file that describes your project. This is called a CLAUDE.md — it’s a plain text file that Claude reads automatically every time you start it in this folder.
Create a CLAUDE.md file for this project. It should describe:
- This is LinkPreview, a web tool for previewing Open Graph metadata
- Tech stack: vanilla HTML, CSS, JavaScript
- Design goals: clean card layout, clear error statesClaude will create something like this:
# LinkPreview
A web tool that previews Open Graph metadata for any URL.
## Tech Stack
- Vanilla HTML, CSS, JavaScript
- No frameworks or build tools
## Design Goals
- Clean card layout for link previews
- Clear, helpful error states
- Simple single-page interfaceNow every time you run claude in this folder, it already knows what you’re building. No need to re-explain.
Want to go deeper on this? See the CLAUDE.md section of The Setup.
Your First Prompt
I want to build a simple web tool called LinkPreview.
What it does:
- Has an input field for entering a URL
- Fetches the Open Graph metadata for that URL
- Displays the og:title, og:description, and og:image
- Shows a nice preview card like you'd see on social media
Keep it simple — single page, no framework needed.
Use vanilla HTML, CSS, and JavaScript.What to Expect
Claude will create:
- An
index.htmlfile - Basic styling
- A simple structure
Verify It Works
Open the HTML file in your browser:
Open index.html in my browserOr manually open the file. You should see a basic page with an input field.
Checkpoint
- Project folder created
- CLAUDE.md file created
- Basic HTML file
- Page opens in browser
- Input field visible
What You Learned
- Starting web projects is fast
- Vanilla HTML/CSS/JS works for simple tools
- CLAUDE.md gives Claude persistent context about your project — set it up once and it remembers
- No complex setup required
Tip: As you build more projects, you can teach Claude your design preferences using skill files — reusable markdown files for things like consistent spacing, accessibility, and responsive layouts.