# Part 2: Design-First Frontend

[← Part 1](01-setup.md)

---

Now that we've engineered the repo context, let's get creative.

---

### Task 1: Make It Yours

Plan mode to start off any bigger work items — iterate on the plan (2+ times!) with tweaks and clarifications.

**Steps:**

1. Switch to Plan mode
2. *Lets do a full redesign. Make it …*
3. Review plan and start Implement

**Theme Ideas:**

- Minimalist Mono
- Grotesque Type Grid
- Retro Terminal Green
- Vaporwave Sunset
- Cyberpunk Neon
- Brutalist Blocks
- Soft Pastel Clouds
- Skeuomorphic Stickers
- Dark Mode Noir
- Playful Candy Pop
- Pixel Arcade Style
- Scandinavian Calm
- Corporate Clean Blue
- Gradient Glass UI
- Notebook Doodle Sketch
- Space Galaxy Glow
- Paper Card Cutouts
- Geometric Memphis
- Cozy Coffee Shop
- Metallic Chrome UI
- Bold Constructivist
- Eco Leafy Green
- Anime Bubble Aesthetic
- Monochrome Newspaper
- Chalkboard Classroom
- Yacht Club Nautical
- Desert Sand Minimal
- Bold Serif Vintage
- Toybox Primary Colors

✅ **Result:** Frontend and Tailwind instructions are used to build a beautiful design.

---

### Task 2: Keep Instructions Updated

Keep instructions updated with major architecture/design/dependency changes.

**Steps:**

1. Follow-up: `/create-instructions design guide`
2. Confirm, commit and push

Bonus: Check that GitHub Pages is updating.

---

### Task 3: Dogfood the Redesign

Re-run the dogfooding skill from Part 1 to validate your new design.

**Steps:**

1. Prompt: *"Dogfood the app — focus on the new design"*
2. Compare feedback to the earlier dogfooding report
3. Optional: Address any issues the agent flags

✅ **Result:** The agent plays through the redesigned app and gives fresh critical feedback.

---

## ✅ Part 2 Complete!

You've learned how to:
- Use Plan Mode for complex design tasks
- Iterate on plans before implementing
- Keep instructions updated with changes
- Re-run dogfooding to validate design changes