copilot-dev-days/workshop/es/02-design.md

Parte 2: Frontend Design-First

← Parte 1

---

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