Prototipo navegable a partir de componentes reales: un flujo que se recorre haciendo clic, sin interfaz inventada

El caso, en movimiento

01 / 05La carpetaUna especificación y una biblioteca

Claude parte de lo que ya existe, no de una pantalla en blanco.

Prototipos / Flujo-de-invitaciones

• DOCXespecificacion-flujo-invitaciones.docx
• JSONtokens.json
• CSSsistema-de-diseno.css

3 archivos

02 / 05ClaudeSolo con piezas de la biblioteca

Lee la especificación, los tokens y el código de los componentes, y se limita a ellos.

Claude lee la biblioteca de componentes

• ✓Botón y campo de texto
• ✓Tabla de miembros
• ✓Selector de rol
• ✓Aviso de confirmación

03 / 05TúSi es decisión tuya, pregunta

La especificación admite dos formas de elegir el rol y Claude no elige por ti.

Claude pregunta

¿Construyo el menú de rol por fila, el paso separado, o los dos?

Los dos, con un interruptorSolo el menú por fila

04 / 05La hoja de pantallasCuatro pantallas conectadas

Listado, invitación, roles y envío, en el orden del flujo.

pantallas del prototipo

Listado de miembros	verde	enlazada
Añadir correos	verde	enlazada
Elegir roles (variante B)	verde	enlazada
Invitaciones enviadas	verde	enlazada

05 / 05ProgramadasSe reconstruye cuando cambia la especificación

Cada mañana de diario, el prototipo vuelve a salir de lo que haya en la carpeta.

◷ Tarea programada ActivaReconstrucción diaria del prototipo

Días laborables a las 7:00

Configuración

Prueba un plugin

Anthropic publica un plugin de Design con la skill /design-handoff, ya preparada para leer la descripción de un flujo y una biblioteca de componentes y generar una versión HTML conectada. Si tu cuenta la gestiona un administrador y todavía no está, sáltatelo: nada de lo que sigue lo necesita.

Conecta tus herramientas

Claude rinde más cuando lee directamente vuestros sistemas, y los permisos los pones tú.

Prepara la carpeta de trabajo

Arrastra a una carpeta de tu ordenador la descripción del flujo, la exportación de la biblioteca de componentes, los tokens y el contenido de muestra, y añádela a Claude con Añadir carpeta. Claude lee de ahí y escribe el prototipo en una subcarpeta. Si prototipas a menudo, guárdala como un proyecto: la biblioteca y las convenciones se cargan una vez.

El prompt

Copia esto en Claude, con la carpeta Prototipos / Flujo-de-invitaciones añadida:

Crea un prototipo HTML interactivo del flujo que está en esta carpeta, usando solo los componentes de la biblioteca de nuestro sistema de diseño. Conecta la navegación entre pantallas, usa datos de ejemplo realistas y escríbelo en prototipo/index.html para que pueda recorrerlo haciendo clic en un navegador.

Lo que te deja: el prototipo

Un ejemplo con datos inventados, para que veas el formato:

prototipo/index.html · 4 pantallas conectadas
Componentes usados: 7, todos de la biblioteca (ninguno nuevo)
Tokens y hoja de estilos: sin tocar

Listado de miembros  →  Añadir correos  →  Elegir roles (variante B)  →  Enviadas
Variante A (rol por fila) y variante B (paso separado) detrás de un interruptor
Atrás conserva lo que ya habías escrito
Datos de ejemplo: nombres y correos inventados, sin lorem ipsum

Por qué funciona

• Prompt1

  Límitalo a tus propios materiales. «Solo los componentes de la biblioteca» evita la interfaz inventada: todo lo que se ve existe en vuestro sistema.

• Prompt2

  Describe qué debe hacer cada interacción. «Conecta la navegación» hace que un clic avance de verdad: quien lo prueba recorre un flujo, no mira imágenes.

• Prompt3

  Pide contenido de ejemplo realista. Sin lorem ipsum, las pantallas se leen como el producto y las reacciones de quien lo prueba se parecen a las reales.

• Fuente

  Dale los archivos fuente directamente. Los tokens y la hoja de estilos entran en el prototipo tal cual, sin que Claude los reinterprete.

Para que el borrador salga mejor

• Practicar

  Dale un ejemplo que te guste. Ponlo en la carpeta y Claude seguirá su estructura y su estilo.

• Practicar

  Pídele que señale lo que no tenga claro. Añade «señala todo lo que no tengas claro» y sabrás dónde mirar primero al revisar.

Haz que Claude trabaje para ti

La skill del plugin es genérica. Cuando el paso anterior te dé un prototipo que pondrías delante de un participante, pídele a Claude que escriba vuestra versión de la skill: con la nomenclatura de vuestros componentes, vuestros datos de prueba, vuestras convenciones de interacción y la página en la que siempre alojáis los prototipos.

Convierte lo que hemos hecho en esta tarea en una skill, o edita la skill /design-handoff con mis correcciones.

Hazlo repetible

Compártelo como un artefacto

Un prototipo que hay que mandar por correo se queda viejo. Pídele a Claude que lo publique como un artefacto: cada revisor y cada participante en una prueba tendrá un solo enlace, y se actualiza volviendo a ejecutar la skill.

Publica ese prototipo como un artefacto. Añade en una esquina un pequeño sello de versión: v2, v3.

Reconstrúyelo con cada cambio de la especificación

Si la especificación cambia, el prototipo debería seguirla sin que lo pidas. Escribe /schedule o abre Programadas en la barra lateral y programa la skill para que se reconstruya cada mañana con lo que haya en la carpeta.

/schedule Los días laborables a las 7:00, revisa Prototipos/Flujo-de-invitaciones en busca de cambios y vuelve a ejecutar /design-handoff: reconstruye prototipo/index.html y actualiza el sello de versión.

Así queda la tarea, una vez creada:

Compártelo con tu equipo

Tu /design-handoff personalizado lleva ya el mapa de componentes, los datos de prueba y la página contenedora. Compártelo para que cualquier diseñador pase de la especificación a un prototipo de la misma manera, y que las pruebas de concepto no dependan de quien sepa conectar pantallas a mano.

Qué cambia para las primeras pruebas de un concepto

Tienes un prototipo hecho con vuestra biblioteca real, con navegación que funciona y contenido creíble, listo para probarlo con usuarios y recoger opinión sobre el flujo. Lo hiciste para un flujo; el mismo enfoque vale para el alta, el pago o la comparación de dos variantes lado a lado. Cada uno acaba siendo una skill que el equipo ejecuta igual.

Termínalo donde vive el archivo

De cara al futuro

En una agencia de aquí, así se usa

En una agencia de diseño o de producto digital de España o de Latinoamérica, el prototipo es lo que se enseña al cliente antes de pedir desarrollo. El cuello de botella casi nunca es diseñar: es conectar pantallas para que el cliente las recorra y no se imagine el resto. Con la biblioteca del cliente en la carpeta, el prototipo sale con sus componentes, sus textos en español y sus datos de ejemplo, y se puede probar con personas de su público.

Si el cliente no tiene biblioteca, usa la vuestra y dilo: Claude no inventa componentes, así que el prototipo será tan consistente como el sistema que le des.

Crea un prototipo HTML interactivo del flujo de [alta de un usuario nuevo] para [nombre del cliente], usando solo los componentes de la biblioteca adjunta. Los textos van en [español de España] y los datos de ejemplo tienen que parecer de una empresa de [país]. Si la especificación admite dos soluciones, pregúntame antes de elegir. Escríbelo en prototipo/index.html.

Decides tú qué se enseña al cliente y qué se promete. Claude monta el prototipo; la persona de diseño que lo presenta responde de él.