mirror of
https://github.com/andwati/copilot-dev-days.git
synced 2026-10-22 20:12:16 +00:00
92 lines
2.1 KiB
Markdown
92 lines
2.1 KiB
Markdown
<!-- l10n-sync: source-file="workshop/02-design.md" -->
|
|
# Parte 2: Frontend Design-First
|
|
|
|
[← Parte 1](01-setup.md)
|
|
|
|
---
|
|
|
|
Agora que engenheiramos o contexto do repo, vamos ser criativos.
|
|
|
|
---
|
|
|
|
### Tarefa 1: Deixe a Sua Cara
|
|
|
|
Plan mode para começar qualquer trabalho maior — itere no plano (2+ vezes!) com ajustes e esclarecimentos.
|
|
|
|
**Passos:**
|
|
|
|
1. Mude para Plan mode
|
|
2. *Vamos fazer um redesign completo. Faça algo…*
|
|
3. Revise o plano e comece a Implementação
|
|
|
|
**Ideias de Temas:**
|
|
|
|
- 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
|
|
|
|
✅ **Resultado:** As instruções de frontend e Tailwind são usadas para criar um design bonito.
|
|
|
|
---
|
|
|
|
### Tarefa 2: Mantenha as Instruções Atualizadas
|
|
|
|
Mantenha as instruções atualizadas com mudanças importantes de arquitetura/design/dependências.
|
|
|
|
**Passos:**
|
|
|
|
1. Follow-up: `/create-instructions design guide`
|
|
2. Confirme, faça commit e push
|
|
|
|
Bônus: Verifique se o GitHub Pages está atualizando.
|
|
|
|
---
|
|
|
|
### Tarefa 3: Teste o Redesign
|
|
|
|
Re-execute a skill de dogfooding da Parte 1 para validar seu novo design.
|
|
|
|
**Passos:**
|
|
|
|
1. Prompt: *"Faça dogfooding do app — foque no novo design"*
|
|
2. Compare o feedback com o relatório de dogfooding anterior
|
|
3. Opcional: Resolva quaisquer problemas que o agente apontar
|
|
|
|
✅ **Resultado:** O agente joga o app redesenhado e dá feedback crítico atualizado.
|
|
|
|
---
|
|
|
|
## ✅ Parte 2 Completa!
|
|
|
|
Você aprendeu como:
|
|
- Usar Plan Mode para tarefas complexas de design
|
|
- Iterar nos planos antes de implementar
|
|
- Manter instruções atualizadas com mudanças
|
|
- Re-executar dogfooding para validar mudanças de design
|