3 min read
Step 1: Starting
Set up the project with React.
Create the Project
mkdir ~/Desktop/Playground
cd ~/Desktop/Playground
claudeFirst Prompt
I want to build a component playground/documentation site.
What it does:
- Shows my UI components with live examples
- Each component has interactive controls to change props
- Shows the code for each component
- Clean, documentation-style layout
Tech: Use React — components are the core concept in both React
and design systems, so it's a natural fit for this project.
Start with the basic project setup and a simple landing page.Framework Setup
Claude will set up React with Vite — a fast, lightweight starter that’s perfect for this kind of project.
Run the Dev Server
Start the dev server.You should see a basic page in your browser.
Create CLAUDE.md
Now give Claude a file that describes your project. This is called CLAUDE.md — Claude reads it automatically at the start of every session.
Create a CLAUDE.md file for this project.
Here's what it should say:
# Component Playground
An interactive component playground and design system documentation site.
## What This Is
- A React app for showcasing and testing UI components
- Each component has live examples with interactive props controls
- Shows code snippets alongside previews
## Design Goals
- Documentation-style layout — sidebar nav, main content area
- Clean and neutral so the components themselves stand out
- Interactive controls that feel intuitive (sliders, toggles, dropdowns)
## Structure
- Sidebar with component list
- Main area: component preview, props controls, code snippet
- Each component is self-contained and documentedClaude creates the file in your project root. Every future session starts with this context automatically.
Want to understand why this matters? Read the Your Project’s Brain guide.
Understand the Structure
Explain the project structure.
Where do components go?
Where does documentation content go?Plan the Layout
Plan the documentation layout:
- Sidebar with component list
- Main area showing selected component
- Component preview at top
- Props controls below
- Code snippet at bottomCheckpoint
- Project created
- React project set up
- CLAUDE.md created
- Dev server running
- Layout plan in mind
What You Learned
- Setting up a React project
- React project structure
- Documentation site layout
Tip: A component playground benefits from consistent design tokens. Consider adding the Design System skill file to your project — it teaches Claude to use a proper spacing scale, color tokens, and typography hierarchy across all components.