mirror of
https://github.com/andwati/copilot-dev-days.git
synced 2026-10-18 10:12:53 +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)
|
|
|
|
---
|
|
|
|
Ahora que hemos trabajado la ingeniería de contexto del repo, vamos a ponernos creativos.
|
|
|
|
---
|
|
|
|
### Tarea 1: Hazlo Tuyo
|
|
|
|
Plan mode para comenzar cualquier trabajo grande — itera en el plan (¡2+ veces!) con ajustes y aclaraciones.
|
|
|
|
**Pasos:**
|
|
|
|
1. Cambia a Plan mode
|
|
2. *Hagamos un rediseño completo. Hazlo…*
|
|
3. Revisa el plan y comienza a Implementar
|
|
|
|
**Ideas 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:** Las instrucciones de frontend y Tailwind se usan para crear un diseño hermoso.
|
|
|
|
---
|
|
|
|
### Tarea 2: Mantén las Instrucciones Actualizadas
|
|
|
|
Mantén las instrucciones actualizadas con cambios importantes de arquitectura/diseño/dependencias.
|
|
|
|
**Pasos:**
|
|
|
|
1. Follow-up: `/create-instructions design guide`
|
|
2. Confirma, haz commit y push
|
|
|
|
Bonus: Verifica que GitHub Pages se esté actualizando.
|
|
|
|
---
|
|
|
|
### Tarea 3: Prueba el Rediseño
|
|
|
|
Re-ejecuta la skill de dogfooding de la Parte 1 para validar tu nuevo diseño.
|
|
|
|
**Pasos:**
|
|
|
|
1. Prompt: *"Haz dogfooding de la app — enfócate en el nuevo diseño"*
|
|
2. Compara el feedback con el reporte de dogfooding anterior
|
|
3. Opcional: Resuelve cualquier problema que el agente señale
|
|
|
|
✅ **Resultado:** El agente juega la app rediseñada y da feedback crítico actualizado.
|
|
|
|
---
|
|
|
|
## ✅ ¡Parte 2 Completa!
|
|
|
|
Aprendiste cómo:
|
|
- Usar Plan Mode para tareas complejas de diseño
|
|
- Iterar en los planes antes de implementar
|
|
- Mantener instrucciones actualizadas con cambios
|
|
- Re-ejecutar dogfooding para validar cambios de diseño
|