研究
Figma-to-Code 基准测试 2026
一套开放、可复现的方法论，用于从视觉还原度、语义化 HTML、无障碍性、CSS 质量等 10 个独立维度评估 Figma-to-code 工具。在任何结果产生之前，我们就已公开构建这套方法论。
当前状态：方法论已公开，结果尚未测定
评分脚本已构建完成，并针对合成测试数据完成了单元测试。基准测试数据集中尚未创建任何设计稿，因此包括 MarkupGen 自身在内的任何真实工具都尚未获得评分。一旦有真实结果产生，本页面将会更新，并取消 noindex 设置。
以下详细方法论目前仅提供英文版本。待正式发布真实基准测试结果后，我们将对其进行翻译。
Why this exists
Most "Figma-to-code tool comparison" content online is a single reviewer's subjective take, not a repeatable methodology. This benchmark is our attempt at the opposite: independent, automated where automation is honest, and published with its own limitations attached — including the limitation that no result exists yet.
If a dimension hasn't been measured, this page says so. Nothing here is a placeholder number — every score you'd expect to see is either a real, reproducible measurement or the words "Not yet measured."
Ten independent dimensions
No dimension is collapsed into a single overall score — a tool that's strong on visual fidelity but weak on accessibility should show as two different numbers, not one blended one that hides which is which.
| Dimension | Method | Status |
|---|---|---|
| Visual fidelity | Automated (pixel diff, Figma export vs. rendered HTML) | Tooling built & tested — not yet run |
| Responsive fidelity | Automated + manual, 3 fixed viewports | Not yet measured |
| Semantic HTML quality | Automated (landmark, heading, label rubric) | Tooling built & tested — not yet run |
| Accessibility | Hybrid (axe-core + manual checklist) | Tooling built & tested — not yet run |
| CSS quality | Automated (specificity, duplication, custom properties) | Tooling built & tested — not yet run |
| DOM complexity | Automated (node count, depth, wrapper heuristic) | Tooling built & tested — not yet run |
| Code editability | Manual (standardized modification tasks) | Not yet measured |
| Maintainability | Manual reviewer judgment | Not yet measured |
| Performance | Automated (size) + conditional Lighthouse | Not yet measured |
| Production readiness | Manual checklist | Not yet measured |
"Tooling built & tested" means the measurement script exists, is unit-tested against synthetic fixtures, and is verified to correctly tell good markup from bad markup — but has not yet been run against a real Figma design or a real tool's output, because the dataset below doesn't exist yet.
Dataset: 10 categories, all planned
| Category | Stresses |
|---|---|
| Marketing landing page | Baseline conversion quality |
| SaaS dashboard | Dense data UI, component semantics |
| Pricing page | Repeated component variants |
| Ecommerce product page | Image handling, variant controls |
| Blog/article page | Heading hierarchy, prose semantics |
| Responsive marketing page | Explicit multi-breakpoint frames |
| Component-heavy UI | Figma component/variant consistency |
| Complex Auto Layout | Nested/mixed Auto Layout (adversarial) |
| Form-heavy interface | Labeling, grouping, validation semantics |
| Microsite | Non-grid layout patterns |
Every design will be created specifically for this benchmark — not scraped, not a real customer file, not a paid template — and published under CC BY 4.0 once built, so the dataset itself is inspectable and reproducible by anyone, not just our own scoring of it.
What "not yet measured" actually means here
It means exactly that, and nothing more optimistic: the scoring scripts exist and are proven correct against hand-built test fixtures (a deliberately semantic HTML sample and a deliberately div-soup one — the tools score them 10/10 and 3.5/10 respectively, and 0 vs. 4 accessibility violations), but they have not been pointed at a real Figma design or a real competitor's output. We would rather ship this page half-finished and honest than fabricate a table of numbers that looks complete.
Reproducibility
Every measurement will record its tool version, browser version, OS, and the exact fixed viewport dimensions used (mobile 390×844, tablet 834×1194, desktop 1440×900, all at 1x device pixel ratio). Competitor tools are only included where they can be tested under equivalent conditions — same source design, same scripts, same day — and any tool that can't be tested fairly is marked as such, never silently dropped or scored as a failure.
Limitations we're already committing to disclosing
Pixel-diff visual fidelity isn't the same as perceptual similarity — a 1px shift over a flat color area can register as a larger diff than a human would perceive. Automated accessibility checks (axe-core) catch an estimated 30-50% of real WCAG issues, not all of them. CSS and DOM complexity metrics have no universal "good" threshold — they're only meaningful compared against another tool's output for the same design. Every script in this project ships its own limitations alongside its output, not as a separate disclaimer bolted on afterward.