Make Real

Make Real 是什麼？

Make Real（儲存庫：tldraw/make-real）是與 tldraw SDK 相關的開源專案。其核心目的是讓你「畫出 UI 並讓它成真」，透過提供入門範本和支援程式碼，將你設計的 UI 轉換成應用程式中的功能元素。

該儲存庫自 2026 年 2 月 20 日起已被擁有者封存，因此為唯讀狀態。頁面也引導讀者前往即時示範，以及建置專案版本與透過部落格文章學習更多資源。

主要功能

• 使用 tldraw SDK 建置，提供繪圖式 UI 工作流程的基礎。
• 入門儲存庫方式：複製儲存庫來建置你自己的 Make Real 版本。
• 包含示範體驗（makereal.tldraw.com），來自儲存庫 README 的參照。
• 以 TypeScript/Next.js 程式碼庫結構（包含 next.config.js、TypeScript/TS 檔案及 package.json）。
• 儲存庫包含程式碼品質與樣式支援檔案（例如 ESLint/Prettier 和 Tailwind 設定檔）。

如何使用 Make Real

1. 使用 makereal.tldraw.com 的即時示範，了解「畫 UI 並讓它成真」的流程。
2. 從 GitHub（tldraw/make-real）複製入門儲存庫，建置你自己的版本。
3. 遵循專案 README 及相關資源（包含參照的部落格文章），了解示範運作方式及如何調整。
4. 透過儲存庫頁面提到的 Discord 社群，分享你的建置成果。

使用情境

• 原型設計 UI 互動流程： 以視覺方式設計 UI，並使用專案基於 tldraw SDK 的方法，將其連結至應用程式行為。
• 建置自訂「UI 畫布」應用程式： 以儲存庫為起點，實作你自己的繪圖與渲染工作流程。
• 探索繪圖介面如何驅動邏輯： 從程式碼結構學習，了解繪圖環境中的 UI 元素如何轉譯成功能應用程式行為。
• 教學或記錄產品互動： 使用示範及底層專案，說明設計的 UI 如何成為可執行的體驗。
• 在 TypeScript/Next.js 中實驗 UI 轉應用程式管道： 以現有的 Next.js + TypeScript 設定作為相關原型的範本。

常見問題

• 這個儲存庫有積極維護嗎？ 沒有。該儲存庫於 2026 年 2 月 20 日被擁有者封存，現為唯讀狀態。

• 哪裡可以線上試用專案？ 儲存庫頁面指向 makereal.tldraw.com 的示範。

• 想建置自己版本該複製什麼？ 頁面指出，你可以複製提供的入門儲存庫來建置你自己的 Make Real 版本。

• 使用什麼技術建置？ 儲存庫內容顯示，它使用 tldraw SDK 建置，並採用 TypeScript 程式碼庫與 Next.js 設定。

替代方案

• 使用 tldraw 建置自己的 UI 原型設定： 而非直接使用此封存儲存庫，你可以從 tldraw SDK 概念開始，實作從繪圖元素到應用程式行為的對應。
• 採用一般原型轉程式碼方式： 若目標是「將 UI 設計轉為可運作畫面」，可使用其他專注生成或串接 UI 行為的原型工作流程，並自行處理設計轉邏輯的轉譯。
• 建立編輯驅動的 UI 系統： 若想要類似的「畫圖驅動」工作流程，可考慮將 UI 視為可編輯狀態的替代方案（例如狀態驅動 UI 建置器），而非遵循此特定專案結構。
• 尋找基於圖表/畫布編輯的積極維護 UI 建置器： 由於此儲存庫已封存，「畫布編輯器驅動應用程式行為」類別的新工具可能更適合長期專案，視你的具體需求而定。