tldraw-skill：用自然语言画专业架构图、流程图、序列图 | Claude Code Skill 详解

图片解读

一、可读文字（逐行/逐块）

- 大标题（中心、大号字体）: "tldraw-skill"

- 副标题（位于大标题下方）: "自然语言 → 专业图表"

- 三个按钮/标签（位于副标题下方，左到右）:

- 左按钮: "Claude Code Skill"

- 中间按钮: "6 种图表预设"

- 右按钮: "自检视觉闭环"

二、界面元素 / 可见交互项（事实）

- 深色背景（近黑或深蓝）并带有网格状细线（背景格线）。

- 居中的标题和副标题布局，标题采用渐变色（从蓝到青/绿的渐变）。

- 三个矩形/胶囊形状按钮并排，按钮有不同的颜色调（左侧偏蓝，中间偏青，右侧偏绿），按钮内文字为白色或浅色。

- 右上角有一个向右的小箭头图标（单一箭头，浅蓝/青色）。

- 页面总体为横向布局，元素垂直居中偏下（标题在画面中部偏上，按钮位于标题下方）。

- 没有可见的图表、表格数据或数值（仅文字提示存在“图表预设”）。

三、可见现象的细节（事实）

- 标题为粗体无衬线字体，采用大字号和渐变填充。

- 副标题为较小、浅色无衬线字体，箭头为单字符“→”样式。

- 背景有微弱的网格线与暗色渐变，整体配色以深蓝/青色系为主。

- 按钮呈带边框或填充的圆角矩形风格，按钮之间有间距，视觉上有轻微内阴影或高光效果（使按钮显得有层次）。

- 图像无明显人物、图表或动态元素（静态界面）。

四、无法辨认或不确定的内容

- 无法辨认或确认的精确颜色值（如十六进制颜色码）。

- 无法辨认页面是否为网页、应用内界面或海报（仅从图片无法确定其具体出处）。

- 右上角箭头的具体交互含义（例如是否为下一页/导航按钮）无法仅从静态图片确定。

- 按钮具体的交互功能（点击后的行为）无法从图片确认。

- 若有更小或更浅的文本（页面边缘或按钮周围的注释），在图片中未能清晰读取——但在可见区域内主要文字均可辨认。

五、推测（标注为推测，不作为事实）

- 该界面可能为某产品或工具的启动页 / 介绍页 / 登录前的宣传页（推测基于标题与按钮布局）。

- “tldraw-skill” 可能是产品名字或功能模块名称（推测）。

- “6 种图表预设” 表示该产品/功能可能提供六种预设的图表类型（推测，图片未显示具体图表）。

- “自检视觉闭环” 可能指某种视觉校验或自动化视觉检测功能（推测）。

- “Claude Code Skill” 可能是与 Claude（模型或服务）相关的功能名或按钮标签（推测）。

SkillPI 作品解读

用途：

- 根据来源摘要，tldraw-skill 的目标是让用户通过自然语言描述生成“交付级”结构化图表（如架构图、流程图、序列图、ML/DL 图、ER 图、UML 类图），并能导出为 PNG/SVG，用以节省手工布局与美化的时间。

图片证据要点：

- 图片仅为宣示性界面，包含产品名“tldraw-skill”、副标题“自然语言 → 专业图表”及三项要点按钮“Claude Code Skill”、“6 种图表预设”、“自检视觉闭环”。

- 图像显示的元素证明该项目强调自然语言输入、预设图表类型与视觉自检流程，但图片本身没有显示具体图表示例或运行界面细节。

关联 Skill 的使用步骤（基于来源中可见的功能声明，作为可执行路径示例，非实测复现说明）：

1. 获取代码/技能包：访问项目仓库 https://github.com/Agents365-ai/tldraw-skill 并克隆或下载（来源提供的项目地址）。

2. 准备运行环境：根据仓库说明在支持 Claude Code 的环境中安装或注册该技能（来源列出 Claude Code、Opencode、OpenClaw、Hermes Agent、OpenAI Codex 五个平台的覆盖）。

3. 选择图表预设：在技能交互中选择六种预设之一（架构图/流程图/序列图/ML-DL/ER/UML）。

4. 输入自然语言描述：用简洁明确的文本描述你的系统组件、流程或序列步骤，技能将据此生成结构化图形元素与连线。

5. 质量检查与迭代：技能据称包含视觉自检与最多五轮迭代审查的流程，用于发现并修正箭头、标签、布局问题（来源说明该机制存在，但具体实现细节需在仓库或文档中核验）。

6. 导出成果：完成后可导出为 PNG 或 SVG（来源说明支持导出）。

复现前提与待核实项：

- 待核实项：仓库中是否包含完整的安装与运行说明、依赖项清单、以及在各个平台（尤其 Claude Code）上部署的具体步骤与权限要求。图片与摘要提及的“视觉自检闭环”“五轮迭代审查”“复杂度自适应布局”等机制为来源声明，需要在源码或 README 中核对实现细节与参数（例如每轮审查如何触发、视觉自检覆盖哪些规则）。

- 运行前提：需要一个兼容的 Claude Code 或其他支持平台的运行环境、tldraw 的依赖库、以及合适的 API Key/权限（若平台需要）。

- 风险与限制：不要在未核实代码与依赖的情况下将其直接用于生产环境；关于生成图表的准确性、可编辑性、与现有工具（如 draw.io、mermaid）的兼容性需要实际测试验证。

备注：以上“使用步骤”依据视频摘要与图片文案整理，旨在说明可尝试的复现路径。具体命令、配置与有效性应以项目仓库与官方文档为准，不在此虚构未核实的实现细节或效果。