用途：为 Next.js 文档绘制配图，复现已发布文档的视觉语言（浅灰网格背景、带边框和柔和阴影的面板、灰色骨架 UI、灰色箭头及含义固定的小型强调色板），从代码生成 SVG 与 HTML，再截图输出浅色/深色 PNG，供 mdx 的 <Image> 引用。
主要能力：提供画布、面板、树行、浏览器窗口、空洞、徽章等图元（scripts/lib.mjs），生成各图模块的 SVG+HTML（scripts/gen.mjs），以 2x 截图浅色与深色 PNG（scripts/render.sh），并从墨迹测量边距（scripts/measure.py）。常见图型包括文件树到 URL、文件到组件层级、带骨架 UI 的浏览器窗口、带徽章的区域图、区域图等。
使用方式：先读 mdx 的 <Image> 块获取文件名、宽高与 alt 文本（即需求），并参考文档中已发布图片（图片托管在 blob 存储，不在仓库内，可用 grep 与 curl 获取）。将 scripts/ 复制到仓库外的临时目录，新增 diagrams/<name>.mjs，用 lib 图元组合绘制，从命名常量布局并居中。运行 ./render.sh 渲染，非 macOS 或 Chrome 路径不同时设置 CHROME=/path/to/chrome ./render.sh。用 python3 scripts/measure.py light/<name>.png 测量边距，对照 review-checklist.md 与参考图检查后交付。
限制：画布宽 1600 CSS px，页面会缩放；mdx 声明的高度优先，上下边距相等、左右边距相等（4px 内）。颜色在单图内含义唯一，窗口内已渲染 UI 始终为灰色骨架。代码与路由用 Geist Mono（需本地安装，回退 ui-monospace），其余用 Inter。产品截图（DevTools、打包分析器、系统对话框）需从真实 UI 截取，本技能不绘制。上传 blob 存储由文档维护者手动完成，交付物是 PNG 而非提交。资料未提供收费、价格与平台信息。