Agent Skills
返回列表
暗色精美架构图

暗色精美架构图

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_506878eb/dark-architecture-diagram。

技能介绍

要解决什么问题

技术方案评审、设计文档和分享里，架构图往往要同时表达分层边界、组件依赖和执行顺序。用通用绘图工具手调配色和箭头，很难保持「同一套视觉语言」；导出成图片后又不利于在网页或仓库里直接嵌入、缩放。

本技能面向需要暗色高对比、工程控制台感的架构示意：输出单个独立 HTML 文件，内嵌 SVG，除 Google Fonts 的 JetBrains Mono 外无外部依赖，便于直接打开或挂到静态站点。

技能如何工作

核心是一套固定的 design token 与分层配色，而不是每次让模型自由发挥颜色：

  • 背景与卡片：页面与 SVG 背景 #020617，卡片底 #0f172a，网格/描边 #1e293b
  • 文字五级灰阶：从标题 #f8fafc 到脚注 #475569，层级靠字号与色阶而非随意加粗
  • 分层色相：展示层（粉）、接入层（青）、编排核心（橙）、领域服务（紫）、能力/工具（绿）、状态（黄）等，按优先级映射到架构层
  • 组件模式：层边界、卡片、编号步骤圆（#0ea5e9）、流向箭头；LLM 执行区等用 stroke-dasharray 虚线框标出

制图约定包括大 viewBox 响应式缩放、40×40 弱网格、圆角规范（层 12 / 卡 8 / 小项 6 / 标签 4），箭头走 L 形折线避免斜穿其他组件。图下方可附摘要卡片网格（色点 + 标题 + 要点），页头带脉冲青点与副标题，强化「同一设计系统」的观感。

适用边界与注意点

  • 适合系统分层、关系与步骤序列的静态示意，不是实时监控面板或自动从代码生成的拓扑。
  • 新图应严格对照技能内 checklist（背景色、卡片填充、层色唯一、字体栈 JetBrains Mono + PingFang SC 等），否则容易偏离统一风格。
  • 完整 token 与组件库细节以技能附带的 references/design-tokens.md、references/component-patterns.md 为准；复杂场景先定层与色的映射，再落 SVG 元素。

使用场景

  • 技术评审前，把展示层、编排核心与数据层之间的边界和组件依赖画进单文件 HTML，方便当场用浏览器打开讲解。
  • 梳理 Agent 或 LLM 流水线时，用编号步骤圆、虚线 LLM 执行区和 L 形箭头串起各阶段，避免箭头斜穿其他模块。
  • 为 README 或静态文档站生成可缩放的嵌入式架构图，用 viewBox 替代多套 PNG 分辨率维护。
  • 撰写系统设计说明时，在主图下方用带层色圆点的摘要卡片，归纳分层映射与关键架构取舍。

适合人员

  • 负责微服务或模块边界划分的后端工程师，需要在评审材料里一致地表达分层与调用方向。
  • 设计 AI 应用拓扑的方案架构师，要把网关、编排、领域能力与状态层画在同一套 token 与层色体系下。
  • 维护内部技术 Wiki 或方案库的平台同学，希望架构页用单文件 HTML 嵌入而非反复改截图配色。
  • 对外做系统分享的技术演讲者，需要多张架构图共享网格、五级字阶与分层色相，避免每张图风格漂移。