[ 開源專案 ] open-design-frame：透過 Coding Agent 直接生成設計稿，無縫整合畫布、檢視器與 DESIGN.md

摘要

open-design-frame 是一個讓 Coding Agent 直接生成 React 設計稿的開源工具，整合畫布、檢視器與 DESIGN.md。使用者可透過程式碼定義設計，並讓 Agent 直接修改原始碼，解決設計與開發不同步的問題。

A tool that lets coding agents generate and edit React-based design frames directly from code, integrating design rules and version control.

摘要、重點與章節標題由語言模型整理，細節（誰說的、數字、先後）可能有誤；要引用請以原始內容為準。

重點

• 設計稿以 React 元件形式存在，Agent 可直接編輯與提交。
• 整合 DESIGN.md 與 tokens，讓設計規則與程式碼同步。
• 支援 MCP 協議，讓外部 Agent 操作設計畫布。

提到的工具與公司

• React
• Claude Code
• Google Antigravity

適合誰看

產品經理、工程師或需要快速驗證設計的原型團隊。

摘要依據

講者

Simon Liu

依據

文章全文

為什麼排在這裡

人氣

0.75

新鮮

0.89

在主題頁與搜尋結果裡，名次由相關、人氣、新鮮三個分數決定；這一頁沒有搜尋的關鍵字，所以沒有相關分數。排序怎麼算

相關內容

• [ 開源專案 ] open-doc：借鑑 open-slide 專案，讓 Antigravity 和其他 Coding Agent 完美接管文件排版與生成文章 ・ Simon Liu
• 设计圈的 Claude Code 时刻来了文章 ・ 寶玉
• 我逆向了Claude Design！一句话帮你生成任何出色设计，开源后狂揽GitHub 1.6万+stars！影片 ・ Alchain花生 ・ 16 分鐘
• How To Design In The Agent Era影片 ・ Y Combinator ・ 56 分鐘
• 🚀程序员必备设计神器！Claude Code原生支持Claude Design！一个/design命令，从UI原型到代码同步，全流程演示，AI设计到开发终于闭环了！小白也能做精美UI！挑战Figma！影片 ・ AI超元域 ・ 11 分鐘
• Diagram-Design 开源智能体可编辑画图Skills影片 ・ 小工蚁创始人 ・ 4 分鐘