# gaomi-openclaw-share-v4 - Design Spec

> Human-readable design narrative — rationale, audience, style, color choices, content outline. Read once by downstream roles for context.
>
> Machine-readable execution contract: `spec_lock.md` (color / typography / icon / image short form). Executor re-reads `spec_lock.md` before every SVG page to resist context-compression drift. Keep both in sync; on divergence, `spec_lock.md` wins.

## I. Project Information

| Item | Value |
| ---- | ----- |
| **Project Name** | gaomi-openclaw-share-v4 |
| **Canvas Format** | PPT 16:9 (1280×720) |
| **Page Count** | 28 |
| **Design Style** | Top Consulting + 高级技术叙事 / Keynote 感 |
| **Target Audience** | 管理干部、云计算业务技术团队、技术突破奖评审及相关同事 |
| **Use Case** | 60 分钟业务分享：《从云服务器到 AI 时代的数字身体》 |
| **Created Date** | 2026-06-15 |

---

## II. Canvas Specification

| Property | Value |
| -------- | ----- |
| **Format** | PPT 16:9 |
| **Dimensions** | 1280×720 |
| **viewBox** | `0 0 1280 720` |
| **Margins** | left/right 52px, top 42px, bottom 38px |
| **Content Area** | 1176×640 |

---

## III. Visual Theme

### Theme Style

- **Style**: Top Consulting + 高级技术叙事 / Keynote 感
- **Theme**: Dark technology theme
- **Tone**: 克制、技术可信、带有叙事张力；用蓝色表达云与技术，用龙虾橙表达破圈与惊喜。

### Color Scheme

| Role | HEX | Purpose |
| ---- | --- | ------- |
| **Background** | `#07111F` | 深色页面背景 |
| **Secondary bg** | `#0E1B2E` | 卡片、章节区块 |
| **Primary** | `#1677FF` | 腾讯云蓝、标题强调、关键线条 |
| **Accent** | `#FF6A3D` | 龙虾/突破/反差高亮 |
| **Secondary accent** | `#2AD4FF` | AI、数据、流光辅助强调 |
| **Body text** | `#F4F8FF` | 主文本 |
| **Secondary text** | `#A8B3C7` | 注释、脚注 |
| **Tertiary text** | `#62708A` | 页码、弱标签 |
| **Border/divider** | `#22314A` | 卡片边框与分割线 |
| **Success** | `#2ED47A` | 正向指标 |
| **Warning** | `#FF4D4F` | 风险与弯路 |

### Gradient Scheme

```xml
<linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#1677FF"/>
  <stop offset="100%" stop-color="#2AD4FF"/>
</linearGradient>
<radialGradient id="orangeGlow" cx="82%" cy="18%" r="55%">
  <stop offset="0%" stop-color="#FF6A3D" stop-opacity="0.28"/>
  <stop offset="100%" stop-color="#FF6A3D" stop-opacity="0"/>
</radialGradient>
```

---

## IV. Typography System

### Font Plan

**Typography direction**: 现代 CJK sans，标题强字重，正文保持清晰可编辑。

| Role | Chinese | English | Fallback tail |
| ---- | ------- | ------- | ------------- |
| **Title** | `"Microsoft YaHei", "PingFang SC"` | `Arial` | `sans-serif` |
| **Body** | `"Microsoft YaHei", "PingFang SC"` | `Arial` | `sans-serif` |
| **Emphasis** | `"Microsoft YaHei", "PingFang SC"` | `Arial` | `sans-serif` |
| **Code** | — | `Consolas, "Courier New"` | `monospace` |

**Per-role font stacks**:

- Title: `"Microsoft YaHei", "PingFang SC", Arial, sans-serif`
- Body: `"Microsoft YaHei", "PingFang SC", Arial, sans-serif`
- Emphasis: `"Microsoft YaHei", "PingFang SC", Arial, sans-serif`
- Code: `Consolas, "Courier New", monospace`

### Font Size Hierarchy

**Baseline**: Body font size = 20px

| Purpose | Ratio to body | Current Project | Weight |
| ------- | ------------- | --------------- | ------ |
| Cover title | 2.5-5x | 58-88px | Heavy |
| Chapter opener | 2-2.5x | 44-50px | Bold |
| Page title | 1.5-2x | 32-38px | Bold |
| Hero number | 1.5-2.8x | 42-56px | Heavy |
| Subtitle | 1.2-1.5x | 24-28px | SemiBold |
| **Body content** | **1x** | **20px** | Regular |
| Annotation / caption | 0.7-0.85x | 14-16px | Regular |
| Page number / footnote | 0.5-0.65x | 11-13px | Regular |

Formula policy: `text-only` — no LaTeX formula assets required.

---

## V. Layout Principles

### Page Structure

- **Header area**: y=34–92，左侧断言式标题，右侧小节标签或页码。
- **Content area**: x=52–1228, y=118–650，根据页节奏在图、卡片、时间线与大字之间切换。
- **Footer area**: y=680–704，弱化来源/章节/页码，保持演示场景不喧宾夺主。

### Layout Pattern Library

| Pattern | Suitable Scenarios |
| ------- | ----------------- |
| Single column centered | 封面、章节、金句页 |
| Asymmetric split (3:7 / 2:8) | 叙事页与关键图示页 |
| Three/four column cards | 三方向、底牌、ClawPro 痛点 |
| Matrix grid (2×2) | 调度四件事、实践列表 |
| Z-pattern / waterfall | 困境→选择→突破→惊喜的故事推进 |
| Center-radiating | 数字身体、ClawPro 中枢、AI 实践生态 |
| Negative-space-driven | 反差钩子、弯路、开放问题、压轴金句 |

### Spacing Specification

| Element | Current Project |
| ------- | --------------- |
| Safe margin from canvas edge | 52px |
| Content block gap | 28-42px |
| Icon-text gap | 10-14px |
| Card gap | 22-30px |
| Card padding | 24-30px |
| Card border radius | 16-22px |

---

## VI. Icon Usage Specification

### Source

- **Built-in icon library**: `phosphor-duotone`
- **Usage method**: SVG placeholder `<use data-icon="phosphor-duotone/icon-name" .../>`

### Recommended Icon List

| Purpose | Icon Path | Page |
| ------- | --------- | ---- |
| 云 / 可靠性 | `phosphor-duotone/cloud-check` | P01, P04, P17 |
| Lighthouse | `phosphor-duotone/lighthouse` | P01, P15 |
| CPU / 高密 | `phosphor-duotone/cpu` | P07, P09 |
| AI / 业务画像 | `phosphor-duotone/brain` | P12, P20 |
| Agent | `phosphor-duotone/robot` | P17, P19 |
| 数据趋势 | `phosphor-duotone/chart-line-up` | P15, P22 |
| 目标 | `phosphor-duotone/target` | P05, P23 |
| 安全管控 | `phosphor-duotone/shield-checkered` | P19 |
| 时间复利 | `phosphor-duotone/hourglass` | P13, P27 |
| 调度/拓扑 | `phosphor-duotone/tree-structure` | P12 |
| 标准化交付 | `phosphor-duotone/package` | P19 |
| token 成本 | `phosphor-duotone/currency-cny` | P22 |

---

## VII. Visualization Reference List

Catalog read: 71 templates

| Page | Template | Path | Summary-quote (verbatim from `charts_index.json`) | Usage |
| ---- | -------- | ---- | ------------------------------------------------- | ----- |
| P02 | agenda_list | `templates/charts/agenda_list.svg` | "Pick for table of contents, meeting agendas, or presentation roadmap — numbered items + brief description + duration / owner per row. Skip for substantive content lists (use vertical_list) or single-page section dividers (use a cover layout)." | 60 分钟结构总览 |
| P03 | timeline | `templates/charts/timeline.svg` | "Pick for 3-8 milestone events on a horizontal time axis (no duration). Skip for tasks with start/end ranges (use gantt_chart) or vertical layout (use roadmap_vertical)." | 2017→2026 故事主线 |
| P05 | vertical_pillars | `templates/charts/vertical_pillars.svg` | "Pick for 1×3 / 1×4 / 1×5 vertical column layout where each pillar = one independent category with title + bullets — PEST (Political/Economic/Social/Technological), four-pillar strategy overview, side-by-side independent categories. Skip for 2×2 quadrant (use quadrant_text_bullets), pricing tiers (use comparison_columns), or 2×2 parallel aspects (use labeled_card)." | Computing / Hosting / Developing 三方向 |
| P09 | layered_architecture | `templates/charts/layered_architecture.svg` | "Pick for 3-4 horizontal architecture layers (presentation/service/data), 2-4 module cards per layer, each card = title + 1-line description (description required, even if source brief). Skip if no per-module descriptions (use icon_grid) or no horizontal layering (use module_composition)." | 高密六层协同全景 |
| P10 | kpi_cards | `templates/charts/kpi_cards.svg` | "Pick for 4-8 standalone numeric metrics shown as overview cards (2x2 or 1x4) — exec summary opener, dashboard headline, quarterly recap, results-at-a-glance. Skip if metrics have target baselines (use bullet_chart) or single hero number (use gauge_chart)." | 三个技术故事的数字冲击 |
| P12 | icon_grid | `templates/charts/icon_grid.svg` | "Pick for 4-9 parallel features/capabilities/services as icon cards — feature grid, service lineup, benefits matrix, brand values, product highlights. Skip for sequential ordering (use numbered_steps) or hierarchical layers (use pyramid_chart)." | 调度四件事 |
| P15 | kpi_cards | `templates/charts/kpi_cards.svg` | "Pick for 4-8 standalone numeric metrics shown as overview cards (2x2 or 1x4) — exec summary opener, dashboard headline, quarterly recap, results-at-a-glance. Skip if metrics have target baselines (use bullet_chart) or single hero number (use gauge_chart)." | 龙虾摊破圈数据 |
| P18 | comparison_table | `templates/charts/comparison_table.svg` | "Pick for 2-4 plans/products compared across many feature rows (dense matrix). Skip for pricing-tier marketing layout (use comparison_columns)." | 三方向在 2020 与 2026 的再定义 |
| P19 | module_composition | `templates/charts/module_composition.svg` | "Pick for one parent container wrapping 3-N child module cards, each = title + 2-3 bullets — fits 'Feature X contains 3 parts, each with its own description'. Skip if source has only labels without descriptions (use numbered_steps or icon_grid)." | ClawPro 标准化交付与统一管控 |
| P20 | icon_grid | `templates/charts/icon_grid.svg` | "Pick for 4-9 parallel features/capabilities/services as icon cards — feature grid, service lineup, benefits matrix, brand values, product highlights. Skip for sequential ordering (use numbered_steps) or hierarchical layers (use pyramid_chart)." | 团队 AI 实践生态 |
| P21 | pyramid_chart | `templates/charts/pyramid_chart.svg` | "Pick for 3-6 stratified hierarchy layers in flat 2D side-view — Maslow's hierarchy, maturity models, value hierarchy, capability tiers, market segments, audience pyramid. Skip for dramatic tone (use pyramid_isometric), flat priority list (use vertical_list), or org reporting (use top_down_tree)." | L1→L2→L3 AI native 转型 |
| P25 | vertical_list | `templates/charts/vertical_list.svg` | "Pick for 3-6 numbered key points each with a short description — design principles, core tenets, action items, key takeaways, recommendations, executive summary points. Skip for icon-style cards (use icon_grid) or sequential steps (use numbered_steps)." | 收尾三句大白话 |

**Runners-up considered**:

- `roadmap_vertical` | rejected for P03: source is 2017→2026 的少量里程碑，不是竖向项目路线图。
- `labeled_card` | rejected for P05: 三方向是独立柱状战略骨架，vertical_pillars 更符合。
- `hub_spoke` | rejected for P20: AI 实践是多类别并列清单，不是单核心能力向外辐射。

---

## VIII. Image Resource List

No raster image resources in v1. Cover, chapter dividers and “数字身体” pages use native SVG abstract geometry, glow, dashed network lines and editable text. This avoids dependency on KM internal photos and keeps the deck fully editable; real 龙虾摊照片 can be manually swapped into P01/P15 later.

---

## IX. Content Outline

### Part 1: 开场与总览

#### Slide 01 - 封面
- **Layout**: Full dark hero, abstract cloud/body line, title center-left.
- **Title**: 从云服务器到 AI 时代的“数字身体”
- **Core message**: 一个被认为最 low 的产品，九年后成了 AI Agent 时代最贴身的基础设施。
- **Content**: Lighthouse OpenClaw 装机背后的产品思考；高密技术突破奖分享；lili / 2026。

#### Slide 02 - 60 分钟只讲一个故事
- **Layout**: Agenda roadmap with six acts.
- **Core message**: 这不是单点技术汇报，而是一条从困境、选择、长跑到 AI 时代的产品叙事。
- **Visualization**: agenda_list.
- **Content**: 开场 4min；困境 8min；突破 18min；惊喜 11min；展望 16min；收尾 3min。

#### Slide 03 - 同一个故事的两面
- **Layout**: Horizontal timeline connecting 2017 decision → 2026 lobster booth.
- **Core message**: 龙虾摊的爆火和高密技术获奖，实际上是同一条长跑曲线上的两个端点。
- **Visualization**: timeline.
- **Content**: 2017 接手 CVM；高密路线；SA1→SA9；OpenClaw 破圈；AI 数字身体。

### Part 2: 第一幕 · 困境

#### Slide 04 - CVM 的悖论：最大、最早、却最远
- **Layout**: Three paradox cards with a large question.
- **Core message**: 云服务器是用户最先使用、经营贡献很大、但离用户体验最远的产品。
- **Content**: 第一个产品；大盘贡献者；技术不性感、经营承压、用户无感；这个产品还能救吗？

#### Slide 05 - 我们曾向三个方向延展，但根问题还在
- **Layout**: Three vertical pillars.
- **Core message**: Computing、Hosting、Developing 都有成果，但没有彻底解决 CVM 离用户远的问题。
- **Visualization**: vertical_pillars.
- **Content**: Computing = 异构计算；Hosting = 分布式云；Developing = Lighthouse。

#### Slide 06 - AI 不是打击，而是把云的优势放大
- **Layout**: Left question, right three proof points.
- **Core message**: AI 时代并不消灭 CPU 云服务器，反而强化稳定性、可调度性、可组合性的云优势。
- **Content**: Agent 需要 7×24 稳定；海量实例需要弹性调度；云产品组合的工程价值被放大。

#### Slide 07 - 真正的问题：CVM 怎么适配 AI？
- **Layout**: Breathing question page.
- **Core message**: “云有优势”不等于“CVM 已经准备好了”，CVM 必须重新定义自己。
- **Content**: 2025 年 4 月开始，每两周 AI 开放探讨；不是对 AI 反应迅速，而是可能真的懂 AI。

### Part 3: 第二幕 · 突破

#### Slide 08 - 2017 年，我们没有跟军备赛
- **Layout**: Split: AWS annual 10/10 race vs density dimension.
- **Core message**: 跟跑性能军备赛必死，追赶者必须换维度。
- **Visualization**: timeline.
- **Content**: 不卷单核性能；卷单位空间算力；用户要的不是跑分，而是用合理成本跑住业务。

#### Slide 09 - 高密不是单点技术，而是六层协同
- **Layout**: Layered architecture from hardware to scheduler.
- **Core message**: 高密路线能走通，靠的是硬件、OS、虚拟化、网络、存储、调度六层一起突破。
- **Visualization**: layered_architecture.
- **Content**: 硬件 / OS / 虚拟化 / 网络 / 存储 / 调度；其中调度是高密的大脑。

#### Slide 10 - 三个技术故事，把“高密”变成产品能力
- **Layout**: KPI cards.
- **Core message**: 768 核、1 分钟启动、故障率下降 78%，这些数字说明高密已经从想法变成可交付能力。
- **Visualization**: kpi_cards.
- **Content**: 252 核天花板被突破；20 分钟→1 分钟；0.55%→0.12%。

#### Slide 11 - 调度是这次奖最核心的部分
- **Layout**: Brain center + four surrounding cards.
- **Core message**: 一台高密服务器等于过去多台普通服务器，装错业务的代价被放大，调度必须升级。
- **Content**: 调度让资源看得见、避得开、懂业务、会规划。

#### Slide 12 - 调度四件事：从贪心策略到懂业务、会规划
- **Layout**: 2×2 icon grid.
- **Core message**: AI 不是后来贴上的装饰，而是在高密调度核心战场发挥作用。
- **Visualization**: icon_grid.
- **Content**: 物理拓扑树；交织装箱；双塔模型业务画像；时序大模型预测。

#### Slide 13 - 长跑的代价，也是长跑的礼物
- **Layout**: Breathing quote with 9-year arc.
- **Core message**: 9 年坚持让低主频高密在 AI Agent 时代突然成为合适的算力形态。
- **Content**: SA1→SA9；单位成本 100%→20%；同行不理解、客户不接受、内部质疑。

#### Slide 14 - 弯路①：独家创新者的不信任
- **Layout**: Warning story card + outcome card.
- **Core message**: 错位路线的代价不是技术做不出来，而是用户不知道怎么相信全网独家的创新。
- **Content**: 小红书拒绝两年；陪跑与真实负载调优；SA9 vs SA4 RT 相当、QPS +42%；但旧认知仍未完全解决。

### Part 4: 第三幕 · 惊喜

#### Slide 15 - 龙虾摊：云服务器第一次真正破圈
- **Layout**: Explosive KPI cards.
- **Core message**: OpenClaw 装机摊把一个基础设施产品推到了普罗大众面前。
- **Visualization**: kpi_cards.
- **Content**: 15 秒抢空；4–5 倍日销量；OpenClaw 规模 +50%；腾讯股价 +7 个点；48 小时友商跟进。

#### Slide 16 - 副产品：几乎免费的小规格资源
- **Layout**: Resource fragments flowing into Lighthouse/OpenClaw.
- **Core message**: 高密和调度留下了别人没有的小规格碎片资源，它们后来成为破圈的燃料。
- **Content**: 资源利用率超过 90%；小规格碎片大客户不要；帕鲁第一次证明 C 端也可能是客户。

#### Slide 17 - 伏笔揭晓：没有 9 年高密，就没有 3 月 6 日
- **Layout**: Bidirectional connection: high density ↔ lobster booth ↔ digital body.
- **Core message**: 龙虾摊不是一次运营偶然，而是高密技术的另一面。
- **Content**: 秒级创建；小规格富余；极致调度；每个普通人触手可及的数字身体。

### Part 5: 第四幕 · 展望

#### Slide 18 - 三方向在 AI 时代被重新定义
- **Layout**: 2020 vs 2026 comparison table.
- **Core message**: GPU 接走重计算后，CPU 的 hosting 属性反而更重要。
- **Visualization**: comparison_table.
- **Content**: Computing：异构计算→GPU 算力；Hosting：分布式云→高密 + 数字身体；Developing：Lighthouse→OpenClaw + ClawPro + SkillHub。

#### Slide 19 - ClawPro 不是造新 Agent，而是企业级 AI 的交付与管控枢纽
- **Layout**: Module composition with ClawPro core.
- **Core message**: ClawPro 的任务是把企业 AI 能力标准化交付，并放进统一管控体系。
- **Visualization**: module_composition.
- **Content**: 标准化交付；统一管控；SkillHub 沉淀 know-how；让 CVM 离用户更近。

#### Slide 20 - 团队 AI 实践：这是一个还在生长的列表
- **Layout**: 7-category icon grid.
- **Core message**: 团队的 AI 实践已经从产品、研发、个人基础设施延伸到组织治理。
- **Visualization**: icon_grid.
- **Content**: 产品级 AI 化；开发体验；个人/企业 AI 基础设施；组织 AI 化；学习共建；token 治理；方法沉淀。

#### Slide 21 - AI native 转型不是装工具，而是重写组织工作法
- **Layout**: Three-level pyramid.
- **Core message**: 个人提效不等于组织提效，AI native 的关键是数据治理与 SOP 指令化。
- **Visualization**: pyramid_chart.
- **Content**: L1 个人提效；L2 组织提效；L3 AI 主导；你之所见即 AI 之所见；工具不需要公约，同事才需要。

#### Slide 22 - Token 是新时代的电：要管好、用好、敬畏它
- **Layout**: Cost comparison + governance principles.
- **Core message**: AI 成本治理不是压 token，而是把 token 放到业务产出和模型选型框架里管理。
- **Content**: Claude 17.2M tokens ¥111；Codex 3M tokens $1.55；先 Chatbot 后工具；双额度体系。

#### Slide 23 - 弯路②：龙虾热不是产品热，而是 AI 焦虑
- **Layout**: Breathing contrast page.
- **Core message**: 流量回落后才看清，用户排队装 OpenClaw 的本质是害怕被 AI 时代抛下。
- **Content**: 热度急剧降低；装机热不是产品热；AI 焦虑不会散；机会在真实工作流落地。

### Part 6: 收尾

#### Slide 24 - 还没想清楚的问题
- **Layout**: Open question, two paths.
- **Core message**: 高密路线和 AI 算力机型到底是同一个故事，还是两条路，仍需继续回答。
- **Content**: CPU 普惠 vs GPU 极致；产品形态、客户结构、商业模式不同；留给管理干部的开放问题。

#### Slide 25 - 三句大白话
- **Layout**: Vertical list.
- **Core message**: 这场分享不显式讲方法论，但听众应该自然带走三件事。
- **Visualization**: vertical_list.
- **Content**: 还有别的维度吗；用户从来不买跑分；把一件事做 9 年。

#### Slide 26 - 云服务器不是 low
- **Layout**: Single quote.
- **Core message**: 云服务器不是 low，它是 AI 时代每个人的数字身体。
- **Content**: 这句话把开场的“low 产品”反转成整场分享的核心结论。

#### Slide 27 - 创新成本足够低，创新可能性就会非常大
- **Layout**: Single quote with infrastructure stack behind it.
- **Core message**: 高密真正的礼物，是把团队、客户和协作者做新东西的成本降下来。
- **Content**: 基础设施厚度；能力复利；智能调度；低成本创新。

#### Slide 28 - 谢谢
- **Layout**: Ending page, title + closing line.
- **Core message**: 一段 9 年长跑，最终成为 AI 时代的底座之一。
- **Content**: 谢谢大家；从云服务器到 AI 时代的数字身体。

---

## X. Speaker Notes Requirements

- **Filename**: match SVG name, split from `notes/total.md`.
- **Content**: 60 分钟中文演讲稿；语气自然、口语化但保持管理层分享的判断力。
- **Style**: 叙事型 + 结论先行；每页 2–5 句，关键页保留原规划中的金句。
- **Purpose**: inform + persuade + inspire.

---

## XI. Technical Constraints Reminder

### SVG Generation Must Follow:

1. viewBox: `0 0 1280 720`
2. Background uses `<rect>` elements
3. Text wrapping uses `<tspan>` (`<foreignObject>` FORBIDDEN)
4. Transparency uses `fill-opacity` / `stroke-opacity`; `rgba()` FORBIDDEN
5. FORBIDDEN: `mask`, `<style>`, `class`, `foreignObject`
6. FORBIDDEN: `textPath`, `animate*`, `script`
7. Text characters: write typography & symbols as raw Unicode; XML reserved chars in text MUST be escaped as `&amp;` `&lt;` `&gt;` `&quot;` `&apos;`.
8. `marker-start` / `marker-end` conditionally allowed with simple markers in `<defs>`.
9. `clipPath` conditionally allowed only on `<image>` elements.

### PPT Compatibility Rules:

- `<g opacity="...">` FORBIDDEN; set opacity on child elements.
- Image transparency uses overlay mask layer.
- Inline attributes only; external CSS and `@font-face` FORBIDDEN.