lab
Esc

Prueba con

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

skill principiante claude-codeprototiposdiseno

Design Crit: compara opciones y conserva decisiones de interfaz

Define una dirección visual comparando variantes HTML. Guarda qué opciones aceptaste y por qué para que el agente mantenga el criterio en las siguientes iteraciones.

✓ 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

Paso 1: instala el plugin

claude plugin marketplace add metedata/design-crit
claude plugin install design-crit@metedata-design-tools

Paso 2: inicia la revisión

Dentro del proyecto, utiliza:

/design-crit

Paso 3: decide por iteraciones

Completa el encargo de diseño, revisa las variantes en paralelo y marca qué conservar o eliminar. No delegues decisiones de marca que todavía necesitas acordar.

Comprobación

Comprueba que .design-crit/ contiene las opciones y el registro de decisiones. Al terminar revisa direction.html y confirma que coincide con tus elecciones.

Si algo falla

Si el flujo reinicia decisiones, revisa que trabajas en la misma carpeta y que existe el estado de la sesión. Si el plugin no carga, consulta la alternativa local 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

Design Crit es un plugin de Claude Code para desarrollar una dirección de diseño mediante revisiones sucesivas. Parte de un encargo y produce variantes HTML que puedes comparar en el navegador.

Para qué te sirve

  • Cuando tienes una idea de producto pero no una navegación definida.
  • Cuando necesitas elegir una jerarquía visual entre varias opciones.
  • Cuando las decisiones de una sesión se pierden al retomar el diseño.

Cómo funciona

El plugin construye el encargo de diseño y selecciona aspectos de diseño para revisar. Presenta opciones en paralelo y recoge tus elecciones y comentarios. El resultado final agrupa tokens, pantallas y un registro de decisiones bajo .design-crit/.

Antes de empezar

Prepara Claude Code, una carpeta de proyecto y contexto sobre público, plataforma y propósito. El README documenta instalación desde un marketplace y una opción local. GitHub no detecta una licencia SPDX en el proyecto.

Límites y alternativas

Las opciones son propuestas de diseño, no un producto terminado ni una prueba de usabilidad. Revisa permisos de reutilización si vas a redistribuir sus archivos. Para una modificación puntual puedes comparar dos bocetos manuales; el flujo completo tiene más sentido cuando varias decisiones dependen entre sí.

Recursos