Análise do UIGEN-X-32B-0727: um modelo local que transforma um prompt em um site

Pedir uma página web a um chatbot genérico costuma render código que funciona, sem nenhum design de verdade por trás. O UIGEN-X-32B-0727 é um modelo de linguagem treinado especificamente para escrever código de front-end. Ele vem da Tesslate, é construído sobre o Qwen 3 e planeja e raciocina sobre um design antes de escrever qualquer HTML, CSS ou JavaScript.

Em vez de ir direto ao código, ele trabalha em três etapas:

1. Analisa o que você pediu.
2. Define a estrutura da página e um design system.
3. Escreve código limpo dividido em componentes.

Especificações

Recurso	Detalhes
Tamanho do modelo	32B parâmetros (vários shards, cerca de 61GB de VRAM em precisão total)
Licença	Apache 2.0 (uso comercial permitido)
Raciocínio primeiro	Planeja em várias fases antes de gerar código
Frameworks de UI	React, Next.js, Tailwind, Chakra, Material UI, Flutter, Electron e outros
Estilos visuais	Glassmorphism, Neomorphism, Cyberpunk, Brutalism
Mobile	React Native, Expo, Flutter
Gerenciamento de estado	Zustand, Pinia
Animação	Framer Motion, GSAP
Bibliotecas de ícones	Lucide, Heroicons, Font Awesome e outras

Do que você precisa

Requisito	Recomendado
SO	Ubuntu 20.04+ ou WSL2/macOS
GPU	Mínimo de 48GB de VRAM (por exemplo, uma RTX A6000 ou H100)
RAM	32GB+ de memória do sistema
Software	Python 3.10+, vLLM, Node.js, npm

Instalação

Passo 1: instale o vLLM e sirva o modelo

pip install vllm

Depois rode:

python3 -m vllm.entrypoints.openai.api_server \
  --model "TestlateAI/UAGX-32B" \
  --port 8000

Isso baixa cerca de 14 shards e serve o modelo por uma API compatível com a da OpenAI em localhost:8000.

Passo 2: instale a interface web

git clone https://github.com/TesslateAI/UIGEN-T2-Artifacts.git
cd UIGEN-Demo
npm install

Se necessário, edite:

• vite.config.js para as configurações de desenvolvimento
• src/app.tsx para acrescentar "UAGX-32B" à lista de modelos

Depois rode:

npm run dev

A interface fica em http://localhost:5173, e o modelo em si está no Hugging Face.

Exemplos de prompts

Os resultados abaixo são os relatados quando este post foi escrito.

Um app de namoro

Prompt: "Create a modern dating app UI using React and Tailwind. Include profile cards, swipe animation, and a match list."

O resultado foi uma interface com abas e um esquema de cores que ele explicou, componentes de perfil estruturados e animações em React e Tailwind.

Um painel de análise SaaS

Prompt: "Create a responsive analytics dashboard using Next.js and Tailwind. Dark mode, glassmorphism cards, collapsible sidebar."

Ele produziu um layout responsivo com barra lateral, espaços reservados para gráficos, cards com efeitos de hover sutis e uma configuração correta do Tailwind.

Um app de hábitos em React Native

Prompt: "Create a habit tracking app in React Native using Expo with tabs: dashboard, calendar, profile."

O código foi gerado corretamente, mas a prévia não renderizou, um problema conhecido com layouts mobile complexos na interface web atual.

Notas

Aspecto	Nota (de 1 a 5)
Raciocínio de UI	5,0
Estrutura do código	4,5
Precisão nos frameworks	4,5
Renderização visual	4,0
Suporte a mobile	3,5
Eficiência de VRAM	3,0

O porém: você precisa de uma placa de 48GB no mínimo, e de cerca de 61GB para rodá-lo em precisão total, então a maioria das pessoas não consegue rodá-lo em casa. Layouts mobile são o ponto fraco: o código pode estar certo, mas a prévia muitas vezes não está.

Nossa opinião: para um desenvolvedor ou designer de produto com o hardware, ele corta as primeiras horas chatas de um projeto. Rende mais em boilerplate de UI, painéis SaaS, landing pages de marketing e protótipos em React ou Next.js, e é um bom recurso didático para trabalho de front-end.