Skip to content

Latest commit

 

History

History
90 lines (64 loc) · 1.92 KB

File metadata and controls

90 lines (64 loc) · 1.92 KB

Part 2: Design-First Frontend

← Part 1


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