stefans71/frontend-design-lite-4b

<p align="center"> <img src="hero.png" alt="Frontend Design Lite — Fine-tuned Qwen3-VL that asks before it builds" width="800"/> </p>

<p align="center"> <a href="https://huggingface.co/stefans71/frontend-design-expert-8b"><img src="https://img.shields.io/badge/🤗-8BExpert(12GBGPU)-orange" alt="8B Expert"/></a> <a href="https://github.com/stefans71/frontend-design-dataset"><img src="https://img.shields.io/badge/GitHub-DatasetPipeline-green" alt="GitHub"/></a> <img src="https://img.shields.io/badge/Base-Qwen3--VL--4B-4b8bbf" alt="Base model"/> <img src="https://img.shields.io/badge/License-Apache_2.0-gray" alt="License"/> </p>

[!IMPORTANT] Vision critique trigger: Use exactly "Critique this UI design." when sending a screenshot. The model learned this specific phrase during training — other phrasings may not reliably activate the critique behavior.

The Problem

Base models are RLHF-tuned to be immediately helpful — they build immediately regardless of how vague the request is. You can't fix this with a system prompt. It has to be trained into the weights.

<p align="center"> <img src="terminal.png" alt="Base Model vs Fine-tuned: qualifying question behavior" width="800"/> </p>

1/10 → 9/10 on qualifying questions. 9 of 10 tested vague prompts triggered clarifying questions from the fine-tuned 4B model; only 1/10 from the base model.

Before / After

<p align="center"> <img src="hero-comparison.png" alt="Before vs After: Base Model vs Fine-tuned on FitTrack login prompt" width="800"/> </p>

Left: base Qwen3-VL-8B ignores the brand name and defaults to blue. Right: fine-tuned model applies FitTrack branding and green accent across every interactive element.

<p align="center"> <img src="qwen-8B-vs-fine-tuned.png" alt="Before vs After: Base vs Fine-tuned pricing card with design critique scores" width="800"/> </p>

Base model scores 5/10 — fine-tuned scores 6/10 (+1.0). Notice the improved typography hierarchy, gradient background, and "MOST POPULAR" badge treatment.

[!IMPORTANT] Live demo & full dataset explorer: <a href="https://qwen.data-analytics.space" style="color: #F97316; font-weight: bold;">qwen.data-analytics.space</a>

4B Lite vs 8B Expert

Choose 4B if you have an 8GB GPU or want faster inference. Choose 8B for maximum accuracy on complex multi-component layouts.

Training Pipeline

<p align="center"> <img src="pipeline.png" alt="Training pipeline: Natural Prompt → Qwen3.6-27B → Playwright → GPT-5.4 → 3,090 Records → Fine-tuned 8B" width="800"/> </p>

Same dataset and methodology as the 8B version. Teacher-student distillation:

1. 1.Qwen3.6-27B generates HTML components from natural language prompts
2. 2.Playwright renders each to desktop (1280×900) and mobile (390×844) screenshots
3. 3.GPT-5.4 critiques and rewrites with expert improvements — WCAG contrast, hover states, color consistency
4. 4.Training pairs: [screenshot + original HTML + critique] → [expert improved HTML]

BF16 (not 4-bit) was used for 4B training because fewer parameters means the model needs cleaner gradients to absorb the signal.

Validated Behaviors

Head-to-Head Design Quality (8B reference)

Head-to-head test run on the 8B Expert model: base Qwen3-VL-8B vs fine-tuned, same 10 prompts, same hardware (RTX 3080 Ti 12GB), GPT-5.4 judge using the same critique rubric as training. Both models share the same training dataset and approach.

• —Fine-tuned wins: 6/10 components
• —Tied: 3/10
• —Base wins: 1/10 (dark navbar only)
• —Biggest improvement: mobile dark bottom sheet +5 (base scored 1, fine-tuned scored 6)

Note: Scores reflect first-pass generation without the improvement step. The model was trained on critique+improvement pairs — ask it to critique and improve its own output for higher quality results.

[!TIP] Thinking mode: Always disable thinking mode in your inference server. Add "chat_template_kwargs": {"enable_thinking": false} to API requests, or use --no-think flag with llama-server.

Quick Start

Text-only (Ollama)

ollama pull stefans71/frontend-design-lite-4b
ollama run stefans71/frontend-design-lite-4b \
  "make me a navbar for my bakery called Sunrise Breads, warm colors, light theme"

Vision + Text (llama-server)

Ollama does not currently support separate mmproj files for vision. Use llama-server:

llama-server \
  -m frontend-design-lite-Q4_K_M.gguf \
  --mmproj mmproj-Qwen3VL-4B-Instruct-F16.gguf \
  -c 8192 \
  --host 0.0.0.0 \
  --port 8080

Vision critique trigger: Use exactly "Critique this UI design." — the model learned this phrase during training. Other phrasings may not reliably activate the behavior.

Files

Total for vision inference: ~3.2GB — leaves ~4.8GB for KV cache on 8GB GPU.

Training Details

Limitations

• —Vision critique requires the exact phrase "Critique this UI design." — other phrasings may trigger thinking-mode EOS
• —Ollama does not currently support separate mmproj files — use llama-server for vision tasks
• —May truncate complex HTML outputs more than 8B — increase max_tokens for full-page builds
• —Generated HTML uses inline CSS only (no Tailwind CDN) — intentional for offline compatibility

Related

• —[stefans71/frontend-design-expert-8b](https://huggingface.co/stefans71/frontend-design-expert-8b) — 8B Expert for 12GB GPUs
• —[stefans71/frontend-design-dataset](https://github.com/stefans71/frontend-design-dataset) — training pipeline
• —Base model: [Qwen/Qwen3-VL-4B-Instruct](https://huggingface.co/Qwen/Qwen3-VL-4B-Instruct)