Make Real
Active
什麼是 Make Real?
Make Real 可將 tldraw 畫布上的手繪 UI 線框圖轉為可運行的 HTML 原型。選取繪圖後點擊 Make Real，GPT-4 Vision 會產生包含 Tailwind CSS 與 JavaScript 的單一響應式 HTML 檔，並在畫布 iframe 中預覽。可在結果上標註後再次產生以迭代。需自備 OpenAI API 金鑰。
如何使用 Make Real?
1. 取得具備 GPT-4 Vision 存取權限的 OpenAI 開發者 API 金鑰。2. 造訪 makereal.tldraw.com。3. 在頁面底部輸入框貼上 API 金鑰。4. 在畫布上繪製介面。5. 選取繪圖。6. 點擊藍色 Make Real 按鈕。7. 數秒後網頁會出現在畫布上——可移動、縮放，或在上方繼續繪製並再次點擊 Make Real 進行優化。
Make Real 核心特點
01
草圖轉可運行 HTML
擷取繪圖選區並傳送至 GPT-4 Vision，產生包含 Tailwind CSS 與 JavaScript 的單一自包含 HTML 檔。
02
畫布內 iframe 即時預覽
產生的原型在 tldraw 畫布 iframe 中渲染，可互動、調整尺寸測試斷點，並將多個版本並排排列。
03
迭代式設計循環
在已產生網站上繪製標註，選取區域後再次點擊 Make Real，根據備註更新原型。
04
複製 HTML 輸出
從預覽選單複製產生的 HTML，在畫布外使用原型。
05
開源入門範本
在 GitHub 上 Fork make-real-starter 範本，基於 tldraw SDK 建構自己的 Make Real 類應用。
Make Real 使用案例
將低保真線框圖轉為可點擊的 UI 原型
在畫布上縮放產生網站以探索響應式版面
透過反覆繪製與產生打磨產品創意
從手繪草圖快速原型化計算機、小遊戲等簡單互動應用
Make Real 常見問題解答
是否需要 OpenAI API 金鑰？
Make Real 會產生什麼？
如何迭代優化結果？
Make Real 是否免費？
Make Real 產品背景及官方連結
Make Real 支援電子郵件和客戶服務聯絡資訊和退款聯絡方式等。
Make Real 支援電子郵件： hello@tldraw.com
更多聯絡方式，請訪問 關於我們頁面(https://tldraw.dev/blog/product/make-real-the-story-so-far/)
Make Real 公司資訊
Make Real 公司名稱： tldraw
Make Real 公司地址： London, GB
更多關於 Make Real, 請訪問 關於我們頁面(https://tldraw.dev/blog/product/make-real-the-story-so-far/)
Make Real 推特
Make Real 推特連結： https://x.com/tldraw
Make Real 領英
Make Real 領英連結： https://www.linkedin.com/company/tldraw
Make Real GitHub
Make Real GitHub 連結： https://github.com/tldraw/make-real
Make Real 定價與計劃
Free
免費免費
- 在 makereal.tldraw.com 免費使用 Make Real
- 需自備 OpenAI API 金鑰
- OpenAI API 按量計費，由 OpenAI 直接收取
- GitHub 提供開源程式碼