Ir a la guía de uso
prototypepor Emil Kowalski

Prototype Skill.

Una skill de Claude Code y Codex para diseño de UI: construye varias versiones genuinamente diferentes de un componente de interfaz detrás de un selector visual en vivo.

  • Web y UI
  • Código UI
emilkowalski/skills · skills/prototype/SKILL.mdSKILL.md
--- name: prototype description: Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own. --- ## Operating Posture ## Hard Rules ## Workflow ## Invocation Variants ## Tone
Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 7432 caracteres completos

01 Qué hace

Qué hace el prototype Skill 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

Un skill de divergencia para explorar una sola pieza de UI a la vez —un toast, la tarjeta de precios, un botón de mantener pulsado para eliminar—. Toma una pieza descrita, construye varias versiones genuinamente distintas de ella que divergen en un eje determinado (layout, densidad, personalidad, movimiento, modelo de interacción), y las coloca detrás de un selector visual para que el usuario pueda recorrerlas en vivo y promover una ganadora.

Solo se ejecuta cuando se invoca explícitamente, usa por defecto tres variantes, mantiene la exploración fuera del código de producción y elimina la superficie de prototipo una vez que se integra una variante.

Qué produce

  • Un selector visual en vivo que contiene las variantes, para poder recorrerlas y promover una.
  • Una tabla comparativa que nombra el eje de cada variante, cuándo es la elección correcta y su costo.
  • Código de producción para la variante elegida, integrado en el código base con la superficie de prototipo eliminada.
  • Capturas de pantalla de cada variante cuando hay herramientas de navegador disponibles.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Acotar a Una Sola Pieza

    Si el briefing abarca varios componentes, el skill elige la pieza de mayor impacto, indica cuál y por qué, y ofrece el resto como ejecuciones de seguimiento.

  2. 02
    Reconocer el Terreno

    Mapea el framework, el sistema de estilos, la librería de movimiento, los tokens, la personalidad del producto y el contexto en el que se renderiza la pieza, para que las variantes puedan verse nativas del producto.

  3. 03
    Nombrar las Direcciones Primero

    Usa por defecto tres variantes y hasta cinco cuando se solicita o cuando el espacio es genuinamente amplio; cada una recibe un nombre y un eje antes de escribir cualquier código.

  4. 04
    Construir el Arnés del Selector

    En un proyecto, una ruta aislada contiene un archivo por variante más un pequeño archivo de arnés; el selector en sí se copia de PICKER.md en lugar de diseñarse.

  5. 05
    Verificar Antes de Mostrar

    Se ejecuta el arnés y se recorre cada variante para comprobar la corrección de renderizado e interacción, con capturas de pantalla si existen herramientas de navegador.

  6. 06
    Promover al Ganador

    Después de que el usuario elige, esa variante se integra siguiendo la estructura de archivos, el nombrado y el uso de tokens del proyecto, y se elimina la superficie de prototipo.

02 Encuentra tu caso de uso

Cuándo usar el Skill prototype

Usa el skill prototype en Claude Code o Codex cuando el trabajo sea diseño de UI de este tipo. El alcance y los límites se toman del propio archivo del skill.

Buen caso de uso

  • Tiene una sola pieza de UI descrita para explorar —un toast, una tarjeta de precios, un botón de mantener pulsado para eliminar.
  • Quiere varias direcciones defendibles una junto a otra y prefiere elegir recorriéndolas en vivo en lugar de leer una especificación.
  • El trabajo se encuentra en un proyecto en ejecución con un servidor de desarrollo, donde una ruta aislada puede albergar el arnés.
  • Está explorando sin ningún proyecto y solo necesita algo que pueda abrir directamente en un navegador.

Conozca los límites

  • Revisar UI que ya existe —ese trabajo corresponde a review-animations.
  • Planificar correcciones para una animación existente o elegir una dependencia; ambas son otras skills.
  • Usar la divergencia como licencia para bajar la calidad de ejecución: una variante descuidada no enseña nada sobre la dirección que representa.

Qué proporcionar

  • Una descripción de la pieza de UIQué es, dónde vivirá y qué debe hacer — el briefing se reformula en una sola frase.
  • Acceso al proyecto para reconocimientoPara que los tokens, la personalidad y el contexto circundante puedan acotar hasta dónde puede llegar la variante más audaz.
  • Un número de variantes, opcionalLa forma x5 de la invocación pide más variantes, con un tope de cinco.
  • Tu elección al finalLa skill se detiene tras presentar el conjunto; la promoción espera la elección o un comando keep/riff.

03 Dentro del skill

Reglas que la skill de prototipo le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Nunca Tocar Código de Producción Mientras se Explora

    Todo el trabajo permanece en una superficie de prototipo aislada; la integración ocurre solo en la Fase 6, y solo para la variante que el usuario eligió.

  2. Cada Variante Ocupa un Eje Nombrado

    Las variantes deben diverger en diseño, densidad, personalidad, movimiento o modelo de interacción, y cada eje debe poder expresarse en una frase antes de construir.

  3. Contenido Real en Cada Variante

    Interacciones reales, movimiento real, texto con forma de producto real con nombres y números plausibles; sin lorem ipsum, sin botones muertos, sin "imagina esta parte".

  4. El Selector Es Chrome Fijo

    Su marcado, estilos, cableado de teclado y comportamiento provienen literalmente de PICKER.md y nunca se adaptan al proyecto — su apariencia no es una decisión de diseño.

  5. La Barra de Calidad Se Aplica por Variante

    La divergencia no baja el estándar: ease-out en las entradas y nunca ease-in, movimiento de UI de menos de 300ms, transform-origin correcto, solo transform/opacity, reduced-motion manejado.

  6. El Cambio de Variante Es Instantáneo

    Cambiar es una acción de 100+ por sesión, así que por la regla de frecuencia el cambio de variante no lleva animación.

  7. Los Nombres Describen Direcciones

    Las variantes se nombran por la dirección — Quiet, Editorial, Playful, Dense — nunca Opción A/B/C; dos direcciones que solo difieren en el color de acento o el texto son una sola dirección.

  8. Eliminar la Superficie Tras la Elección

    Cuando se promueve una ganadora, la superficie de prototipo se elimina a menos que el usuario pida conservarla.

04 Ponlo a trabajar

Instala prototype 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.

Agrega prototype 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/emilkowalski/skills --skill prototype

Forma genérica de la CLI skills para skills/prototype/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
Build me a few versions of the toast that appears after someone saves a filter. It shows bottom-left over the dashboard, has an undo action, and auto-dismisses. We're on React with Tailwind and the tokens live in theme.css. Give me 3 variants and put them behind the picker.

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:

  • Cada variante tiene un nombre y un eje declarado, y no hay dos variantes que compartan una posición de eje.
  • Se puede acceder a cada variante desde el selector y esta se comporta correctamente, sin errores de consola.
  • No se preselecciona ninguna favorita en la tabla de entrega; si se le pregunta cuál elegiría, la razón proviene de la personalidad del producto y de la frecuencia de uso.
  • Si dos variantes convergieron durante la construcción, elimine una y dígalo, en lugar de rellenar el conjunto.
  • Después de un comando keep, compruebe si el selector debía sobrevivir: la forma simple de keep elimina la superficie de prototipo, la forma leave-the-picker la conserva.

En OpenDesign importe el prototype desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

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.

Repository
github.com/emilkowalski/skills Branch main
Archivo de skill
skills/prototype/SKILL.md Checksum de contenido registrado en verificación; commit d23d7f8
License
MIT De LICENSE.
Estrellas del repositorio
37.516 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio emilkowalski/skills, que contiene 9 skills en este catálogo. No es una calificación ni un conteo de uso para prototype.
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

  1. Postura OperativaPostura de ingeniero de diseño senior; la divergencia es todo el valor, el nivel de oficio sigue aplicándose
  2. Reglas EstrictasCinco restricciones numeradas sobre código de producción, ejes, variantes funcionales, selector y limpieza
  3. Flujo de TrabajoFases 1 a 6: alcance, reconocimiento, direcciones, arnés, verificación, promoción
  4. Variantes de InvocaciónTabla de invocaciones de descripción, x5, riff y keep, y su comportamiento
  5. TonoVenda cada variante honestamente, indique su costo, nunca preseleccione una favorita
La descripción propia del Skill
"Construye múltiples versiones genuinamente diferentes de un elemento de UI que describes, renderizadas detrás de un selector visual para que puedas navegar entre ellas en vivo y promover la que se siente correcta. Solo se ejecuta cuando es explícitamente invocado; no se activa por sí solo."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 7.432 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill prototype

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

¿Se activa por sí solo cuando estoy editando UI?

No. Solo se ejecuta cuando se invoca explícitamente y nunca se activa por sí solo, y la invocación por modelo está deshabilitada para él. Se lo llama con una descripción, un recuento x5 opcional, o un comando riff o keep.

Prototype

Ejecuta prototype en una tarea de diseño de UI real.

Descarga OpenDesign, importa prototype desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill prototype

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows