majiayu000/claude-skill-registry

Web Design Wizard

Resumen

Genera múltiples estilos de diseño distintos para una página web en worktrees paralelos, permitiendo al usuario comparar y refinar antes de comprometerse con una dirección. Principio fundamental: explorar de forma divergente, luego converger en la mejor opción.

Cuándo usarlo

• El usuario quiere explorar diferentes estilos de diseño para una página web
• El usuario pide opciones de diseño, dirección visual o comparación de estilos
• El usuario desea múltiples implementaciones para elegir

NO usar cuando:

• El usuario ya tiene un diseño específico definido → usar saurun:react-tailwind-v4-components o frontend-design directamente
• El usuario quiere modificar un diseño existente, no crear uno nuevo

Requisitos previos

Todos los skills siguientes deben estar instalados. Si falta alguno, detente e informa al usuario.

Skill	Usado en	Propósito
ui-ux-pro-max	Fase 2	Generación del sistema de diseño
superpowers:using-git-worktrees	Fase 6	Configuración de worktrees paralelos
frontend-design	Fase 6	Implementación de calidad de producción
vercel-react-best-practices	Fase 6	Optimización de React
copywriting	Fase 6	Refinamiento de textos
nano-banana-pro	Fase 6	Generación de imágenes — instalar: npx skills add intellectronica/agent-skills@nano-banana-pro -g -y

Flujo de trabajo

digraph design_wizard {
    "Petición del usuario" [shape=doublecircle];
    "Descubrimiento" [shape=box];
    "Generación de estilos" [shape=box];
    "¿Usuario satisfecho?" [shape=diamond];
    "Refinamiento" [shape=box];
    "Preferencia gráfica" [shape=box];
    "Configuración del proyecto" [shape=box];
    "Implementación paralela" [shape=box];
    "Verificación paralela" [shape=box];
    "Completado" [shape=doublecircle];

    "Petición del usuario" -> "Descubrimiento";
    "Descubrimiento" -> "Generación de estilos";
    "Generación de estilos" -> "¿Usuario satisfecho?";
    "¿Usuario satisfecho?" -> "Refinamiento" [label="no"];
    "Refinamiento" -> "¿Usuario satisfecho?";
    "¿Usuario satisfecho?" -> "Preferencia gráfica" [label="sí"];
    "Preferencia gráfica" -> "Configuración del proyecto";
    "Configuración del proyecto" -> "Implementación paralela";
    "Implementación paralela" -> "Verificación paralela";
    "Verificación paralela" -> "Completado";
}

Fase 1: Descubrimiento

Usa AskUserQuestion para recopilar contexto. Preguntas en lote — usa hasta 4 preguntas por llamada. Deduce respuestas obvias del contexto (por ejemplo, una cafetería está orientada al consumidor, probablemente un ambiente cálido).

Recopila:

1. Nombre del proyecto — detecta desde package.json o el nombre del repositorio git, confirma con el usuario
2. Tipo de página — Landing, Portafolio, Blog, Comercio electrónico, SaaS, Documentación
3. Audiencia objetivo — Profesionales, Consumidores, Desarrolladores, Industria creativa
4. Ambiente/sensación — Profesional, Divertido, Lujo, Minimalista, Audaz, Cálido, Futurista
5. Idioma del contenido — Inglés, Danés, etc.
6. Preferencias/antipreferencias de estilo — solo si no es obvio a partir de lo anterior

Omite preguntas cuya respuesta sea obvia a partir de la solicitud del usuario.

Fase 2: Generación de estilos

Genera estilos de diseño usando ui-ux-pro-max:

Por defecto: 4 estilos (el usuario puede solicitar una cantidad diferente).

Para cada estilo:

1. Elabora palabras clave diversas a partir de las respuestas del descubrimiento. Combina: tipo de página + audiencia + ambiente + estética única. Asegura variedad entre todos los estilos.

2. Genera el sistema de diseño: Invoca ui-ux-pro-max mediante la herramienta Skill con los argumentos: "[palabras-clave]" --design-system --persist -p "[NombreProyecto]" --page "[nombre-estilo]" Guarda en: design-system/pages/[nombre-estilo].md en el directorio de trabajo actual.

3. Presenta al usuario con: nombre del estilo, colores clave, tipografía, adjetivos de ambiente y mejor caso de uso.

Lleva un registro de los estilos generados para evitar palabras clave duplicadas en rondas de refinamiento.

Fase 3: Refinamiento (Iterativo)

El usuario dice	Acción
"Dame N estilos completamente diferentes"	Genera N estilos NUEVOS con palabras clave diferentes
"Dame N opciones más"	Genera N NUEVOS (evita palabras clave anteriores)
"Me gustan X e Y, dame más como X"	Conserva X e Y, genera variaciones de X
"Combina los estilos X e Y"	Genera 1 nuevo que fusione esas estéticas
"Implementa X, Y, Z" o "Implementa todos"	Avanza a la Fase 4 con las selecciones

Fase 4: Preferencia gráfica

Antes de la implementación, pregunta sobre los gráficos para todos los estilos seleccionados a la vez:

Usa AskUserQuestion con opciones:

• "Muchos gráficos para todos (hero + gráficos de acento + ilustraciones)"
• "Gráficos mínimos para todos (solo imagen hero)"
• "Deja que el estilo de diseño determine los gráficos" (Recomendado)
• "Quiero elegir por estilo"

Solo pregunta por estilo si el usuario elige la última opción.

Fase 5: Configuración del proyecto

Confirmar ubicación del proyecto

Sugerido: designs/[nombre-proyecto]/ en el directorio de trabajo actual.

Pide al usuario que confirme o anule.

Crear el proyecto

1. mkdir -p [ubicación]
2. Escribe concept.md — consulta concept-template.md para la plantilla. Completa con las respuestas del descubrimiento. Solo rellena los campos para los que tengas datos; omite las secciones sin información.
3. NO ejecutes git init — usa el repositorio existente. Haz commit de los documentos del proyecto en la rama actual.

git add designs/[nombre-proyecto]/concept.md
git commit -m "docs: inicializar exploración de diseño de [nombre-proyecto]"

Estructura del proyecto

[raíz-repo]/
├── designs/[nombre-proyecto]/
│   └── concept.md
├── design-system/pages/
│   ├── [estilo-1].md
│   └── [estilo-2].md
└── .worktrees/
    ├── [rama-estilo-1]/    # Proyecto React + Vite + TypeScript
    └── [rama-estilo-2]/

Fase 6: Implementación paralela

CRÍTICO: Lanza TODOS los agentes de implementación en un SOLO mensaje con múltiples llamadas a la herramienta Task.

Para cada estilo seleccionado, lanza un subagente. Consulta implementation-prompt.md para la plantilla completa del prompt. Reemplaza [ruta-absoluta-a-la-raíz-del-repo] con la ruta real de la raíz del repositorio para que los subagentes puedan resolver referencias entre worktrees.

Puntos clave para cada subagente:

• Usa superpowers:using-git-worktrees para crear el worktree en .worktrees/[nombre-estilo]/
• Crea un proyecto React + Vite + TypeScript: npm create vite@latest . -- --template react-ts
• Lee la especificación de diseño desde design-system/pages/[nombre-estilo].md
• Usa la herramienta Skill para invocar: frontend-design, vercel-react-best-practices, copywriting, nano-banana-pro
• Genera imágenes según la preferencia gráfica
• Compila con npm run build para verificar
• Haz commit de todos los cambios

Espera a que TODOS los agentes terminen antes de la Fase 7.

Fase 7: Verificación paralela

CRÍTICO: Lanza TODOS los agentes de verificación en un SOLO mensaje con múltiples llamadas a la herramienta Task.

Para cada implementación, lanza un subagente de verificación. Consulta verification-prompt.md para la plantilla completa del prompt. Asigna puertos secuencialmente (5173, 5174, 5175, ...) y reemplaza [ruta-absoluta-a-la-raíz-del-repo] con la ruta real.

Comprobaciones de verificación:

• El servidor de desarrollo se inicia sin errores
• Todas las URLs/enlaces son válidos
• Las imágenes existen y están referenciadas correctamente
• Cumplimiento de la especificación de diseño (color, tipografía, diseño, efectos) — puntuación 1-10
• La compilación de producción es exitosa

Después de que todas terminen, muestra un resumen comparativo:

Estilo 1: [Nombre] — ✅ Todo correcto — Diseño: 8.5/10
Estilo 2: [Nombre] — ⚠️ 2 URLs rotas — Diseño: 9.0/10
Estilo 3: [Nombre] — ❌ Compilación fallida — Ver informe

Recomienda el estilo con mejor rendimiento según los resultados.

Referencia rápida

Fase	Acción	Herramienta clave
1. Descubrimiento	Recopilar contexto mediante AskUserQuestion (lote de hasta 4)	AskUserQuestion
2. Generación de estilos	Generar 4 sistemas de diseño mediante ui-ux-pro-max	Skill
3. Refinamiento	Iterar hasta que el usuario seleccione estilos	AskUserQuestion
4. Gráficos	Preguntar preferencia gráfica para los estilos seleccionados	AskUserQuestion
5. Configuración del proyecto	Crear concept.md, hacer commit del andamiaje	Write, Bash
6. Implementación	Lanzar subagentes en paralelo por estilo	Task
7. Verificación	Lanzar agentes de verificación en paralelo, mostrar comparación	Task

Errores comunes

• Regenerar especificaciones de diseño en subagentes — las especificaciones se crean en la Fase 2. Los subagentes las LEEN, nunca vuelven a invocar ui-ux-pro-max.
• Lanzamiento secuencial de subagentes — Las fases 6 y 7 DEBEN lanzar TODOS los agentes en un solo mensaje con múltiples llamadas a Task. Nunca uno por uno.
• Omitir la preferencia gráfica — siempre preguntar antes de la implementación. No asumir.
• Usar git add . en worktrees — solo agregar rutas específicas para evitar incluir node_modules, .env o archivos del sistema.
• Palabras clave idénticas entre estilos — lleva un registro de las palabras clave usadas para garantizar la diversidad. Las palabras clave duplicadas producen diseños duplicados.

Manejo de errores

Error	Recuperación
El script de ui-ux-pro-max falla	Reintentar con palabras clave más simples. Si persiste, crear el sistema de diseño manualmente a partir de las palabras clave del estilo.
Todos los estilos rechazados	Preguntar al usuario por una dirección específica: "¿Qué no te gustó? ¿Colores? ¿Distribución? ¿Sensación general?"
Skill de subagente no encontrado	El agente debe usar la herramienta Skill para invocarlo. Si el skill realmente falta, omitir ese paso de mejora y anotarlo.
La compilación de implementación falla	Corregir en el worktree, volver a ejecutar la compilación. Informar el problema si no se puede solucionar.