Menu
使用 HTML/CSS 生成分层彩色架构图。适用于架构图、系统图、流程图或需要“语义分层 + 色带分区 + 工程化排版”的技术说明图。用户提到蓝图风、扁平技术图、架构可视化、技术图纸时触发。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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 为准，文档规则用于解释这些结构背后的意图。