Lunagraph
Lunagraph · 圖片 · 程式設計
Lunagraph 是一款為設計工程師打造的 AI 設計畫布。你在畫布上繪製畫面、加上狀態與互動，接著複製出與你繪製內容相符的 React 程式碼，或直接送進你的寫程式代理。把它想成 UI 設計工具與 React 程式碼產生器合而為一。它鎖定的是想把設計與交付合在一起、而不是把檔案丟過一道牆的人。
關於 Lunagraph
Lunagraph 是什麼
Lunagraph 是一款邊設計邊寫程式的畫布。它的說法很單純：與其在一個工具裡畫畫面、再到另一個工具重建，你直接畫畫面，並在同一個地方取得 React 程式碼。這家公司把它描述成為了設計工程師而做，也就是同時在意成品外觀與建構方式的人。
它要處理的問題是交接，而這在今天仍是幾乎所有產品流程中最慢的一段。多數團隊仍在跑一套緩慢的循環：設計師完成 mockup，工程師讀它、提出問題，再用程式碼重建。Lunagraph 靠著讓設計與程式碼綁在一起，跳過這一整套。每個狀態、每個互動，然後才是程式碼。這就是整體的概念。
有一個重要的前提，你一開始就該知道。Lunagraph 不會附上一個內建、由它自己訂閱提供的 AI，所以沒有隨附一個不用設定就能依賴的模型。你要自備代理與自備訂閱。這表示你拿到的程式碼品質取決於你連接的代理。這也意味著，Lunagraph 是陪你原本就在付費的工具一起用的夥伴，而不是把它們整箱取代掉。
開始使用
- 在瀏覽器打開 lunagraph.com 的 Lunagraph，登入後建立新的畫布。這只花一分鐘。
- 在畫布上繪製你的第一批畫面，調整樣式直到版面看起來正確。
- 加入狀態、轉場與 props，讓每個元素表現得像真正的元件，而不是靜態圖片。這一步才是關鍵。
- 連接你自己的寫程式代理，無論是在 Lunagraph 的聊天面板裡或透過 MCP，讓它能和你一起在畫布上工作。
- 複製 React 程式碼，或把完成的設計送回你的代理，放進你的程式碼庫。
產品資訊
快速了解 Lunagraph 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 設計工程師：你的一週一半花在 Figma 風格的繪製、一半花在寫 React，而 Lunagraph 讓這兩半在同一塊畫布上發生。如果你已經有代理訂閱，能得到的效益最大。
- 前端開發者：你可以先畫出一個流程，再從中取得真正的元件程式碼。審視回傳結果時，具備一些 React 熟悉度會有幫助。
- 小型產品團隊：當一個人同時負責外觀與建構時，交接步驟純屬額外負擔。Lunagraph 把它拿掉了。
任務
- 把 mockup 變成可運作的元件：畫出狀態與 props，然後匯出 React，而不是手工重建。這樣更快。
- 製作互動流程的原型：串起畫面、加入轉場，並分享連結，讓人在任何程式碼審查之前就能點著走。
- 在設計中重複使用真實元件：透過 MCP 從你的程式碼庫取出元件，用實際的東西來設計，而不是用重畫的複製品。
情境
- 獨自開發副專案、不想另外維護設計檔的個人開發者：畫布與程式碼留在同一個地方。
- 週五探索一個想法、週一把程式碼交回自己手上的設計工程師：工具之間不會遺失任何東西。
- 針對回饋反覆調整：把一個流程展開成圖表、收集意見，然後修改，不必重新製作畫面。
主要功能
設計轉程式碼畫布
Lunagraph 的核心是一整塊畫布，你在此繪製畫面，然後取出相符的程式碼。這家公司把整套流程整理成依序執行的三個步驟：設計畫面、把它接成元件，再以程式碼交付。你畫出版面、加入狀態與互動，覺得對了就複製 React 或送給你的代理。程式碼反映的是你真正設計出來的內容，所以重建這一步就自然消失了。
自備代理
Lunagraph 的聊天面板把你自己的代理直接放到畫布上。選取一個按鈕、一列或一個畫框，代理就知道你指的是什麼。細部修改會落在你指定的位置，而不是某個模糊的地方。你保留原有的代理訂閱。這讓成本接近你原本的支出，但也意味著 Lunagraph 不會自己扛下吃重的工作。
MCP 連接
透過 MCP，你可以把 Lunagraph 接到你已在使用的工具上。帶入你聊過的一個想法、從程式碼庫取出一個元件，或把完成的設計當成程式碼送回去。如果你的工作流程本來就走代理與 MCP 伺服器，這裡幾乎不用什麼設定就能接上。
具備狀態的互動元件
畫布上的元件可以真的運作。你加入轉場與 props，把靜態畫框變成帶有行為的東西。你曾試著在 Slack 上向工程師解釋 hover 狀態嗎？把狀態直接做進成品裡，才是這裡真正的收穫，因為互動是檔案的一部分，而不是訊息串裡的一則註記。
流程原型與分享
你可以畫出一個流程、請聊天協助做成原型，然後把連結傳給團隊，讓審閱者不必安裝任何東西就能一路點完。大家點著走、留下回饋，你再繼續調整，全都在同一塊畫布上。作為原型工具，這比匯出圖片、再寫一段說明畫面怎麼串連要好得多。
擷取即時介面的 Chrome 擴充功能
文件提到一個能擷取即時介面的 Chrome 擴充功能，當你想重新設計的東西已經存在於瀏覽器中時，這就派得上用場。直接抓下現成的內容，比從頭重畫要好。如果你曾為了一點微調就把整個頁面逐像素重建，就會懂得欣賞這個捷徑。
優缺點
優點
- 程式碼與設計放在一起，所以沒有另外一份交接文件要維護。什麼都不會遺失。
- 與你現有的代理與訂閱搭配運作，而不是把你鎖進一套新的。
- 支援 MCP，代表它能和你已在使用的程式碼庫與工具溝通。
- 畫布處理狀態與互動，讓原型可以點擊，而不是靜態的。
缺點
- 你需要自備代理與訂閱才能得到真正的價值。沒有代理時，程式碼這一側很有限，而且沒有內建 AI 可以退而求其次。
- 輸出是 React 程式碼。如果你的技術棧是 Vue、Svelte 或其他，交付的程式碼沒辦法那麼乾淨地直接放進去。
- 我們無法從網站確認目前的價格，所以在依任何數字規劃前，請先查看官方頁面。
常見問題
它是一款在你工作時產生 React 程式碼的設計畫布。你繪製畫面、加入狀態與互動，然後複製程式碼或送給你的寫程式代理。重點是消除設計畫面與建構畫面之間的落差。
相關內容
探索與 Lunagraph 相關的工具、技能與文章。
Lunagraph 替代方案
X Ray Interpreter
X-ray Interpreter · 圖片X Ray Interpreter 是一款以網頁為基礎的 AI 放射科工具，能把 X 光、電腦斷層、磁振造影、超音波與 PET 影像變成白話報告。你上傳一張掃描影像，片刻之間就得到初步的 X 光判讀結果，之後若有需要解釋的地方，還能繼續追問。它的定位是第二意見與學習輔助，而非醫療診斷。
Aieasypic
AIEasyPic · 圖片AIEasyPic 是一款 AI 圖片生成器，能在幾秒內把單純的文字提示變成完成的藝術作品。你也可以用自己照片訓練自訂模型、在現有圖片中替換臉部，並從文字建立短影片片段，全部都能在瀏覽器中完成。它適合想要快速視覺素材的休閒創作者，也適合想打造個人模型、又不想碰任何程式的業餘玩家。
Chargen
Chargen · 圖片Chargen 是一款 AI 角色生成器與世界觀建構工具，專為《龍與地下城》與其他桌上角色扮演遊戲打造。它能將一句構想變成手繪風格的肖像，在同一場工作階段中生出 NPC、怪物、地圖與遭遇，並把每隻生物的細節放在手邊。桌上角色扮演美術這部分靠一套名為 Gold 的點數系統運作，而文字生成器則對所有人保持免費。