用途：生成技术架构图与系统示意图，输出为独立 HTML 文件，CSS 内嵌、图标用内联 SVG，无外部依赖。
主要能力：流水线流程图（数据管道、CI/CD、ETL）；分层/技术栈图（技术栈、OSI 模型、基础设施）；组件图（微服务、系统架构）；前后对比分栏；时间线图（路线图、迁移阶段）；指标卡行（KPI 汇总）。
设计系统：默认深色模式，提供颜色令牌（如 --bg-deep、--accent-blue、--accent-green 等），每个流水线阶段或层使用不同强调色，标签用 --text-secondary，连接线与边框用 --border-subtle；语义色中绿色表示健康/成功、红色表示错误/告警、橙色表示警告。字体使用 system-ui 与 monospace，画布默认宽 1200px、可响应至 800px，内边距 48px。
使用方式：安装命令为 git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/tech-diagram ~/.claude/skills/。文件命名约定为 {project}-{diagram-type}.html，单文件内联全部 CSS 与 SVG，适配 800-1400px 宽度。完整 HTML/CSS 模式与示例见 REFERENCE.md。
原则与限制：一图一概念，需要两张就建两个文件；所有框、箭头、区域都要有标签；用 CSS grid 或 flexbox 保持间距一致，不用绝对定位；不使用位图、外部 CSS/JS 和以渐变为主填充；单行不超过 8 项；不做无信息量的装饰元素；需包含 @media print 浅色背景覆盖以适合打印。
适用场景：技术文档、架构说明、迁移方案、KPI 汇报等需要自包含可打印图表的场合。收费、价格与平台支持等资料暂未提供。