| 1 | # 藏拙 - Design Spec |
| 2 | |
| 3 | ## I. Project Information |
| 4 | |
| 5 | | Item | Value | |
| 6 | | ---- | ----- | |
| 7 | | **Project Name** | cangzhuo (《男人最顶级的城府：藏拙》) | |
| 8 | | **Canvas Format** | PPT 16:9 (1280×720) | |
| 9 | | **Page Count** | 14 | |
| 10 | | **Design Style** | A) 通用大众 + 新中式水墨留白 | |
| 11 | | **Target Audience** | 30+ 男性职场人 / 自我修养读者 / 公众号转发场景 | |
| 12 | | **Use Case** | 朋友圈传播、读书分享、个人成长课件 | |
| 13 | | **Created Date** | 2026-05-16 | |
| 14 | |
| 15 | --- |
| 16 | |
| 17 | ## II. Canvas Specification |
| 18 | |
| 19 | | Property | Value | |
| 20 | | -------- | ----- | |
| 21 | | **Format** | PPT 16:9 | |
| 22 | | **Dimensions** | 1280×720 | |
| 23 | | **viewBox** | `0 0 1280 720` | |
| 24 | | **Margins** | 左右 60px / 上下 50px | |
| 25 | | **Content Area** | 1160×620 | |
| 26 | |
| 27 | --- |
| 28 | |
| 29 | ## III. Visual Theme |
| 30 | |
| 31 | ### Theme Style |
| 32 | |
| 33 | - **Style**: 新中式 / 水墨留白 / 文人气质 |
| 34 | - **Theme**: Light theme（宣纸底） |
| 35 | - **Tone**: 静、克制、文气、东方哲思 |
| 36 | |
| 37 | ### Color Scheme |
| 38 | |
| 39 | | Role | HEX | Purpose | |
| 40 | | ---- | --- | ------- | |
| 41 | | **Background** | `#F5F1E8` | 宣纸米白，全页底色 | |
| 42 | | **Secondary bg** | `#EFEAD9` | 副底色 / 卡片背景（比主底色略深） | |
| 43 | | **Primary** | `#1A1A1A` | 墨黑，标题、主体文字、深色块 | |
| 44 | | **Accent** | `#A52A2A` | 朱砂，重点字、印章、关键论点强调 | |
| 45 | | **Body text** | `#1A1A1A` | 正文 | |
| 46 | | **Secondary text** | `#5C5852` | 副文、引文出处 | |
| 47 | | **Tertiary text** | `#8B8680` | 远山灰，辅助元素、页码、注释 | |
| 48 | | **Border/divider** | `#C8C0AE` | 分割线、印章描边 | |
| 49 | |
| 50 | ### AI Image Strategy |
| 51 | |
| 52 | - **Image Rendering**: `ink-notes` |
| 53 | - **Image Palette**: `mono-ink` |
| 54 | |
| 55 | --- |
| 56 | |
| 57 | ## IV. Typography System |
| 58 | |
| 59 | ### Font Plan |
| 60 | |
| 61 | **Typography direction**: 楷书标题 + 现代黑体正文（Kai × Hei 对比轴） |
| 62 | |
| 63 | | Role | Chinese | English | Fallback tail | |
| 64 | | ---- | ------- | ------- | ------------- | |
| 65 | | **Title** | `KaiTi` | `Georgia` | `serif` | |
| 66 | | **Body** | `"Microsoft YaHei", "PingFang SC"` | `Arial` | `sans-serif` | |
| 67 | | **Emphasis** | `KaiTi` | `Georgia` | `serif` | |
| 68 | | **Code** | — | `Consolas, "Courier New"` | `monospace` | |
| 69 | |
| 70 | **Per-role font stacks**: |
| 71 | |
| 72 | - Title: `KaiTi, Georgia, serif` |
| 73 | - Body: `"Microsoft YaHei", "PingFang SC", Arial, sans-serif` |
| 74 | - Emphasis: `KaiTi, Georgia, serif` |
| 75 | - Code: `Consolas, "Courier New", monospace` |
| 76 | |
| 77 | ### Font Size Hierarchy |
| 78 | |
| 79 | **Baseline**: Body = 24px（轻松节奏，传播阅读优先） |
| 80 | |
| 81 | | Purpose | Ratio | Size | |
| 82 | | ------- | ----- | ---- | |
| 83 | | Cover title | 3.3x | 80px | |
| 84 | | Chapter / section opener | 2.5x | 60px | |
| 85 | | Page title | 1.5–1.8x | 36–44px | |
| 86 | | Hero number / 引文大字 | 2x | 48px | |
| 87 | | Subtitle | 1.3x | 32px | |
| 88 | | **Body** | **1x** | **24px** | |
| 89 | | Annotation / caption | 0.75x | 18px | |
| 90 | | Page number / footer | 0.6x | 14px | |
| 91 | |
| 92 | --- |
| 93 | |
| 94 | ## V. Layout Principles |
| 95 | |
| 96 | ### Page Structure |
| 97 | |
| 98 | - **Header area**: 60–80px（页眉印章或章节号，可省略） |
| 99 | - **Content area**: 500–560px（主内容） |
| 100 | - **Footer area**: 40px（页码 / 落款） |
| 101 | |
| 102 | ### Layout Pattern Library (combine or break as content demands) |
| 103 | |
| 104 | | Pattern | Use in this deck | |
| 105 | | ------- | ----------------- | |
| 106 | | Single column centered | 封面 / 引子 / 结语 | |
| 107 | | Symmetric split (5:5) | 藏拙 vs 消极避世 对照 | |
| 108 | | Asymmetric split (3:7 / 2:8) | 引言 + 释义 | |
| 109 | | Three/four column cards | 顶级城府的三件事 | |
| 110 | | Full-bleed + floating text | breathing 页（封面、引子、章节转场） | |
| 111 | | Negative-space-driven | 单独印证页（潜龙勿用 / 木秀于林） | |
| 112 | | Figure-text overlap | 韩信典故页 | |
| 113 | |
| 114 | ### Spacing Specification |
| 115 | |
| 116 | **Universal**: |
| 117 | |
| 118 | | Element | Value | |
| 119 | | ------- | ----- | |
| 120 | | Safe margin | 左右 60px / 上下 50px | |
| 121 | | Content block gap | 32px | |
| 122 | | Icon-text gap | 12px | |
| 123 | |
| 124 | **Card-based**: |
| 125 | |
| 126 | | Element | Value | |
| 127 | | ------- | ----- | |
| 128 | | Card gap | 24px | |
| 129 | | Card padding | 28px | |
| 130 | | Card border radius | 8px | |
| 131 | | Three-column card width | 360px | |
| 132 | | Four-column card width | 268px | |
| 133 | |
| 134 | **Non-card**: 行距 1.6×；breathing 页正文宽度 720–900px 居中，依信息体量自由收放。 |
| 135 | |
| 136 | --- |
| 137 | |
| 138 | ## VI. Icon Usage Specification |
| 139 | |
| 140 | ### Source |
| 141 | |
| 142 | - **Built-in icon library**: `tabler-outline`（stroke_width = 1.5，线性轻盈，与水墨留白调性契合） |
| 143 | - **Usage method**: SVG 占位符 `<use data-icon="tabler-outline/<name>" stroke-width="1.5"/>` |
| 144 | |
| 145 | ### Recommended Icon List |
| 146 | |
| 147 | | Purpose | Icon Path | Page | |
| 148 | | ------- | --------- | ---- | |
| 149 | | 章节符号 / 引文 | `tabler-outline/quote` | P02, P05, P10 | |
| 150 | | 不亮牌 / 隐藏 | `tabler-outline/eye-off` | P04, P07 | |
| 151 | | 锋芒 / 武器 | `tabler-outline/sword` | P06, P09 | |
| 152 | | 盾 / 防御 | `tabler-outline/shield` | P09 | |
| 153 | | 时间 / 等待 | `tabler-outline/hourglass` | P10, P12 | |
| 154 | | 山 / 沉稳 | `tabler-outline/mountain` | P12 | |
| 155 | | 心 / 情绪 | `tabler-outline/heart` | P13 | |
| 156 | | 圆点 / 列表 | `tabler-outline/point-filled` | 通用 | |
| 157 | |
| 158 | --- |
| 159 | |
| 160 | ## VII. Visualization Reference List |
| 161 | |
| 162 | > 本篇为人文哲思散文，数据可视化页很少。仅 2 页采用 charts 模板作为结构骨架；其余页面均为自由排版。 |
| 163 | |
| 164 | Catalog read: 71 templates |
| 165 | |
| 166 | | Page | Template | Path | Summary-quote (verbatim from `charts_index.json`) | Usage | |
| 167 | | ---- | -------- | ---- | ------------------------------------------------- | ----- | |
| 168 | | P11 | pros_cons_chart | `templates/charts/pros_cons_chart.svg` | "Pick for bilateral pros/cons list, 2-5 items per side. Skip for full feature comparison (use comparison_table) or numeric A/B mirror data (u…)" | 藏拙 vs 消极避世 四维对照 | |
| 169 | | P13 | 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, recommendation…" | 藏住四件事 → 养出四种力（核心输出页） | |
| 170 | |
| 171 | **Runners-up considered** (fewer than 3 viz pages, runners-up listed per page): |
| 172 | |
| 173 | - `comparison_table` | rejected for P11: 仅四个维度、两栏对比，pros_cons 视觉更利落；comparison_table 适合多列多行密集矩阵 |
| 174 | - `principles_grid` (不在库内) → `vertical_pillars` | rejected for P13: 四组"藏 → 养"是同质化条目，vertical_list 的"序号 + 标题 + 说明"格式更贴合 |
| 175 | - `numbered_steps` | rejected for P13: 该页是平行四条原则，不是顺序步骤；步骤化会误导读者以为有先后 |
| 176 | |
| 177 | --- |
| 178 | |
| 179 | ## VIII. Image Resource List |
| 180 | |
| 181 | | Filename | Dimensions | Ratio | Purpose | Type | Layout pattern | Acquire Via | Status | Reference | text_policy | page_role | |
| 182 | | -------- | --------- | ----- | ------- | ---- | -------------- | ----------- | ------ | --------- | ----------- | --------- | |
| 183 | | cover_bg.png | 1280×720 | 1.78 | 封面背景：水墨远山留白 | Background | #1 full-bleed background with floating title + #29 two-stop scrim | ai | Pending | Distant misty mountain range in ink wash style, vast empty paper sky on top three-fifths reserved for vertical title, sparse brushstrokes, a single tiny boatman silhouette on a lake at lower right; deep silence and restraint | none | hero_page | |
| 184 | | yinzi_bg.png | 1280×720 | 1.78 | 引子背景：藏锋 atmosphere | Background | #12 faded image as backdrop with oversized overlay text + #30 flat semi-transparent rectangle overlay | ai | Pending | Half-sheathed brushstroke or ink-trail receding into white paper, calm left two-thirds reserved for floating quote text, single faint seal mark at lower right corner; suggests withdrawn force without revealing it | none | hero_page | |
| 185 | | hanxin_bridge.png | 1280×720 | 1.78 | 韩信胯下之辱场景 | Illustration | #4 right image bleeding off the canvas edge + #29 two-stop scrim | ai | Pending | Lone scholar-warrior figure standing quietly under a stone bridge in ancient market street, ink-wash brushwork, no facial detail, body language steady not humbled, crowd as faint ink dots in background; restraint as strength | none | local | |
| 186 | | qianlong_pool.png | 1280×720 | 1.78 | 潜龙勿用 atmosphere | Background | #1 full-bleed background with floating title + #28 radial gradient vignette | ai | Pending | Deep still pool surrounded by craggy ink-wash cliffs, suggestion of a coiled dragon shape barely visible beneath the water surface as faint darker ink swirls, mist rising; latent power waiting for time | none | hero_page | |
| 187 | | zengguofan_lamp.png | 1280×720 | 1.78 | 曾国藩 笨功夫 atmosphere | Illustration | #2 left-third image + right text body + #21 rounded rectangle crop | ai | Pending | Single oil lamp on a wooden desk with stacked ancient books and an open ink-stone, no human figure, view through a paper window showing pre-dawn darkness; persistence in solitude | none | local | |
| 188 | | closing_mountain.png | 1280×720 | 1.78 | 结语：山外有山 | Background | #1 full-bleed background with floating title + #29 two-stop scrim | ai | Pending | Layered ink-wash mountain ridges receding into distance, foreground sharp dark mountain, middle and far ridges progressively lighter into mist, vast empty sky reserved for closing quote; depth and patience | none | hero_page | |
| 189 | |
| 190 | > **Image-as-canvas (#38–#46) coverage note**: 本篇为文学哲思散文，无 KPI / 流程节点 / 仪表盘 / 网络架构图等需"在图上叠加结构化信息层"的页面；所有 image-bearing 页面均为氛围烘托型（hero / atmosphere），原生 SVG 文字层独立承担信息，无需 #38–46 family。这是该 deck 内容性质决定的合理偏移。 |
| 191 | |
| 192 | --- |
| 193 | |
| 194 | ## IX. Content Outline |
| 195 | |
| 196 | ### Part 1: 开篇 |
| 197 | |
| 198 | #### Slide 01 — Cover |
| 199 | |
| 200 | - **Layout**: Full-bleed background image + 居中竖排标题 + 副标题 + 落款（page_rhythm: anchor） |
| 201 | - **Title**: 男人最顶级的城府：藏拙 |
| 202 | - **Subtitle**: 沉得住，藏得住，等得起 |
| 203 | - **Info**: 谋事论 · 论尽成事逻辑 |
| 204 | |
| 205 | #### Slide 02 — 引子 |
| 206 | |
| 207 | - **Layout**: Full-bleed faded backdrop + 中央大字引言（page_rhythm: breathing） |
| 208 | - **Title**: （无标题，引文即主体） |
| 209 | - **Content**: "男人太早亮牌，就是给别人递刀。" |
| 210 | |
| 211 | ### Part 2: 看见问题 |
| 212 | |
| 213 | #### Slide 03 — 烧烤摊故事 |
| 214 | |
| 215 | - **Layout**: 左右对照（5:5 split）+ 底部一行总结（page_rhythm: dense） |
| 216 | - **Title**: 烧烤摊上的两种人 |
| 217 | - **Content**: |
| 218 | - 左：刚升职的人——开口讲资源、人脉、项目；旁人嘴上恭维、眼里盘算 |
| 219 | - 右：另一个男人——话不多，只问关键问题，散场时把每人底牌看了七八分 |
| 220 | - 底部："世上的局，很多不是输在没本事，而是输在太早让别人知道你有什么本事" |
| 221 | |
| 222 | #### Slide 04 — 什么是藏拙 |
| 223 | |
| 224 | - **Layout**: 三列卡片（page_rhythm: dense） |
| 225 | - **Title**: 藏拙 ≠ 装傻 ≠ 认怂 |
| 226 | - **Content**: 三个核心动作 |
| 227 | - 把锋芒收起来 |
| 228 | - 把欲望压下去 |
| 229 | - 把自己从别人的视线中心挪开 |
| 230 | |
| 231 | #### Slide 05 — 木秀于林 |
| 232 | |
| 233 | - **Layout**: Full-bleed + 居中大字引文（page_rhythm: breathing） |
| 234 | - **Title**: （引文页，无小标题） |
| 235 | - **Content**: "木秀于林，风必摧之"——《增广贤文》 |
| 236 | - 解读：实力没强到能自保时，锋芒就是风险 |
| 237 | |
| 238 | ### Part 3: 常见错误 |
| 239 | |
| 240 | #### Slide 06 — 年轻人最容易犯的错 |
| 241 | |
| 242 | - **Layout**: 2x2 grid 卡片 + 底部一句话（page_rhythm: dense） |
| 243 | - **Title**: 把"被看见"误以为"被尊重" |
| 244 | - **Content**: |
| 245 | - 刚有点成绩，就想让所有人知道 |
| 246 | - 刚有点资源，就忍不住展示 |
| 247 | - 刚看透一点人性，就急着戳破 |
| 248 | - 底部：明处的人没有遮挡，所有试探、嫉妒、借力、拆台，都会先冲他来 |
| 249 | |
| 250 | #### Slide 07 — 会藏拙的人怎么做 |
| 251 | |
| 252 | - **Layout**: 三列对照 + 底部引言（page_rhythm: dense） |
| 253 | - **Title**: 不在小场面里浪费锋芒 |
| 254 | - **Content**: |
| 255 | - 饭局上 — 不抢话 |
| 256 | - 会议里 — 不乱表态 |
| 257 | - 人群中 — 不急着显摆关系 |
| 258 | - 底部："沉默不是空白，是在收集信息；退让不是无能，是不把弹药浪费在无价值的目标上" |
| 259 | |
| 260 | ### Part 4: 历史佐证 |
| 261 | |
| 262 | #### Slide 08 — 韩信胯下之辱 |
| 263 | |
| 264 | - **Layout**: 右侧出血图 + 左侧文字（page_rhythm: anchor） |
| 265 | - **Title**: 韩信胯下之辱 |
| 266 | - **Content**: |
| 267 | - 不是为了歌颂屈辱 |
| 268 | - 而是他没有把人生押在一场街头冲突里 |
| 269 | - 小局赢了，可能只是出口气；大局赢了，才有翻身的资格 |
| 270 | |
| 271 | #### Slide 09 — 藏拙的高明 |
| 272 | |
| 273 | - **Layout**: 四行表格（page_rhythm: dense） |
| 274 | - **Title**: 把"拙"变成盾 |
| 275 | - **Content**: 表现 × 旁人反应 四行对照 |
| 276 | - 太聪明 → 防他 |
| 277 | - 太强势 → 躲他 |
| 278 | - 太急切 → 资源方压价 |
| 279 | - 太想赢 → 对手拖他入局 |
| 280 | - 底部：适当慢一点、钝一点、淡一点，反而能减少无谓的消耗 |
| 281 | |
| 282 | #### Slide 10 — 潜龙勿用 |
| 283 | |
| 284 | - **Layout**: Full-bleed + 居中引文（page_rhythm: breathing） |
| 285 | - **Title**: （引文页） |
| 286 | - **Content**: "潜龙勿用"——《易经》 |
| 287 | - 解读：龙在深渊时，不是没有力量，而是时机未到 |
| 288 | |
| 289 | ### Part 5: 辨明区分 |
| 290 | |
| 291 | #### Slide 11 — 藏拙 ≠ 消极避世 |
| 292 | |
| 293 | - **Layout**: pros_cons_chart 双列对照（page_rhythm: dense） |
| 294 | - **Title**: 藏拙 ≠ 消极避世 |
| 295 | - **Visualization**: pros_cons_chart |
| 296 | - **Content**: 四维对照 |
| 297 | - 动机：消极=怕输 vs 藏拙=为赢 |
| 298 | - 状态：消极=越躲越废 vs 藏拙=越藏越厚 |
| 299 | - 沉默：消极=借口 vs 藏拙=蓄力 |
| 300 | - 内心：消极=委屈 vs 藏拙=布局 |
| 301 | |
| 302 | #### Slide 12 — 曾国藩典范 |
| 303 | |
| 304 | - **Layout**: 左图 + 右文字（page_rhythm: anchor） |
| 305 | - **Title**: 曾国藩：笨功夫、慢功夫、深功夫 |
| 306 | - **Content**: |
| 307 | - 早年并不以聪明见长，甚至常被认为迟钝 |
| 308 | - 靠的是：笨功夫 / 慢功夫 / 深功夫 |
| 309 | - 不争一时快，不贪一寸巧 |
| 310 | - 拙到深处，是定力；定力够了，局势才会慢慢站到他这边 |
| 311 | |
| 312 | ### Part 6: 核心输出 |
| 313 | |
| 314 | #### Slide 13 — 藏住四件事 养出四种力 |
| 315 | |
| 316 | - **Layout**: vertical_list 四条编号原则（page_rhythm: dense） |
| 317 | - **Title**: 藏住四件事，养出四种力 |
| 318 | - **Visualization**: vertical_list |
| 319 | - **Content**: |
| 320 | - 01 藏住情绪 → 不被几句话激怒 |
| 321 | - 02 藏住野心 → 不被人提前设防 |
| 322 | - 03 藏住实力 → 不被人过早消耗 |
| 323 | - 04 藏住判断 → 不在局势未明时被迫站队 |
| 324 | |
| 325 | #### Slide 14 — 结语 |
| 326 | |
| 327 | - **Layout**: Full-bleed 远山 + 中央三行短语 + 落款（page_rhythm: anchor） |
| 328 | - **Title**: 顶级城府 = 压表现欲 × 稳胜负心 × 延迟满足 |
| 329 | - **Content**: |
| 330 | - 沉得住，才不怕暂时被低估 |
| 331 | - 藏得住，才不怕一时没掌声 |
| 332 | - 等得起，才有资格在该出手的时刻，让结果替自己说话 |
| 333 | |
| 334 | --- |
| 335 | |
| 336 | ## X. Speaker Notes Requirements |
| 337 | |
| 338 | - 文件命名：`notes/01_cover.md` … `notes/14_closing.md` |
| 339 | - 风格：conversational（散文气，避免商务术语） |
| 340 | - 目的：inspire（传播 / 共鸣 / 触发反思） |
| 341 | - 单页时长：约 30–45 秒口述 |
| 342 | |
| 343 | --- |
| 344 | |
| 345 | ## XI. Technical Constraints Reminder |
| 346 | |
| 347 | ### SVG Generation Must Follow: |
| 348 | |
| 349 | 1. viewBox: `0 0 1280 720` |
| 350 | 2. 背景用 `<rect>` 元素铺底色 |
| 351 | 3. 文本换行用 `<tspan>`（禁止 `<foreignObject>`） |
| 352 | 4. 透明度默认用 `fill-opacity` / `stroke-opacity`；`rgba()` 保持转换兼容 |
| 353 | 5. 禁止：`mask` / `<style>` / `class` / `foreignObject` / `textPath` / `animate*` / `script` |
| 354 | 6. 文本中的字符直接写 Unicode（— · → " " ©），禁止 HTML 实体（` ` `—` 等）；XML 保留字按需转义（`&` `<`） |
| 355 | |
| 356 | ### PPT Compatibility Rules: |
| 357 | |
| 358 | - opacity 默认写在子元素上；`<g opacity="...">` 可转换但会产生近似保真 warning |
| 359 | - 图片半透明用覆盖矩形（`<rect fill="bg-color" opacity="0.x"/>`） |
| 360 | - 仅允许行内样式；禁止外部 CSS 和 `@font-face` |
| 361 |