菜单
使用 HTML/CSS 生成分层彩色架构图。适用于架构图、系统图、流程图或需要“语义分层 + 色带分区 + 工程化排版”的技术说明图。用户提到蓝图风、扁平技术图、架构可视化、技术图纸时触发。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | blueprinter |
| description | 使用 HTML/CSS 生成分层彩色架构图。适用于架构图、系统图、流程图或需要“语义分层 + 色带分区 + 工程化排版”的技术说明图。用户提到蓝图风、扁平技术图、架构可视化、技术图纸时触发。 |
使用 HTML/CSS 按照“扁平化工程蓝图”风格指南生成技术图表。
精确、分层、分区、可扫读。输出应像一张经过工程化约束的信息图：有明确的层级、区域归属、模块分组和阅读路径，而不是单纯的白底规格书，也不是营销落地页。
band / group / node / flow-section 容器group / nodeband）都应有独立标题、说明和背景色| 层级/用途 | 推荐颜色 |
|---|---|
| 页面背景 | 极浅暖灰或冷灰（如 #f5f7fb） |
| 主链路 / 阅读流 | 独立浅紫 Flow 区（如 #f3f0ff，不要并入某个 band） |
| 总览层 / 入口层 | Aqua / Teal（如 #dff7f5） |
| 接入 / 协议层 | Peach / Orange（如 #ffe7cf） |
| 业务 / 服务层 | Mint / Green（如 #def4df） |
| 能力 / 编排层 | Lavender（如 #efe3ff） |
| 数据 / 平台层 | Sky / Indigo（如 #dce8ff / #d9ddff） |
| 主文字 | 深色高对比（如 #1f2937） |
| 次文字 | 中性灰（如 #667085） |
| 边框 | 比底色略深的柔和描边 |
规则：
band / group 内flow-section 是独立语义区域，用于承载主链路、推荐阅读顺序或跨层调用路径diagram-canvas 中diagram-kicker、标题区、说明文案、meta-rowband-sectionband-section 内可再分为若干 band-groupband-group 内放 node-cardband-stack 上方放一个独立的 flow-sectionflow-section 不属于任何单独业务层，不要把它塞进某个 band-section 的底部Client → Gateway:root {
--c-page: #f5f7fb;
--c-canvas: #ffffff;
--c-text-main: #1f2937;
--c-text-sub: #667085;
--c-line: #b8c2d1;
--c-node-border: #cfd7e6;
--c-band-aqua: #dff7f5;
--c-band-peach: #ffe7cf;
--c-band-mint: #def4df;
--c-band-lavender: #efe3ff;
--c-band-sky: #dce8ff;
--c-band-indigo: #d9ddff;
--c-flow-surface: #f3f0ff;
--c-group-surface: rgba(255, 255, 255, 0.58);
--c-node-surface: rgba(255, 255, 255, 0.90);
--c-strong: #344054;
--c-highlight: #7c3aed;
--radius-band: 20px;
--radius-group: 16px;
--radius-node: 14px;
--font-ui: 'Inter', 'Helvetica Neue', sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', monospace;
}
直接以 references/template.html 为准。
使用要求：
diagram-container > diagram-canvas > header + flow-section + main.band-stack 的整体结构flow-section 的内容；但只要存在推荐阅读顺序或调用主线，就应保留这个独立区域flow-row 挂在某个 band-section 里面替代 flow-section直接以 references/example.html 为准。
阅读要点：
flow-section 位于 header 与 band-stack 之间，是整张图的独立主链路说明区flow-section，不要内嵌到业务层底部。--font-mono。references/template.html 与 references/example.html 为准，文档规则用于解释这些结构背后的意图。