mirror of
https://github.com/andwati/copilot-dev-days.git
synced 2026-10-18 10:12:53 +00:00
91 lines
1.9 KiB
Markdown
91 lines
1.9 KiB
Markdown
# 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
|