59 lines
2.5 KiB
Markdown
59 lines
2.5 KiB
Markdown
---
|
||
title: "7种视觉风格系统"
|
||
type: concept
|
||
tags: []
|
||
sources: [fireworks-tech-graph]
|
||
last_updated: 2026-04-18
|
||
---
|
||
|
||
## Description
|
||
fireworks-tech-graph 内置的 7 种视觉风格系统，每种风格定义了背景色、字体、颜色 Token、布局规范和使用场景推荐。
|
||
|
||
## The 7 Styles
|
||
|
||
| # | 名称 | 背景色 | 字体 | 适用场景 |
|
||
|---|------|--------|------|---------|
|
||
| 1 | **扁平图标风**（默认） | `#ffffff` | Helvetica | 博客、幻灯片、技术文档 |
|
||
| 2 | **暗黑极客风** | `#0f0f1a` | SF Mono / Fira Code | GitHub README、开发者文章 |
|
||
| 3 | **工程蓝图风** | `#0a1628` | Courier New | 架构设计文档、工程规范 |
|
||
| 4 | **Notion 极简风** | `#ffffff` | system-ui | Notion、Confluence、内部 Wiki |
|
||
| 5 | **玻璃态卡片风** | `#0d1117` 渐变 | Inter | 产品官网、演讲 Keynote |
|
||
| 6 | **Claude 官方风格** | `#f8f6f3` | system-ui | Anthropic 风格图表，温暖专业美学 |
|
||
| 7 | **OpenAI 官方风格** | `#ffffff` | system-ui | OpenAI 风格图表，简洁现代设计 |
|
||
|
||
## 风格选择指南
|
||
|
||
**UML 图类型：**
|
||
- 类图/组件图/包图：风格 1（扁平图标风）或风格 4（Notion极简风）
|
||
- 序列图/时序图：风格 2（暗黑极客风）
|
||
- 状态机图/活动图：风格 3（工程蓝图风）
|
||
- 用例图/交互图：风格 1（扁平图标风）
|
||
|
||
**AI/Agent 图类型：**
|
||
- RAG/Agentic Search：风格 2（暗黑极客风）或风格 5（玻璃态卡片风）
|
||
- 记忆架构：风格 3（工程蓝图风）
|
||
- Multi-Agent：风格 5（玻璃态卡片风）
|
||
|
||
**文档类型：**
|
||
- 内部文档：风格 4（Notion极简风）
|
||
- 技术博客：风格 1（扁平图标风）
|
||
- GitHub README：风格 2（暗黑极客风）
|
||
- 演示文稿：风格 5（玻璃态卡片风）或风格 6（Claude官方风格）
|
||
|
||
**品牌特定：**
|
||
- Anthropic/Claude 项目：风格 6（Claude官方风格）
|
||
- OpenAI 项目：风格 7（OpenAI官方风格）
|
||
|
||
## Key Enhancements
|
||
- `style_overrides`：微调标题对齐或配色 token
|
||
- `containers[].header_prefix` / `containers[].header_text`：工程编号分区标题（风格3）
|
||
- `containers[].side_label`：左侧 Layer Label（风格6）
|
||
- `window_controls` / `meta_*`：终端/文档风格顶部 chrome
|
||
- `blueprint_title_block`：蓝图标题信息框（风格3）
|
||
|
||
## Relationships
|
||
- [[7种视觉风格系统]] is implemented_by [[fireworks-tech-graph]]
|
||
- [[7种视觉风格系统]] is used_for [[14种UML图]]
|
||
- [[7种视觉风格系统]] is used_for [[RAG]]
|
||
- [[7种视觉风格系统]] is used_for [[AI Agent]]
|