Text Generation
Transformers
Safetensors
designcoder
ui-generation
front-end
html
css
javascript
code-generation
full-sft
Instructions to use xingxm/DesignCoder with libraries, inference providers, notebooks, and local apps. Follow these links to get started.
- Libraries
- Transformers
How to use xingxm/DesignCoder with Transformers:
# Use a pipeline as a high-level helper from transformers import pipeline pipe = pipeline("text-generation", model="xingxm/DesignCoder")# Load model directly from transformers import AutoModel model = AutoModel.from_pretrained("xingxm/DesignCoder", device_map="auto") - Notebooks
- Google Colab
- Kaggle
- Local Apps Settings
- vLLM
How to use xingxm/DesignCoder with vLLM:
Install from pip and serve model
# Install vLLM from pip: pip install vllm # Start the vLLM server: vllm serve "xingxm/DesignCoder" # Call the server using curl (OpenAI-compatible API): curl -X POST "http://localhost:8000/v1/completions" \ -H "Content-Type: application/json" \ --data '{ "model": "xingxm/DesignCoder", "prompt": "Once upon a time,", "max_tokens": 512, "temperature": 0.5 }'Use Docker
docker model run hf.co/xingxm/DesignCoder
- SGLang
How to use xingxm/DesignCoder with SGLang:
Install from pip and serve model
# Install SGLang from pip: pip install sglang # Start the SGLang server: python3 -m sglang.launch_server \ --model-path "xingxm/DesignCoder" \ --host 0.0.0.0 \ --port 30000 # Call the server using curl (OpenAI-compatible API): curl -X POST "http://localhost:30000/v1/completions" \ -H "Content-Type: application/json" \ --data '{ "model": "xingxm/DesignCoder", "prompt": "Once upon a time,", "max_tokens": 512, "temperature": 0.5 }'Use Docker images
docker run --gpus all \ --shm-size 32g \ -p 30000:30000 \ -v ~/.cache/huggingface:/root/.cache/huggingface \ --env "HF_TOKEN=<secret>" \ --ipc=host \ lmsysorg/sglang:latest \ python3 -m sglang.launch_server \ --model-path "xingxm/DesignCoder" \ --host 0.0.0.0 \ --port 30000 # Call the server using curl (OpenAI-compatible API): curl -X POST "http://localhost:30000/v1/completions" \ -H "Content-Type: application/json" \ --data '{ "model": "xingxm/DesignCoder", "prompt": "Once upon a time,", "max_tokens": 512, "temperature": 0.5 }' - Docker Model Runner
How to use xingxm/DesignCoder with Docker Model Runner:
docker model run hf.co/xingxm/DesignCoder
Update to full V5.9.2 scores (all three rubric families, n=200)
Browse files
README.md
CHANGED
|
@@ -11,8 +11,6 @@ tags:
|
|
| 11 |
- javascript
|
| 12 |
- code-generation
|
| 13 |
- full-sft
|
| 14 |
-
- evaluator
|
| 15 |
-
- reward-model
|
| 16 |
---
|
| 17 |
|
| 18 |
# DesignCoder
|
|
@@ -20,25 +18,14 @@ tags:
|
|
| 20 |
Checkpoint collection for **DesignCoder**, a family of full-parameter SFT models for UI design
|
| 21 |
research and end-to-end HTML/CSS/JavaScript implementation.
|
| 22 |
|
| 23 |
-
The repository holds **two kinds of model**:
|
| 24 |
-
|
| 25 |
-
| Kind | What it does | Folder prefix |
|
| 26 |
-
|---|---|---|
|
| 27 |
-
| **Generation** | writes HTML/CSS/JS from a design brief | `designcoder_{basemodel}_...` |
|
| 28 |
-
| **Evaluator** | scores a rendered UI screenshot against a rubric | `designcoder_evaluator_{basemodel}_...` |
|
| 29 |
-
|
| 30 |
-
They are trained on **different datasets** and answer **different inputs** — an evaluator will
|
| 31 |
-
not generate pages, and a generation model will not produce valid rubric verdicts.
|
| 32 |
-
|
| 33 |
Each subfolder in this repository is a self-contained, directly loadable checkpoint.
|
| 34 |
|
| 35 |
## Naming convention
|
| 36 |
|
| 37 |
```
|
| 38 |
-
designcoder_
|
| 39 |
```
|
| 40 |
|
| 41 |
-
- `evaluator`: present only for rubric-scoring models; absent means generation
|
| 42 |
- `basemodel` / `size`: base model family and parameter scale
|
| 43 |
- `optimizer`: `muon` or `adamw`
|
| 44 |
- `bs`: global batch size (`per_device × grad_accum × world_size`)
|
|
@@ -48,58 +35,30 @@ designcoder_[evaluator_]{basemodel}_{size}_{optimizer}_bs{global_batch}[_{extra_
|
|
| 48 |
|
| 49 |
## Dataset revisions
|
| 50 |
|
| 51 |
-
Checkpoints in this repository come from
|
| 52 |
values are only comparable within the same revision.**
|
| 53 |
|
| 54 |
-
| Tag | Samples |
|
| 55 |
-
|---|---:|---|
|
| 56 |
-
| *(untagged)* `data37865` | 37,865 | `
|
| 57 |
-
| `data41287` | 41,287 | `
|
| 58 |
-
| `data37847` | 37,847 | **`DesignCoder-evaluate`** (screenshot scoring) | `designcoder_evaluator_*` |
|
| 59 |
-
|
| 60 |
-
> ⚠️ `data37847` and `data37865` are **entirely different datasets** — the near-identical
|
| 61 |
-
> sample counts are a coincidence. Never compare loss across them.
|
| 62 |
|
| 63 |
## Checkpoints
|
| 64 |
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
| Subfolder | Base model | Optimizer | LR | Global batch | Dataset | Step | bench-200 (full, n=200) | Notes |
|
| 68 |
|---|---|---|---|---|---|---|---|---|
|
| 69 |
| `designcoder_qwen3.5_4b_muon_bs32_step1900` | Qwen3.5-4B | Muon | 1e-5 | 32 | 37,865 | 1900 | – | smallest of the first release |
|
| 70 |
| `designcoder_qwen3.5_9b_muon_bs16_step3800` | Qwen3.5-9B | Muon | 1e-5 | 16 | 37,865 | 3800 | – | optimizer ablation (Muon arm) |
|
| 71 |
| `designcoder_qwen3.5_9b_adamw_bs16_step3800` | Qwen3.5-9B | AdamW | 2e-5 | 16 | 37,865 | 3800 | – | optimizer ablation (AdamW arm) |
|
| 72 |
| `designcoder_qwen3.6_27b_adamw_bs32_step1900` | Qwen3.6-27B | AdamW | 1e-5 | 32 | 37,865 | 1900 | – | largest of the first release |
|
| 73 |
-
| `designcoder_qwen3.5_4b_adamw_bs256_data41287_step200` | Qwen3.5-4B | AdamW | 2e-5 | 256 | 41,287 | 200 |
|
| 74 |
-
| `designcoder_qwen3.5_4b_muon_bs256_data41287_step200` | Qwen3.5-4B | Muon | 2e-5 | 256 | 41,287 | 200 |
|
| 75 |
-
| `designcoder_qwen3.5_9b_adamw_bs256_data41287_step200` | Qwen3.5-9B | AdamW | 2e-5 | 256 | 41,287 | 200 | **
|
| 76 |
-
| `designcoder_qwen3.8_27b_adamw_bs128_data41287_step400` | Qwen3.8-27B | AdamW | 1e-5 | 128 | 41,287 | 400 | **87.
|
| 77 |
|
| 78 |
All four `data41287` scores are **final full-benchmark runs: 200/200 rollouts, 200/200
|
| 79 |
-
screenshot captures, 200/200 judge evaluations** per model
|
| 80 |
-
|
| 81 |
-
### Evaluator models
|
| 82 |
-
|
| 83 |
-
Rubric scorers for UI screenshots — intended as reward / judge models during rollout, **not**
|
| 84 |
-
for page generation. Trained on `DesignCoder-evaluate` (37,847 samples), evaluated on
|
| 85 |
-
held-out benchmark screenshots scored by a stronger external vision judge (κ = agreement
|
| 86 |
-
with that judge; see [Evaluator benchmark](#evaluator-benchmark)).
|
| 87 |
-
|
| 88 |
-
| Subfolder | Base model | Optimizer | LR | Global batch | Dataset | Step | OOD κ | Notes |
|
| 89 |
-
|---|---|---|---|---|---|---|---:|---|
|
| 90 |
-
| `designcoder_evaluator_qwen3.5_9b_adamw_bs256_data37847_step100` | Qwen3.5-9B | AdamW | 1e-5 | 256 | 37,847 | 100 | **0.694** | 1/3 memory, 2× speed; **requires exactly 10-item rubrics** |
|
| 91 |
-
| `designcoder_evaluator_qwen3.8_27b_adamw_bs256_data37847_step296` | Qwen3.8-27B | AdamW | 5e-6 | 256 | 37,847 | 296 | 0.664 | **robust to any rubric length** — default choice |
|
| 92 |
-
|
| 93 |
-
**Which one to use.** Counter-intuitively the 9B has slightly *higher* agreement; the 27B's
|
| 94 |
-
advantage is **format robustness**. Verdict-count exact match across rubric lengths:
|
| 95 |
-
|
| 96 |
-
| Rubric items | 5 | 10 | 15 | 20 | 25 |
|
| 97 |
-
|---|---:|---:|---:|---:|---:|
|
| 98 |
-
| 9B step100 | 0.00 | **1.00** | 0.92 | 0.94 | 0.85 |
|
| 99 |
-
| 27B step296 | **1.00** | **1.00** | **0.99** | **1.00** | **1.00** |
|
| 100 |
-
|
| 101 |
-
Training rubrics are always exactly 10 items, so anything else is out-of-distribution.
|
| 102 |
-
Use the 9B when your rubric is fixed at 10 items; use the 27B otherwise.
|
| 103 |
|
| 104 |
## Benchmark
|
| 105 |
|
|
@@ -107,48 +66,56 @@ Use the 9B when your rubric is fixed at 10 items; use the 27B otherwise.
|
|
| 107 |
dashboard, 30 Track B landing, 30 Track B dashboard; Track A cases specify a style, Track B
|
| 108 |
cases are style-free).
|
| 109 |
|
| 110 |
-
**Rubric composition.**
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 114 |
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
| Layout | 842 | 16.9% |
|
| 119 |
-
| Aesthetics | 782 | 15.7% |
|
| 120 |
-
| Typography | 642 | 12.9% |
|
| 121 |
-
| Alignment | 616 | 12.4% |
|
| 122 |
-
| Assets | 584 | 11.7% |
|
| 123 |
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
|
|
|
| 127 |
|
| 128 |
### Full-run results (n=200 per model)
|
| 129 |
|
| 130 |
-
| Model | Overall |
|
| 131 |
-
|---|---:|---:|---:|---:|---:|---:|---:|---:|
|
| 132 |
-
| 27B AdamW step400 | **87.
|
| 133 |
-
| 9B AdamW step200 |
|
| 134 |
-
| 4B AdamW step200 |
|
| 135 |
-
| 4B Muon step200 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 136 |
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
|
|
|
|
|
|
|
|
|
| 143 |
|
| 144 |
### Evaluation artifacts (`eval/`)
|
| 145 |
|
| 146 |
| File | Content |
|
| 147 |
|---|---|
|
| 148 |
-
| [`eval/
|
| 149 |
-
| [`eval/
|
| 150 |
-
| [`eval/
|
| 151 |
-
| [`eval/rubric_stats.json`](./blob/main/eval/rubric_stats.json) |
|
| 152 |
| [`eval/reports.html`](./blob/main/eval/reports.html) | self-contained interactive HTML report: model comparison, dimension heatmap, score distributions, per-case tables |
|
| 153 |
|
| 154 |
### Checkpoint selection
|
|
@@ -159,96 +126,28 @@ and loss kept improving while benchmark scores fell. The table below shows the *
|
|
| 159 |
selection subset** (used only to rank checkpoints, not comparable to the final full-run
|
| 160 |
numbers in the tables above):
|
| 161 |
|
| 162 |
-
| Run | Step | Train loss | subset bench (n=8,
|
| 163 |
|---|---:|---:|---:|---:|
|
| 164 |
-
| 4B AdamW | 200 | 0.2696 | 84.22 | **
|
| 165 |
| 4B AdamW | 266 | 0.2682 | 68.35 | – |
|
| 166 |
-
| 4B Muon | 200 | 0.3339 | 83.36 | **
|
| 167 |
| 4B Muon | 266 | 0.3349 | 81.27 | – |
|
| 168 |
-
| 9B AdamW | 200 | 0.2518 | 84.40 | **
|
| 169 |
| 9B AdamW | 266 | 0.2504 | lowest of the three | – |
|
| 170 |
-
| 27B AdamW | 400 | 0.2067 | 91.19 | **87.
|
| 171 |
| 27B AdamW | 530 | 0.2059 | 86.37 | – |
|
| 172 |
|
| 173 |
The 4B AdamW pair is the clearest example: loss improved from 0.2696 to 0.2682 while the
|
| 174 |
subset score collapsed from 84.22 to 68.35. **Do not pick checkpoints from this family by
|
| 175 |
-
loss.**
|
| 176 |
-
correctly but runs several points above the full 200-case benchmark.
|
| 177 |
-
|
| 178 |
-
## Evaluator benchmark
|
| 179 |
-
|
| 180 |
-
`DesignCoder-evaluate` ships **no test split**, and both evaluators trained on all 37,847
|
| 181 |
-
samples for 2 epochs — so there is no clean in-training validation set. Evaluation instead
|
| 182 |
-
uses **held-out inputs**: 239 generated-page screenshots from the DesignCoder benchmark, each
|
| 183 |
-
already scored check-by-check by a stronger external vision judge. A byte-level md5 check
|
| 184 |
-
confirmed **0 overlap** between those benchmark screenshots and the 37,851 training images.
|
| 185 |
-
|
| 186 |
-
Alignment is possible because the training target's `frozen_dynamic_scores.verdicts` and the
|
| 187 |
-
external judge's `verdict` are both binary and share the same `(dimension, point)` structure.
|
| 188 |
-
|
| 189 |
-
**Headline metrics** (239 held-out cases, original 24–25-item benchmark rubrics):
|
| 190 |
-
|
| 191 |
-
| Metric | 9B step100 | 27B step296 |
|
| 192 |
-
|---|---:|---:|
|
| 193 |
-
| JSON parse rate | 1.0000 | **1.0000** |
|
| 194 |
-
| Per-check agreement | 0.9226 | **0.9313** |
|
| 195 |
-
| Cohen's κ vs external judge | 0.6353 | **0.6802** |
|
| 196 |
-
| Defect recall (verdict = 0) | 0.6581 | **0.6996** |
|
| 197 |
-
| Case-level Pearson | 0.8417 | **0.8572** |
|
| 198 |
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
| 203 |
-
checkpoints 4B `0.833` < 9B `0.884` < 27B `0.905`. Both published evaluators recover that
|
| 204 |
-
ordering to within ~2pp:
|
| 205 |
-
|
| 206 |
-
| Scorer | 4B | 9B | 27B | Ordering |
|
| 207 |
-
|---|---:|---:|---:|---|
|
| 208 |
-
| External judge (reference) | 0.833 | 0.884 | 0.905 | – |
|
| 209 |
-
| Evaluator 9B step100 | 0.855 | 0.886 | 0.910 | ✅ |
|
| 210 |
-
| Evaluator 27B step296 | 0.840 | 0.893 | 0.909 | ✅ |
|
| 211 |
-
|
| 212 |
-
### Evaluator checkpoint selection
|
| 213 |
-
|
| 214 |
-
Checkpoints were chosen on a purpose-built **out-of-distribution suite** (576 prompts:
|
| 215 |
-
rubric lengths 5/10/15/20/25 × three dimension-grouping shapes), not on training loss.
|
| 216 |
-
The two families behave differently:
|
| 217 |
-
|
| 218 |
-
| Run | Step | Train loss | OOD κ | Overfit gap (in-dist − OOD) |
|
| 219 |
-
|---|---:|---:|---:|---:|
|
| 220 |
-
| 9B AdamW | 50 | – | 0.6568 | +0.004 |
|
| 221 |
-
| 9B AdamW | **100** | 0.4956 | **0.6943** | +0.007 |
|
| 222 |
-
| 9B AdamW | 150 | – | 0.6730 | +0.018 |
|
| 223 |
-
| 9B AdamW | 200 | – | 0.6649 | +0.011 |
|
| 224 |
-
| 9B AdamW | 250 | – | 0.6765 | −0.019 |
|
| 225 |
-
| 9B AdamW | 296 (final) | 0.4358 | 0.6501 | +0.027 |
|
| 226 |
-
| 27B AdamW | 200 | – | 0.6625 | +0.002 |
|
| 227 |
-
| 27B AdamW | **296 (final)** | 0.4246 | **0.6640** | −0.029 |
|
| 228 |
-
|
| 229 |
-
The 9B reproduces the "loss keeps falling, held-out quality degrades" pattern seen in the
|
| 230 |
-
generation runs — but peaks **much earlier** (~34% of training vs ~75%). The 27B shows no
|
| 231 |
-
late-training degradation, so its final checkpoint is published.
|
| 232 |
-
|
| 233 |
-
### Evaluator optimizer ablation
|
| 234 |
-
|
| 235 |
-
A 9B run with **Muon + `pure_bf16`** (identical data, batch, and steps) failed badly:
|
| 236 |
-
|
| 237 |
-
| | Muon + pure_bf16 | AdamW + ZeRO-3 |
|
| 238 |
-
|---|---:|---:|
|
| 239 |
-
| Final train loss | 0.7505 | **0.4358** |
|
| 240 |
-
| Truncated generations | 14 / 389 | **0 / 389** |
|
| 241 |
-
| Cohen's κ | 0.4831 | **0.6353** |
|
| 242 |
-
| Quality ordering | ❌ inverted | ✅ correct |
|
| 243 |
-
|
| 244 |
-
The Muon arm stalled early (loss 1.376 → 1.138 over 50 steps) and degenerated into repetition
|
| 245 |
-
loops hitting the 8192-token cap. It is not published. **Do not use Muon + `pure_bf16` for
|
| 246 |
-
this task** — note this differs from the generation family, where Muon is viable.
|
| 247 |
|
| 248 |
## Shared training setup
|
| 249 |
|
| 250 |
-
**Generation models**
|
| 251 |
-
|
| 252 |
- Objective: full-parameter supervised fine-tuning (no LoRA / adapters)
|
| 253 |
- Dataset: `designcoder_sft_v2_train` in ShareGPT format (see revision table above)
|
| 254 |
- Chat template: `qwen3_5` with thinking enabled
|
|
@@ -256,19 +155,8 @@ this task** — note this differs from the generation family, where Muon is viab
|
|
| 256 |
- Sequence packing: enabled, with neat packing (no cross-sample attention)
|
| 257 |
- LR schedule: cosine, warmup ratio 0.1
|
| 258 |
|
| 259 |
-
**Evaluator models**
|
| 260 |
-
|
| 261 |
-
- Objective: full-parameter SFT, **vision tower frozen** (LM + multimodal projector tuned)
|
| 262 |
-
- Dataset: `DesignCoder-evaluate`, 37,847 samples, one screenshot per sample
|
| 263 |
-
- Chat template: `qwen3_5` with thinking enabled; context length 32,768
|
| 264 |
-
- `image_max_pixels`: 1,048,576 — inputs must be downscaled the same way at inference
|
| 265 |
-
- Precision / parallel: bf16 + DeepSpeed ZeRO-3; 2 epochs, global batch 256
|
| 266 |
-
- LR schedule: cosine, warmup ratio 0.1
|
| 267 |
-
|
| 268 |
## Usage
|
| 269 |
|
| 270 |
-
### Generation models
|
| 271 |
-
|
| 272 |
```python
|
| 273 |
from transformers import AutoModelForCausalLM, AutoProcessor
|
| 274 |
|
|
@@ -285,7 +173,7 @@ To download a single checkpoint only:
|
|
| 285 |
hf download xingxm/DesignCoder --include "designcoder_qwen3.8_27b_adamw_bs128_data41287_step400/*" --local-dir ./DesignCoder
|
| 286 |
```
|
| 287 |
|
| 288 |
-
###
|
| 289 |
|
| 290 |
These models are trained as tool-using agents, not single-turn generators. A case runs
|
| 291 |
`design_search` → (`websearch`, landing only) → a final answer containing exactly three code
|
|
@@ -294,61 +182,6 @@ format from `examples/designcoder/runtime/infer_designcoder.py`; prompting with
|
|
| 294 |
instruction and no tool turns does not match the training distribution and will score far
|
| 295 |
below the numbers above.
|
| 296 |
|
| 297 |
-
### Evaluator models
|
| 298 |
-
|
| 299 |
-
Note the different loader class (`AutoModelForImageTextToText`) — `AutoModelForCausalLM`
|
| 300 |
-
resolves to a text-only shell and `generate()` will reject the image tensors.
|
| 301 |
-
|
| 302 |
-
```python
|
| 303 |
-
from transformers import AutoModelForImageTextToText, AutoProcessor, AutoTokenizer
|
| 304 |
-
from PIL import Image
|
| 305 |
-
import torch, math
|
| 306 |
-
|
| 307 |
-
repo = "xingxm/DesignCoder"
|
| 308 |
-
subfolder = "designcoder_evaluator_qwen3.8_27b_adamw_bs256_data37847_step296"
|
| 309 |
-
|
| 310 |
-
tok = AutoTokenizer.from_pretrained(repo, subfolder=subfolder, trust_remote_code=True)
|
| 311 |
-
proc = AutoProcessor.from_pretrained(repo, subfolder=subfolder, trust_remote_code=True)
|
| 312 |
-
model = AutoModelForImageTextToText.from_pretrained(
|
| 313 |
-
repo, subfolder=subfolder, dtype=torch.bfloat16, device_map="cuda", trust_remote_code=True
|
| 314 |
-
)
|
| 315 |
-
|
| 316 |
-
img = Image.open("screenshot.png").convert("RGB")
|
| 317 |
-
w, h = img.size # match training preprocessing
|
| 318 |
-
if w * h > 1048576:
|
| 319 |
-
s = math.sqrt(1048576 / (w * h))
|
| 320 |
-
img = img.resize((int(w * s), int(h * s)))
|
| 321 |
-
|
| 322 |
-
user = (
|
| 323 |
-
"<image>\n"
|
| 324 |
-
"Evaluate the attached UI screenshot using the selected visual criteria.\n\n"
|
| 325 |
-
"<surface>\nlanding\n</surface>\n\n"
|
| 326 |
-
"<generation_brief>\n...brief...\n</generation_brief>\n\n"
|
| 327 |
-
'<frozen_rubric>\n{"rubric":{"Alignment":["..."],"Layout":["..."]}}\n</frozen_rubric>'
|
| 328 |
-
)
|
| 329 |
-
text = tok.apply_chat_template(
|
| 330 |
-
[{"role": "system", "content": SYSTEM_PROMPT}, {"role": "user", "content": user}],
|
| 331 |
-
tokenize=False, add_generation_prompt=True,
|
| 332 |
-
).replace("<image>", "<|vision_start|><|image_pad|><|vision_end|>")
|
| 333 |
-
|
| 334 |
-
inputs = proc(text=[text], images=[img], return_tensors="pt").to("cuda")
|
| 335 |
-
out = model.generate(**inputs, max_new_tokens=4096, do_sample=False)
|
| 336 |
-
print(tok.decode(out[0][inputs["input_ids"].shape[1]:], skip_special_tokens=True))
|
| 337 |
-
```
|
| 338 |
-
|
| 339 |
-
#### Evaluator inference contract
|
| 340 |
-
|
| 341 |
-
- `SYSTEM_PROMPT` must be the one shipped with the `DesignCoder-evaluate` dataset — it
|
| 342 |
-
enumerates the rubric namespace the model was trained against.
|
| 343 |
-
- The chat template already ends with `<think>\n`, so generated text continues *inside* the
|
| 344 |
-
reasoning block and carries **no opening `<think>` tag**. Split on `</think>` to reach the
|
| 345 |
-
JSON payload.
|
| 346 |
-
- Downscale images to ≤ 1,048,576 px as shown; larger inputs drift from training.
|
| 347 |
-
- Parse `frozen_dynamic_scores.verdicts`. **Ignore the sibling `summary` string** — it
|
| 348 |
-
miscounts (e.g. reads `"24/24"` next to 25 emitted verdicts) in both models.
|
| 349 |
-
- `static_scores` / `dynamic_scores` (40 items, 0/1/2) have **no held-out validation** — they
|
| 350 |
-
were only checked against contaminated training samples. Treat them as unverified.
|
| 351 |
-
|
| 352 |
## Provenance
|
| 353 |
|
| 354 |
Each subfolder additionally ships `trainer_state.json` / `trainer_log.jsonl` (and
|
|
|
|
| 11 |
- javascript
|
| 12 |
- code-generation
|
| 13 |
- full-sft
|
|
|
|
|
|
|
| 14 |
---
|
| 15 |
|
| 16 |
# DesignCoder
|
|
|
|
| 18 |
Checkpoint collection for **DesignCoder**, a family of full-parameter SFT models for UI design
|
| 19 |
research and end-to-end HTML/CSS/JavaScript implementation.
|
| 20 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
Each subfolder in this repository is a self-contained, directly loadable checkpoint.
|
| 22 |
|
| 23 |
## Naming convention
|
| 24 |
|
| 25 |
```
|
| 26 |
+
designcoder_{basemodel}_{size}_{optimizer}_bs{global_batch}[_{extra_axes}]_step{global_step}
|
| 27 |
```
|
| 28 |
|
|
|
|
| 29 |
- `basemodel` / `size`: base model family and parameter scale
|
| 30 |
- `optimizer`: `muon` or `adamw`
|
| 31 |
- `bs`: global batch size (`per_device × grad_accum × world_size`)
|
|
|
|
| 35 |
|
| 36 |
## Dataset revisions
|
| 37 |
|
| 38 |
+
Checkpoints in this repository come from two different dataset revisions. **Scores and loss
|
| 39 |
values are only comparable within the same revision.**
|
| 40 |
|
| 41 |
+
| Tag | Samples | Used by |
|
| 42 |
+
|---|---:|---|
|
| 43 |
+
| *(untagged)* `data37865` | 37,865 | `*_step1900`, `*_step3800` |
|
| 44 |
+
| `data41287` | 41,287 | `*_data41287_step200`, `*_data41287_step400` |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 45 |
|
| 46 |
## Checkpoints
|
| 47 |
|
| 48 |
+
| Subfolder | Base model | Optimizer | LR | Global batch | Dataset | Step | bench-200 V5.9.2 (n=200) | Notes |
|
|
|
|
|
|
|
| 49 |
|---|---|---|---|---|---|---|---|---|
|
| 50 |
| `designcoder_qwen3.5_4b_muon_bs32_step1900` | Qwen3.5-4B | Muon | 1e-5 | 32 | 37,865 | 1900 | – | smallest of the first release |
|
| 51 |
| `designcoder_qwen3.5_9b_muon_bs16_step3800` | Qwen3.5-9B | Muon | 1e-5 | 16 | 37,865 | 3800 | – | optimizer ablation (Muon arm) |
|
| 52 |
| `designcoder_qwen3.5_9b_adamw_bs16_step3800` | Qwen3.5-9B | AdamW | 2e-5 | 16 | 37,865 | 3800 | – | optimizer ablation (AdamW arm) |
|
| 53 |
| `designcoder_qwen3.6_27b_adamw_bs32_step1900` | Qwen3.6-27B | AdamW | 1e-5 | 32 | 37,865 | 1900 | – | largest of the first release |
|
| 54 |
+
| `designcoder_qwen3.5_4b_adamw_bs256_data41287_step200` | Qwen3.5-4B | AdamW | 2e-5 | 256 | 41,287 | 200 | 80.06 | best 4B / AdamW |
|
| 55 |
+
| `designcoder_qwen3.5_4b_muon_bs256_data41287_step200` | Qwen3.5-4B | Muon | 2e-5 | 256 | 41,287 | 200 | 71.34 | best 4B / Muon |
|
| 56 |
+
| `designcoder_qwen3.5_9b_adamw_bs256_data41287_step200` | Qwen3.5-9B | AdamW | 2e-5 | 256 | 41,287 | 200 | **82.14** | best 9B |
|
| 57 |
+
| `designcoder_qwen3.8_27b_adamw_bs128_data41287_step400` | Qwen3.8-27B | AdamW | 1e-5 | 128 | 41,287 | 400 | **87.04** | strongest checkpoint in the collection |
|
| 58 |
|
| 59 |
All four `data41287` scores are **final full-benchmark runs: 200/200 rollouts, 200/200
|
| 60 |
+
screenshot captures, 200/200 judge evaluations** per model, scored with the **complete
|
| 61 |
+
V5.9.2 rubric set (all three families)** — no subsetting, no omitted rubric family.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 62 |
|
| 63 |
## Benchmark
|
| 64 |
|
|
|
|
| 66 |
dashboard, 30 Track B landing, 30 Track B dashboard; Track A cases specify a style, Track B
|
| 67 |
cases are style-free).
|
| 68 |
|
| 69 |
+
**Rubric composition.** Scoring uses three independent rubric families. Only the first varies
|
| 70 |
+
per case; the other two are fixed for every case of a given surface.
|
| 71 |
+
|
| 72 |
+
| Family | Scope | Size | Scale |
|
| 73 |
+
|---|---|---|---|
|
| 74 |
+
| **Frozen** | per case | 23–25 checks/case, 4,983 total (184 cases carry 25, 15 carry 24, 1 carries 23) | binary 0/1 |
|
| 75 |
+
| **Prompt Fit & Product** | fixed per surface | 5 rubrics | 0/1/2 |
|
| 76 |
+
| **Static** | fixed per surface | landing 27 `d_*` + 8 `q_*`; dashboard 25 `d_*` + 9 `q_*` | `d_*` 2/0/N-A, `q_*` 0/1/2/N-A |
|
| 77 |
|
| 78 |
+
Frozen checks are distributed across six dimensions: Components 1,517 (30.4%), Layout 842
|
| 79 |
+
(16.9%), Aesthetics 782 (15.7%), Typography 642 (12.9%), Alignment 616 (12.4%), Assets 584
|
| 80 |
+
(11.7%). Every check is `check_with=screenshot`.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 81 |
|
| 82 |
+
`overall_score` (0–100) is the unweighted mean of top-level slots: Prompt Fit (1 slot), each
|
| 83 |
+
active Static dimension (1 slot each), and the whole Frozen family (1 slot). Aggregation is
|
| 84 |
+
performed by the reference collector `DesignEvaluator-Skill/scripts/collect_unified.py`, not
|
| 85 |
+
by a reimplementation. Judge: `gpt-5.6-sol` (vision) with structured JSON output.
|
| 86 |
|
| 87 |
### Full-run results (n=200 per model)
|
| 88 |
|
| 89 |
+
| Model | **Overall (V5.9.2)** | Prompt Fit | Static | Frozen | Landing | Dashboard | Track A | Track B | Render fails |
|
| 90 |
+
|---|---:|---:|---:|---:|---:|---:|---:|---:|---:|
|
| 91 |
+
| 27B AdamW step400 | **87.04** | 84.10 | 87.31 | 88.52 | 89.65 | 82.19 | 86.56 | 88.16 | 0/200 |
|
| 92 |
+
| 9B AdamW step200 | **82.14** | 78.35 | 82.20 | 85.41 | 86.96 | 73.19 | 82.71 | 80.82 | 1/200 |
|
| 93 |
+
| 4B AdamW step200 | **80.06** | 75.25 | 80.40 | 83.27 | 85.70 | 69.59 | 80.61 | 78.78 | 1/200 |
|
| 94 |
+
| 4B Muon step200 | **71.34** | 64.60 | 70.96 | 79.79 | 78.48 | 58.06 | 72.05 | 69.68 | 3/200 |
|
| 95 |
+
|
| 96 |
+
Scores are monotone in scale. Five of the six pairwise differences are significant (paired
|
| 97 |
+
bootstrap 10k-resample 95% CI excludes 0 and Wilcoxon p < 4e-7); **9B vs 4B AdamW is not
|
| 98 |
+
significant** (mean diff +2.08, CI [-0.03, 4.18], p = 0.065). See
|
| 99 |
+
[`eval/significance_tests_v592.json`](./blob/main/eval/significance_tests_v592.json).
|
| 100 |
|
| 101 |
+
Two observations that only the full rubric set exposes:
|
| 102 |
+
|
| 103 |
+
- **Dashboards are the bottleneck, and they degrade faster than landings.** The 27B loses 7.5
|
| 104 |
+
points moving from landing to dashboard; the 4B Muon loses 20.4. The Static family's
|
| 105 |
+
chart (`d_data_*`) and workflow (`d_work_*`) checks catch empty or non-functional charts
|
| 106 |
+
that the Frozen checks largely miss.
|
| 107 |
+
- **The Frozen family alone compresses the ranking.** Across the four models Frozen spans only
|
| 108 |
+
8.7 points (88.52 → 79.79) while Prompt Fit spans 19.5 and Static spans 16.4. Reporting
|
| 109 |
+
Frozen-heavy scores therefore understates the gap between scales.
|
| 110 |
|
| 111 |
### Evaluation artifacts (`eval/`)
|
| 112 |
|
| 113 |
| File | Content |
|
| 114 |
|---|---|
|
| 115 |
+
| [`eval/benchmark_summary_v592.csv`](./blob/main/eval/benchmark_summary_v592.csv) | per-model aggregates: overall, three family scores, Track/Surface splits, Static and Frozen dimensions |
|
| 116 |
+
| [`eval/benchmark_per_case_v592.csv`](./blob/main/eval/benchmark_per_case_v592.csv) | long-form per-case scores (overall + three families) for all 4 models × 200 cases |
|
| 117 |
+
| [`eval/significance_tests_v592.json`](./blob/main/eval/significance_tests_v592.json) | paired bootstrap (10k resamples) + Wilcoxon signed-rank for all 6 model pairs |
|
| 118 |
+
| [`eval/rubric_stats.json`](./blob/main/eval/rubric_stats.json) | composition of all three rubric families and the aggregation rule |
|
| 119 |
| [`eval/reports.html`](./blob/main/eval/reports.html) | self-contained interactive HTML report: model comparison, dimension heatmap, score distributions, per-case tables |
|
| 120 |
|
| 121 |
### Checkpoint selection
|
|
|
|
| 126 |
selection subset** (used only to rank checkpoints, not comparable to the final full-run
|
| 127 |
numbers in the tables above):
|
| 128 |
|
| 129 |
+
| Run | Step | Train loss | subset bench (n=8, Frozen+Prompt-Fit only) | final V5.9.2 (n=200) |
|
| 130 |
|---|---:|---:|---:|---:|
|
| 131 |
+
| 4B AdamW | 200 | 0.2696 | 84.22 | **80.06** |
|
| 132 |
| 4B AdamW | 266 | 0.2682 | 68.35 | – |
|
| 133 |
+
| 4B Muon | 200 | 0.3339 | 83.36 | **71.34** |
|
| 134 |
| 4B Muon | 266 | 0.3349 | 81.27 | – |
|
| 135 |
+
| 9B AdamW | 200 | 0.2518 | 84.40 | **82.14** |
|
| 136 |
| 9B AdamW | 266 | 0.2504 | lowest of the three | – |
|
| 137 |
+
| 27B AdamW | 400 | 0.2067 | 91.19 | **87.04** |
|
| 138 |
| 27B AdamW | 530 | 0.2059 | 86.37 | – |
|
| 139 |
|
| 140 |
The 4B AdamW pair is the clearest example: loss improved from 0.2696 to 0.2682 while the
|
| 141 |
subset score collapsed from 84.22 to 68.35. **Do not pick checkpoints from this family by
|
| 142 |
+
loss.**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 143 |
|
| 144 |
+
The two score columns are not comparable: the selection subset used 8 cases and only two of
|
| 145 |
+
the three rubric families, and it overestimates by 4–12 points, with the largest error on the
|
| 146 |
+
weakest model. It is reliable enough to rank checkpoints within a run, which is all it was
|
| 147 |
+
used for — every number reported elsewhere in this card is the full 200-case V5.9.2 score.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 148 |
|
| 149 |
## Shared training setup
|
| 150 |
|
|
|
|
|
|
|
| 151 |
- Objective: full-parameter supervised fine-tuning (no LoRA / adapters)
|
| 152 |
- Dataset: `designcoder_sft_v2_train` in ShareGPT format (see revision table above)
|
| 153 |
- Chat template: `qwen3_5` with thinking enabled
|
|
|
|
| 155 |
- Sequence packing: enabled, with neat packing (no cross-sample attention)
|
| 156 |
- LR schedule: cosine, warmup ratio 0.1
|
| 157 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 158 |
## Usage
|
| 159 |
|
|
|
|
|
|
|
| 160 |
```python
|
| 161 |
from transformers import AutoModelForCausalLM, AutoProcessor
|
| 162 |
|
|
|
|
| 173 |
hf download xingxm/DesignCoder --include "designcoder_qwen3.8_27b_adamw_bs128_data41287_step400/*" --local-dir ./DesignCoder
|
| 174 |
```
|
| 175 |
|
| 176 |
+
### Inference contract
|
| 177 |
|
| 178 |
These models are trained as tool-using agents, not single-turn generators. A case runs
|
| 179 |
`design_search` → (`websearch`, landing only) → a final answer containing exactly three code
|
|
|
|
| 182 |
instruction and no tool turns does not match the training distribution and will score far
|
| 183 |
below the numbers above.
|
| 184 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 185 |
## Provenance
|
| 186 |
|
| 187 |
Each subfolder additionally ships `trainer_state.json` / `trainer_log.jsonl` (and
|