WebGen-OSS-20B | Open-Source UI/Frontend Generation

WebGen OSS 20B is an open 20B design-to-code model that turns natural-language prompts into next level designs in Tailwind UIs. You won't see these designs anywhere else.

Comment 1

Inspiration

Shipping great frontends still feels like a relay race: design → code → fix CSS → wire components → iterate. We wanted an open, local-first model that takes a clear prompt and produces clean, readable, production-lean UI code, without the generic “AI-coded” look (overblown gradients, mismatched spacing, and novelty for novelty’s sake).

What it does

WEBGEN-OSS-20B turns natural-language prompts into responsive, accessible web UIs and lets you iterate in plain English.

  • Prompt → UI code: Generates clean HTML + Tailwind, mobile-first, semantic structure, sensible spacing.
  • Conversational edits: “Make the H1 larger, add a subtle overlay, tighten card spacing”, applies as safe diffs.
  • Design consistency: Prefers restrained palettes, modern components, and balanced white space no loud ‘AI gradient’ aesthetic.
  • Runs local/offline: Open weights; suitable for local agent workflows on developer machines.

How we built it

  • Base: Fine-tuned GPT-OSS-20B into a design-to-code specialist we call WEBGEN-OSS-20B.
  • Data: Curated prompt→UI pairs (HTML/Tailwind) with accessibility and responsiveness targets; added synthetic page specs for common patterns (nav, hero, grids, pricing, FAQ, forms, states).
  • Training: Unsloth-accelerated SFT + LoRA ; format constraints to discourage invented classes and inline styling; light preference tuning for readability and valid JSX.

Challenges we ran into

  • ROCm bring-up: Getting 20B fine-tunes stable and fast on ROCm (kernels, memory, attention backends) was the hardest part. (Unsloth wasn't used here, these were for testing)
  • Consistency vs. creativity: Keeping outputs tasteful and modern without drifting into the “AI gradient” look.
  • Correctness at scale: Ensuring valid HTML, real Tailwind classes, and responsive behavior under long prompts.

Accomplishments that we’re proud of

  • Aesthetic restraint by default: Clean layouts, measured gradients (when asked), consistent spacing rhythm.
  • Code you can read and ship: Semantic markup, sensible utility classes, fewer hallucinated class names.
  • Local/offline flow: Fully open, reproducible fine-tune with quantized variants for laptops.

What we learned

  • The best prompts are constraints + intent (e.g., “mobile-first, accessible contrast, soft gradient only in hero”), not pixel micromanagement.
  • Training on style guides (spacing scale, type scale, max-widths) meaningfully reduces the “AI-coded” look.
  • ROCm performance hinges on a few critical settings (attention kernels, memory planning, quantization choices).

What’s next for WebGen

  • Larger siblings (120B): Better local inference with the same style discipline.
  • Full-stack handoff (optional): Generate typed API clients and basic backend scaffolds when requested.

Built With

Share this project:

Updates