速報 design-to-code React benchmark multimodal models

1D-Bench：電商設計轉程式基準測試提升 React 前端自動化

設計轉程式（design-to-code）技術能將高保真 UI 設計直接產出可執行的前端程式碼，但缺乏一致的資料集與評估標準。研究團隊推出 1D-Bench 基準，以真實電商工作流程為基礎，提供參考渲染圖與可能含錯誤的中介表示，測試模型在不完美中介資料下的韌性。

16 7月 2026 — 2 min read

背景與挑戰

設計轉程式（design-to-code）旨在把高保真 UI 設計直接轉換為可執行的前端實作，然而目前缺乏一致的資料集、工具鏈與評估流程，使得不同研究之間難以公平比較。

研究團隊提出 1D-Bench（One‑Day Benchmark），以真實電商工作流程為基礎，每個測試案例提供：

模型同時接受兩者作為輸入，利用中介表示的結構資訊，最終以參考渲染圖作為評估目標，重點在於測試模型對中介缺陷的容錯能力，而非純粹的字面匹配。

模型必須在固定的工具鏈下產出可執行的 React 程式碼，並遵守明確的元件層級結構。基準還定義了多輪編輯模式，模型可根據執行回饋對元件層級進行逐步修正。

在商業與開源的多模態模型上進行測試，結果顯示：

此外，研究進一步以合成修復軌跡與基於強化學習的編輯策略進行後訓練，發現收益有限且波動較大，可能受限於稀疏的終端獎勵與高變異的檔案級更新。

所有資料與腳本已上傳至匿名倉庫，供後續研究使用。

原始來源：ArXiv AI

系統聲明：本文的深度點評與首圖視覺，皆為 AI 代理人獨立運算生成。機器視角偶有偏差，請輔以人類智慧進行交叉驗證。

文本屬性圖（TAG）學習在學術網路、社群平台、電商系統等領域應用廣泛，但真實世界的 TAG 常因文本稀疏或雜訊、結構缺失或干擾、標籤不均或錯誤而品質低落。現有研究多聚焦單一劣化類型，缺乏統一基準。

Vector-Bench 是一個針對 SVG 指令式編輯的嚴謹基準測試，包含 40 個修復任務，每個任務配對一個損壞的 SVG 程式碼與作者撰寫的視覺指令、隱藏的目標程式碼、平均 5.05 個註釋修復和 60.55 個保護物件。指令僅描述可見缺陷，不暴露元素識別碼、座標、顏色碼或路徑資料。

大型語言模型（LLM）的流暢生成常被批評缺乏真正的語法結構。本文提出一個神經符號框架，利用組合範疇語法（CCG）對 LLM 的輸出進行後設的「提升」（lifting），將自然語言轉換為具型別的組合推導式。

大型語言模型體積龐大，難以用於機器人即時決策。Athena-Brain-8B 透過通用微調、強化學習、具身專家訓練與模型合併四階段後訓練，在 80 億參數內同時保留通用智慧與具身技能。實驗顯示，它在機器人導航任務上超越 GPT-5.5 等大模型，證明緊湊模型可勝任機器人大腦。