tldraw
一个功能强大的无限画布React SDK，用于构建绘图、白板等应用。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tldraw。 它的用途是：一个功能强大的无限画布React SDK，用于构建绘图、白板等应用。 完整的 Skill 内容见：https://321skill.com/skills/tldraw/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用React开发一个在线产品设计讨论工具，需要嵌入一个可多人实时协作的白板，支持画箭头、贴图片和评论。请帮我基于tldraw SDK设计核心组件结构，并实现一个简单的自定义‘便签’形状。”，它会提供使用tldraw的组件集成方案、配置实时协作后端（如使用@tldraw/sync）的步骤，并给出创建自定义形状（StickyNoteShape）的代码示例。
介绍
tldraw是一个专为React设计的无限画布引擎，旨在解决开发者在构建交互式绘图、白板、图表或任何需要自由画布功能的应用时，从零搭建底层交互和渲染引擎的复杂性问题。它提供了一个功能完备的基础，开发者可以专注于业务逻辑和自定义体验。
使用上，开发者通过npm安装tldraw包，即可在React应用中引入<Tldraw />组件，快速获得一个功能齐全的白板界面。更重要的是，它提供了丰富的API和扩展点，允许开发者创建自定义形状、工具、UI组件，并与AI模型、实时协作服务等深度集成，从而构建出独一无二的画布应用。
这个SDK非常适合前端开发、全栈开发以及智能体开发者，特别是那些需要在产品中嵌入绘图、协作白板、创意原型设计或可视化编辑功能的团队。产品经理和UI设计师也可以利用其快速原型能力验证产品概念。
建议在项目初期就评估是否需要tldraw提供的核心画布能力，而非在后期集成。虽然它开箱即用，但要充分发挥其潜力，需要投入时间学习其扩展体系。对于简单的静态图表需求，可能有些重量级。
核心特点
与同类画布库相比，tldraw的核心区别在于它提供了一个生产级的、高度可扩展的“无限画布”引擎，而非简单的绘图API。它原生内置了实时协作、压力感应绘图、丰富的形状和绑定系统，并且其DOM画布渲染支持嵌入任何网页内容（如YouTube、Figma），使其能作为复杂应用（如Miro、Figma的竞品）的底层技术栈。
注意事项
对于只需要简单静态图表或轻量级SVG绘图的场景，使用tldraw可能过于复杂和庞大。
常见问题
tldraw和Excalidraw有什么区别？
Excalidraw是一个开源的绘图应用，而tldraw是一个SDK库。tldraw旨在让你基于它构建自己的应用，提供了更深度的自定义和扩展能力，并内置了如实时协作等企业级功能。
tldraw支持移动端吗？
是的，tldraw经过设计，可以在桌面、触摸屏、平板和移动设备上的任何浏览器中良好工作。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tldraw/raw/index.md 读取 tldraw 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tldraw/raw/index.md（查看排版版本）