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
File size: 7,497 Bytes
58ca566 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | # DesignCoder UI Bench 200 — API 模型对比
7 个 API 模型在 DesignCoder 200 题 UI 生成基准上的产物与评分。
每条记录包含:任务 prompt、模型生成的单文件 HTML、渲染截图,以及三族 rubric 的逐条判定。
评测日期 `2026-09-26` · judge = `deepseek-v4.1-flash-expires-on-0910` · 生成状态:完整:每个模型 200 题全部生成并评分。
## 分数
按各模型**已完成题目**平均(覆盖不同时不可横向比较):
| 模型 | 网关 id | 已生成 | Overall | Overall(no-VSD) | Prompt Fit | Frozen | Landing | Dashboard |
|---|---|---:|---:|---:|---:|---:|---:|---:|
| GPT-5.2 | `api_azure_openai_gpt-5.2` | 200 | 89.90 | 88.38 | 88.33 | 86.37 | 92.09 | 85.83 |
| DeepSeek-V4 Flash | `deepseek-v4-flash` | 200 | 89.17 | 87.40 | 74.17 | 71.77 | 86.52 | 94.10 |
| DeepSeek-V4 Pro | `deepseek-v4-pro` | 200 | 88.89 | 87.19 | 78.03 | 78.52 | 87.45 | 91.56 |
| Claude Opus 4.6 | `claude-opus-4-6-v1` | 200 | 86.91 | 84.90 | 73.38 | 73.01 | 82.86 | 94.42 |
| Claude Sonnet 4.6 | `claude-sonnet-4.6` | 200 | 86.12 | 83.98 | 68.90 | 67.66 | 82.62 | 92.61 |
| GLM-5.1 | `glm-5.1` | 200 | 79.66 | 76.77 | 59.69 | 60.70 | 75.23 | 87.91 |
| Kimi-K2.6 | `kimi-k2.6` | 200 | 79.58 | 76.55 | 57.61 | 56.94 | 74.99 | 88.10 |
### 同题对比(200 题,7 个模型均已完成)
覆盖偏差已排除,这组数字可以横向比较:
| 模型 | Overall | Overall(no-VSD) | Prompt Fit | Frozen |
|---|---:|---:|---:|---:|
| GPT-5.2 | 89.90 | 88.38 | 88.33 | 86.37 |
| DeepSeek-V4 Flash | 89.17 | 87.40 | 74.17 | 71.77 |
| DeepSeek-V4 Pro | 88.89 | 87.19 | 78.03 | 78.52 |
| Claude Opus 4.6 | 86.91 | 84.90 | 73.38 | 73.01 |
| Claude Sonnet 4.6 | 86.12 | 83.98 | 68.90 | 67.66 |
| GLM-5.1 | 79.66 | 76.77 | 59.69 | 60.70 |
| Kimi-K2.6 | 79.58 | 76.55 | 57.61 | 56.94 |
**覆盖偏差为什么重要**:dashboard 题的全模型均分比 landing 高约 8 分。题目按文件顺序生成,
所以跑得慢的模型会集中在靠前的 dashboard 题上而显得偏高。跑满 200 题后该偏差消失。
## 目录结构
```
eval/api_baselines_200/metadata.jsonl 每行一个 模型×题目 单元:prompt、分数、产物路径
eval/api_baselines_200/scores_summary.json 按模型/surface/track 的聚合
eval/api_baselines_200/per_case_scores.csv 逐题分数
eval/api_baselines_200/raw/index.jsonl 生成日志(耗时、token、失败归因)
eval/api_baselines_200/raw/shots.jsonl 截图日志(页高、子资源失败、像素判据)
eval/api_baselines_200/raw/judge.jsonl **每条 rubric 的原子判定与理由**
eval/api_baselines_200/pages/<model>/<case_id>.html 模型产物
```
> **本仓库未包含截图。** 分数是由截图评出的,但 PNG 体积约 750MB 故未上传。
> `raw/shots.jsonl` 保留了每张截图的页高、`ink`(非背景像素占比)与子资源失败数;
> 用 `pages/` 里的 HTML 按下方「评测方法」第 2 步的参数即可重新渲染复现。
## 用法
```python
import json
from huggingface_hub import hf_hub_download
meta = hf_hub_download("xingxm/DesignCoder", "eval/api_baselines_200/metadata.jsonl",
repo_type="model")
rows = [json.loads(l) for l in open(meta, encoding="utf-8")]
rows[0]["prompt"], rows[0]["overall"], rows[0]["page"]
# 取某一格的产物(路径相对本目录)
page = hf_hub_download("xingxm/DesignCoder", "eval/api_baselines_200/" + rows[0]["page"], repo_type="model")
```
想换评分口径,不需要重新调用任何模型——`raw/judge.jsonl` 里是逐条判定,重新聚合即可。
## 评测方法
1. **生成**:单轮调用,要求输出**单个自包含 HTML**(CSS/JS 内联)。dashboard 题额外提供
ECharts / Chart.js / Lucide 的 CDN 地址,以免图表类任务因缺绘图库而失分。
`temperature` = 1.0,
`max_completion_tokens` = 128000,
不设 `reasoning_effort`(各模型用各自默认档)。
2. **截图**:headless Chromium,视口 1440×900,整页,高度上限 8000px。
3. **评分**:`deepseek-v4.1-flash-expires-on-0910` 作为视觉 judge,分三族 rubric 独立提问,只看截图。
4. **聚合**:按 `rubrics-fixed.json` 的 `scoring` 规范,顶层槽位等权平均。
### 两种 Overall
规范本身有一处分歧:`rubrics-fixed.json` 说顶层槽位含「每个生效的 Static 维度」,而
DesignCoder 的 `bench_data/README.zh-CN.md` 描述 V5.9.2 历史聚合时写的是「除
Visual System Design 外」。两种都给出:`overall` 按前者,`overall_no_vsd` 按后者。
## ⚠️ 与其它口径对照时的两处差异
1. **judge 不同**(**最主要的差异**)。官方 `run_unified_judge.py` 默认用 Codex CLI 调
`gpt-5.6-sol`;本次用 `deepseek-v4.1-flash-expires-on-0910`,因为运行环境没有 Node / Codex CLI。
跨 judge 的绝对分不可比。
2. **生成契约不同**。本次是单轮、单文件 HTML;DesignCoder 本体是多轮 agent,带
`design_search` / `websearch` 工具,可检索设计 DNA 与图片素材。
**Frozen 族的条数不是差异**:本次每题全量发送 23–25 条 check,与本仓库
`eval/rubric_stats.json` 记录的口径一致(200 题共 4983 条、每题均值 24.91)。
`DesignEvaluator-Skill` 的 README 提到 runner 会截断到 10 条,但那不是这批结果的口径。
这 7 个模型之间内部完全可比(同契约、同 judge、同 rubric、同截图流程)。
### judge 的已知局限
- **同厂偏好未校验**:被测模型中有 DeepSeek 系,judge 也是 DeepSeek 系。
- **judge id 带下线日期**:`expires-on-0910` 是下线日期而非版本号,该模型下线后这批分数
无法用同一把尺子复现。每条判定都记了 judge id 与时间。
- judge 默认档位会把思考预算耗尽并截断 JSON,故以 `reasoning_effort=low` 运行。
## 网关上缺失的模型
原始对比表里有、但网关上调不通的(2026-09-26 实测):
| 模型 | 情况 |
|---|---|
| GPT-5.4 | 两个网关都不可用(2026-09-25 实测)。AI Hub:401 PlatformConfigError 1030「该模型下所有厂商均不支持标准协议」,/standard/v1/ 与 /openapi/v2/ × 带不带 provider=taiji 四种组合全试过。model-eval:`api_azure_openai_gpt-5.4-response-async` 返回 403「Key based authentication is disabled for this resource」,`api_azure_openai_gpt-5.4` 返回 500「构建候选集失败: no available account」。 |
| Qwen3.5-4B/9B/27B | 401 UserModelNotFound;试过 qwen3.5-{4b,9b,27b}[-instruct] 等写法。开源权重模型,网关不提供,要本地推理。 |
## 产物质量守恒
生成成功不等于产物可用。本次发现并**作废重跑**了 4 类渲染故障(全部集中在一个模型):
HTML 未闭合、输出退化为重复串、布局塌陷(body 高度 0 但 DOM 有上千词)、
loading 遮罩未隐藏。判据以**截图像素多样性**为准——judge 看的就是像素。
`raw/shots.jsonl` 里保留了每张截图的 `ink`(非背景像素占比)、`painted_height` 与
子资源失败数,便于把低分归因到产物损坏而非设计能力。
## 来源
题目与 rubric 来自 DesignCoder `examples/designcoder/bench_data`
(`test-prompts-200.jsonl` / `test-rubrics-200.jsonl` / `rubrics-fixed.json`)。
产物由各模型生成,版权与使用条款遵循各模型提供方的规定。
|