refactor:design idea

skills/lark-slides/SKILL.md

@@ -98,20 +98,26 @@ lark-cli auth login --domain slides
 
 ## 设计思路
 
+你要以顶级 PPT 设计专家的标准工作：先判断内容、受众、场景和叙事目标，再设计信息层级、视觉系统、版式、字体、配色和图文关系；不要只把内容排进页面，而要让每一页都像可交付的专业演示稿。
+
 ### 内容先行
 
 - 每页只服务一个核心观点。内容页标题应写成带判断的结论句，而不是主题标签；读者只看标题就能知道这一页要证明什么。
+- 先判断这一页要完成的任务：提出判断、证明判断、比较选项、解释流程、展示阶段、呈现数据、建立情绪，或完成过渡。页面结构必须服务这个任务。
 - 受众和交付方式决定密度：演讲型 deck 更适合少字、强节奏、分步呈现；自读型 deck 必须在没有讲解和点击的情况下完整可读。
 - 并列观点要互不重叠、没有明显缺口，通常控制在 3-5 个，最多不要超过 7 个；排序只选一种逻辑：时间、结构或重要性。
 - 封面、章节页、内容页、结尾页承担不同任务。章节页只做过渡，不承载多点论证；短 deck 不要机械加入 agenda、Q&A 或多个收尾页。
+- 数据页必须先写清 takeaway，再选择图表或数字呈现方式。不要把图表标题写成指标名，而要写成图表证明的结论。
 
 ### 视觉系统
 
-- 先根据内容主题、行业语境、受众和交付方式推导视觉方向，再确定匹配主题情绪的配色、字体、图形语言和页面密度；不要套用通用高饱和模板色，也不要让用户在一堆抽象风格词里做选择。
+- 先根据内容主题、行业语境、受众和交付方式推导视觉方向，再确定配色、字体、图形语言和页面密度；不要套用通用高饱和模板色，也不要让用户在抽象风格词里做选择。
+- 样本中更稳定的高级感来自“中性底色 + 少量强调色”，而不是全页高饱和。优先使用白、浅灰、深灰、蓝灰、炭黑作为基底，再用绿色、红色、金色、橙色、蓝色等小面积强调关键数字、结论或状态。
 - 同一份 deck 要锁定一套视觉系统，并贯穿所有页面：主色、背景、正文颜色、强调色、标题处理、留白密度、图标/图形风格都要稳定。
-- 生成 XML 前先写出 deck 级颜色令牌并明确分工：`primary` 承担品牌/结构，`background` / `background_alt` 承担页面基底，`text_primary` / `text_body` / `muted` 保证阅读层级，`accent` 只用于关键数字、结论或行动点；后续页面复用这些令牌，不要每页临时发明新颜色。
-- 每页都必须显式写 `<style><fill>...</fill></style>`。普通内容页默认复用同一明暗基调和底色体系；只有封面、章节页、强调页可以有意改变背景，并且必须保留同一主色、边栏、纹理或视觉母题。
-- 背景策略要克制：纯色、渐变或图片三选一作为主背景，不要叠多层全页色块。深色、发光或科技感页面，应使用平整深色背景 + 局部发光元素，而不是半透明大渐变把页面洗白。
+- 生成 XML 前先写出 deck 级颜色令牌并明确分工：`primary` 承担品牌/结构，`background` / `background_alt` 承担页面基底，`text_primary` / `text_body` / `muted` 保证阅读层级，`accent` 只用于关键数字、结论、风险、增长或行动点；后续页面复用这些令牌，不要每页临时发明新颜色。
+- 普通内容页默认使用同一明暗基调。封面、章节页、强调页可以改变背景，但必须保留同一主色、边栏、纹理、图形母题或标题处理方式。
+- 每页都必须显式写 `<style><fill>...</fill></style>`。背景策略要克制：纯色、渐变或图片三选一作为主背景，不要叠多层全页色块。
+- 深色、发光或科技感页面，应使用平整深色背景 + 局部发光元素，而不是半透明大渐变把页面洗白。
 - 正文和注释不要使用高饱和色；高饱和或高亮度颜色只作为小面积 `accent`，避免用于大段文字、大面积背景或整页高饱和渐变。
 - 所有文字、图标、线条和图表都必须与背景保持清晰可读的对比；不要把“对比充足”做成刺眼的纯黑/纯白/荧光色组合。弱化信息可以降低饱和度或透明度，但不能牺牲可读性。
 - 图片或渐变背景上放文字时，给文字区域加半透明遮罩、色块或足够留白；不要把正文直接压在复杂背景上。
@@ -121,10 +127,12 @@ lark-cli auth login --domain slides
 ### 字体与字号
 
 - 标题字体可以有性格，正文字体必须清晰耐读；不要整份 deck 都默认 Arial。
+- 当前样本中中文正文最稳定的是现代无衬线系统，尤其接近 `Noto Sans SC` / 思源黑体方向；编辑感或文化感页面会使用 `Noto Serif SC` / 思源宋体方向，但不应全篇滥用。
 - 中英文混排时，字体族先写英文/拉丁字体，再写中文/CJK 字体，最后写通用 fallback；标题和正文各用一套稳定组合。
 - 字体选择要匹配视觉系统的类别和处理方式：衬线、无衬线、圆体、等宽、粗窄标题、全大写等风格不要随意互换。
 - 常用标题方向：`Playfair Display` / `EB Garamond` / `Lora` 适合编辑感和高级感；`Anton` / `Bebas Neue` / `Oswald` 适合强冲击标题；`DM Sans` / `Montserrat` / `Poppins` 适合现代产品和商业正文。
-- 常用中文方向：`思源宋体` 适合长文和编辑感；`思源黑体` / `黑体` 适合中性现代；`寒蝉德黑体` 适合工业和科技；`寒蝉全圆体` / `资源圆体` 适合温暖亲和；书法类字体只用于少量标题。
+- 常用中文方向：`思源宋体` 适合长文和编辑感；`思源黑体` / `黑体` / `Noto Sans SC` 适合中性现代；`寒蝉德黑体` 适合工业和科技；`寒蝉全圆体` / `资源圆体` 适合温暖亲和；书法类字体只用于少量标题。
+- 字号要形成清晰层级。标题、分区标题、正文、注释、Hero number 至少要有 3 个可见层级；不要让标题、标签和正文看起来几乎一样大。
 
 | 元素 | 建议字号 |
 |------|----------|
@@ -136,22 +144,29 @@ lark-cli auth login --domain slides
 | 注释 / 来源 | 11-13px |
 | Hero number | 80-140px |
 
-不要为了填满空页面而盲目放大字体；页面显得空时，优先补充有意义的信息、调整构图或强化边缘对齐。
+- 不要为了填满空页面而盲目放大字体；页面显得空时，优先补充有意义的信息、调整构图、强化边缘对齐或增加视觉锚点。
+- 标题文本框要预留足够宽度，避免本应单行的标题意外换行。正文过长时先删减内容，再考虑缩小字号。
 
 ### 布局
 
 - 先判断内容关系，再设计版式。比较、流程、时间线、循环、层级、矩阵、漏斗、整体-部分、因果等关系，应通过位置、对齐、分组、比例和流向直接表达。
+- 高质量样本里最常见的稳定结构是“顶部结论标题 + 下方内容区”，以及“左文右图 / 左图右文”的双区布局。生成页面时优先明确标题区、证据区、解释区，而不是随手摆放元素。
 - 版式本身要承载逻辑：比较用并列和基线对齐，流程用方向和连接，层级用尺度和嵌套，矩阵用坐标和象限，因果用箭头和阅读顺序。
 - 每页都应围绕该页内容重新组织，不要从固定模板里盖章；同一 deck 可以复用视觉母题，但不要所有页面都是标题 + 三 bullets。
 - 页面要留呼吸感。内容块之间保持稳定间距，卡片内边距要真实存在；文字不要贴边，也不要被装饰线、图片或页脚挤压。
+- 相关元素之间距离更近，不相关元素之间距离更远。不要把所有间距做成平均值；间距本身就是分组和层级。
+- 并列内容尽量使用同宽、同高、同内边距的模块。卡片、列、表格、小图、多指标块必须共享网格和 slot 顺序，否则读者无法快速比较。
 - 正文默认左对齐；只有封面、章节页、结尾页、大号数字或少量仪式感页面适合居中。
 
 ### 视觉元素与图表
 
 - 视觉元素必须承载意义或引导注意力，不做填空装饰。图片、图标、图表、表格、色块、连线都要解释内容关系、强调重点或改善阅读节奏。
 - 每个内容页至少应有一个非纯文本视觉锚点：图片、图标、图表、表格、流程、对比结构、大号数字、示意图或抽象 shape 组合。
+- 卡片只用于真正并列的内容。每张卡片应有相同的内部结构：图标/编号、标题、短说明、关键数字或状态；不要把不具备并列关系的段落硬塞进卡片。
+- 流程和时间线使用重复节点 + 克制连线。连线应表达顺序、依赖或阶段，不要穿过文字，不要用复杂箭头装饰页面。
 - 信息图、截图、图表等素材要保持原始比例；不要为了塞进版面强行裁切或拉伸。装饰性照片可以更自由，但仍要服务主题和构图。
 - 有真实数据序列时，先写清图表要证明的 takeaway，再选择图表类型；一张图只表达一个核心结论。单个数字或两项简单对比，优先用大号数字 callout，不必硬画图。
+- 数据页可以采用“Hero number + 解释 + 图表证据”的结构。大数字必须配单位、时间范围、比较对象或解释句，不能只放一个孤立数字。
 - 饼图 / 环图只适合表达明确的整体构成；不确定时优先使用排序条形图。多系列数据要控制数量，必要时合并为 Other。
 - 封面和结尾页的图片不要自带文字；文字应由 slide 渲染，避免图片中文字不可控、不可编辑或与语言风格冲突。
 
@@ -175,5 +190,129 @@ lark-cli auth login --domain slides
 - 不要只设计一页，其余页面保持 plain；视觉系统必须全篇贯彻，或者全篇保持有意克制。
 - 不要让普通内容页在深色、浅色、图片背景之间来回切换；背景明暗变化必须服务封面、章节、强调或总结等明确页面角色。
 - 不要混用太多字体、字号、圆角、阴影和强调色；变化必须有层级意义。
+- 不要用高饱和色填满背景、正文或大面积卡片；更稳定的做法是中性基底、清晰文字和小面积 accent。
 - 不要用图表承载多个结论，也不要因为有数字就机械画图。
 - 不要在标题下方画装饰强调线作为默认设计手法；优先用空间关系、局部低饱和色块、尺度、分区和对齐建立层级。
+- 不要把并列卡片、比较列、时间节点做成不同尺寸、不同内边距、不同标题层级；除非差异本身就是要表达的信息。
+
+## PPT 主题配色体系
+
+本章节用于根据不同 PPT 内容分类，选择匹配的视觉主题与配色方案。配色设计遵循三个原则：
+
+1. 内容气质优先：颜色服务于汇报场景，而不是单纯追求好看。
+2. 层级清晰：每套配色都区分背景色、正文色、主色、辅助色和强调色。
+3. 克制高级：大面积颜色低饱和，关键结论和数据才使用高识别度强调色。
+
+### 配色使用规则
+
+| 色槽 | 用途 |
+|---|---|
+| 背景色 | 页面底色、大面积留白区域、浅色模块背景 |
+| 正文色 | 正文、说明文字、页脚、图表标签 |
+| 主色 | 封面、章节页、标题、核心模块 |
+| 辅助色 | 图表、分组、信息卡片、二级视觉层级 |
+| 强调色 | 关键数字、结论标签、重点标注、行动按钮 |
+
+建议使用比例：
+
+| 类型 | 比例 | 说明 |
+|---|---:|---|
+| 背景色 | 70% | 保持页面干净、可读 |
+| 主色/辅助色 | 20% | 建立主题识别和结构层级 |
+| 强调色 | 10% | 只用于最关键的信息 |
+
+---
+
+### 一级分类主题配色表
+
+| 一级分类 | 推荐主题名 | 背景色 | 正文色 | 主色 | 辅助色 | 强调色 | 设计气质 |
+|---|---|---:|---:|---:|---:|---:|---|
+| 战略决策 | Midnight Capital | `#F6F7F9` | `#1B2430` | `#102A43` | `#486581` | `#C89B3C` | 专业、克制、资本感 |
+| 教学/科研 | Sage Lab | `#F7FAF8` | `#253B36` | `#2F6F68` | `#9DBFAD` | `#E6B450` | 清晰、可信、学术感 |
+| 工作总结与经验分享 | Slate System | `#F5F6F8` | `#1F2937` | `#3E4C59` | `#8A98A8` | `#2FA876` | 稳健、复盘、结构化 |
+| 商业增长 | Signal Growth | `#FFF7F1` | `#2B2B2B` | `#D94A2B` | `#F08A3C` | `#2563EB` | 活力、转化、增长感 |
+| 技术研发 | Electric Blueprint | `#F5F7FF` | `#172033` | `#273469` | `#4C63B6` | `#00A7B5` | 理性、工程、科技感 |
+| 职能管理 | Civic Order | `#F7F8F5` | `#24312F` | `#245B4F` | `#7D9188` | `#B9972F` | 规范、秩序、组织感 |
+| 个人提升与表达 | Soft Presence | `#FFF8F4` | `#2D2A28` | `#E76F51` | `#F2B8A2` | `#2A9D8F` | 亲和、成长、表达感 |
+
+---
+
+### 二级场景配色建议
+
+| 场景 | 推荐主题 | 配色说明 |
+|---|---|---|
+| 投资分析、投资报告、行业研究报告 | Midnight Capital | 使用深蓝建立专业感，铜金用于关键结论和核心数字 |
+| 咨询顾问、战略宣讲 | Midnight Capital | 适合逻辑严密、判断明确的商业分析型页面 |
+| 融资 Pitch Deck、商业计划书、项目路演 | Midnight Capital / Signal Growth | 若偏资本叙事用深蓝金，若偏增长故事用橙红蓝 |
+| 课程设计、教学课件 | Sage Lab | 青绿色降低阅读压力，适合长时间观看 |
+| 论文阐述、开题/答辩报告 | Sage Lab / Electric Blueprint | 学术型用青绿，技术型用靛蓝电青 |
+| 研究方向调研 | Sage Lab | 保持理性和可信，不宜过度商业化 |
+| 培训课件、述职晋升 | Slate System | 灰蓝体系更适合正式职场表达 |
+| 项目复盘、项目结项、阶段汇报 | Slate System | 用绿色强调进展、成果和正向结论 |
+| 工作总结、日报、周报、月报、年终总结 | Slate System | 稳定、清晰、适合高频汇报 |
+| 产品介绍、品牌宣传 | Signal Growth | 暖色建立吸引力，蓝色用于建立可信度 |
+| 招商加盟方案、增长方案提报 | Signal Growth | 强调行动、机会、转化和商业结果 |
+| 创意提案 | Signal Growth | 可提高强调色使用比例，增强视觉记忆点 |
+| 账号运营汇报 | Signal Growth / Slate System | 增长结果用橙红蓝，常规复盘用灰蓝绿 |
+| 市场分析报告、数据分析报告 | Midnight Capital / Slate System | 战略判断用深蓝金，过程分析用灰蓝绿 |
+| 功能说明、技术可行性分析报告 | Electric Blueprint | 靛蓝和电青适合表达技术结构与方案可信度 |
+| 设计提案 | Electric Blueprint / Soft Presence | 产品设计用科技蓝，体验表达可用柔和暖色 |
+| 政策解读、制度宣贯 | Civic Order | 墨绿和旧金显得庄重、规范 |
+| 党建工作总结 | Civic Order | 可适当加入深红作为局部强调，但不建议大面积使用 |
+| 新员工入职培训 | Civic Order / Slate System | 制度流程用墨绿，通用培训用灰蓝 |
+| 自我介绍、生活学习分享 | Soft Presence | 亲和、不压迫，适合轻表达场景 |
+| 调研总结 | Soft Presence / Slate System | 偏个人观察用暖色，偏工作结论用灰蓝 |
+
+---
+
+### 单页应用建议
+
+#### 封面页
+
+优先使用主色作为大标题或视觉主背景，强调色只用于副标题、关键词或日期。
+
+示例：
+
+- 战略决策：深蓝背景 + 铜金关键词
+- 教学科研：浅绿背景 + 深青标题
+- 商业增长：暖白背景 + 橙红标题 + 蓝色重点词
+
+#### 目录页
+
+使用主色标记章节编号，辅助色用于分隔线或图标，不建议使用过多强调色。
+
+#### 数据页
+
+正文和坐标轴使用正文色，主数据系列使用主色，重点数据使用强调色。
+
+#### 结论页
+
+可以适当提高主色和强调色占比，用于强化最终判断。
+
+---
+
+### 不建议的配色方式
+
+| 问题 | 原因 |
+|---|---|
+| 大面积使用高饱和红、橙、紫 | 容易显得廉价，且阅读压力高 |
+| 一页中同时出现 5 个以上高存在感颜色 | 视觉焦点分散，削弱专业感 |
+| 浅黄色、浅绿色直接承载正文 | 对比度不足，可读性差 |
+| 全套 PPT 只有同一色相的深浅变化 | 容易单调，缺少设计记忆点 |
+| 每页都使用强调色 | 强调色会失效，重点不再突出 |
+
+---
+
+### 推荐默认选择
+
+如果无法判断具体场景，优先使用以下默认方案：
+
+| 场景类型 | 默认主题 |
+|---|---|
+| 商业判断类 | Midnight Capital |
+| 学术教学类 | Sage Lab |
+| 工作汇报类 | Slate System |
+| 增长营销类 | Signal Growth |
+| 技术产品类 | Electric Blueprint |
+| 管理制度类 | Civic Order |
+| 个人表达类 | Soft Presence |