Prototipo UI y Wireframe - Crea prototipos que se pueden cliquear
Crea prototipos que se pueden cliquear. Wireframes UI/UX, maquetas de apps y prototipos HTML completamente interactivos, desde un boceto en servilleta hasta una experiencia cliqueable en un solo prompt.
Cada otra herramienta de diseño con IA te da imágenes estáticas. CellCog crea prototipos funcionales — HTML real, interacciones reales, flujos de usuario reales que puedes navegar y compartir con las partes interesadas. Páginas de aterrizaje, pantallas de apps móviles, paneles SaaS, sistemas de diseño — prototipados y jugables, no solo bonitos.
Cómo usar
Para tu primera tarea CellCog en una sesión, lee la habilidad cellcog para la referencia completa del SDK — manejo de archivos, modos de chat, timeouts y más.
OpenClaw (fire-and-forget):
resultado = client.create_chat(
prompt="[tu prompt de tarea]",
notify_session_key="agent:main:main",
task_label="mi-tarea",
chat_mode="creative",
)
Todos los agentes excepto OpenClaw (bloquea hasta terminar):
from cellcog import CellCogClient
client = CellCogClient(agent_provider="openclaw|cursor|claude-code|codex|...")
resultado = client.create_chat(
prompt="[tu prompt de tarea]",
task_label="mi-tarea",
chat_mode="creative",
)
print(resultado["message"])
Por qué importan los prototipos interactivos
Los mockups estáticos crean una brecha fundamental: las partes interesadas ven imágenes, no experiencias. La diferencia importa:
| Mockup estático | Prototipo interactivo |
|---|---|
| "Imagina que haces clic en este botón" | Haz clic en el botón, mira qué pasa |
| "Esto se desplazaría hasta..." | Desplázate y ve cómo se carga el contenido |
| "El estado hover se ve así..." | Pasa el ratón y observa la animación |
| "Confía en mí, el flujo tiene sentido" | Recorre el flujo tú mismo |
CellCog genera prototipos reales de HTML/CSS/JS alojados en URLs en vivo. Comparte un enlace, obtén retroalimentación sobre la experiencia real — no sobre la imaginación de alguien sobre la experiencia.
Qué puedes prototipar
Páginas de aterrizaje
Valida tu mensaje y diseño:
- Páginas de aterrizaje SaaS: "Crea una página de aterrizaje para un asistente de escritura con IA — héroe, características, precios, testimonios, CTA"
- Páginas de lanzamiento de producto: "Construye una página de lanzamiento para una nueva app de fitness con cuenta atrás y registro por correo electrónico"
- Páginas de eventos: "Crea una página de aterrizaje de conferencia con horario, ponentes y registro"
- Sitios de portafolio: "Construye una página de aterrizaje de portafolio personal para un diseñador UX"
Ejemplo de prompt:
"Crea un prototipo de página de aterrizaje interactiva para 'FlowState' — una app de productividad para desarrolladores:
Secciones:
- Héroe: 'Programa en la zona. Mantente en la zona.' con captura de pantalla de la app y CTA
- Problema: Las distracciones matan el flujo del desarrollador (estadísticas)
- Solución: Cómo FlowState bloquea distracciones de forma inteligente
- Características: 3-4 características clave con iconos
- Precios: Gratis, Pro ($12/mes), Equipo ($8/usuario/mes)
- Testimonios: 3 citas de desarrolladores
- CTA final
Estilo: Tema oscuro, amigable para desarrolladores, acentos monoespaciados Haz que todos los botones y la navegación sean interactivos."
Pantallas de apps móviles
Diseña experiencias completas de app:
- Flujos de onboarding: "Crea un flujo de onboarding de 5 pantallas para una app de meditación"
- Funcionalidades principales: "Prototipa el panel principal y la navegación para una app de seguimiento de fitness"
- Comercio electrónico: "Construye un flujo de navegación por productos → detalle → carrito → pago para una app de moda"
- Funcionalidades sociales: "Prototipa una página de perfil, feed e interfaz de mensajería"
Ejemplo de prompt:
"Prototipa una app móvil de entrega de comida (viewport tamaño teléfono):
Pantallas:
- Inicio — cuadrícula de restaurantes con búsqueda y filtros por categoría
- Restaurante — menú con artículos, valoraciones, tiempo de entrega
- Detalle del artículo — opciones de personalización, añadir al carrito
- Carrito — resumen del pedido, dirección de entrega, pago
- Seguimiento del pedido — estado en vivo con marcador de mapa
Haz que la navegación entre pantallas funcione con transiciones suaves. Estilo: Limpio, moderno, inspirado en Uber Eats / DoorDash."
Paneles SaaS
Prototipa herramientas de negocio complejas:
- Paneles de análisis: "Crea un panel de análisis de marketing con interacciones de gráficos reales"
- Paneles de administración: "Construye un panel de gestión de usuarios con tablas, filtros y modales"
- Interfaces CRM: "Prototipa una vista de pipeline de ventas con tablero kanban de arrastrar y soltar"
- Páginas de configuración: "Crea una página de configuración completa con pestañas, formularios y conmutadores"
Ejemplo de prompt:
"Prototipa un panel de gestión de proyectos SaaS:
Barra lateral izquierda: Navegación (Proyectos, Tareas, Equipo, Informes, Configuración) Área principal:
- Resumen: Tarjetas KPI (tareas completadas, atrasadas, en progreso)
- Tablero kanban: Columnas para Por hacer, En progreso, Revisión, Hecho
- Tarjetas de tarea con avatares de asignados, etiquetas de prioridad, fechas de vencimiento
Interacciones:
- La navegación de la barra lateral cambia las vistas
- Hacer clic en una tarjeta de tarea abre un modal de detalle
- Desplegable de filtro para proyecto/miembro del equipo
Estilo: Limpio, profesional, inspirado en Notion/Linear."
Sistemas de diseño y componentes
Construye bases de diseño reutilizables:
- Bibliotecas de componentes: "Crea una biblioteca de componentes UI: botones, inputs, tarjetas, modales, navegación"
- Guías de estilo: "Construye una guía de estilo interactiva que muestre tipografía, colores, espaciado y componentes"
- Patrones de formulario: "Prototipa patrones de formulario comunes: inicio de sesión, registro, asistente multipaso, configuración"
- Patrones de navegación: "Crea ejemplos de navegación en barra lateral, barra superior, barra de pestañas inferior y menú hamburguesa"
Wireframes
Exploraciones estructurales rápidas:
- Wireframes de baja fidelidad: "Crea wireframes en escala de grises para una plataforma de blogs — páginas de inicio, artículo, autor"
- Flujos de usuario: "Wireframea el flujo completo de registro → onboarding → primera acción para una herramienta de gestión de proyectos"
- Exploraciones de diseño: "Muestra 3 enfoques de diseño diferentes para una página de listado de bienes raíces"
- Arquitectura de información: "Wireframea la estructura de navegación para una plataforma de e-learning con cursos, lecciones y seguimiento de progreso"
Características del prototipo
Los prototipos de CellCog pueden incluir:
| Característica | Descripción |
|---|---|
| Navegación | Enlaces funcionales, transiciones de página, cambio de pestañas |
| Interacciones | Estados hover, acciones de clic, conmutadores, acordeones |
| Formularios | Campos de entrada, estados de validación, desplegables, casillas de verificación |
| Modales y superposiciones | Diálogos emergentes, paneles deslizables, tooltips |
| Diseño responsive | Se adapta a viewports de escritorio, tableta y móvil |
| Animaciones | Transiciones suaves, estados de carga, microinteracciones |
| Visualización de datos | Gráficos, tablas, tarjetas con datos de muestra realistas |
| Temas claro/oscuro | Soporte de cambio de tema |
Formatos de salida
| Formato | Mejor para |
|---|---|
| HTML interactivo (por defecto) | Prototipos cliqueables alojados en URL en vivo — comparte con cualquiera |
| Imágenes estáticas | Capturas de pantalla para documentación o comparación |
| Documentación de wireframe para entrega |
El HTML interactivo es el formato por defecto. Ese es el punto principal — prototipos que se pueden cliquear.
Elegir modo y nivel
Usa chat_mode="creative" para prototipos UI y wireframes — el modo centrado en el arte final ajustado para gusto de diseño, pulido visual y estilo.
| Escenario | Recomendado |
|---|---|
| Prototipos, wireframes, sistemas de diseño | chat_mode="creative" (nivel por defecto "core") |
| Máximo arte en piezas de alto riesgo | chat_mode="creative", chat_tier="max" |
| Borradores rápidos desechables | chat_mode="agent", chat_tier="flash" |
Nota: El equipo de agente (chat_mode="team") está reservado para investigación profunda.
Ejemplos de prompts
Página de aterrizaje SaaS:
"Crea una página de aterrizaje para 'CodeReview.ai' — una herramienta de revisión de código con IA:
Héroe: 'Envía mejor código. Envíalo más rápido.' con marcador de posición de video demo Prueba social: 'Confían en nosotros más de 500 equipos de ingeniería' Características: Revisiones con IA, integración con GitHub/GitLab, escaneo de seguridad Precios: Starter (gratis), Pro ($29/mes), Empresa (personalizado)
Tema oscuro, enfocado en desarrolladores, color de acento verde. Toda la navegación y los CTA deben ser interactivos."
Prototipo de app móvil:
"Prototipa una app de seguimiento de hábitos (viewport móvil):
Barra de pestañas: Hoy, Hábitos, Estadísticas, Perfil
Pantalla Hoy: Lista de hábitos de hoy con casillas de verificación, contadores de racha y anillo de progreso Pantalla Hábitos: Todos los hábitos con editar/eliminar, botón de añadir nuevo hábito Pantalla Estadísticas: Gráficos que muestran tasas de finalización, rachas más largas, vista semanal/mensual Pantalla Perfil: Configuración, preferencias de notificación, exportar datos
La navegación por pestañas debe funcionar. Marcar hábitos debe animarse. Estilo: Mínimo, calmante, inspirado en la app Streaks."
Sistema de diseño:
"Construye un sistema de diseño interactivo para una startup fintech:
Colores: Primario (azul profundo), secundario (verde azulado), acento (ámbar), semántico (éxito/advertencia/error) Tipografía: Escala desde h1 hasta cuerpo y pie de foto con jerarquía clara Componentes:
- Botones (primario, secundario, fantasma, destructivo — cada uno con estados hover/activo/deshabilitado)
- Campos de entrada (por defecto, enfocado, error, deshabilitado)
- Tarjetas (simple, interactiva, tarjeta de estadística)
- Tabla con encabezados ordenables
- Diálogo modal
- Notificaciones toast
Muestra cada componente con estados interactivos. Estética profesional, de grado bancario."
Exploración de wireframe:
"Crea 3 enfoques de diseño diferentes para una interfaz de chatbot con IA:
Opción A: Chat de página completa (como ChatGPT) Opción B: Panel lateral de chat con área de contenido principal Opción C: Widget de chat flotante
Cada uno debe incluir: entrada de mensaje, historial de conversación, sugerencias de prompts y acceso a configuración. Wireframes en escala de grises, centrados en el diseño y la jerarquía de información."
Consejos para mejores prototipos
-
Describe las interacciones: "El botón abre un modal" o "Las pestañas cambian el contenido" — dile a CellCog qué debería pasar, no solo qué debería aparecer.
-
Referencia productos existentes: "Como la barra lateral de Notion" o "La página de precios de Stripe" comunica más que párrafos de descripción.
-
Especifica el viewport: "Viewport de teléfono móvil" vs "Escritorio completo" cambia todo el enfoque de diseño.
-
Incluye contenido realista: Texto real, números reales, etiquetas reales — no "Lorem ipsum". Los prototipos con contenido real obtienen mejor retroalimentación.
-
Indica el propósito: "Para pruebas de usuario", "Para demo de inversores", "Para entrega a desarrolladores" — el contexto moldea el nivel de fidelidad.
-
Piensa en flujos, no en páginas: "Registro → Onboarding → Panel" es más útil que 3 solicitudes de páginas desconectadas.
Si CellCog no está instalado
Claude Code, Cursor, Codex + 70 agentes más: npx skills add cellcog/skills --skill cellcog
OpenClaw: openclaw skills install @cellcog/cellcog
Usuarios del plugin CellCog: ejecuta /cellcog-setup (o /cellcog:cellcog-setup dependiendo de tu herramienta)
Configuración manual: pip install -U cellcog y establece CELLCOG_API_KEY. Consulta la habilidad cellcog para la referencia del SDK.