開源項目
Agent Editable UI
AI 寫好頁面，人還能直接點選修改嗎？這個項目透過具體案例，探討如何只改一張卡片、替換展示商品，以及 Agent 再次調整版面後怎樣繼續編輯。
Agent 寫好了頁面，現在只改第二張卡片
Agent 可以編寫元件、在頁面上重複使用元件，也可以讀取業務資料來展示商品。 接下來，用戶想直接點擊標題改文案、調整某張卡片的顏色，或更換展示商品。 編輯器需要弄清楚：這次操作，究竟應該改哪一處程式碼或資料？
Agent Editable UI 分享 Foundax 對這個問題的工程思考， 讓 Agent 寫出的頁面可以繼續透過程式碼和畫布共同修改，並隨業務資料更新。
看起來相似的操作，實際修改的位置不同
| 用戶想做甚麼 | 應該修改甚麼 |
|---|---|
| 只改第二張卡片的標題 | 修改這張卡片的內容，保留第一張卡片 |
| 修改價格的顏色 | 修改選定範圍的樣式，保留售價和計算方式 |
| 展示另一個商品 | 更換頁面引用的商品 |
| 調整商品售價 | 透過業務服務修改商品記錄 |
找到顯示文字或原始碼行號，只完成了其中一部分。 編輯器還需要知道這個值來自哪裏，以及用戶想改一個實例，還是所有使用同一元件的位置。
Agent 再次修改頁面，之前的編輯怎麼辦？
用戶改過卡片之後，Agent 重新排列了版面，後台又更新了商品價格。 下一次編輯，需要基於最新程式碼，在仍能確認對應位置時保留用戶改動，同時繼續從商品資料讀取售價。
工程設計說明了怎樣追蹤這些關係、把修改關聯至正確的項目版本， 以及舊的目標無法確認時，怎樣讓用戶重新選擇。
儲存庫裏可以讀到甚麼
- 案例推演：只改第二張卡片、替換商品，以及程式碼或資料變更後怎樣繼續編輯。
- 普通 TSX 與合成商品資料，用來逐步解釋案例。
- 工程設計：內容來源怎樣追蹤、修改範圍怎樣確定、項目版本怎樣處理。
這是包含靜態原始碼案例的設計參考。完整編譯器、預覽執行環境和可視化編輯器不在本次開源範圍內， 儲存庫沒有安裝步驟或可執行的編輯器 Demo。
分享你遇到的編輯問題
如果你正在開發 AI 建站、CMS 或可視化開發工具，歡迎帶來一個具體案例： 用戶點選了甚麼、想改甚麼、哪些內容應該保留。 可以從儲存庫的貢獻指南和 Issues 開始討論。
在 GitHub 閱讀設計與案例。 如果關注 Agent 怎樣操作業務資料，可以閱讀 Agent Business Workspace。