技能介绍

qiaomu-tldraw-skill 是把「需求、草图或参考图」变成真实可编辑、可交互、可验证的 tldraw 画布或 SDK 应用的技能,作者是开发者 / 设计师 joeseesun。

它的定位很明确:不做只会吐静态图片的 tldraw 生成器,而是交付能直接编辑、重启后仍然可用、经过完整验证的成果——一份可编辑的 tldraw 画布文件,或一个可运行的官方 tldraw SDK 项目。

与仅生成静态图片的普通 tldraw 创作工具相比,它聚焦在「交付真实可用的成果」这件事上,并且把官方能力整合进技能自身:内置 tldraw 官方离线 Canvas API、官方 CLI 与 LLM 友好文档,自带完整验证流程,技能本身不需要额外第三方依赖,可以直接集成到 AI Agent 的工作流里使用。

适用场景

  • 需要把一张参考截图复刻成可完全编辑、连线真实绑定的 tldraw 画布时。
  • 需要在现有 tldraw 画布中补一个可点击的交互演示,并要求重启后仍能正常工作时。
  • 需要生成 tldraw 官方 SDK 项目脚手架,从零起一个可运行的官方 SDK 项目时。
  • 需要查 tldraw 官方文档、确认当前 custom ShapeUtil 的正确写法时。
  • 需要做 SDK 版本迁移,把画布或项目迁到新的 SDK 版本时。

核心能力

  • 原生可编辑画布创作:产出的是真实可编辑的 tldraw 画布,不是一张静态图。
  • 参考图语义化复刻:把需求、草图或参考图复刻成可编辑、连线真实绑定的画布,并可提供对比裁切图。
  • 交互动效实现:在画布中加入可点击、可交互的演示内容,且重启后仍然可用。
  • SDK 项目脚手架生成:生成可运行的官方 tldraw SDK 项目。
  • 官方文档离线检索:同步 tldraw 官方文档,检索当前 custom ShapeUtil 等 API 的正确编写方法。
  • SDK 版本迁移:支持把已有项目迁移到新的 SDK 版本。
  • 自带完整验证流程:交付前经过完整验证;技能本身无需额外第三方依赖。

效果预览

可编辑Tldraw画布与SDK应用创作技能

你会获得

  • 可直接编辑、重启后仍可用、经过完整验证的 tldraw 画布文件;
  • 或一个可运行的官方 tldraw SDK 项目。

使用示例

在 Cola 中安装:

colaos://skills/install?slug=qiaomu-tldraw-skill

可以这样对它说:

把这张参考截图复刻成可完全编辑、连线真实绑定的tldraw画布,并提供对比裁切图
在现有tldraw画布中添加一个可点击的注意力机制交互演示,重启后仍能正常工作
同步tldraw官方文档,检索当前custom ShapeUtil的正确编写方法