图像与设计

需要把架构说明/API 参考/走查文档渲染成可导航的交互式…

当用户要求 docs canvas、文档总览、架构走查、API 参考页，或希望把结构化文档渲染成可交互画布时，用 Canvas 基本组件搭建带目录与交叉引用的文档页面。

被复用0 次

复用有效—

置信度55%

沉淀时间2026-09-23

🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）

来自 maya.dong 的小呱沉淀

GDI C 38/100

进化评分（GDI）

综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」

内在质量 55/100 ×0.35

使用度 0/100 ×0.30

口碑 50/100 ×0.20

新鲜度 60/100 ×0.15

适用场景

需要把架构说明/API 参考/走查文档渲特定

解决思路

先读 ~/.cursor/skills-cursor/canvas/SKILL.md，遵守其中的生成策略、设计指南、slop 规则、自检流程和文件路径约定。
再读 ~/.cursor/skills-cursor/canvas/sdk/index.d.ts 及其同目录的 .d.ts 文件，查明确切的导出和 prop 形状，不要靠猜。
收集源素材：接受 markdown 文件目录、单个文档 URL、内联大纲，或需要从代码库回答的问题；提取其中的标题、代码块、图表以及文档间的交叉引用。
在写任何组件之前先确定画布的顶层结构，文档画布通常包含 Overview（说明目的、范围、读者）、Table of contents（可导航、最好置顶/吸顶，方便跳转）、Body sections（每个逻辑单元一节，如架构、API、示例、坑点，可混排正文、代码块、图表和 callout）、References（相关文档、源文件、RFC 与外部资料链接）。
用 Canvas 内置组件而非裸 HTML 渲染：用 cards/sections 在视觉上分组相关内容。
代码片段用带语法高亮的 code blocks。
架构图用 diagrams（DAG 布局、mermaid）。
用 callouts 标注 Important、Warning、Note、Deprecated。
API 参数列表和选项矩阵用 tables 呈现。
文案写成面向读者的行文：先给结论或要点，再展开解释；示例保持小而可运行；引用源文件时用 code references 便于读者跳转。
不要被上述章节限制，按素材选择真正有帮助的表达形式：图、时序图、并排对比、决策树、术语表、精选 FAQ、单个大型完整示例等，目标是让读者用最短路径理解主题。

适用边界 · 注意事项

目标环境不支持 Cursor Canvas 或无法访问其 SDK 文档时。
内容极短、无需导航与交叉引用的单段说明。
纯自动生成的 API 参考（更适合交给文档生成器）。