FX = “Frontend Engineer.” This upgrade in the UIGEN line focuses on better visual polish, functional structure, and web-ready markup to ship cleaner, more complete websites from a single prompt.

Open weights Web-only bias Mobile-first output Minimal JS by default

Model Repo Try in Designer Demos Website Discord

What is FX?

UIGEN-FX-4B-Preview is a 4B parameter UI generation model tuned to behave like a frontend engineer across 22 Frameworks.

Why 4B?

Small enough for laptops and fast iteration, while keeping strong structure and visual consistency. FX emphasizes layout rhythm, spacing, and component composition to reduce cleanup work.

Quickstart

Transformers

from transformers import AutoModelForCausalLM, AutoTokenizer
import torch
model_id = "Tesslate/UIGEN-FX-4B-Preview"
tok = AutoTokenizer.from_pretrained(model_id)
model = AutoModelForCausalLM.from_pretrained(
model_id,
torch_dtype=torch.bfloat16,
device_map="auto"
)
prompt = """Make a single-file landing page for 'LatticeDB'.
Style: modern, generous whitespace, Tailwind, rounded-xl, soft gradients.
Sections: navbar, hero (headline + 2 CTAs), features grid, pricing (3 tiers),
FAQ accordion, footer. Constraints: semantic HTML, no external JS."""
inputs = tok(prompt, return_tensors="pt").to(model.device)
out = model.generate(**inputs, max_new_tokens=2200, temperature=0.6, top_p=0.9)
print(tok.decode(out[0], skip_special_tokens=True))

vLLM

vllm serve Tesslate/UIGEN-FX-4B-Preview \
  --host 0.0.0.0 --port 8000 \
  --max-model-len 65536 \
  --gpu-memory-utilization 0.92

sglang

python -m sglang.launch_server \
  --model-path Tesslate/UIGEN-FX-4B-Preview \
  --host 0.0.0.0 --port 5000 \
  --mem-fraction-static 0.94 \
  --attention-backend flashinfer \
  --served-model-name UIGEN-FX-4B-Preview

Tip: Lower temperature (0.4–0.6) yields stricter, cleaner markup; raise it for more visual variety.

Suggested Inference Settings

Param	Value	Notes
`temperature`	0.6	Balance creativity & consistency (lower if quantized)
`top_p`	0.9	Nucleus sampling
`top_k`	40	Optional vocab restriction
`max_new_tokens`	1200–2500	Single-file sites often fit < 1800
`repetition_penalty`	1.08–1.15	Reduces repetitive classes/markup

Prompts that work well

Starter

Make a single-file landing page for "RasterFlow" (GPU video pipeline).
Style: modern tech, muted palette, Tailwind, rounded-xl, subtle gradients.
Sections: navbar, hero (big headline + 2 CTAs), logos row, features (3x cards),
code block (copyable), pricing (3 tiers), FAQ accordion, footer.
Constraints: semantic HTML, no external JS. Return ONLY the HTML code.

Design-strict

Use an 8pt spacing system. Palette: slate with indigo accents.
Typography scale: 14/16/18/24/36/56. Max width: 1200px.
Avoid shadows > md; prefer borders/dividers; keep line-length ~68ch.

Quantization & VRAM (example)

Format	Footprint	Notes
BF16	~8.1 GB	Fastest, best fidelity
GGUF Q5_K_M	~2.9 GB	Great quality/size trade-off
GGUF Q4_K_M	~2.5 GB	Laptop-friendly

Intended Use & Scope

Primary:React, Tailwind, Javascript, Static Site generators, Python Frontend WebUI
Secondary: Component blocks (hero, pricing, FAQ) for manual composition

Limitations

Accessibility: headings/labels are encouraged; ARIA coverage may need review.
Complex widgets: JS kept minimal unless requested; consider post-edit for heavy interactivity.

Ethical Considerations

Use rights-cleared assets when adding logos/images.
Curate prompts responsibly; review outputs before production use.

Training Summary (research preview)

Base: Qwen/Qwen3-4B-Instruct-2507
Objective: Web-only bias; reward semantic structure, spacing rhythm, responsive blocks; improved visual polish vs earlier UIGEN releases.
Data: Curated HTML/CSS/Tailwind snippets, component libraries, synthetic page specs & layout constraints.
Recipe: SFT with format constraints → instruction tuning → preference optimization on style/structure.
Context: effective ~64k; default generations sized for practical single-file pages.

Community

Examples: uigenoutput.tesslate.com
Discord: discord.gg/EcCpcTv93U
Website: tesslate.com

“FX aims to ship what a frontend engineer would: clean structure first, pretty pixels second.” — Tesslate Team

Citation

@misc{tesslate_uigen_fx_4b_2025,
  title   = {UIGEN-FX-4B-Preview: Frontend Engineer-tuned web generation (Research Preview)},
  author  = {Tesslate Team},
  year    = {2025},
  url     = {https://huggingface.co/Tesslate/UIGEN-FX-4B-Preview}
}