暗色架构图

生成独立的 HTML 文件，内嵌 SVG 架构图，采用深色、技术感强的视觉风格。整体风格为“赛博朋克工程风”——深板岩灰背景、彩色分层边界、等宽字体排印、发光点缀效果。所有通过本技能生成的图表均须符合同一设计系统，视觉统一。

适用场景

当需绘制满足以下要求的技术架构图时，应使用本技能：

• 多层系统可视化（例如：表现层 → 逻辑层 → 数据层）
• 组件关系映射，并以带箭头的连线表示数据/控制流
• 编号化的执行步骤序列
• 深色主题，高对比度，且各层使用颜色编码区分

核心设计理念

设计语言通过色温与不透明度（而非仅尺寸）传达层级结构。每个架构层分配专属色相；层内卡片使用该层主色低透明度填充（fill），全饱和度描边（stroke）。文字层级严格遵循五级灰度系统。整体观感应如“夜间灯火通明的控制室”——背景深邃，但信息高度可读。

文件结构

始终输出单个独立 HTML 文件，内联 `

设计令牌摘要

完整令牌规范详见 references/design-tokens.md。关键令牌如下：

分层色彩体系

每个架构层对应一个专属色相。新建图表时，请按视觉优先级顺序，将您的架构层映射至以下颜色：

组件模式

完整组件库详见 references/component-patterns.md。关键模式如下：

层边界

{emoji} {Layer Name}
{description}

卡片组件

{emoji} {Title}
{description}
{metadata}

编号步骤圆圈

{N}
{Step Name}

流向箭头

LLM 执行区（虚线边界）

排版规则

• 字体栈：'JetBrains Mono', 'PingFang SC', monospace
• 标题（页面页眉）：22px，字重 700，颜色 #f8fafc
• 层标签：11px，字重 700，使用对应层颜色
• 卡片标题：10–11px，字重 600，使用对应层颜色
• 正文：8–9px，字重 400，颜色 #94a3b8
• 图注/元数据：7–8px，字重 400，颜色 #64748b
• 幽灵文本：6–7px，字重 400–600，颜色 #475569

SVG 规范

• viewBox：使用较大 viewBox（例如 0 0 1420 1400）保障细节精度；SVG 通过 width: 100%; height: auto 实现响应式缩放
• 网格图案：40×40 像素网格，描边色 #1e293b，不透明度 0.5
• 圆角半径：层边界用 rx="12"，卡片用 rx="8"，小型元素用 rx="6"，标签/徽章用 rx="4"
• 箭头标记：在 `` 中定义 —— 中性色（#64748b）、橙色、青色变体
• 渐变：对特殊区域（如编排器层、LLM 领域）使用 `` —— 始终保持柔和（不透明度范围 0.02–0.15）
• 描边样式：主边界用实线；LLM 区域用 stroke-dasharray="6,3"；占位符/可展开区域用 stroke-dasharray="4,3"
• 间距：层间间距 15–25px，同层卡片间间距 10–15px
• L 形布线：箭头须以直角弯折方式布线，避免穿越其他内容区域 —— 禁止斜向穿过其他组件

摘要卡片（图表下方）

在 SVG 下方添加摘要卡片网格，呈现关键架构决策：

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 18px 20px; }

每张卡片包含一个与其所属层颜色一致的色点、标题及项目符号列表。

页眉模式

页眉须包含一个脉动青色圆点及副标题：

.header h1::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  animation: pulse 2s infinite;
}

检查清单

在最终定稿任一图表前，请逐一核验：

• 背景色为 #020617，非纯黑或深灰
• 所有卡片填充色均为 #0f172a，并叠加彩色半透层
• 文字层级严格遵循五级灰度系统
• 每一层均使用调色板中唯一指定的颜色
• 编号步骤使用 #0ea5e9 填充的圆形，文字为白色
• 箭头采用 L 形布线，无斜向穿越其他组件
• 字体为 JetBrains Mono + PingFang SC
• 已正确定义并应用网格图案至背景矩形
• 所有 rx 值均符合尺寸约定（12 / 8 / 6 / 4）
• 页脚文字使用 #475569，字号 10px