---
description: Genera un wireframe HTML de la pantalla P0 del MVP. Usa el DESIGN.md activo para colores, tipografía y estilo. Guarda el HTML en .sdd/diseño/ con la tool Write. Respeta {PLUGIN_DIR}/craft/anti-ai-slop.md.
model: sonnet
allowed-tools: Read, Write, Bash
---
# Skill: Wireframe MVP
## Propósito
Generar un **wireframe HTML funcional** de la pantalla más importante del MVP (P0). El wireframe es visual, usa los tokens del DESIGN.md activo, y el usuario puede verlo antes de que exista una línea de código real.
---
## Lo que lees antes de empezar
```bash
# Pantalla P0
cat .sdd/product-design.json | node -e "
const d = JSON.parse(require('fs').readFileSync('/dev/stdin','utf8'));
const p0 = d.core_screens.find(s => s.priority === 'P0');
console.log(JSON.stringify(p0, null, 2));
console.log('DESIGN:', d.design_direction);
"
# DESIGN.md activo
DESIGN_PATH=$(cat .sdd/estado.json | node -e "
const d = JSON.parse(require('fs').readFileSync('/dev/stdin','utf8'));
console.log(d.design_system_path || '{PLUGIN_DIR}/design-systems/neutral-modern/DESIGN.md');
")
cat "$DESIGN_PATH"
# Reglas anti-slop
cat "{PLUGIN_DIR}/craft/anti-ai-slop.md" | head -80
```
---
## Lo que produces
Un HTML completo, en un solo archivo, guardado con la tool `Write` en `.sdd/diseño/wireframe-pantalla-principal.html`:
```html
[product.name] — [screen.name]
```
---
## Reglas de generación
### 1. Fidelidad al DESIGN.md
- Los valores CSS **deben coincidir** con el DESIGN.md activo (colores, fuentes, border-radius, sombras)
- Para las fuentes: si el DESIGN.md usa Google Fonts, añadir el `` correspondiente
- Para bold-brutalist: `border-radius: 0`, offset shadows, UPPERCASE en headings
- Para warm-editorial: Playfair Display para headings, bordes casi cuadrados
- Para neutral-modern: Inter, border-radius 6–8px, sombras mínimas
### 2. Contenido del wireframe
- Usar **copy real derivado del IR** — el nombre del producto, las features del mvp
- **No usar lorem ipsum** ni "Feature One" ni placeholders genéricos
- Los datos de ejemplo deben ser coherentes con el dominio (si es peluquería, usar "10:00 - Ana García", no "Item 1")
### 3. Estructura del HTML
- Un solo archivo (no imports externos excepto Google Fonts)
- CSS en `