83.3K+Descargar
Ir a la guía de uso
plan-design-reviewpor Garry Tan

Plan Design Review Skill.

Un skill de Claude Code y Codex para revisión de diseño: revisa un plan de diseño para verificar completitud y riesgo de experiencia antes de la implementación.

  • Revisión de Diseño y Accesibilidad
  • Informe de revisión
Descargar OpenDesignVer guía de uso
garrytan/gstack · plan-design-review/SKILL.mdSKILL.md
--- name: plan-design-review description: Designer's eye plan review — interactive, like CEO and Eng review. (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)
Encabezados y materia preliminar leídos del archivo original el 14-09-2026 · 72.139 caracteres en total

01 Qué hace

Qué hace el Skill plan-design-review 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

Revisa un plan de diseño en busca de exhaustividad y riesgo de experiencia antes de la implementación. Ejecuta siete pasadas de diseño (Arquitectura de la Información, Estados de Interacción, Recorrido del Usuario, Estados Vacíos, Jerarquía Visual, Riesgo de AI Slop, Accesibilidad) calificando cada una de 0 a 10, explica qué haría falta para llegar a un 10 y corrige el plan hasta lograrlo. Genera maquetas visuales con el diseñador gstack por defecto cuando la UI está dentro del alcance.

Incluye un paso opcional de voces externas: Codex evalúa según las reglas de diseño estrictas de OpenAI más comprobaciones de referencia; un subagente de Claude realiza una revisión independiente de exhaustividad. Funciona en modo plan. Para auditorías visuales de un sitio en producción, use /design-review en su lugar. El resultado es un mejor plan con un informe de revisión estructurado, no un documento sobre el plan.

Qué produce

  • Un archivo de plan mejorado con las carencias de diseño resueltas, dimensiones calificadas y una sección GSTACK REVIEW REPORT estructurada añadida al final
  • Un archivo HTML de tablero comparativo y approved.json que registra la variante elegida por el usuario, las calificaciones, los comentarios y la retroalimentación
  • Un cuadro de puntuación de referencia que sintetiza los hallazgos de los subagentes de Codex y Claude si se ejecutaron voces externas
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    La Puerta de Alcance Confirma el Objetivo de Revisión

    Antes de cualquier otra cosa, pide al usuario que confirme qué revisar (diferencia de rama, documento de plan o página específica), a menos que el modo plan seleccione automáticamente el plan activo o el usuario haya indicado explícitamente un objetivo.

  2. 02
    Genera Maquetas Visuales por Defecto

    Cuando el diseñador gstack está disponible y el plan tiene alcance de UI, genera maquetas de inmediato sin pedir permiso.

  3. 03
    Las Voces de Diseño Externas Opcionales se Ejecutan en Paralelo

    Si el usuario lo activa, lanza simultáneamente Codex (reglas de diseño estrictas + comprobaciones de referencia) y un subagente de Claude (revisión independiente de exhaustividad).

  4. 04
    Siete Pasadas de Diseño Califican de 0 a 10 y Corrigen Carencias

    Para cada dimensión (Arquitectura de la Información, Estados de Interacción, Recorrido del Usuario, Estados Vacíos, Jerarquía Visual, Riesgo de AI Slop, Accesibilidad), califica el plan, explica cómo se ve un 10/10, edita el plan para cerrar las brechas, vuelve a calificar y repite hasta llegar a 10 o hasta que el usuario indique que se continúe.

  5. 05
    Escribe un Informe de Revisión Estructurado en el Archivo del Plan

    Añade una sección GSTACK REVIEW REPORT con una tabla de ejecuciones/estado/hallazgos, una línea de VERDICT y un estado de decisiones sin resolver como última línea no vacía del archivo.

02 Encuentra tu caso de uso

Cuándo usar el skill plan-design-review

Use el skill plan-design-review en Claude Code o Codex cuando el trabajo sea revisión de diseño de este tipo. El ajuste y límites a continuación se toman del archivo propio del skill.

Buen caso de uso

  • El usuario ha redactado un plan con componentes de UI/UX que deben revisarse antes de que comience la implementación
  • Un plan de diseño necesita maquetas visuales para concretar descripciones abstractas antes de comenzar a programar
  • Un plan describe qué hace el backend pero nunca especifica qué ve el usuario, los estados vacíos, los estados de error o el comportamiento responsivo

Conozca los límites

  • Cambios puramente de backend, solo de API o de infraestructura sin alcance de UI
  • Auditorías visuales del sitio en vivo (use /design-review en su lugar)

Qué proporcionar

  • Un plan de diseño o diff de rama con alcance de UIEl archivo del plan, un documento que el usuario pega, una página/ruta específica o el diff de la rama actual.
  • Feedback de mockups mediante un tablero de comparaciónEl diseñador de gstack sirve un tablero de comparación por HTTP donde el usuario califica variantes, deja comentarios, hace clic en Regenerate/Remix o envía una elección final.

03 Dentro del skill

Reglas que el Skill plan-design-review le da a Claude Code y Codex

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

  1. Todos los Artefactos de Diseño se Guardan en ~/.gstack/projects/$SLUG/designs/

    Los mockups, tableros de comparación y approved.json deben guardarse en el directorio de designs del proyecto gstack del usuario, nunca en .context/, docs/designs/, /tmp/ ni en ningún directorio local del proyecto.

  2. Jerarquía de Prioridad: Step 0 > Mockups > Estados de Interacción > AI Slop > IA > Recorrido del Usuario

    Nunca omita la evaluación de alcance del Step 0 ni la generación de mockups cuando el diseñador esté disponible. Los mockups antes de aprobar la revisión no son negociables.

  3. Las Revisiones de Diseño se Calibran contra DESIGN.md Cuando Está Presente

    Si existe DESIGN.md, todas las decisiones de diseño deben ajustarse al sistema de diseño indicado.

  4. Las Outside Voices precargan Issues en los Passes

    Los rechazos duros de Codex se plantean como los primeros elementos en el Pass 1 etiquetados [HARD REJECTION]. Los elementos DISAGREE de Litmus muestran ambas perspectivas en el pass correspondiente.

  5. Principio de Completitud: la IA Hace Barata la Completitud

    Recomiende cobertura completa (pruebas, casos límite, rutas de error): hierva el océano un lago a la vez.

04 Ponlo a trabajar

Instalar plan-design-review 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 plan-design-review 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 plan-design-review

Forma genérica del CLI skills para plan-design-review/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de revisión de diseño

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

Starter prompt
Review the design plan in [plan-file-path] before we start building. The plan describes a new onboarding flow with three screens, email capture, and a welcome modal. I want to make sure we're not missing interaction states, empty states, or accessibility requirements. Generate mockups if you can.

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:

  • Confirme que el último encabezado del archivo del plan sea ## GSTACK REVIEW REPORT antes de salir del modo plan
  • Confirme que el informe de revisión tenga una tabla de runs/status/findings, una línea VERDICT y un estado de decisiones sin resolver como la última línea no vacía del archivo
  • Verifique que se haya llamado a gstack-review-log y que gstack-review-read se haya ejecutado al menos una vez si hay un archivo del plan en contexto

En OpenDesign plan-design-review viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer 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
plan-design-review/SKILL.md Suma de verificación del 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 para todo el repositorio garrytan/gstack, que contiene 7 skills en este catálogo. No es una calificación ni un conteo de uso para plan-design-review.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Cuándo invocar este skillÚselo para revisiones de planes de diseño; sugiéralo proactivamente cuando un plan de UI/UX necesite revisión antes de la implementación
  2. Preámbulo (ejecutar primero)Ejecuta gstack-skill-start, gestiona el modo degradado, lee los bloques de instrucciones, establece SESSION_KIND y los marcadores de telemetría
  3. Filosofía de DiseñoGarantiza que el diseño se sienta intencional y no generado; encuentre cada vacío, explique por qué importa, corrija los evidentes
  4. El diseñador de gstack — SU HERRAMIENTA PRINCIPALGenerador de mockups con IA que crea visuales reales a partir de briefings de diseño; úselo por defecto cuando exista UI
  5. Principios de DiseñoNueve principios: los estados vacíos son funciones, la jerarquía importa, especificidad sobre intuiciones, los casos límite son UX, el AI slop es el enemigo, lo responsive es intencional, la accesibilidad es obligatoria, la sustracción es el valor por defecto, la confianza se gana a nivel de píxel
  6. Patrones Cognitivos — Cómo Ven los Grandes DiseñadoresDoce instintos perceptivos: ver sistemas no pantallas, la empatía como simulación, la jerarquía como servicio, la veneración de las restricciones, el reflejo de preguntar, la paranoia ante casos límite, la prueba de «¿lo notaría?», el buen gusto basado en principios, la sustracción por defecto, el diseño con horizonte temporal, diseñar para la confianza, recorridos en forma de storyboard
  7. Principios de UX: cómo se comportan realmente los usuariosTres leyes (no me hagas pensar, los clics no importan, lo que importa es pensar, omite y luego omite más), comportamiento del usuario (escanear en lugar de leer, satisfacer, salir del paso), diseño tipo cartelera, navegación como orientación espacial, reserva de buena voluntad, mayor riesgo en móvil
  8. Jerarquía de prioridades bajo presión de contextoStep 0 > mockups > Interaction States > AI Slop > IA > User Journey; nunca te saltes Step 0 ni los mockups
  9. AUDITORÍA DE SISTEMA PREVIA A LA REVISIÓN (antes de Step 0)Recopila contexto de git log, diff stat, plan, CLAUDE.md, DESIGN.md, TODOS.md, mapea el alcance de la UI y los patrones existentes
  10. CONFIGURACIÓN DE DISEÑO (ejecuta esta comprobación ANTES de cualquier comando de mockup de diseño)Comprueba si el binario del diseñador gstack está disponible; imprime DESIGN_READY o DESIGN_NOT_AVAILABLE
  11. Contexto de Brain (preflight)Carga el contexto estructurado del proyecto (producto, marca, objetivos, decisiones recientes) desde gstack-brain-cache antes de hacer preguntas aclaratorias
  12. Step 0: evaluación del alcance del diseñoValoración inicial del diseño de 0 a 10, comprobación del estado de DESIGN.md, aprovechamiento del diseño existente, pregunta sobre áreas de enfoque (DETENTE hasta que el usuario responda)
La descripción propia del Skill
"Revisión de plan con ojo de diseñador — interactiva, como la revisión de CEO e Ingeniería. (gstack)"

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

Plan Design Review

Ejecute plan-design-review en una tarea real de revisión de diseño.

El skill plan-design-review viene incluido en OpenDesign. Descargue la aplicación, seleccione el skill en Plugins → Skills, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/garrytan/gstack --skill plan-design-review