Your First Project
After running driftgrid init, you have a project with 3 empty concept slots. Here’s how to bring them to life.
1. Set Up Brand Guidelines
Every client has a brand/guidelines.md file with colors, fonts, and voice. The init wizard creates a starter template — customize it:
projects/your-client/brand/guidelines.mdInclude:
- Colors — primary, secondary, accent, background (hex values)
- Typography — heading and body fonts (Google Fonts work best)
- Voice — tone description for copy
- Reference links — website URL, Figma, etc.
If you’re using Claude Code, it can extract brand details from a website URL automatically.
2. Fill the Concept Slots
From Claude Code
Tell Claude what you want:
Create 3 different design directions for the landing page.
Direction A should be clean and minimal.
Direction B should be bold and dark.
Direction C should use the brand green prominently.Claude reads your brand guidelines, writes the HTML, and the designs appear in the grid.
Manually
Write HTML files directly:
projects/your-client/your-project/concept-1/v1.htmlprojects/your-client/your-project/concept-2/v1.htmlprojects/your-client/your-project/concept-3/v1.html
3. Browse the Grid
Open localhost:3000 and click your project. You’ll see:
| Key | Action |
|---|---|
| Arrow keys | Navigate between cards |
| Enter | Zoom into a frame |
| G | Back to grid |
| D | Drift up — new version |
| Shift+D | Drift right — new concept |
| S | Star a version |
| P | Present starred versions |
| C | Prompt your agent (in frame) |
| ? | All keyboard shortcuts |
4. Iterate
Two ways to keep going:
From the grid — press D to drift a new version slot, then tell your agent what to change.
From Claude Code — just describe what you want:
- “Make concept 2 bolder with bigger type”
- “Create a dark version of concept 1”
- “Iterate on all 3 with more whitespace”
5. Share
Click the Share button (top-right of grid) to create a client review link. Clients browse and leave comments without accounts.
See Sharing & Review for the full workflow.