2 min read
Step 1: Starting
Set up the project with your framework of choice.
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
I prefer [React/Svelte] — help me choose if unsure.
Start with the basic project setup and a simple landing page.Framework Setup
Claude will set up either:
- React with Vite or Next.js
- Svelte with SvelteKit or Vite
Either works well for this project.
Run the Dev Server
Start the dev server.You should see a basic page in your browser.
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
- Framework chosen and set up
- Dev server running
- Layout plan in mind
What You Learned
- Setting up modern frontend projects
- Framework options and trade-offs
- Documentation site structure