Part 2: Design-First Frontend
Now that we’ve engineered the repo context, let’s get creative.
Task 1: Make It Yours
Section titled “Task 1: Make It Yours”Start larger work in Plan mode. Copilot will inspect the current app and its frontend and Tailwind instructions, then propose a redesign plan without changing code. Use this planning conversation to shape the visual direction, preserve game behavior, and agree on how the result will be validated.
Steps:
- Switch to Plan mode
- Prompt: “Let’s do a full redesign. Make it …” and finish with a theme idea below or your own direction
- Review the proposed experience, affected areas, and validation approach
- Iterate on the plan at least twice with concrete tweaks and clarifications; Copilot will revise it without implementing yet
- When the plan is ready, choose:
- Start with Autopilot (preferred): let Copilot implement and validate the plan autonomously
- Start Implementation: begin the implementation with the standard approval flow
- Open in Editor: edit or save the plan before implementation
- Review the running app and the agent’s validation before accepting the changes
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.
⏱️ Context checkpoint (1 minute): After this substantial design conversation, run
/compactif it appears in the slash-command menu for your Copilot session target or Copilot CLI. Review the summary before continuing. If your Local session does not list it, skip this step. Compaction preserves key decisions while freeing context for the next phase—context engineering applied to the conversation itself.
Task 2: Keep Instructions Updated
Section titled “Task 2: Keep Instructions Updated”Keep instructions updated with major architecture/design/dependency changes.
Steps:
- Follow-up:
/create-instructions design guide - Confirm, commit and push
Bonus: Check that GitHub Pages is updating.
Task 3: Refine One Real Element
Section titled “Task 3: Refine One Real Element”Replace a blind design follow-up with precise feedback on the running UI.
Steps:
- Keep the redesigned app open in VS Code’s integrated browser.
- Open the browser toolbar’s Add to Chat menu and select Comment on Elements (
Ctrl+Alt+Con Windows/Linux). - Select one real element with a visible issue, such as the primary action or a question card, and describe the specific visual or UX problem.
- In Chat, send: “Fix this element-level issue without changing game behavior. Then use browser tools to inspect the updated element and verify its interaction.”
- Review the edit and the agent’s browser verification, then reload the page and confirm the issue is resolved.
✅ Result: Your selected element carries concrete browser context into Chat, and the agent implements and verifies a focused improvement.
✅ Part 2 Complete!
Section titled “✅ Part 2 Complete!”You’ve learned how to:
- Use Plan Mode for complex design tasks
- Iterate on plans before implementing
- Compact accumulated context before changing phases when supported
- Keep instructions updated with changes
- Comment on a real browser element and verify the implemented fix