Saltar al contenido

Generative UI · openui-lang

El modelo escribe el programa. Aurora pone las clases.

Una docena de líneas describen la pantalla; el compilador comprueba tipos, enums y aridad contra el censo, y el runtime emite markup real. Ni React, ni build, ni una clase que no exista: lo que no está en el vocabulario no compila.

Probar el lenguaje Abrir el prompt Ver plantillas
Componentes del vocabulario 36 cada uno con su markup del censo
Clases emitidas 183 todas declaradas en los packs
Clases fuera del censo 0 lo comprueba auditar-openui.py en la CI
Dependencias 0 sin React, sin bundler; un script y un import ESM

Probador · del texto al markup

A la izquierda va el programa openui-lang (lo que emitiría el modelo). A la derecha, lo que Aurora pinta con él. Debajo, el HTML exacto que ha salido: todo .nz-*, listo para copiar. Edita el programa y pulsa Generar.

Programa

parser: —

Render Aurora

0 sentencias 0 nodos 0 caracteres 0 clases

El HTML que ha salido


    

  


  

    
Plantillas por arquetipo

    
El esqueleto ya está decidido y auditado: el modelo rellena los datos, no inventa la estructura. Cinco arquetipos cubren lo que se repite; el resto se compone con los mismos componentes. Con plantilla, el prompt no necesita los ejemplos largos (generar-web.py --prompt breve) y cada página cuesta unos 1.040 tokens menos.

    

      
Cargando plantillas…

    

  


  


  

    
Qué garantiza

    

      

        
1 · El lenguaje valida antes de pintar

        
El parser comprueba tipos, enums y aridad contra el esquema de la biblioteca. Un TablaBarras con números donde van textos no llega al DOM: se cae con type-mismatch. Los tres ejemplos de esta página se validan en la CI.

        
3 de 3 ejemplos: 0 errores

      

      

        
2 · El render es del censo

        
Cada componente emite el markup real de su familia: tabla apilable con data-etiqueta, barras con su valor, bullet con la meta al 66,7 %. Nada de CSS propio ni de estilos a mano.

        
36 componentes · — clases distintas en los 3 ejemplos

      

      

        
3 · Se puede hornear

        
scripts/hornear.py compila el programa, lo pinta en Chrome headless y extrae el <main>: la página sale estática y sin JavaScript. Así se genera la portada de este repositorio.

        
portada: .openui → HTML, 0 KB de JS

      

    

  


  

    
Cómo se conecta

    
    
      
  1. 1Pega PROMPT.md como system prompt
    2. 
      
  2. 2El modelo devuelve el programa
    3. 
      
  3. 3Aurora valida y pinta —o se hornea
    4. 
    


<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Aurora@v10/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Aurora@v10/packs/all.css">
<script src="https://cdn.jsdelivr.net/gh/Ntizar/Aurora@v10/openui/aurora-openui.js"></script>

<main id="lienzo"></main>
<script type="module">
  await AuroraOpenUI.iniciar();                        // spec + parser oficial
  AuroraOpenUI.stream(respuestaDelModelo, "#lienzo");  // streaming incluido
</script>

    
Del repo a producción: aquí los packs se enlazan en local para funcionar sin red. En un producto el <link> va pineado al tag publicado —el canal vivo es @v10, el congelado un @vX.Y.Z exacto— y con los packs que uses de verdad, no all.css.

    
Para generar una página entera sin escribir HTML: generar-web.py --brief encargo.json (modelo + plantilla + lint) o hornear.py si el programa ya está escrito. El fichero de la portada es briefs/portada.openui.