用途：生成系统级架构图的 HTML 文件，回答“谁调用谁、谁拥有数据、数据在哪、X 宕机时什么受影响”等问题，适用于微服务地图、依赖图、部署拓扑、数据流、集成图与分层架构图。
主要能力：以行内 SVG 出图并附必要的图例；用实线表示同步调用、虚线表示异步、点线表示可选/回退路径、粗线表示高流量、红色表示故障或问题区域；用矩形表示服务、圆柱表示数据存储、六边形或胶囊表示队列、云形表示第三方、人形表示用户；颜色可按域、关键性或归属团队编码，须有明确含义。支持在同一 HTML 文件中做多级缩放：顶部系统地图、下方区域细看、再下方个别服务细看，并从顶部链接到详情。可在元素旁加边注，如“单点故障”“吞吐约 10k req/s”“归属平台团队”“已弃用”。输出为完整 .html 文档，含内联 CSS 与 JS，无构建步骤，移动端在约 700px 以下折叠为单列，页脚带最后更新时间，图表可打印且满足 WCAG AA 对比度。
使用方式：先用 Skill 工具调用 html-skills:html-skills-listen；若返回 URL，则按原样注入为 window.CLAUDE_SUBMIT_URL（含 ?t= 查询串），若报告 web/sandbox 模式则省略该行。文件命名为 <system>-architecture.html，用 <pre><code> 放代码、<table> 放数据、行内 <svg> 放图，不写截图；通过 textContent 与 createElement 构建 DOM，不要用变量设置 innerHTML。复制功能使用共享的 copyToClipboard。可加“Publish to Claude.ai”按钮调用 submitToClaude，但不得替代本地文件。
限制：资料未提供具体安装命令、收费信息或平台支持范围；SVG 文本不自动换行，需按标签长度设定形状尺寸或改用 foreignObject。缺少图例、只画正常路径、图过期无日期、每级都塞满细节、隐藏归属等均为反模式。