SeeCode Skill 技能

技能简介

SeeCode 是一个给 AI 编程代理用的画图技能。它把一句简短描述变成编辑级质量的动态图：一个可以悬停、可以点击、可以一步步走查的 HTML 文件，也可以导出成 SVG、PNG、GIF、MP4 放到任何需要的地方。它兼容 Claude Code、Cursor、Codex、OpenCode 等支持 Agent Skills 的宿主，采用 MIT 许可，零运行时依赖。

核心能力

• 45 种图类型：架构图、高层概览、部署图、依赖图、时序图、流程图，以及各类图表。每种都有自己的动画方式，系统图沿着连线追踪流量，时序图按消息逐条播放，图表从零生长，同时也都能完全静态。
• 交互式 HTML：悬停追踪路径、聚焦面板、路线漫游，适合放进文档或作为分享链接。
• 三种内置主题加品牌学习：浅色是暖纸底、墨色字、一个蓝色强调；深色用柔和的深灰而不是纯黑；另有终端风与手绘风。它还能从你的网站、CSS 设计令牌或一串色值里学出品牌色，自动判断背景、正文、强调与链接色，在对比度不足时加深，保存前先给你看调色板。
• 导入重绘：Mermaid、Graphviz、PlantUML、D2、draw.io、Excalidraw、Structurizr、BPMN、SQL、Prisma、DBML、OpenAPI，以及 CSV 与 JSON 数据，都能按原内容重画成 SeeCode 的版式。一个文件里有多张图时会拆成文件夹，按顺序编号命名并生成 index.html 方便浏览。
• 按用途选格式导出：PDF 与 Word 要内嵌字体的 SVG 加高清 PNG，幻灯片给 SVG 或 PNG，Slack、X、演讲给 PNG、GIF 或 MP4，分辨率会自适应内容，保证最小标签也清晰。
• 数据不过模型：图表的数字直接从 CSV 或 JSON 读取，避免模型改动数据。

安装配置

1. Claude Code 推荐用插件，可以自动跟进最新版：先 /plugin marketplace add Aryanutkarsh/seecode，再 /plugin install seecode@seecode。
2. Cursor、Codex、OpenCode 等宿主：运行 npx skills add Aryanutkarsh/seecode -g。
3. 什么也不装也能用：图自带导出菜单，浏览器里直接出 PNG、JPEG、SVG、GIF、MP4；命令行导 SVG 只需要 Node，其他格式复用本机已有的 Chrome 或 Edge。

使用步骤

1. 装好后直接用自然语言描述系统，例如让 SeeCode 画出下单流程：浏览器调接口，接口写 Postgres，扣 Stripe，再往 Kafka 发一条事件。
2. 继续用口语微调，比如高亮支付路径、换成深色、导出给幻灯片用。
3. 首次在某个项目里使用时，它会问一次是沿用全局设置还是建项目专属配置。
4. 需要时把已有的图或数据丢给它重画，并说明受众，比如为管理层简化。
5. 导出前告诉它这张图要用在哪，它据此决定格式与分辨率。

适用场景

• 架构评审与技术方案：把一张架构图变成能点进去看细节的页面。
• 汇报与路演：给管理层的高层概览图，四个到七个方框讲清一整套系统。
• 文档与知识库：README、Notion、Confluence 里放 SVG，需要动效就配 GIF。
• 数据故事：把表格里的数字画成会生长的柱状图与折线图。
• 社交媒体与演讲：导出 MP4 或 GIF，直接发 Slack、X、LinkedIn。

适用人群

后端与平台工程师、架构师、技术写作者、解决方案顾问、需要在周报里讲清系统变化的技术负责人，以及做汇报却不想手动画框的产品经理。

工作原理

模型不画 SVG。它只写三十到一百五十行 JSON，说明有什么元素、怎么连接、大致放在哪；布局、连线走向、标签避让、字体排印、无障碍与动效全部交给 SeeCode 的渲染器。两者差别在 token 消耗：一张图约一千四百个代理 token，而让模型自己写 SVG 大约要一万五千个。出错返回的是一行一条带修复建议的错误，改的是小补丁而不是整篇重写。视觉上默认编辑风格，只用一个强调色标重点、细线边框、不用阴影，并有一个复杂度预算在内容变多时提醒你砍掉噪音。

什么时候不要用

一串事物的清单该用表格或列表，属性前后对比该用表格，只有一个方框加一行字的时候，直接写那句话就好。

官方链接

• GitHub：https://github.com/Aryanutkarsh/seecode
• 许可：MIT，内置编码器与字体清单见仓库 THIRD_PARTY_LICENSES.md