<!-- 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