القائمة
创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Generates professional slide deck images from content. Creates outlines with style instructions, generates individual slide images, and exports PPTX/PDF. Includes a brand design system mode using 60+ getdesign.md brand styles: auto-matches content to brand-inspired slide styles, recommends 5 matched styles plus 1 smart match, or uses an explicitly requested brand style. Use when user asks to "create slides", "make a presentation", "generate deck", "slide deck", "PPT", "design slide", "brand style PPT", or wants content turned into a designed presentation.
分析文章结构并批量生成AI配图，调用Gemini API为每个段落创建专业逻辑图/概念图。当用户说"批量配图"、"给文章配图"、"生成文章插图"、"为这篇文章配图"时触发。支持两种风格：简约手绘风和建筑蓝图编辑风。自动保存到Obsidian图片目录并插入文档。
根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成 XX 图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER 图/C4 图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR 树/韦恩图/热力图/KPI 看板/信息图/概念图"、"帮我可视化"、"XX 风格的图表"、"换成 XX 风格"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
生成设计美观的图表 HTML 文件。支持 10 种图表类型：流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成商业模式画布"、"做个架构图"、"画 ER 图"、"帮我画个流程图"、"生成用户旅程图"、"做个思维导图"、"竞品分析图"、"SWOT 分析图"、"产品路线图"、"组织架构图"、"商业模式画布"、"XX 风格的图表"、"帮我可视化"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
| name | space-architecture-diagram |
| description | 创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。 |
| license | MIT |
| metadata | {"version":"2.1","author":"Architecture Diagram Skill (中文版)"} |
创建专业的技术架构图，输出为独立的 HTML 文件，包含内联 SVG 图形和 CSS 样式。
当用户提到以下任何场景时，主动使用此技能：
如果用户没有提供完整的架构描述，主动询问以下信息：
如果用户提供了代码库或项目文件，自行分析提取架构信息。
根据收集到的信息，使用本技能的设计规范和模板生成 HTML 文件。
输出一个完整的、可直接在浏览器中打开的 .html 文件。
架构图支持 深色（Dark） 和 浅色（Light） 两种主题，通过页眉右侧的切换按钮一键切换。用户选择会保存到 localStorage，下次打开自动恢复。
实现方式： CSS 自定义属性 + data-theme 属性切换。SVG 元素通过 CSS class（text-primary、text-secondary、mask-bg、grid-line、arrowhead-color）适配主题。
关键原则：
transition 实现平滑切换动画融合 Cursor 暖色深底 + Claude 暖白文字。温暖不冰冷，告别冷蓝色 slate。
| 元素 | 颜色 |
|---|---|
| 页面背景 | #141413 (温暖近黑) |
| 卡片背景 | rgba(20, 20, 19, 0.5) |
| 遮罩背景 | #1a1a18 (暖深色) |
| 边框 | rgba(38, 37, 30, 0.2) (oklab 暖边框) |
| 主文字 | #faf9f5 (Ivory 暖白) |
| 副文字 | #b0aea5 (暖银) |
| 网格线 | rgba(38, 37, 30, 0.12) |
| 箭头头 | rgba(38, 37, 30, 0.45) |
融合 Claude 羊皮纸 #f5f4ed + Airtable 深海军蓝文字。
| 元素 | 颜色 |
|---|---|
| 页面背景 | #f5f4ed (羊皮纸) |
| 卡片背景 | rgba(250, 249, 245, 0.85) |
| 遮罩背景 | #faf9f5 (Ivory) |
| 边框 | #f0eee6 (暖奶油) |
| 主文字 | #141413 (暖近黑) |
| 副文字 | #5e5d59 (橄榄灰) |
| 网格线 | #f0eee6 (暖奶油) |
| 箭头头 | #87867f (石灰) |
按组件类型使用语义化颜色：
| 组件类型 | 填充色 (rgba) | 描边色 | 典型用途 |
|---|---|---|---|
| 前端 | rgba(20, 50, 62, 0.4) | #22d3ee (青色) | 客户端应用、UI、浏览器 |
| 后端 | rgba(18, 72, 55, 0.4) | #34d399 (翡翠绿) | 服务器、API、微服务 |
| 数据库 | rgba(72, 30, 100, 0.4) | #a78bfa (紫色) | 数据库、存储、缓存 |
| 云服务 | rgba(110, 50, 18, 0.35) | #fbbf24 (琥珀色) | AWS/阿里云/腾讯云服务 |
| 安全组件 | rgba(130, 25, 50, 0.4) | #fb7185 (玫红色) | 认证、安全组、加密 |
| 消息队列 | rgba(251, 146, 60, 0.3) | #fb923c (橙色) | Kafka、RabbitMQ、事件总线 |
| 外部/通用 | rgba(38, 37, 30, 0.35) | #94a3b8 (石板灰) | 外部系统、第三方服务 |
| AI/智能 | rgba(80, 30, 120, 0.4) | #c084fc (亮紫) | AI 服务、LLM、模型 |
所有文字使用 JetBrains Mono 等宽字体（技术风格）：
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
排版规范（参考 Cursor 紧凑间距 + Claude 宽松行高）：
letter-spacing: -0.02em, line-height: 1.6letter-spacing: 0.04em背景： 深色模式 #141413 (温暖近黑) / 浅色模式 #f5f4ed (羊皮纸)，带微妙网格纹理：
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" class="grid-line" stroke-width="0.5"/>
</pattern>
组件方框： 圆角矩形（rx="8"），1.5px 描边，半透明填充。
阴影系统（Claude ring shadow + Cursor ambient）：
rgba(0,0,0,0.14) 0px 4px 16px, rgba(38,37,30,0.1) 0px 0px 0px 1pxrgba(0,0,0,0.05) 0px 4px 24px, rgba(38,37,30,0.08) 0px 0px 0px 1px圆角体系：
8px（Cursor 标准）12px（Airtable 按钮 / Claude 舒适圆角）6px（Webflow 紧凑）安全组： 虚线描边（stroke-dasharray="4,4"），透明填充，玫红色。
区域边界： 大虚线描边（stroke-dasharray="8,4"），琥珀色，rx="12"。
箭头： 使用 SVG marker 定义箭头头部：
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" class="arrowhead-color" />
</marker>
箭头层级（Z-order）： 连接箭头要在 SVG 中较早绘制（背景网格之后），这样它们会渲染在组件方框之下。SVG 元素按文档顺序绘制。
透明填充遮罩技巧： 组件方框使用半透明填充，箭头在后面会透出来。为了完全遮住箭头，在半透明样式矩形之前绘制一个不透明背景矩形。使用 class="mask-bg" 以适配主题：
<!-- 不透明背景遮盖箭头（自动适配主题） -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<!-- 半透明样式组件叠加在上面 -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
认证/安全流： 玫红色虚线（#fb7185）。
消息队列/事件总线： 组件间的小型连接元素，橙色（#fb923c 描边，rgba(251, 146, 60, 0.3) 填充）：
<rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/>
<text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text>
关键： 垂直堆叠组件时确保间距正确，避免重叠：
示例布局：
组件 A: y=70, height=60 → 结束于 y=130
间隙: y=130 到 y=170 → 40px 间隙，消息队列放 y=140 (20px 高)
组件 B: y=170, height=60 → 结束于 y=230
关键： 图例必须放在所有边界框（区域边界、集群边界、安全组）之外。
<!-- 带主题适配的完整组件方框 -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<text x="CENTER_X" y="Y+20" class="text-primary" font-size="11" font-weight="600" text-anchor="middle">组件名称</text>
<text x="CENTER_X" y="Y+36" class="text-secondary" font-size="9" text-anchor="middle">技术说明</text>
关键： 使用 CSS class 而非硬编码颜色值，以支持主题切换：
class="mask-bg" - 不透明遮罩背景（深色: #1a1a18，浅色: #faf9f5）class="text-primary" - 主文字（深色: #faf9f5，浅色: #141413）class="text-secondary" - 副文字（深色: #b0aea5，浅色: #5e5d59）class="grid-line" - 网格线描边class="arrowhead-color" - 箭头头部填充fill="#22d3ee"）不使用 class，在两种主题下保持不变<div class="card">
<div class="card-header">
<div class="card-dot COLOR"></div>
<h3>卡片标题</h3>
</div>
<ul>
<li>- 要点一</li>
<li>- 要点二</li>
</ul>
</div>
text-anchor="middle" 居中对齐复制并自定义 assets/template.html 模板。关键自定义点：
<title> 和页眉文字1000 x 680）始终生成一个独立的 .html 文件，包含：
前端框架 + 后端 API + 数据库 + 缓存 + 认证
API 网关 + 多个微服务 + 消息队列 + 服务注册发现 + 分布式数据库
CDN + 负载均衡 + 容器编排 + 云数据库 + 对象存储 + 监控
API 网关 + 函数计算 + 云数据库 + 对象存储 + 消息队列
数据源 + 数据采集 + 流处理 + 数据仓库 + 可视化