# Instrucciones para el agente: baoyu-design: explora interfaces con prototipos HTML

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

- Dificultad: intermedio
- Proyecto: https://github.com/JimLiu/baoyu-design (licencia MIT)
- Guía completa: https://lab.wisd.ai/hub/baoyu-design-local-claude-design

---

## Para el agente: cómo acompañar al usuario

1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

---

## Pasos de configuración

Comprueba que tienes un arnés compatible, Node.js ≥22.20.0 y npm/npx para la [CLI skills actual](https://github.com/vercel-labs/skills/blob/main/package.json), y Python 3 para el servidor de previsualización. Ejecuta el servidor desde la raíz del proyecto donde se ha creado `designs/`.

### Paso 1: instala la skill

```bash
npx skills add JimLiu/baoyu-design
```

### Paso 2: crea un prototipo

En Claude Code activa `/baoyu-design` o menciona `$baoyu-design` en Codex. Describe la pantalla, el público y las restricciones de marca.

### Paso 3: abre la previsualización

El README propone:

```bash
python3 -m http.server 4311 --directory designs
```

Abre la ruta del archivo generado bajo `http://localhost:4311/`.

## Comprobación

Comprueba que existe el HTML en `designs/`, que carga mediante HTTP y que puedes recorrer las interacciones solicitadas. Señala un elemento y pide una modificación concreta.

## Si algo falla

Si un prototipo con varios archivos falla desde `file://`, usa el servidor HTTP. Si cambió la instalación, reinicia la sesión tras actualizar y consulta el apartado Install del README.

Consulta el [README oficial](https://github.com/JimLiu/baoyu-design#readme) para el procedimiento completo y los cambios de versión.