Lunagraph

Lunagraph 是什麼？

Lunagraph 是一個使用真實 HTML、CSS 和 React 代碼來建立使用者介面的設計畫布。其核心目的是幫助團隊以保持設計與實際部署代碼一致的方式設計與實作 UI，減少「交接」落差。

Lunagraph 不將設計視為需由他人轉譯成元件的獨立交付物，而是將交付物定位為代碼本身，並由 Claude Code 提供 AI 協助。

主要功能

• 直接設計成真實代碼 (HTML、CSS、React)： 畫布上的工作會反映在實際標記與元件中，因此輸出與實際運行的內容相符。
• UI 團隊零交接工作流程： 平台設計用來支援設計師、產品經理、開發者和代理程式之間的一致性，無需從設計到實作的轉譯步驟。
• Claude Code 驅動的上下文感知協助： AI 夥伴能考量完整情境，包括畫布與既有代碼庫。
• 畫布 + 聊天 + 本地儲存庫往返： 聊天可存取畫布與本地代碼庫，工作流程包含直接實作變更至儲存庫並預覽結果。
• 即時預覽與截圖比對： 工作流程在即時 iframe 中預覽，並使用設計與輸出的截圖進行比對。
• 從設計變更更新儲存庫元件： 範例包括產生如 PricingCard 元件，並更新如功能比較表格元件的檔案。

如何使用 Lunagraph

1. 從設計畫布開始： 在畫布上開始設計 UI 元素。
2. 使用整合聊天取得實作協助： 以參照畫布與儲存庫脈絡的方式請求變更。
3. 讓 AI 實作至你的儲存庫： 工作流程包含直接寫入本地代碼庫。
4. 預覽與驗證： 使用即時 iframe 預覽，並截圖畫布/設計與產生的 UI 輸出進行比對。
5. 迭代元件： 透過請求重構或功能調整（例如，將側邊欄拆分成較小元件）來套用進一步更新。

使用情境

• 設計師到實作的 UI 建立： 設計師在畫布上建立 UI 版面，並確保產生的代碼使用真實 HTML/CSS/React，而非獨立設計檔案。
• 無交接摩擦的團隊工作流程： 混合團隊（設計、產品、開發與代理程式）在相同工作流程中合作，減少角色間的轉譯步驟。
• 使用 AI 協助重構複雜元件： 當元件過於複雜（例如側邊欄）時，聊天可協助重構為較小元件，並加入如收合切換等行為。
• 從設計意圖更新既有頁面： 使用截圖或調色盤參考來更新 UI 區段，使產出符合預期版面與樣式。
• 從畫布設計建立定價/功能 UI： 產生定價卡與功能表格元件，然後串接至頁面版面並更新既有表格標記。

常見問題

• Lunagraph 產生或處理什麼代碼？ Lunagraph 被描述為產生與處理真實 HTML、CSS 和 React 代碼。

• Lunagraph 是否依賴獨立設計檔案交接？ 網站強調「零交接」工作流程，交付物即為代碼本身，而非需轉譯的設計檔案。

• 工作流程中「powered by Claude Code」是什麼意思？ 內容指出 Claude Code 作為創意設計夥伴，考量畫布與本地代碼庫，透過聊天支援實作任務。

• 使用者如何驗證設計與輸出是否相符？ 工作流程包含在即時 iframe 中預覽，並截圖畫布與渲染結果進行比對。

• AI 是否能讀寫本地儲存庫？ 頁面包含「AI File Access」範例，顯示檔案系統路徑用於專案外讀寫，暗示本地儲存庫整合，但未提供更多細節。

替代方案

• 通用設計工具 (Figma 風格) + 獨立的開發實作： 這會讓設計與程式碼分屬不同工具和工作流程，需要將設計檔案轉換成元件。
• 以程式碼為主的 UI 建構器 (React 元件編輯器)，無設計畫布： 這些工具專注於直接在 UI 程式碼中建構，但可能無法提供專為捕捉與傳達設計意圖而設計的畫布。
• 整合至 IDE 的 AI 程式碼助理： 這些工具能協助產生或重構程式碼，但通常不會結合設計畫布、即時 iframe 預覽比對，以及本文所述的「畫布 + 聊天 + 儲存庫」迴圈。
• 匯出元件或樣式的 UI 原型工具： 這些工具旨在彌合設計與實作的差距，但方法仍可能涉及匯出或轉換，而非以程式碼作為主要產出。