lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill intermedio claude-codecodexcursorprototipos

baoyu-design: explora interfaces con prototipos HTML

Compara variantes de una interfaz y corrígelas en el navegador. Los entregables HTML quedan en tu proyecto para revisarlos y seguir iterando.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

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.

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

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:

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 para el procedimiento completo y los cambios de versión.

ver en .md ¿Prefieres el recurso entero?

Qué es

baoyu-design es una skill de diseño para agentes que pueden leer y escribir archivos. Guía la definición del encargo, la construcción de prototipos HTML y su revisión en una previsualización local.

Para qué te sirve

  • Cuando necesitas comparar tres variantes antes de desarrollar una pantalla.
  • Cuando ya tienes un sistema de diseño y quieres reutilizar sus decisiones en un prototipo.

Cómo funciona

Las instrucciones de entrada seleccionan referencias y tareas especializadas. El agente guarda los entregables bajo designs/, puede vincular un sistema de diseño y revisa los resultados mediante HTTP local. HTML y recursos permanecen disponibles para posteriores modificaciones.

Antes de empezar

Prepara un agente compatible y Node.js/npm para el instalador recomendado. El servidor de ejemplo utiliza Python 3. El código de la skill es MIT; usar un modelo o generar recursos mediante servicios externos puede tener coste.

Límites y alternativas

El nombre y las afirmaciones del README no convierten este proyecto comunitario en una distribución oficial de Anthropic. Un prototipo navegable tampoco demuestra que un producto tenga backend, accesibilidad o controles de seguridad completos. Para integrar componentes reales puedes usar tu biblioteca habitual.

Recursos