UIGEN-X-32B-0727 im Test: ein lokales Modell, das aus einem Prompt eine Website macht

Bittest du einen allgemeinen Chatbot um eine Webseite, bekommst du meist funktionierenden Code ohne echtes Design dahinter. UIGEN-X-32B-0727 ist ein Sprachmodell, das speziell darauf trainiert ist, Frontend-Code zu schreiben. Es stammt von Tesslate, basiert auf Qwen 3 und plant und durchdenkt ein Design, bevor es HTML, CSS oder JavaScript schreibt.

Statt direkt zum Code zu gehen, arbeitet es in drei Stufen:

1. Es analysiert, worum du gebeten hast.
2. Es legt die Seitenstruktur und ein Designsystem fest.
3. Es schreibt sauberen, in Komponenten aufgeteilten Code.

Technische Daten

Merkmal	Details
Modellgröße	32B Parameter (in mehrere Shards aufgeteilt, etwa 61 GB VRAM bei voller Präzision)
Lizenz	Apache 2.0 (kommerzielle Nutzung erlaubt)
Erst schlussfolgern	Plant in mehreren Phasen, bevor es Code erzeugt
UI-Frameworks	React, Next.js, Tailwind, Chakra, Material UI, Flutter, Electron und andere
Visuelle Stile	Glassmorphism, Neomorphism, Cyberpunk, Brutalism
Mobil	React Native, Expo, Flutter
State Management	Zustand, Pinia
Animation	Framer Motion, GSAP
Icon-Bibliotheken	Lucide, Heroicons, Font Awesome und mehr

Was du brauchst

Voraussetzung	Empfohlen
Betriebssystem	Ubuntu 20.04+ oder WSL2/macOS
GPU	Mindestens 48 GB VRAM (zum Beispiel eine RTX A6000 oder H100)
RAM	32 GB+ Arbeitsspeicher
Software	Python 3.10+, vLLM, Node.js, npm

Installation

Schritt 1: vLLM installieren und das Modell bereitstellen

pip install vllm

Dann führe aus:

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

Das lädt etwa 14 Shards herunter und stellt das Modell über eine OpenAI-kompatible API unter localhost:8000 bereit.

Schritt 2: die Weboberfläche installieren

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

Bearbeite bei Bedarf:

• vite.config.js für Entwicklungseinstellungen
• src/app.tsx, um "UAGX-32B" zur Liste der Modelle hinzuzufügen

Dann führe aus:

npm run dev

Die Oberfläche liegt unter http://localhost:5173, und das Modell selbst auf Hugging Face.

Beispiel-Prompts

Die Ergebnisse unten entsprechen dem, was beim Schreiben dieses Beitrags berichtet wurde.

Eine Dating-App

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

Das Ergebnis war eine Oberfläche mit Tabs und einem Farbschema, das es erklärte, strukturierten Profilkomponenten und Animationen in React und Tailwind.

Ein SaaS-Analytics-Dashboard

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

Es lieferte ein responsives Layout mit Seitenleiste, Platzhalter für Diagramme, Karten mit dezenten Hover-Effekten und eine korrekte Tailwind-Konfiguration.

Ein Gewohnheitstracker in React Native

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

Der Code wurde korrekt erzeugt, aber die Vorschau ließ sich nicht darstellen, ein bekanntes Problem mit komplexen mobilen Layouts in der aktuellen Weboberfläche.

Bewertungen

Aspekt	Wertung (1 bis 5)
UI-Schlussfolgern	5,0
Codestruktur	4,5
Framework-Genauigkeit	4,5
Visuelle Darstellung	4,0
Mobile Unterstützung	3,5
VRAM-Effizienz	3,0

Der Haken: Du brauchst mindestens eine Karte mit 48 GB und etwa 61 GB, um es in voller Präzision zu betreiben, die meisten können es also nicht zu Hause laufen lassen. Mobile Layouts sind die Schwachstelle: Der Code mag stimmen, die Vorschau oft nicht.

Unser Fazit: Für Entwickler oder Produktdesigner mit der passenden Hardware nimmt es einem Projekt die langweiligen ersten Stunden ab. Am besten ist es bei UI-Grundgerüsten, SaaS-Dashboards, Marketing-Landingpages und Prototypen in React oder Next.js, und es ist ein nützliches Lehrmittel für Frontend-Arbeit.