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 交互流程： 使用基于 tldraw SDK 的项目方法，视觉设计 UI 并连接到应用行为。
• 构建自定义“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 构建器： 由于此仓库已归档，“画布编辑器驱动应用行为”类别的更新工具可能更适合长期项目，视具体需求而定。