lab
Esc

Prueba con

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

skill intermedio claude-codecodexcursoropencodediseño

UI Craft: reglas y revisión para interfaces consistentes

Mantén la jerarquía visual y los criterios de calidad de una interfaz entre sesiones de tu agente, desde la primera pantalla hasta su revisión.

✓ 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

Preparación

Comprueba Node.js ≥22.20.0 con npm/npx para la ruta skills y un arnés compatible. Abre el proyecto cuya interfaz vas a revisar antes de instalar.

Paso 1: instala la skill

Desde el proyecto, usa la alternativa del README:

npx skills add educlopez/ui-craft

Paso 2: revisa una superficie

En el agente compatible, ejecuta /start para reconocer el proyecto. Después pide una crítica de una pantalla concreta. Esta vía instala las skills; para MCP y memoria sigue la sección CLI del README.

Comprobación

Confirma que el agente reconoce UI Craft y usa los tokens existentes. Revisa la pantalla en el navegador y comprueba navegación por teclado y distribución móvil.

Si algo falla

Si la skill global no aparece en Claude Code, el README documenta un problema de rutas. Usa la instalación por proyecto o el plugin oficial; no asumas que las comprobaciones MCP se instalaron con la skill.

ver en .md ¿Prefieres el recurso entero?

Qué es

UI Craft añade conocimiento de diseño a los agentes de programación. Combina una skill, órdenes de revisión y componentes opcionales para recordar decisiones y comprobar la interfaz.

Para qué te sirve

  • Cuando una pantalla nueva ignora los colores y espacios del resto de tu aplicación.
  • Cuando necesitas revisar formularios, accesibilidad o jerarquía antes de entregar un panel.
  • Cuando quieres conservar las decisiones de diseño para la siguiente sesión.

Cómo funciona

El agente examina el proyecto y sus tokens antes de construir. Las acciones de creación, crítica y pulido tienen objetivos distintos. La instalación mediante CLI puede añadir memoria de diseño y comprobaciones MCP; instalar solo la skill deja esos componentes fuera.

Antes de empezar

Necesitas un arnés que lea skills y un proyecto sobre el que trabajar. La vía de skills usa npx. La CLI tiene instaladores propios para varios sistemas; su README distingue plataformas probadas de binarios que únicamente se publican.

Límites y alternativas

Una puntuación automática no reemplaza probar el recorrido de una persona. Revisa los cambios del instalador en la configuración del arnés. Hallmark es otra opción cuando buscas una dirección estética guiada por temas.

Recursos