design-shotgunpor Garry Tan

Design Shotgun Skill.

Un skill de Claude Code y Codex para diseño de UI: genera varias variantes de diseño en paralelo y abre un tablero de comparación para feedback.

Web y UI
Código UI

Descargar OpenDesign Ver guía de uso

garrytan/gstack · design-shotgun/SKILL.mdSKILL.md

--- name: design-shotgun description: Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

Portada y encabezados de sección leídos del archivo original el 14/09/2026 · 52 851 caracteres en total

01 Qué hace

Qué hace el Skill design-shotgun en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

design-shotgun es una herramienta de exploración de diseño visual que genera múltiples variantes de diseño con IA en paralelo, las abre en un panel de comparación servido por HTTP y recopila comentarios estructurados. Recuerda el gusto del usuario entre sesiones mediante un perfil de gusto persistente (fuentes, colores, diseños, estética) y orienta las nuevas generaciones hacia las preferencias demostradas.

El skill aplica anticonvergencia (cada variante debe usar fuentes, paletas y diseños diferentes) y guarda todos los artefactos en ~/.gstack/projects/$SLUG/designs/ para persistencia entre sesiones. Admite tanto nuevas exploraciones como retomar sesiones anteriores, con bucles de retroalimentación para regeneración, remezcla de elementos entre variantes e iteración hasta que el usuario apruebe una dirección.

Qué produce

N PNG de variantes guardados en ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png
Panel de comparación HTML servido por HTTP en un puerto aleatorio con una interfaz de recopilación de comentarios (design-board.html)
Archivo approved.json que registra la variante preferida, calificaciones, comentarios y fecha para el aprendizaje de gusto entre sesiones
taste-profile.json actualizado (esquema v1) con patrones aprobados/rechazados ponderados por confianza para cada dimensión

Ver el ejemplo de prompt ↗

Cómo funciona

01
Detección de sesión y recuperación del gusto
Revisa ~/.gstack/projects/$SLUG/designs/ en busca de archivos approved.json de sesiones anteriores y lee el taste-profile.json persistente (esquema v1 con decaimiento de confianza del 5% por semana).
02
Generación paralela de variantes con anticonvergencia
Lanza N subagentes de Agent (uno por variante) en un solo mensaje para ejecución concurrente.
03
Panel de comparación HTTP con bucle de retroalimentación
Ejecuta $D compare --serve para generar el panel HTML e iniciar el servidor HTTP en un puerto aleatorio.
04
Confirmación de comentarios y actualización del gusto
Resume la variante preferida, las calificaciones y los comentarios; confirma mediante AskUserQuestion antes de guardar.

02 Encuentra tu caso de uso

Cuándo Usar el Skill design-shotgun

Use la skill design-shotgun en Claude Code o Codex cuando el trabajo sea diseño de interfaz de este tipo. Los límites y adecuación a continuación provienen del propio archivo de la skill.

Buen caso de uso

Exploración de diseño independiente que se ejecuta en cualquier momento durante el desarrollo para cualquier función de UI que el usuario describa pero que aún no haya visto
Lluvia de ideas visual cuando el usuario dice 'no me gusta cómo se ve esto' y quiere ver direcciones alternativas para una página existente
Revisar exploraciones de diseño anteriores para ajustar decisiones o explorar nuevas variantes para la misma pantalla

Conozca los límites

Finalizar la implementación de HTML/CSS lista para producción (usa /design-html para eso después de aprobar una dirección)
Generación de una sola variante sin comparación (el skill genera varias variantes en paralelo para comparación lado a lado)

Qué proporcionar

URL de captura de pantalla para la ruta de evoluciónSi el usuario dice 'no me gusta ESTO', pide la URL.
Cantidad de variantes (por defecto 3, hasta 8)Se solicita en la recopilación de contexto mediante AskUserQuestion. Más variantes para pantallas importantes.

03 Dentro del skill

Reglas que el skill design-shotgun le da a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Todos los artefactos en ~/.gstack/projects/$SLUG/designs/
Las maquetas de diseño, los tableros de comparación y approved.json deben guardarse en ~/.gstack/projects/$SLUG/designs/, nunca en .context/, docs/designs/, /tmp/, o directorios locales del proyecto.
La memoria de gusto sesga la generación por defecto
Lee taste-profile.json (esquema v1 con decaimiento de confianza del 5% por semana) y resume las 3 entradas principales aprobadas/rechazadas por dimensión (fuentes, colores, diseños, estética).
Generar en /tmp/ y luego copiar debido a las restricciones del sandbox
Genera siempre los PNG en /tmp/variant-{letter}.png primero, y luego cópialos a la ubicación final ~/.gstack/projects/$SLUG/designs/.
Máximo dos rondas en la recopilación de contexto
Rellena de antemano lo que hayas inferido de DESIGN.md, PRODUCT.md y el código base. Pide el contexto que falte en una sola AskUserQuestion.
Confirmar los comentarios antes de guardar
Después de recibir comentarios (mediante HTTP POST o el mecanismo alternativo AskUserQuestion), genera un resumen con la variante preferida, las valoraciones, los comentarios y la dirección.
DESIGN.md es la restricción por defecto
Si existe DESIGN.md, sigue el sistema de diseño del proyecto por defecto.
El tablero de comparación es quien elige, no AskUserQuestion
No uses AskUserQuestion para preguntar qué variante prefiere el usuario. La interfaz del tablero de comparación es la que elige.

04 Ponlo a trabajar

Instalar design-shotgun en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar design-shotgun a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/garrytan/gstack --skill design-shotgun

Formulario genérico de la CLI de skills para design-shotgun/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Explore design directions for the [dashboard homepage] where [enterprise SaaS users] land after login. I want to see 4 variants — one minimal/data-dense for power users, one with more guidance for first-timers, one that emphasizes recent activity, and one optimized for mobile-first. The existing dashboard in src/app/dashboard/ feels cluttered and users complain they can't find the export button. Edge cases: zero data state, 50+ recent items, and users who only use mobile.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Lee cada PNG generado en línea para que el usuario vea todas las variantes a la vez en la terminal antes de que se abra el tablero
Verificar que el tablero de comparación esté activo y extraer la URL del tablero de la salida stderr (BOARD_URL: http://127.0.0.1:N/boards/<id>/)
Comprobar si existen archivos de feedback (feedback.json para Submit, feedback-pending.json para Regenerate/Remix) en el directorio de diseño
Ejecutar una comprobación de calidad en cada variante generada con $D check --image <path> --brief <brief>; reintentar la generación una vez si la comprobación falla

En OpenDesign importe design-shotgun desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Garry Tan
Repository: github.com/garrytan/gstack Rama main
Archivo de skill: design-shotgun/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 71f6048
License: MIT De LICENSE.
Estrellas del repositorio: 132.921 Instantánea de GitHub tomada el 14-09-2026 del repositorio completo garrytan/gstack, que contiene 7 skills en este catálogo. No es una calificación ni un recuento de uso para design-shotgun.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo invocar este skillExploración de diseño independiente para funciones de UI, lluvia de ideas visual, 'no me gusta cómo se ve esto'
Preámbulo (ejecutar primero)Ejecuta gstack-skill-start, lee las líneas STATUS, gestiona el modo degradado, bloques de instrucciones, detección de sesión
Operaciones seguras en modo planPermitido en modo plan: $B, $D, codex exec/review, escrituras en ~/.gstack/, archivo de plan, open para artifacts
Invocación del skill durante el modo planLas instrucciones del skill son ejecutables, no de referencia; AskUserQuestion satisface el fin de turno; ExitPlanMode tras completar el workflow
Formato de AskUserQuestionLa resolución de la herramienta se ramifica según SESSION_KIND/CONDUCTOR_SESSION; alternativa en prosa para llamadas no disponibles/fallidas; tríada de confirmación obligatoria
Sincronización de artifacts (inicio del skill)La salida de skill-start ya ejecutó la sincronización; actuar sobre la pista de GBrain, líneas ARTIFACTS_SYNC, puerta de consentimiento única
Parche de comportamiento específico del modelo (claude)Disciplina de lista de tareas, pensar antes de acciones pesadas, preferir herramientas dedicadas sobre Bash
VozVoz de GStack: concreta, de creador a creador, encabeza con el punto principal, vincula las decisiones a resultados del usuario, cierres acotados
Recuperación de contextoAl inicio de sesión/compactación: recuperar artifacts recientes, decisiones, checkpoints, línea de tiempo; sugerir el siguiente skill si RECENT_PATTERN implica uno
Estilo de escrituraExplicar la jerga en su primer uso, enmarcar en resultados, oraciones cortas; omitir si EXPLAIN_LEVEL: terse o si el usuario solicita brevedad
Principio de completitud — Boil the OceanLa IA hace que la completitud sea económica; recomiende cobertura completa; Completitud: X/10 cuando las opciones difieren en cobertura
Protocolo de confusiónAnte ambigüedad de alto riesgo, DETENERSE, nombrarla, presentar 2-3 opciones con sus ventajas y desventajas, preguntar

La descripción propia del Skill

"Design shotgun: genera múltiples variantes de diseño con IA, abre un tablero de comparación, recopila comentarios estructurados e itera. (gstack)"

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 52 851 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill design-shotgun

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué necesita el skill para generar variantes (dependencias, claves de API, herramientas locales)?

El skill requiere el binario design en ~/.claude/skills/gstack/design/dist/design (verificado en el paso DESIGN SETUP). El binario gestiona la generación de imágenes y las comprobaciones de calidad. Si no está disponible, el skill recurre a wireframes en HTML.

El tablero de comparación ejecuta un servidor HTTP local en un puerto aleatorio (sin dependencias externas). La memoria de gustos y los archivos approved.json se almacenan localmente en ~/.gstack/projects/$SLUG/designs/.

Design Shotgun

Ejecute design-shotgun en una tarea de diseño de interfaz real.

Descargue OpenDesign, importe design-shotgun desde su enlace SKILL.md, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesign Ver todas las skills