@lark-apaas/coding-steering 0.1.16-dev.eef2d6c → 0.1.17-alpha.0

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@lark-apaas/coding-steering",
-  "version": "0.1.16-dev.eef2d6c",
+  "version": "0.1.17-alpha.0",
   "description": "Stack-specific steering content for miaoda-coding templates",
   "type": "module",
   "files": [
     "steering"
   ],
+  "scripts": {
+    "lint:md": "markdownlint 'steering/**/*.md' --ignore 'steering/**/skills/**'"
+  },
   "devDependencies": {
     "markdownlint-cli": "^0.47.0"
   },
@@ -17,8 +20,5 @@
     "miaoda",
     "coding-steering"
   ],
-  "license": "MIT",
-  "scripts": {
-    "lint:md": "markdownlint 'steering/**/*.md' --ignore 'steering/**/skills/**'"
-  }
-}
+  "license": "MIT"
+}

package/steering/design-html/skills/make-a-deck/SKILL.md

@@ -11,23 +11,20 @@ available-agents:
 
 把自己当成演示文稿设计师，不是网页开发者：像顾问、分析师、高管准备董事会材料那样思考——清晰、叙事流、后排可读。每一页都同时是版式设计和文案写作。开始落 HTML 前，先写大纲；好的大纲本身就是一次叙事结构训练。
 
-## 信息密度与结构饱满度
+## 信息密度
 
-不要先把 deck 归类成预设模式，也不要用单个标签决定页面长相。根据受众、演示方式、内容复杂度和页面任务确定信息密度，先判断用户目标、材料形态和读者场景，再为每页设计具体的信息结构。好的 deck 不是字越少越高级，也不是字越多越专业，而是**结构饱满、层级清楚、文字克制、证据可扫读**。核心页可以更聚焦，分析与参考页可以更完整。
+选一种密度，不要停在模糊的中间态：
 
-同时避开两个失败极端：
+| 模式 | 场景 | 做法 |
+| --- | --- | --- |
+| 演讲型 / 低密度 | 发布会、公开演讲、keynote、现场 pitch | 一页一个观点，大标题强视觉、留白足、要点 1-3 条，必要时增加页数 |
+| 阅读型 / 高密度 | 内部汇报、评审、复盘、异步传阅 | 每页更自洽，可用表格 / 结构卡片 / 注释 / 图表，但层级要明确 |
 
-- **欠填充**：主体撑不起页面，只靠放大标题、拉高卡片、拉开列距、把来源压到底部或增加空白来撑版面。
-- **过填充**：页面被长句和大段正文塞满，缺少图、表、矩阵、路径、标注、层级和视觉转译。
+无论哪种，都不要让页面滚动、溢出、重叠或用过小字体；放不下就拆页。**不要把整份文档直接贴进幻灯片**——这是最常见的失败模式。落 plan 时就想清楚：哪些内容更适合做成表格、图表、流程、引用页或图片页。
 
-页面应该被图、表、矩阵、KPI strip、路径图、截图标注、对比框架或稳定卡片 scaffold 撑住，而不是被大字号正文撑满。图表如果是本页主要证据，就必须成为主视觉，不是塞在角落里的小配件。经验标尺：普通内容页通常 80-160 个中文字符 / 英文数字词就足够；复杂矩阵、前后对比、案例拆解页可以到 200+，但必须用表格或分层结构承载；转场、封面、结尾页可以低文字密度。超过约 180 个可读文本单位时，先把散文压成短标签、表格单元、图表注释或拆页，而不是继续堆句子。
-
-不要让页面滚动、溢出、重叠或用过小字体。放不下时先重构信息：合并相邻弱页、把散文改成表格 / 矩阵 / 时间线 / 注释图、压缩非关键留白；仍放不下再拆页。**不要把整份文档直接贴进幻灯片**——这是最常见的失败模式。落 plan 时就想清楚：哪些内容更适合做成表格、图表、流程、引用页或图片页。每页都要预留安全底边：页脚、页码、来源和正文之间必须有明确间距，主体元素不能贴到画布底部或被页面边界裁掉。
-
-## 叙事、标题与 Storyboard
+## 叙事与标题
 
 - 先写完整标题序列放进 `scratchpad.md`。只读标题就应能看懂整份 deck 的逻辑（像书的目录）。检查是否形成清楚路径：背景 → 问题 → 洞察 → 方案 → 证据 → 下一步。
-- 紧接着写 storyboard。为每页记录：本页阅读动作、关键判断、可用证据、信息关系、表达结构、是否足以独立成页、与前后页的节奏关系。不要给页面贴固定类型标签；用自然语言说明这一页为什么存在。
 - 选定一种标题语法并全程一致：要么名词短语（"市场机会""产品架构"），要么简短判断句（"新用户增长主要来自自然流量"）。
 - 大字号标题需要换行时，按语义短语断行，避免单字成行、标点出现在行首或拆开固定短语；可通过调整文本区、字号或断行位置修正失衡。
 - 每页正文只服务本页标题，不塞旁支。封面、章节页、转场页、结尾页也要服务故事，不做纯装饰。
@@ -40,52 +37,45 @@ available-agents:
 - 过度夸张的行动号召、为制造张力而制造张力。
 - 每页固定一个 takeaway 盒子，导致标题和正文重复。
 
-## 页面规划与节奏
+## 页面类型与节奏
+
+写第一页前先做 page-type map：为每页标注页型、叙事作用和需要承载的素材。避免所有页面都变成"标题 + 三栏卡片"。
 
-页面由材料和叙事需要长出来，不从预设模板或页型清单里挑。先在 storyboard 中写明每页的叙事作用、核心内容关系、视觉主角和需要承载的素材，再看信息关系决定版式：
+常用页型包括：
 
-- 并列 / 分类：用矩阵、分组卡片、标签云或多列清单，保持同层级内容可比较。
-- 前后变化 / 方案对比：用 before-after、对照矩阵、差异表、评分表或坐标图。
-- 过程 / 时间 / 执行动作：用时间线、泳道、步骤图、甘特式条带或 checklist。
-- 因果 / 转化 / 漏斗：用链路图、漏斗、树状拆解、输入输出图或指标归因。
-- 层级 / 系统 / 架构：用分层结构、系统图、地图、嵌套框或模块关系图。
-- 数据 / 证据集合：用 KPI strip、图表、表格、标注数字和口径说明，而不是只摆大数字。
-- 案例 / 场景：用情境、机制、动作、结果的组合结构；可以加入真实图片、截图或局部标注。
-- 选择 / 决策 / 下一步：用决策矩阵、优先级地图、路线图、风险清单或行动表。
+- 封面 / 目录 / 使用说明：建立主题、范围、读法和关键承诺。
+- 章节分隔页：承载章节编号、主题、过渡判断或下一段问题，不做纯装饰页。
+- 观点 / 结论页：一句话 thesis + 1-3 个证据或影响。
+- 数据 / 指标页：KPI strip、图表或表格、口径 / 来源、短结论必须在同屏闭环。
+- 对比 / 选项页：A/B/多方案使用稳定代号、颜色和评价维度，贯穿方案封面、详情、排期和最终建议。
+- 流程 / 日程 / 预算 / 清单页：优先用表格、矩阵、时间轴、泳道或 checklist，不要把结构化信息改写成散文卡片。
+- 教学 / 练习页：保持稳定 scaffold，例如"编号 / 题型 / 进度 + 题干 + 条件 / 选项 + 答案 / 考点 / 易错点"。
+- 叙事 / 案例页：可以使用 prologue、chapter、turning point、proof、epilogue 等章节节拍，让情绪和判断同步推进。
 
-根据叙事阶段和整套缩略图轮廓安排节奏变化。同层级的并列内容保持平行 scaffold，利于跨页比较；叙事功能或内容关系不同但缩略图轮廓高度相似时，应重新选择构图。变化来自信息结构，不靠堆装饰。
+每 3-5 页安排一次节奏变化：章节页、全屏观点页、数据页、对比页、表格页、案例页之间轮换。同层级的并列内容（成组案例、系列练习、多个方案）保持同一 scaffold，利于跨页比较——此时节奏变化靠在块之间插入章节页或小结页，而不是改动系列内页面的版式。不要把叙事功能不同的页面压平成同一个版式。变化来自页型和信息结构，不靠堆装饰。
 
 ## 内容组织与版式策略
 deck 每页先判断它要让观众完成什么阅读动作：抓结论、看证据、比较差异、理解过程、记住模型、看到风险、做选择，还是进入下一章节。版式、文字、图形和动效都只是表达手段，选择最能讲清这一页的组合。
-- 同时判断内容关系、视觉主角和信息量，再决定构图。可以用图片、图表、关键数字、结构图或核心结论建立视觉中心，其余元素为它服务；不要默认把信息拆成若干大小相近的卡片。
-- 主动做视觉转译：定量数据适合用趋势、对比、分布或构成图表达；流程、因果、层级、系统和时间关系适合用流程图、关系图、矩阵、时间线或信息图表达；产品、人物、地点和场景适合用有信息价值的图片表达。不要把适合可视化的信息重新写成一组文字卡片。图表和图示应表达明确结论，没有可靠数据时不虚构定量图表。
-- 数据页先确定主图表。标题若在讲规模增长、区域分布、结构占比、趋势轨迹、驱动因素或方案对比，主图表 / 主表格必须成为有效视觉中心；KPI strip、说明文字、来源和注释只能辅助它。不要用固定宽度比例机械判断好坏，重点检查图表周围是否出现大块无功能留白，或图表是否被旁边的文字列表、脚注、装饰和空白压成小配件。可用全宽图、纵向大图、图表 + 侧栏、图表 + 注释带、矩阵或小倍数图，选择能让主体区域被有效利用的构图。
-- 让内容容量决定版式。布局应适应真实信息量：内容少时放大核心表达并重组构图，可升格为观点页、图解页、图片页或并入相邻页；内容多时建立层级、图解、表格、矩阵或拆页。不要把内容硬塞进固定卡片，也不要让小块内容漂浮在大片空白中。
-- 先算垂直预算再排纵向内容。表格、时间线、融资里程碑、排行榜、横向条形图、评分条和 checklist 都要按“标题区 + KPI 区 + 主体行数 × 行高 + 组间距 + 来源页脚安全区”估算高度。超过可用高度时减少行数、压缩文案、改成两列 / 矩阵 / 小倍数图，或拆页；不要让最后几行延伸到页脚或画布外。
 - 根据当前页内容现场生成结构，不局限于常见页型。可以保留强文字页，也可以把材料转成模型图、关系图、流程、对比矩阵、时间线、象限、分层结构、地图、系统图、路径图、图表注释、截图标注或视觉隐喻；还可以把重要句子放大成观点页。示例只是启发，不是清单。
 - 同一章节内可以有连续叙事，但每页的结构不必一样。核心页给足面积和视觉重量，支撑页可以更密集；重要概念可以用图形和标注解释，也可以用排版、引用、数字、对照文本或图文组合解释。
 - 单页可以承载“小型演示过程”：先出现结论，再让支撑内容逐步显现，最后高亮关键判断。支撑内容可以是文字、数字、图形、数据、截图或关系结构；是否使用动效由表达目的决定。
 - 如果一页只有少量概念，不要机械铺成几张卡片。先判断概念之间有没有关系：并列、递进、因果、闭环、漏斗、分层、坐标、路径、前后对比或组合模型。关系明确时可以画出来；关系不明确时，可以改成更有力量的文字观点页、引用页，或合并到相邻页。
-- 如果一页出现“少量文字 + 大面积固定高度卡片 / 巨大页脚空白”，视为欠填充，不要交付。优先补上结构性证据（口径、来源、对比基准、趋势、影响、风险、下一步），但表达要短：用数字、标签、表格单元、图表注释或路径节点，不要把每个证据都扩成一整句。没有足够内容支撑独立成页时，合并到相邻页。
-- 如果一页出现“两列大段文字 + 底部 KPI 条 / 来源脚注”的组合，也视为过密且缺少设计转译。应改成对比矩阵、雷达/坐标、产品拆解图、流程图、截图标注、分层卡片或拆成两页；不要把竞品分析、案例复盘、风险应对写成左右两块说明书。
-- 卡片高度应由内容和网格共同决定，不要用等高大卡片撑满版面。三栏卡片里每张只有 1-2 段短文时，改用横向流程、对照矩阵、双层信息卡或紧凑清单；每张卡如果超过 4-5 行正文，优先压缩成标签 / 表格 / 分组小项。只有内容确实接近等量时才使用大面积等高卡片。
 - 版式变化来自内容关系，不来自凑组件。不要为了“丰富”而加无依据内容、无意义图标或装饰图形；图形、图片和动效只有在能帮助观众理解时才使用。
 
 ## 版式系统（写第一页前先定）
 
-- 用 CSS 变量定义字号 / 间距，放在 `<head>` 的 `<style>` 里，**先于任何 slide**。这让整份 deck 改一个数（直接改变量，或用 Tweaks 滑块绑同一变量）就能统一缩放，slide 本体保持无脚本的静态 HTML。下面只是一套适中起点；实际要根据 storyboard 里的信息结构微调，不要所有 deck 都套同一组大字号 / 大留白参数。1920×1080 起点：
+- 用 CSS 变量定义字号 / 间距，放在 `<head>` 的 `<style>` 里，**先于任何 slide**。这让整份 deck 改一个数（直接改变量，或用 Tweaks 滑块绑同一变量）就能统一缩放，slide 本体保持无脚本的静态 HTML。1920×1080 起点：
   ```css
   :root {
-    --type-title: 52px; --type-subtitle: 36px; --type-body: 28px; --type-small: 24px;
-    --pad-top: 72px; --pad-bottom: 56px; --pad-x: 84px;
-    --gap-title: 30px; --gap-item: 18px;
+    --type-title: 64px; --type-subtitle: 44px; --type-body: 34px; --type-small: 28px;
+    --pad-top: 100px; --pad-bottom: 80px; --pad-x: 100px;
+    --gap-title: 52px; --gap-item: 28px;
   }
   ```
-  1280×720 时整体 ×0.67。每个 font-size 都用 `--type-*`，每个 padding / gap 都用 `--pad-*` / `--gap-*`。`--pad-bottom` 是结构性的底部呼吸空间，不是空白；如果底部只是空着，应把空间交还给正文、图表、注释或合并页。
-- 每页先定义一个安全内容区，而不是让元素各自漂浮。推荐在 slide 内使用一个 `.content` / `.layout` 容器承载主体，尺寸由 `inset: var(--pad-top) var(--pad-x) var(--pad-bottom)` 或等价 padding 控制；主体布局用 CSS grid / flex 的正常流、`minmax(0, 1fr)`、`min-height: 0` 和明确 gap 管理空间。只有装饰、页码、来源这类固定元素才适合绝对定位；表格、图表、列表、时间线不要用 absolute bottom / fixed height 去硬塞。
+  1280×720 时整体 ×0.67。每个 font-size 都用 `--type-*`，每个 padding / gap 都用 `--pad-*` / `--gap-*`。`--pad-bottom` 是结构性的底部呼吸空间，不是空白。
 - 网页默认（14-16px 正文、48-72px 边距）对投影太小。标题 ≥ 48px，正文 / 注释**不得小于 24px**（验证器会对 < 24px 抛错）。用户说字号一般指 pt，按 PowerPoint / Keynote 换算：`px = pt × 1.333`（"标题 36pt" → CSS 设 ~48px）。
-- 建立稳定布局锚点：标题、章节号、页码、来源、图表、主视觉和关键数字的位置不要随机漂移。规律来自章节、信息关系和跨页比较需要，不来自预设标签。
-- 同一信息关系的页面要保持平行 scaffold，方便观众比较；不同信息关系再负责制造节奏。
+- 规划页面类型：封面、章节页、观点页、数据页、对比页、流程页、图片页、结束页各有稳定样式。同类页面的标题位置、页码、章节名、脚注、来源、关键数字、图片位置要**平行对齐**，方便观众跨页比较。
+- 为每种页型固定布局锚点：标题、章节号、页码、来源、图表、主视觉和关键数字的位置不要随机漂移。相同页型要像同一个系统，不同页型再负责制造节奏。
 
 ## 视觉设计
 
@@ -93,17 +83,12 @@ deck 每页先判断它要让观众完成什么阅读动作：抓结论、看证
 
 - **主题与风格**：根据主题、受众和演示场景提炼视觉关键词，用它们决定配色、字体、图片类型和页面节奏；不把“干净、专业”默认等同于大量留白或通用企业风。
 - **明暗按需求选择**：根据品牌 / 主题 / 图片素材 / 演示场景选择浅色、暗色或混合背景。无论选择哪种，都要保证投影、截图和后排阅读的对比度。明暗切换应落在叙事节点上（章节转换、关键强调），不要无来由地跳变。
-- **字体与排版角色**：根据主题建立标题、正文、数字 / 数据和注释的排版角色，角色可以共享字体。综合使用字体气质、字重、字宽、行长、语义换行、数字样式和文字位置形成层级，而不只是改变字号或统一使用粗黑体；展示文字可以有个性，正文必须稳定可读。
+- 字体克制（1-2 套）：展示字体可有个性，正文必须稳定可读；整体对比清楚、信息块边界明确。
 - 图片先判断内容和用途：摄影 / 氛围图可满版裁切；截图、图表、产品界面、架构图必须完整展示（aspect-fit），不能裁掉关键边界或文字；透明图 / 细线图放到有对比的底色上。图上压字用品牌常见方式保护可读性（遮罩、渐变、模糊或文字容器）。
 - 视觉要有节奏变化：全图页、大数字页、表格页、引用页、流程页、文字页交替出现；不要整套都是同一种卡片。也不要每页硬加描边卡片、固定结论框或装饰分割线——只有内容需要分组时才用容器。
 - 扁平基线：好的 deck 不依赖阴影和悬浮卡片堆叠。优先用全页背景、色带、分隔线、编号、表格网格、图片裁切、对比色块和尺度差建立层次。只有在需要表达真实物件、票券、照片或舞台层次时才少量使用阴影。
 - 不用 emoji、不临时手绘复杂假图；优先用用户素材、品牌资产、图标库或真实图片。
-- **空间重心**：页面元素应形成完整构图：留白有明确作用，独立元素与主体有可感知的关系，多栏内容在视觉重量和内容关系上协调。内容可以集中在上方并保留底部呼吸空间，这通常是正确的 slide 构图；但留白必须均匀、有意、有下界。内容页主内容应占版心高度约 2/3 以上；同一页一处大空、一处拥挤要重排。允许不对称构图，不要求左右元素数量、尺寸完全相等；通过面积、色彩、留白、位置和视觉重量形成平衡，避免机械平分页面。双栏 / 多栏失衡时改不对称栅格、调整主次关系或并回单栏。内容不足以独立成页时，合并、重构或升格为确有价值的观点页，不单纯放大数字、卡片或增加留白撑页。
-- **信息重心**：主内容区应显得有事可读，来源、页码和装饰不能成为主要视觉重量；证据说明应尽量靠近对应内容，避免制造无意义的纵向空洞。
-- **容量与边界**：重复排列卡片、指标、步骤或图表前，先根据条目数量、文字长度、间距和可用区域判断能否容纳。空间不足时调整构图、压缩或合并信息、减少非必要元素或拆页，不得依靠 `overflow: hidden` 裁掉内容。最终按实际渲染尺寸检查完整元素和元素组是否仍在页面安全区域内。
-- **底部安全区**：正文、图表、表格、条形图和列表必须整体落在安全区域内，和页脚 / 来源 / 页码保持可感知间距。不要把条形图最后一行、表格最后一行或长标签压到页面底边；不要用 `position:absolute` 把元素硬钉在底部来“刚好塞下”。如果底部空间不足，优先减少行数、合并组、拆页或重新选择横向构图。
-- **图表尺度**：图表、表格、结构图和截图标注要按“可阅读的分析对象”设计，不按“装饰素材”缩小。主图表应形成明确视觉中心，并有足够轴线、标签、图例和注释空间；如果图表周围留白过多，优先放大图表、增加与图表直接相关的标注 / 口径 / 对比基准，或重排为更紧凑的图表 + 侧栏 / 注释带结构。如果放大后其他信息放不下，先减少旁支、改成侧栏 / 脚注 / 下一页，而不是缩小主图表。多个小图同时出现时，必须有一个主图或改为矩阵 / 表格，避免所有图都小而轻。
-- **图表优先**：工作汇报、客户案例、趋势观察、竞品分析这类 deck，连续 2-3 页纯文本卡片后必须切换到图表 / 表格 / 矩阵 / 图片标注 / 流程或 KPI strip。文本卡片可以存在，但不能成为整套 deck 的主要填充方式。
+- **空间重心**：页面元素应形成完整构图：留白有明确作用，独立元素与主体有可感知的关系，多栏内容在视觉重量和内容关系上协调。不预设内容必须集中在上方或占据固定比例。内容不足以独立成页时，合并、重构或升格为确有价值的观点页，不单纯放大数字、卡片或增加留白撑页。
 
 ## HTML 实现（deck-stage 外壳）
 
@@ -118,7 +103,6 @@ deck 每页先判断它要让观众完成什么阅读动作：抓结论、看证
   ["首页开场白…", "", "第 3 页的讲解要点…"]
   </script>
   ```
-- 交付前必须做一次渲染级边界审计，而不是只看截图。打开生成的 HTML 后，逐页检查每个 slide 的 `section[data-label]` 及其正文元素的 `getBoundingClientRect()`：任何可见文字、图表、表格、图片、图例、数值标签、来源、页码或父级元素组，只要超出 slide 边界、进入页脚安全区、互相重叠或被裁切，就必须回到版式层面重排。不要把失败元素简单设成 `overflow:hidden`、缩小到不可读、或用负 margin / absolute bottom 硬塞。
 
 ### slide 正文写成静态 HTML，不要用脚本生成
 
@@ -132,22 +116,14 @@ deck 每页先判断它要让观众完成什么阅读动作：抓结论、看证
 
 ## 交付前自检
 
-- 每页 16:9，无溢出 / 重叠 / 裁切；不仅检查文字，也检查卡片、图表、图片及其父级元素组的完整边界；字号符合投影阅读（正文没有小到像网页）。
+- 每页 16:9，无溢出 / 重叠 / 裁切；字号符合投影阅读（正文没有小到像网页）。
 - 构图完整：留白与主体关系明确，没有孤立漂浮、局部拥挤或失衡的多栏布局。
-- 边界溢出检查：逐页确认所有文本、表格行、条形图、图例、数值标签、来源和页码都在画布安全区内；元素组的底边不得低于页脚安全线。凡是需要 `overflow: hidden` 才不露馅、或最后一行贴底 / 被裁切 / 与页脚碰撞，都必须重排。
-- 实测边界检查：以浏览器实际渲染结果为准检查 bounding box，不以设计意图或静态 CSS 推断为准。每页所有可见元素的 `top/left/right/bottom` 都必须落在 slide 可视区域内；主要内容还要避开页脚 / 页码 / 来源所在的安全带。若任一元素超界、被父容器裁切、被 transform 推出画面、或与固定页脚碰撞，不允许交付。
-- 欠填充检查：主内容视觉占用明显低于页面可用区域 60%，或卡片内部空白超过约 45%，或一屏只有 2-4 个孤立数字 / 短段落时，必须重构；不能用放大卡片、拉开列距、把来源压到底部来撑页。
-- 过密检查：正文如果主要由长句组成、单页超过约 180-220 个可读文本单位、或单个卡片连续 5 行以上正文，必须先压缩文案并转成表格 / 矩阵 / 图表注释 / 视觉节点；不要通过缩小字体硬塞。
-- 信息密度检查：每页应包含结论、证据和上下文中的至少两类，但证据可以是数字、图、表、来源、对比基准、趋势箭头或截图标注，不要求都写成句子。指标不能只有大数字，还要有口径 / 来源 / 对比基准 / 趋势 / 影响说明中的必要项。流程不能只有“动作 / 结果”两段短文塞进大卡片，优先用表格、泳道、时间线或 checklist。
-- 图表主视觉检查：如果本页结论依赖趋势、对比、构成、分布或表格证据，主图表 / 主表格是否形成明确视觉中心；图表周围是否有大块无功能留白；KPI strip、文字列表、来源和装饰不得比主图表更抢视觉重量。若图表看起来像角落里的小配件，必须放大、补充相关标注或重排构图。
-- 内容容量检查：布局是否适应真实信息量；内容少时有没有重组为更强核心表达、图解或合并页，内容多时有没有建立层级、图解、表格或拆页；不能硬塞进固定卡片，也不能让小块内容漂浮在大片空白中。
 - 页码、来源和固定页脚不与正文争用空间；逐页检查文字、图片和固定元素没有遮挡或碰撞。
-- 留白与平衡：同一页没有一处大空、一处拥挤；内容页主内容占版心高度约 2/3 以上；允许不对称，但左右 / 多栏应通过面积、色彩、留白、位置和视觉重量取得平衡，避免机械平分。
 - 只读标题能讲通故事；标题语法全程一致，没有 punchline / takeaway 盒子。
-- 已建立 storyboard，并从整套缩略图检查页面轮廓；不同内容关系没有被连续压成相似的卡片网格或单一上下布局。
-- 转场页推动叙事，而不是只做装饰。
-- 页面既没有靠留白撑场，也没有变成长文档截图。
+- 已建立 page-type map，并通过页型轮换避免单一上下布局。
+- 章节分隔页推动叙事，而不是只做装饰。
+- 演讲型页面没堆太多字；阅读型页面没变成文档截图。
 - 同类页面布局、标题位置、页码、章节标识平行一致；图片没被不合理拉伸，截图 / 图表完整展示。
-- 需要跨页比较的成组内容使用了稳定 scaffold。
+- 多方案、教学练习、叙事案例、数据汇报等特定场景使用了稳定 scaffold。
 - slide 正文是静态可编辑 HTML，没用脚本循环生成；`data-label`、speaker-notes、打印分页完整。
 - deck-stage 外壳、导航、页码来自 starter component，没有手写重复实现。

package/steering/design-html/skills/wireframe/SKILL.md

@@ -1,14 +1,10 @@
 ---
 name: wireframe
-description: 用线框图和故事板快速探索多种设计方向
+description: Explore many ideas with wireframes and storyboards
 available-agents:
   - CreativeDesign
 ---
 
-# 线框图
+# Wireframe
 
-帮助用户快速探索设计想法。先通过简短访谈理解目标和约束，再生成多个粗略线框图，用来在确定方向前铺开设计空间。
-
-优先追求广度，而不是精修完成度：每个想法展示 3-5 个明显不同的方案。使用简单形状、占位文字和少量颜色，让注意力集中在结构、信息层级和流程上。
-
-保持草图感：字体可以像手写但必须可读；以黑白为主，可加入少量强调色；整体低保真、简单直接。提供轻量调参能力；如果方案较小，可以并排展示选项；如果方案较大，使用 tab 控件切换不同方向。
+Help the user explore design ideas quickly. Interview them, then generate multiple rough wireframes to map out the design space before committing to a direction. Prioritize breadth over polish: show 3-5 distinctly different approaches for each idea. Use simple shapes, placeholder text, and minimal color to keep the focus on structure and flow. Use a sketchy vibe -- handwritten but readable fonts; b&w with some color; low-fi and simple. Provide simple tweaks; show options side-by-side if small or using a tab control if large.