| 1 | # 2026家居趋势 - Design Spec |
| 2 | |
| 3 | > This document is the human-readable design narrative — rationale, audience, style, color choices, content outline. It is read once by downstream roles for context. |
| 4 | > |
| 5 | > The machine-readable execution contract lives in `spec_lock.md` (short form of color / typography / icon / image decisions). Executor re-reads `spec_lock.md` before every SVG page to resist context-compression drift. Keep the two files in sync; if they diverge, `spec_lock.md` wins. |
| 6 | |
| 7 | ## I. Project Information |
| 8 | |
| 9 | | Item | Value | |
| 10 | | ---- | ----- | |
| 11 | | **Project Name** | 2026家居趋势：回归"人的尺度" | |
| 12 | | **Canvas Format** | PPT 16:9 (1280×720) | |
| 13 | | **Page Count** | 12 | |
| 14 | | **Design Style** | General Versatile (A) | |
| 15 | | **Target Audience** | 室内设计师、家居爱好者、装修计划者 | |
| 16 | | **Use Case** | 家居设计趋势分享/培训演示 | |
| 17 | | **Created Date** | 2026-04-22 | |
| 18 | |
| 19 | --- |
| 20 | |
| 21 | ## II. Canvas Specification |
| 22 | |
| 23 | | Property | Value | |
| 24 | | -------- | ----- | |
| 25 | | **Format** | PPT 16:9 | |
| 26 | | **Dimensions** | 1280×720 | |
| 27 | | **viewBox** | `0 0 1280 720` | |
| 28 | | **Margins** | left/right 60px, top/bottom 50px | |
| 29 | | **Content Area** | 1160×620 | |
| 30 | |
| 31 | --- |
| 32 | |
| 33 | ## III. Visual Theme |
| 34 | |
| 35 | ### Theme Style |
| 36 | |
| 37 | - **Style**: General Versatile — 杂志质感的图文混排风格 |
| 38 | - **Theme**: Dark theme（深色暖调底色） |
| 39 | - **Tone**: 高端、温暖、自然、人文、杂志感 |
| 40 | |
| 41 | ### Color Scheme |
| 42 | |
| 43 | | Role | HEX | Purpose | |
| 44 | | ---- | --- | ------- | |
| 45 | | **Background** | `#1A1714` | 深棕暖黑底色 | |
| 46 | | **Secondary bg** | `#2A2520` | 卡片/区域背景 | |
| 47 | | **Primary** | `#C4A882` | 标题装饰、金色暖调 | |
| 48 | | **Accent** | `#D4956A` | 数据高亮、关键信息 | |
| 49 | | **Secondary accent** | `#8B7355` | 渐变过渡、次要装饰 | |
| 50 | | **Body text** | `#E8E0D4` | 主体文字（浅暖白） | |
| 51 | | **Secondary text** | `#B0A08E` | 注释说明 | |
| 52 | | **Tertiary text** | `#7A6E60` | 补充信息、页脚 | |
| 53 | | **Border/divider** | `#3D362E` | 卡片边框、分隔线 | |
| 54 | | **Success** | `#7BA37B` | 可持续/正向指标 | |
| 55 | | **Warning** | `#C06048` | 强调/警示 | |
| 56 | |
| 57 | ### Gradient Scheme |
| 58 | |
| 59 | ```xml |
| 60 | <!-- Title gradient --> |
| 61 | <linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 62 | <stop offset="0%" stop-color="#C4A882"/> |
| 63 | <stop offset="100%" stop-color="#D4956A"/> |
| 64 | </linearGradient> |
| 65 | |
| 66 | <!-- Background decorative gradient --> |
| 67 | <radialGradient id="bgDecor" cx="80%" cy="20%" r="50%"> |
| 68 | <stop offset="0%" stop-color="#C4A882" stop-opacity="0.08"/> |
| 69 | <stop offset="100%" stop-color="#C4A882" stop-opacity="0"/> |
| 70 | </radialGradient> |
| 71 | ``` |
| 72 | |
| 73 | --- |
| 74 | |
| 75 | ## IV. Typography System |
| 76 | |
| 77 | ### Font Plan |
| 78 | |
| 79 | **Typography direction**: Editorial Display（杂志展示风）— 标题使用衬线字体传递高级感，正文使用无衬线保证阅读性。 |
| 80 | |
| 81 | | Role | Chinese | English | Fallback tail | |
| 82 | | ---- | ------- | ------- | ------------- | |
| 83 | | **Title** | `SimSun` | `Georgia` | `serif` | |
| 84 | | **Body** | `"Microsoft YaHei"`, `"PingFang SC"` | `Arial` | `sans-serif` | |
| 85 | | **Emphasis** | `SimSun` | `Georgia` | `serif` | |
| 86 | | **Code** | — | `Consolas, "Courier New"` | `monospace` | |
| 87 | |
| 88 | **Per-role font stacks**: |
| 89 | |
| 90 | - Title: `Georgia, SimSun, serif` |
| 91 | - Body: `"Microsoft YaHei", "PingFang SC", Arial, sans-serif` |
| 92 | - Emphasis: `Georgia, SimSun, serif` |
| 93 | - Code: `Consolas, "Courier New", monospace` |
| 94 | |
| 95 | ### Font Size Hierarchy |
| 96 | |
| 97 | **Baseline**: Body font size = 22px（内容密度适中，每页 3-5 要点为主） |
| 98 | |
| 99 | | Purpose | Ratio to body | Size | Weight | |
| 100 | | ------- | ------------- | ---- | ------ | |
| 101 | | Cover title | 3.6x | 80px | Bold | |
| 102 | | Chapter opener | 2.2x | 48px | Bold | |
| 103 | | Page title | 1.5x | 32px | Bold | |
| 104 | | Subtitle | 1.3x | 28px | SemiBold | |
| 105 | | **Body content** | **1x** | **22px** | Regular | |
| 106 | | Annotation / caption | 0.73x | 16px | Regular | |
| 107 | | Page number / footnote | 0.55x | 12px | Regular | |
| 108 | |
| 109 | --- |
| 110 | |
| 111 | ## V. Layout Principles |
| 112 | |
| 113 | ### Page Structure |
| 114 | |
| 115 | - **Header area**: 50-80px, 含页面标题及装饰元素 |
| 116 | - **Content area**: 560-620px, 主要图文内容区域 |
| 117 | - **Footer area**: 30-40px, 页码及来源信息 |
| 118 | |
| 119 | ### Layout Pattern Library |
| 120 | |
| 121 | 本项目以图文并茂为核心，主要使用以下布局模式： |
| 122 | |
| 123 | | Pattern | Used In | |
| 124 | | ------- | ------- | |
| 125 | | **Full-bleed + floating text** | P01 封面、P10 可持续奢华 | |
| 126 | | **Asymmetric split (4:6 / 3:7)** | P03 色彩、P05 材质、P06 纹理、P08 奶油风 | |
| 127 | | **Symmetric split (5:5)** | P04 色彩实践、P09 波西米亚&复古 | |
| 128 | | **Center-radiating** | P07 CMT体系 | |
| 129 | | **Single column centered** | P02 引言 | |
| 130 | | **Three-column cards** | P11 书籍推荐 | |
| 131 | | **Negative-space-driven** | P12 结语 | |
| 132 | |
| 133 | ### Spacing Specification |
| 134 | |
| 135 | **Universal**: |
| 136 | |
| 137 | | Element | Current Project | |
| 138 | | ------- | --------------- | |
| 139 | | Safe margin from canvas edge | 60px | |
| 140 | | Content block gap | 30px | |
| 141 | | Icon-text gap | 10px | |
| 142 | |
| 143 | **Card-based layouts** (P07, P11): |
| 144 | |
| 145 | | Element | Current Project | |
| 146 | | ------- | --------------- | |
| 147 | | Card gap | 24px | |
| 148 | | Card padding | 24px | |
| 149 | | Card border radius | 12px | |
| 150 | |
| 151 | --- |
| 152 | |
| 153 | ## VI. Icon Usage Specification |
| 154 | |
| 155 | ### Source |
| 156 | |
| 157 | - **Built-in icon library**: `templates/icons/tabler-filled/` — 圆润贝塞尔曲线，契合家居/生活方式温暖调性 |
| 158 | - **Usage method**: Placeholder format `{{icon:tabler-filled/icon-name}}` |
| 159 | |
| 160 | ### Recommended Icon List |
| 161 | |
| 162 | | Purpose | Icon Path | Page | |
| 163 | | ------- | --------- | ---- | |
| 164 | | 色彩主题 | `{{icon:tabler-filled/palette}}` | P03, P04 | |
| 165 | | 材质主题 | `{{icon:tabler-filled/diamond}}` | P05 | |
| 166 | | 纹理主题 | `{{icon:tabler-filled/paint}}` | P06 | |
| 167 | | 家居 | `{{icon:tabler-filled/home}}` | P01, P02 | |
| 168 | | 太阳/光线 | `{{icon:tabler-filled/sun}}` | P05 | |
| 169 | | 树叶/自然 | `{{icon:tabler-filled/leaf}}` | P10 | |
| 170 | | 星星/亮点 | `{{icon:tabler-filled/sparkles}}` | P07 | |
| 171 | | 心/情感 | `{{icon:tabler-filled/heart}}` | P12 | |
| 172 | | 书籍 | `{{icon:tabler-filled/book}}` | P11 | |
| 173 | | 眼睛/视觉 | `{{icon:tabler-filled/eye}}` | P06 | |
| 174 | | 调整 | `{{icon:tabler-filled/adjustments}}` | P07 | |
| 175 | | 星标 | `{{icon:tabler-filled/star}}` | P08 | |
| 176 | |
| 177 | --- |
| 178 | |
| 179 | ## VII. Visualization Reference List |
| 180 | |
| 181 | | Visualization Type | Reference Template | Used In | |
| 182 | | ------------------ | ------------------ | ------- | |
| 183 | | concentric_circles | `templates/charts/concentric_circles.svg` | P07 (CMT三层体系) | |
| 184 | |
| 185 | --- |
| 186 | |
| 187 | ## VIII. Image Resource List |
| 188 | |
| 189 | | Filename | Dimensions | Ratio | Purpose | Intent | Type | Status | |
| 190 | | -------- | ---------- | ----- | ------- | ------ | ---- | ------ | |
| 191 | | intro_living.png | 1080x608 | 1.78 | P01 封面全屏背景 | Hero | Photography | Existing | |
| 192 | | space_overview.png | 800x540 | 1.48 | P02 引言配图 | Side-by-side | Photography | Existing | |
| 193 | | color_wheel.png | 559x823 | 0.68 | P03 色彩理论配图 | Side-by-side | Diagram | Existing | |
| 194 | | brown_cozy.png | 658x496 | 1.33 | P03 棕色舒适空间 | Accent | Photography | Existing | |
| 195 | | light_tone_room.png | 749x749 | 1.00 | P04 浅色调空间 | Side-by-side | Photography | Existing | |
| 196 | | saturated_room.png | 853x671 | 1.27 | P04 高饱和度空间 | Side-by-side | Photography | Existing | |
| 197 | | material_detail.png | 749x708 | 1.06 | P05 材质细节 | Side-by-side | Photography | Existing | |
| 198 | | light_material.png | 800x1000 | 0.80 | P05 光与材质 | Accent | Photography | Existing | |
| 199 | | texture_tactile.png | 615x398 | 1.55 | P06 触觉纹理 | Side-by-side | Photography | Existing | |
| 200 | | texture_visual.png | 519x569 | 0.91 | P06 视觉纹理 | Side-by-side | Photography | Existing | |
| 201 | | cmt_overview.png | 990x744 | 1.33 | P07 CMT体系总览 | Side-by-side | Photography | Existing | |
| 202 | | cmt_neutral_mix.png | 1023x636 | 1.61 | P07 中性色搭配 | Accent | Photography | Existing | |
| 203 | | dark_tone_luxury.png | 614x423 | 1.45 | P07 深色调奢华 | Accent | Photography | Existing | |
| 204 | | cream_style.png | 681x499 | 1.36 | P08 奶油风空间 | Side-by-side | Photography | Existing | |
| 205 | | bohemian_style.png | 615x924 | 0.67 | P09 波西米亚风 | Side-by-side | Photography | Existing | |
| 206 | | retro_style.png | 1080x608 | 1.78 | P09 怀旧复古风 | Side-by-side | Photography | Existing | |
| 207 | | sustainable_luxury.png | 417x500 | 0.83 | P10 可持续奢华 | Side-by-side | Photography | Existing | |
| 208 | | book_cover1.png | 1080x732 | 1.48 | P11 书籍封面 | Side-by-side | Photography | Existing | |
| 209 | | book_cover2.png | 1080x735 | 1.47 | P11 书籍封面背面 | Accent | Photography | Existing | |
| 210 | | book_inside1.png | 1080x741 | 1.46 | P11 书籍内页展示 | Accent | Photography | Existing | |
| 211 | | book_inside2.png | 1080x738 | 1.46 | P11 书籍内页展示 | Accent | Photography | Existing | |
| 212 | | book_display1.png | 1080x727 | 1.49 | P12 书籍展示 | Side-by-side | Photography | Existing | |
| 213 | | book_display2.png | 1080x743 | 1.45 | P12 书籍展示 | Accent | Photography | Existing | |
| 214 | |
| 215 | --- |
| 216 | |
| 217 | ## IX. Content Outline |
| 218 | |
| 219 | ### Part 1: 开篇 |
| 220 | |
| 221 | #### Slide 01 - 封面 |
| 222 | |
| 223 | - **Layout**: Full-bleed + floating text |
| 224 | - **Title**: 2026家居趋势 |
| 225 | - **Subtitle**: 回归"人的尺度"，让色彩、材质与纹理塑造"空间的高级感" |
| 226 | - **Info**: 基于《空间的高级感》· 2026 |
| 227 | - **Images**: `intro_living.png`（hero全屏，暗色渐变叠加层保证文字可读） |
| 228 | |
| 229 | #### Slide 02 - 从"网红风"到"人的尺度" |
| 230 | |
| 231 | - **Layout**: Single column centered + side-by-side image |
| 232 | - **Title**: 从"网红风"到"人的尺度" |
| 233 | - **Images**: `space_overview.png` |
| 234 | - **Content**: |
| 235 | - 过去几年家居"网红风"迅速更迭 |
| 236 | - 2026年转向：从视觉符号堆砌回归人本关怀 |
| 237 | - 高级感 = 色彩 + 材质 + 纹理的精妙搭配 |
| 238 | - 有颜值，更有温度与情感 |
| 239 | |
| 240 | ### Part 2: 三大底层元素 |
| 241 | |
| 242 | #### Slide 03 - 色彩：空间的情绪魔法师 |
| 243 | |
| 244 | - **Layout**: Asymmetric split (4:6) — 左图右文 |
| 245 | - **Title**: 色彩：空间的"情绪魔法师" |
| 246 | - **Images**: `color_wheel.png`（左侧主图），`brown_cozy.png`（右下小图点缀） |
| 247 | - **Content**: |
| 248 | - 色彩是空间的第一印象 |
| 249 | - 能改变视觉尺度、营造氛围 |
| 250 | - 暖色调 → 温柔包裹感；冷色调 → 开阔冷静 |
| 251 | - 不同色彩传递不同信号与心理反应 |
| 252 | |
| 253 | #### Slide 04 - 色彩实践：冷暖色调的空间效果 |
| 254 | |
| 255 | - **Layout**: Symmetric split (5:5) — 左右对比 |
| 256 | - **Title**: 冷暖色调的空间效果对比 |
| 257 | - **Images**: `light_tone_room.png`（左，浅色调），`saturated_room.png`（右，高饱和度） |
| 258 | - **Content**: |
| 259 | - 左：浅色调 → 增大光线反射 → 空间显得宽敞 |
| 260 | - 右：高饱和度 → 房间紧凑小巧 |
| 261 | - 灰绿 → 平静专注；咖色 → 阳光包裹；跳色 → 个性活力 |
| 262 | |
| 263 | #### Slide 05 - 材质：触手可及的空间语言 |
| 264 | |
| 265 | - **Layout**: Asymmetric split (3:7) — 右侧大图 |
| 266 | - **Title**: 材质：触手可及的空间语言 |
| 267 | - **Images**: `material_detail.png`（主图），`light_material.png`（次图/accent） |
| 268 | - **Content**: |
| 269 | - 材料是色彩搭配的物理基础 |
| 270 | - 原木地板 → 质朴温暖；手工编织 → 慵懒松弛 |
| 271 | - 光本身也是一种材质 |
| 272 | - 巧妙照明 + 色彩光影 → 不依赖昂贵材料也能实现高级感 |
| 273 | |
| 274 | #### Slide 06 - 纹理：赋予空间灵魂的细节 |
| 275 | |
| 276 | - **Layout**: Asymmetric split (5:5) — 左右并列 |
| 277 | - **Title**: 纹理：赋予空间灵魂的细节 |
| 278 | - **Images**: `texture_tactile.png`（左，触觉），`texture_visual.png`（右，视觉） |
| 279 | - **Content**: |
| 280 | - 纹理 = 空间的"指纹"，独一无二的辨识度 |
| 281 | - 触觉纹理：羊毛地毯 → 柔软温暖；粗陶花瓶 → 凹凸肌理 |
| 282 | - 视觉纹理：壁纸图案 → 眼睛"感受"肌理 |
| 283 | |
| 284 | ### Part 3: CMT 体系 |
| 285 | |
| 286 | #### Slide 07 - CMT 体系：色彩·材质·纹理的交响 |
| 287 | |
| 288 | - **Layout**: Center-radiating + accent images |
| 289 | - **Title**: CMT 体系：编织全方位感官体验 |
| 290 | - **Visualization**: concentric_circles (CMT三层) |
| 291 | - **Images**: `cmt_overview.png`（主视觉），`cmt_neutral_mix.png`（中性色案例），`dark_tone_luxury.png`（深色调案例） |
| 292 | - **Content**: |
| 293 | - CMT = Colour + Material + Texture |
| 294 | - 物理层：光滑/粗糙、透明/不透明、高光/亚光 |
| 295 | - 心理层：手工/工业、简朴/奢华、安慰/刺激 |
| 296 | - 不是简单叠加，是系统性编织 — 如交响乐团的指挥 |
| 297 | |
| 298 | ### Part 4: 2026 流行风格 |
| 299 | |
| 300 | #### Slide 08 - 奶油风进化论 |
| 301 | |
| 302 | - **Layout**: Asymmetric split (4:6) — 左文右图 |
| 303 | - **Title**: 奶油风 2.0：从公式化到细腻表达 |
| 304 | - **Images**: `cream_style.png` |
| 305 | - **Content**: |
| 306 | - 奶油风正经历深刻"进化" |
| 307 | - 不再只是"米白墙面+原木家具"的公式 |
| 308 | - 颜色基底：奶油色、燕麦色、米白色 |
| 309 | - 材质点睛：羊毛、亚麻、天然结疤原木、手工陶瓷 |
| 310 | - 真正的治愈空间 = 可触摸 + 可感知 |
| 311 | |
| 312 | #### Slide 09 - 波西米亚 & 怀旧复古 |
| 313 | |
| 314 | - **Layout**: Symmetric split (5:5) — 左右双风格 |
| 315 | - **Title**: 自由灵魂与时间记忆 |
| 316 | - **Images**: `bohemian_style.png`（左，波西米亚），`retro_style.png`（右，怀旧复古） |
| 317 | - **Content**: |
| 318 | - 波西米亚：大胆色彩 + 自由织物 + 手工挂毯 → "有层次的不羁感" |
| 319 | - 怀旧复古：风化木材 + 熟铁 + 柳编 → 带有使用痕迹的"时间感" |
| 320 | - 共同特点：对真实与情感的渴望 |
| 321 | |
| 322 | #### Slide 10 - 可持续奢华 |
| 323 | |
| 324 | - **Layout**: Full-bleed + floating text（breathing页） |
| 325 | - **Title**: 可持续奢华：负责任的审美 |
| 326 | - **Images**: `sustainable_luxury.png` |
| 327 | - **Content**: |
| 328 | - 2026 奢华不再是昂贵材料的堆砌 |
| 329 | - 环保饰面、自然光照、再生木材、软木、黄麻纤维 |
| 330 | - 从"炫耀性消费"转向"负责任的审美" |
| 331 | - 与世界和谐共存的生活哲学 |
| 332 | |
| 333 | ### Part 5: 结语 |
| 334 | |
| 335 | #### Slide 11 - 一本书解锁空间高级感 |
| 336 | |
| 337 | - **Layout**: Three-column cards（书籍展示） |
| 338 | - **Title**: 《空间的高级感》— 可拆解、可复制、可验证的美学体系 |
| 339 | - **Images**: `book_cover1.png`, `book_cover2.png`, `book_inside1.png`, `book_inside2.png` |
| 340 | - **Content**: |
| 341 | - 作者：宋文雯（清华大学色彩研究所常务副所长） |
| 342 | - 创新引入 CMF → CMT 体系 |
| 343 | - 色彩篇 + 材料篇 + 纹理篇 + 综合篇 |
| 344 | - 适合：设计师专业提升 / 装修业主自学 |
| 345 | |
| 346 | #### Slide 12 - 结语 |
| 347 | |
| 348 | - **Layout**: Negative-space-driven + accent image |
| 349 | - **Title**: 让家回归"人的尺度" |
| 350 | - **Images**: `book_display1.png`, `book_display2.png` |
| 351 | - **Content**: |
| 352 | - 高级感的本质：色彩、材质、纹理的精妙共鸣 |
| 353 | - 有颜值，更有温度与情感 |
| 354 | - 参考来源：《空间的高级感——设计师的色彩、材质、纹理搭配指南》 |
| 355 | |
| 356 | --- |
| 357 | |
| 358 | ## X. Speaker Notes Requirements |
| 359 | |
| 360 | Generate corresponding speaker note files for each page, saved to the `notes/` directory: |
| 361 | |
| 362 | - **File naming**: Match SVG names, e.g., `01_cover.md` |
| 363 | - **Content includes**: Script key points, timing cues, transition phrases |
| 364 | - **Style**: 自然对话式（conversational），适合设计趋势分享场景 |
| 365 | - **Duration**: 约 15-20 分钟总时长 |
| 366 | - **Purpose**: Inform + Inspire |
| 367 | |
| 368 | --- |
| 369 | |
| 370 | ## XI. Technical Constraints Reminder |
| 371 | |
| 372 | ### SVG Generation Must Follow: |
| 373 | |
| 374 | 1. viewBox: `0 0 1280 720` |
| 375 | 2. Background uses `<rect>` elements |
| 376 | 3. Text wrapping uses `<tspan>` (`<foreignObject>` FORBIDDEN) |
| 377 | 4. Transparency defaults to `fill-opacity` / `stroke-opacity`; `rgba()` remains converter-compatible |
| 378 | 5. FORBIDDEN: `clipPath`, `mask`, `<style>`, `class`, `foreignObject` |
| 379 | 6. FORBIDDEN: `textPath`, `animate*`, `script` |
| 380 | 7. `marker-start` / `marker-end` conditionally allowed: `<marker>` must be in `<defs>`, `orient="auto"`, shape must be triangle / diamond / circle |
| 381 | |
| 382 | ### PPT Compatibility Rules: |
| 383 | |
| 384 | - Prefer opacity on each child element; `<g opacity="...">` remains compatible with an approximate-fidelity warning |
| 385 | - Image transparency uses overlay mask layer (`<rect fill="bg-color" opacity="0.x"/>`) |
| 386 | - Inline styles only; external CSS and `@font-face` FORBIDDEN |
| 387 |