用途：根据用户描述的组件、连接与技术栈，生成深色科技风格的架构图，输出为自包含的独立 HTML 文件，内联 SVG 图形，无外部工具、API 密钥或渲染库，浏览器打开即可离线查看。适合软件系统架构（前端/后端/数据库分层）、云基础设施（VPC、区域、子网、托管服务）、微服务/服务网格拓扑、数据库与 API 映射、部署图等懂技术基础设施的题材。
主要能力与视觉规范：按语义配色区分组件，例如前端青色、后端翠绿、数据库紫色、AWS/云琥珀色、安全玫红、消息总线橙色、外部灰色；字体使用 JetBrains Mono，背景为深色（#020617）叠加 40px 网格；组件为圆角矩形（rx="6"）、1.5px 描边，并采用双矩形遮罩避免半透明填充透出箭头；箭头早绘以置于组件之下，安全流用玫红虚线，安全组用虚线框，区域用更大的琥珀色虚线框；图例必须放在所有边界框之外。
使用方式：用户描述架构后生成 HTML，用 write_file 保存为 .html（如 ./[project-name]-architecture.html），再建议用户在浏览器打开，预览命令如 macOS 用 open ./my-architecture.html，Linux 用 xdg-open ./my-architecture.html；可加载模板 skill_view(name="architecture-diagram", file_path="templates/template.html") 作为结构与组件示例参考。
限制：不擅长物理、化学、数学、生物等科学题材，也不适合实物、平面图、叙事旅程、教科书式视觉、手绘白板草图（可考虑 excalidraw）和动画讲解；若存在更专门的技能应优先使用。输出要求为单文件、无外部依赖（仅可加载 Google Fonts）、不使用 JavaScript（动画用纯 CSS 实现）、兼容现代浏览器。该技能基于 Cocoon AI 的 architecture-diagram-generator（MIT）。