Editor JSON
Insertar:
JSON Estructurado Correctamente
Referencia Schema
Maqueta Live
100%
Asistente de Instrucciones IA

Usa el modo Inspector para pasar el mouse sobre un elemento en la maqueta y haz clic en Modificar o Eliminar. Los cambios se listarán aquí para generar un prompt óptimo para tu IA.

Cambios Planificados
  • No hay cambios registrados. Activa el Inspector para agregar instrucciones de cambio.

Especificación del Schema JSON

Utiliza este formato JSON simple para estructurar tus pantallas y maquetas. Nuestro motor interpretará los nodos de forma reactiva.

1. Atributos Raíz

Clave Tipo Descripción
project String Nombre de tu proyecto o producto SaaS.
theme String "blueprint", "slate", o "minimalist".
screens Array Lista de pantallas que componen tu aplicación.

2. Estructura de Pantalla (Screen)

Clave Tipo Descripción
id String Identificador único de la vista (para navegación).
title String Nombre legible por humanos de esta pantalla.
layout String "sidebar" (diseño con menú lateral), "navbar" (menú superior), o "blank" (lienzo en blanco).
components Array Componentes de primer nivel que componen la vista.

3. Componentes Disponibles

Cualquier componente en la lista de components o como children en contenedores puede usar los siguientes tipos:

  • sidebar: Barra de navegación lateral fija. Contiene un brand (marca) y items (un arreglo con objetos conteniendo label, icon, active, target).
  • navbar: Barra de navegación superior. Contiene un title y actions (un arreglo de botones u avatares).
  • container: Contenedor de diseño. Propiedades: layout ("grid", "split", "flex"), columns (número de 1 a 4 para grid), ratio ("1:1", "2:1", "1:3" para split), y un array de children.
  • card: Tarjeta para agrupar elementos o estadísticas. Propiedades: title, value (para números grandes), change (porcentaje, e.g. "+15%"), trend ("up" o "down"), icon (nombre de Lucide icon), o children para anidamiento libre.
  • chart: Gráfico dinámico de líneas o barras. Propiedades: chartType ("line", "bar"), labels (array de strings), y datasets (array de objetos con label y data).
  • table: Tabla estructurada. Propiedades: headers (array de nombres de columna) y rows (matriz bidimensional con el contenido de las filas).
  • form: Contenedor de entradas de datos. Contiene fields (array de campos con label, type: text/email/select/checkbox/textarea, placeholder, y options para select). También acepta un array de buttons al final.
  • list: Lista de elementos de actividad o historial. Contiene items (array de objetos con title, subtitle, y meta).
  • hero: Banner de llamada a la acción para landings. Contiene title, subtitle, y un array de buttons.
  • footer: Pie de página estándar. Contiene text y enlaces links.

Ejemplo Básico de Copiado Rápido

{
  "project": "Demo App",
  "theme": "blueprint",
  "screens": [
    {
      "id": "overview",
      "title": "Principal",
      "layout": "navbar",
      "components": [
        {
          "type": "navbar",
          "title": "Panel Principal",
          "actions": [{"type": "button", "label": "Agregar", "variant": "primary"}]
        },
        {
          "type": "card",
          "title": "Métrica Clave",
          "value": "89.4%",
          "change": "+2.5% vs ayer",
          "trend": "up",
          "icon": "trending-up"
        }
      ]
    }
  ]
}
card | Card Component
card
card | Card Component