Prototipa a la velocidad de un prompt
Describe el flujo que tienes en mente y deja que tu agente ensamble un prototipo real y navegable — varias pantallas, estilos compartidos e interacciones en vivo — renderizado directamente a HTML que puedes abrir, compartir y entregar a ingeniería.
En una línea
Open Design es la capa de diseño para el agente de programación que ya usas. Para prototipar, eso significa pasar de una idea de un párrafo a un prototipo navegable y con estilo en una sola sesión — sin herramienta de diseño, sin paso de exportación, sin brecha de entrega.
Cómo funciona prototipar con Open Design
- 01
Describe el flujo
Dile a tu agente qué estás construyendo en lenguaje sencillo — «un flujo de onboarding con una pantalla de bienvenida, un selector de planes y una confirmación». Open Design carga la habilidad de prototipo para que el agente sepa que debe producir pantallas, no una sola página.
- 02
Genera pantallas con estilo
El agente aplica un sistema de diseño y plantillas de prototipo de Open Design, así cada pantalla comparte tipografía, espaciado y componentes en lugar de parecer un borrador. Obtienes un conjunto coherente de pantallas, no maquetas inconexas.
- 03
Conecta las interacciones
Los botones navegan, las pestañas cambian, los modales se abren. El prototipo se renderiza a HTML autocontenido, así se comporta como lo real en cualquier navegador — no hace falta cuenta en una herramienta de prototipado para verlo.
- 04
Itera y entrega
Refina hablando con el agente — «pon el selector de planes en un diseño de tres columnas». Como el artefacto vive en tu proyecto, el diseño y el código final comparten una única fuente de verdad, cerrando la habitual brecha de entrega entre diseñador e ingeniero.
Lo que puedes prototipar
prototipo Leer prompt completo → Prototipo Web
Prototipo web de escritorio de propósito general. Archivo HTML autocontenido creado copiando `assets/template.html` y pegando diseños de `references/layouts.md`. Opción predeterminada para páginas de destino, marketing, documentación o SaaS.
prototipo Leer prompt completo → Aplicación móvil
Una pantalla de aplicación móvil renderizada dentro de un marco iPhone 15 Pro con precisión de píxeles en la página. Se crea copiando el archivo semilla assets/template.html y pegando un arquetipo de pantalla desde references/layouts.md. Úsalo cuando el brief solicite 'aplicación móvil', 'aplicación iOS', 'aplicación Android', 'pantalla de teléfono' o 'UI de aplicación'.
prototipo Leer prompt completo → Landing SaaS
Página de aterrizaje SaaS de una sola página con hero, características, prueba social, precios y CTA. Respeta los tokens activos de color/tipografía/diseño del DESIGN.md. Palabras clave: "saas landing", "marketing page", "product landing".
prototipo Leer prompt completo → Aplicación gamificada
Prototipo de aplicación móvil gamificada de tres pantallas: portada, misiones diarias con cintas de XP y barra de nivel, detalle de misión. Ideal para aplicaciones gamificadas, rastreadores de hábitos, aplicaciones de vida RPG, aplicaciones de subida de nivel, misiones diarias y aplicaciones de XP/rachas.
prototipo Leer prompt completo → Incorporación de RRHH
Plan de incorporación de nuevos empleados en una sola página: horario de la primera semana, presentación del compañero + gerente, trayectoria de aprendizaje, lista de equipos y resultados 'estás listo cuando…'. Usar cuando el brief mencione 'incorporación', 'nuevo empleado', 'plan primera semana' o '入职'.
prototipo Leer prompt completo → Kami Landing
Produce un documento de una página con calidad de impresión — lienzo de pergamino cálido, acento azul tinta, serif de un solo peso, sin cursiva, sin grises fríos. El resultado se lee como un documento profesional o un one-pager de estudio, no como una UI de aplicación. Multilingüe por diseño (EN · zh-CN · ja). Un archivo HTML autocontenido, sin dependencias.
Prototipar con Open Design frente al método tradicional
| Lo que necesitas | Con Open Design | Herramientas de prototipado tradicionales |
|---|---|---|
| Pasar de la idea a la primera pantalla | ●Un prompt en el agente que ya tienes abierto | Abrir una herramienta aparte, iniciar un archivo, arrastrar cajas a mano |
| Varias pantallas enlazadas | ●Generadas como un conjunto con estilos compartidos y navegación funcional | Cada cuadro dibujado y enlazado manualmente |
| Sistema visual consistente | ●Tomado de un sistema de diseño reutilizable que el agente aplica | Recreado por archivo o mantenido a mano |
| Resultado que se puede compartir | ●HTML autocontenido — se abre en cualquier navegador, sin cuenta | Quien lo ve necesita una licencia o un enlace de la herramienta del proveedor |
| Camino al código real | ●El artefacto vive en tu repositorio; diseño y código comparten una fuente | Reconstruido desde cero tras una entrega aparte |
| Coste y dependencia del proveedor | ●Código abierto, usa tus propias claves, funciona en local | Suscripción por licencia, alojado por el proveedor, exportación limitada |
Cada uno de estos empezó como un prompt y se renderizó a un artefacto navegable. Elige una plantilla cercana a tu idea, describe tu variación y el agente la adapta.
Preguntas frecuentes sobre prototipado
-
01 ¿Necesito una herramienta de diseño como Figma para prototipar con Open Design?
No. Open Design funciona dentro de tu agente de programación y renderiza prototipos a HTML. Describes el flujo con palabras; el agente produce las pantallas. No hay una herramienta de lienzo aparte que aprender o pagar.
-
02 ¿Los prototipos son interactivos o solo maquetas estáticas?
Interactivos. La navegación, las pestañas y los modales funcionan porque la salida es HTML y CSS reales. Puedes recorrerlos en cualquier navegador exactamente como lo haría un usuario.
-
03 ¿Qué agentes puedo usar?
Open Design funciona con Claude Code, Codex, Cursor Agent, Gemini CLI y una docena más de adaptadores nativos. Aportas tus propias claves de proveedor; nada se aloja por ti.
-
04 ¿Puede un prototipo convertirse en el producto real?
Esa es la idea. El artefacto vive en tu proyecto, así que el mismo sistema de diseño y los componentes pasan al código de producción en lugar de descartarse tras una entrega.
Prototipa tu próxima idea esta noche
Dale una estrella al repositorio, instala Open Design y convierte tu próximo «¿y si...?» en algo que puedas recorrer — en el agente que ya usas.