@lark-apaas/coding-steering 0.1.16-dev.3256f0b → 0.1.16-dev.a4b57cd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-steering",
-  "version": "0.1.16-dev.3256f0b",
+  "version": "0.1.16-dev.a4b57cd",
   "description": "Stack-specific steering content for miaoda-coding templates",
   "type": "module",
   "files": [

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

@@ -16,7 +16,7 @@ description: 当用户要求制作演示文稿 / PPT / PPTX / pitch deck / slide
 ## 动手前先问
 
 - 如果用户没有说明想要的视觉风格，也没有提供 design system，就用提问工具（ask user）**主动询问**。绝不要直接给出一个通用设计！**不要空问**：先从主题、素材、场合推导 2-3 个候选风格方向（各配一句推荐理由），让用户确认或选择，并保留自由输入的余地。
-- 无法询问时：从**主题语义**推导 2-3 个候选配色方向再选定其一（写进 scratchpad），禁止套习惯默认（典型：深色底 + 青/蓝 accent 的"科技风"）。深浅底是设计选择，给出场景理由即可用深底；推导无明确倾向时优先浅底——带色温的白（oklch chroma ≤ 0.02）配 1-2 个同明度同 chroma、仅变 hue 的强调色。常规内容页共用统一底色；可为章节设**系统化的章节色**（同一推导体系、明度饱和度一致的一组，章节页与该章内容页可共享同一色调），服务叙事分段；禁止的是无体系的页级随机换底。图示、状态等需要更多前景色时从体系推导，不引入任意新色相：优先主题色的深浅/透明度阶梯，其次同明度同饱和、hue 微移的邻近色；对错/警示用低饱和语义色且只作小面积（图标、文字级），不做大面积底色。
+- 无法询问时：从**主题语义**推导 2-3 个候选配色方向再选定其一（写进 scratchpad），禁止套习惯默认（典型：深色底 + 青/蓝 accent 的"科技风"）。深浅底是设计选择，给出场景理由即可用深底；推导无明确倾向时优先浅底——带色温的白（oklch chroma ≤ 0.02）配 1-2 个同明度同 chroma、仅变 hue 的强调色。全 deck 背景色最多 2 种。
 
 ## 构建准备与技术契约
 
@@ -42,23 +42,17 @@ deck-stage 组件会对每个 slotted 子元素做绝对定位——**绝不**
 
 两个细节确保静态幻灯片可被直接编辑：每段文字都放在自己的叶子元素中（把 "Revenue" 放在 `<h2>` 内单独的 `<span>` 里，而不是写成 `<h2>Revenue <span class="sub">2025</span></h2>` 这样文本和子元素混在同一父节点的形式），重复结构要逐一写出而非生成——三条 `<li>` 直接写在标记里，而不是从数组渲染一个 `<li>` 三次。重复正是重点所在；它让用户能编辑第二条而不影响第一条。
 
-### 布局实现纪律
-
-- 每页 `<section>` 内用统一的**满高壳容器**（高度铺满画布），并在壳上**显式声明背景色**（含常规页的默认底色）——不依赖 body/舞台继承；所有垂直分布（居中、两端）声明在满高容器上，没有高度的容器上写居中是静默失效的。
-- **内容元素**的布局几何由 flex/grid + gap 产生，行高列宽由内容撑出；同行卡片内容量差异大时用 `align-items: start`，不硬拉等高；架构图/分层图用 grid 行式布局，禁止绝对定位手排。装饰/背景层（母题图形、大字底纹）不在此列，可用绝对定位，但不得承载信息、不得遮挡内容。
-- 短标签、术语禁止内部换行（`white-space: nowrap`，列宽 max-content）；中文段落用 `text-wrap: pretty`。
-
 ## 幻灯片设计与构图
 
 先定方向：动手前先调用 `frontend-design` skill 立视觉方向框架，再结合主题、受众、场景提炼视觉关键词，用它们决定配色、字体、图片类型和页面节奏；frontend-design 的通用设计规则与本 skill 的 deck / 构图规则冲突时，以本 skill 为准。保持清晰的层级与一致的视觉系统。
 
 ### 封面、章节页与目录规格
 
-三类页面共用一个写法：先职责，再结果约束；手段自定，只禁失败形态。**结构页按阶梯出现：内容页 ≥12 且真实分章时设章节分隔页；在已有章节页的前提下，分章 ≥4 再加目录页。不满足门槛的短 deck 两者都省——封面后直入内容，章节感由眉标/序号承担。只有章节页、不设目录是合法形态（演讲型 deck 常见）。**
+三类页面共用一个写法：先职责，再结果约束；手段自定，只禁失败形态。
 
 - **封面是海报，不是标题卡——职责：3 秒内传达主题气质，完成已定视觉系统（强调色、字体对、图形母题）的首次完整呈现。** 达成方式是让一个主视觉统治画面，常见手段（不限于此）：超大版式字（可跨行/出血，以不裁切为上限）、满版图像 + 标题叠于保护渐变或色块上、大型图形场或超大数字作背景结构。演讲者/日期等信息以小字层级收纳。**禁止**「小图标 + 居中标题 + 居中副标题」三件套。
 - **章节页是封面的简版回声——职责：一眼识别"进入新章"。** 复用封面母题（更克制的用量），超大序号 + 章节标题为主体，与内容页拉开明显视觉差，手段自定；全 deck 章节页外观完全一致，只换序号和标题。
-- **目录页——职责：几秒内看清全场结构（几章、各讲什么、顺序如何）。** 章节序号与标题是绝对主角，说明至多一行，每项高度由内容撑出；编号列表通常最能达成，形态可在视觉系统内变奏（横排、分栏、与章节页同构），几秒可读出结构即可。**禁止**等高空卡片阵列——它摊平层级、稀释结构感。目录样式与章节页呼应。
+- **目录页——职责：几秒内看清全场结构（几章、各讲什么、顺序如何）。** 章节序号与标题是绝对主角，说明至多一行，每项高度由内容撑出；编号列表（纵向或两栏）通常最能达成。**禁止**等高空卡片阵列——它摊平层级、稀释结构感。目录样式与章节页呼应。
 
 ### 构图原则
 
@@ -76,20 +70,18 @@ deck-stage 组件会对每个 slotted 子元素做绝对定位——**绝不**
 
 - **字号与单位。** 使用大号字体（标题至少 48px）。当用户指定具体字号时，默认他们说的是**磅（points）**（PowerPoint/Keynote 的单位）而非像素——用 `px = pt × 1.333` 换算。所以"把标题设成 36pt" → 在 CSS 里设成约 48px。**内容放不下时，按信息损失从小到大依次尝试：换更合适的版式原型 → 拆成两页 → 最后才精炼文案（且只压缩表述、不删信息点；确需删信息点须极其克制）——禁止把字号压到 24px 以下或压缩边距硬塞。**
 
-- **中文字体。** 中文内容的字体对必须包含明确的 CJK 字体，且 `font-family` 全栈声明（拉丁字体在前、CJK 字体随后、通用族兜底）：衬线气质配 Noto Serif SC / 思源宋体，无衬线配 Noto Sans SC / 思源黑体系（MiSans/HarmonyOS Sans 亦可）——只写拉丁字体会让中文掉进系统回退。中文不用 italic（CJK 无真斜体，伪斜发虚）；强调用字重、颜色或引言竖线。标题拉开字重跨度（如正文 400、大标题 800-900）。
-
-- **素材来源。** 除非用户要求，绝不使用 emoji。使用 design system / 品牌中的图标、用户提供的图片，或图片生成工具产出的图片。**具象实体（地点、产品、人物、行星、菜品等）需要呈现时，用上述来源的图片（用户提供或图片生成），绝不用 CSS/SVG 手绘模拟——手绘只用于抽象结构（图表、信息图、几何母题）。**
+- **素材来源。** 除非用户要求，绝不使用 emoji。使用 design system / 品牌中的图标、用户提供的图片，或图片生成工具产出的图片。
 
 - **图片呈现。** 务必先查看图片，再决定最佳展示方式。
   - 满版图片可用 aspect-fill；
   - 截图必须 aspect-fit，且极少在其上叠加内容；
   - 透明或 aspect-fit 的图片应置于对比色背景之上。
 
-  在图片上叠加文字时，参照品牌惯常做法：根据你在其他地方看到的样式，酌情使用卡片、保护渐变或模糊效果。裁切与叠字保护焦点主体（人脸、产品、关键物）：`object-position` 调焦点，保不住就换 aspect-fit；叠字落在图片的低信息区（背景、天空、暗部），不压主体。
+  在图片上叠加文字时，参照品牌惯常做法：根据你在其他地方看到的样式，酌情使用卡片、保护渐变或模糊效果。
 
 - **图表与数据可视化。** 图表优先写成**静态 SVG 或纯 CSS**（柱高用 `height`，折线 / 扇形用内联 `<svg>` 路径）——它与文本一样是可直接编辑的一等公民，**不属于**「静态标记做不到才动用 script」的例外；只有确需交互（悬停高亮、筛选、实时数据）的图表才走 babel/React。数字之间只要存在能被眼睛读出的关系（趋势、占比、对比、分布），就转成图表，而不是原样铺成文字。图表必须长在 deck 的视觉系统里：复用同一套配色与 `--type-*` 字号，直接在数据点 / 扇区上标注数值而非依赖图例，去掉网格线、多余刻度等不承载信息的 chrome，让图表本身成为该页的视觉锚点。
 
-- **概念可视化（信息图）。** 与数字→图表对偶：**文字之间只要存在结构关系——顺序/流程、因果、层级、循环、包含、对比、矩阵——就转成信息图**（静态 SVG / CSS），而不是 bullet list。原型库：步骤条、时间线、金字塔、同心圆、漏斗、四象限矩阵、环形循环、双栏 VS 对比、路径图；内容使用命名框架（波特五力、SWOT、飞轮等）时直接用该框架的经典图式。判据：凡是想写 3 条以上并列 bullet 的地方，先问这几条之间是什么关系——**关系本身就是版式**。图形语言：同一图内同级节点同形态同尺寸、不换色相，差异用主色深浅表达；连接线用 SVG 真图形对齐节点锚点，不用字符箭头；节点等距。信息图复用 deck 配色与 `--type-*` 体系，节点上直接标注文字。
+- **概念可视化（信息图）。** 与数字→图表对偶：**文字之间只要存在结构关系——顺序/流程、因果、层级、循环、包含、对比、矩阵——就转成信息图**（静态 SVG / CSS），而不是 bullet list。原型库：步骤条、时间线、金字塔、同心圆、漏斗、四象限矩阵、环形循环、双栏 VS 对比、路径图。判据：凡是想写 3 条以上并列 bullet 的地方，先问这几条之间是什么关系——**关系本身就是版式**。信息图复用 deck 配色与 `--type-*` 体系，节点上直接标注文字。
 
 - **动效。** 动效服务于叙事——引导视线、分层揭示信息、平滑衔接页面——而不是炫技或填空。默认克制，始终以不干扰阅读为底线。deck 动效的形态是**翻到该页时播放一次的入场 / 分步揭示**，不做环境循环——无限循环的装饰动画会持续争夺注意力。实现用 CSS 动画（幻灯片保持可直编的静态 HTML），两条契约（细节见 deck-stage.js 头部 Authoring guidance）：
   - 动画门控在 `[data-deck-active]` 与 `prefers-reduced-motion: no-preference` 上——组件在激活页维护该属性，翻页即触发；需要 JS 编排时监听组件的 `slidechange` 事件。
@@ -124,7 +116,7 @@ deck-stage 组件会对每个 slotted 子元素做绝对定位——**绝不**
 
 1. 如果不清楚受众、期望的品牌风格，先提问。
 2. 写出完整的标题序列。选择**一种**语法风格（例如短主题名词短语或简短陈述句），确保适合内容，并用该风格写出每一个标题。回头通读一遍，判断一个人**仅凭标题**能否跟上整个演示的脉络。标题应像书的章节——用直白的语言告诉读者接下来是什么。审阅这些标题并按需修订。将它们写入 scratchpad.md 文件。
-3. 在 scratchpad.md 里为每张幻灯片标注**版式原型**与**视觉锚点**（这页视线的第一落点）。原型必须写出具体名字——常用原型可参考：全幅大字、大数字、指标卡组、图表、信息图、表格、满版图、引用、左右分栏、时间线、卡片网格；不限于这些种，但**每页都要做出并写下明确的版式选择**，写不出名字的页就是还没做构图决策。通读这一列做两项核对：①配额——网格页数 ≤ 内容页总数的 20% 且互不相邻，相邻页不同原型；②节奏是否跟随叙事结构——原型的重复要么是内容使然（如成组的数据页），要么就是没做选择；写不出锚点的页，是内容撑不起一页的信号——回大纲合并或换形式增密。
+3. 在 scratchpad.md 里为每张幻灯片标注**版式原型**与**视觉锚点**（这页视线的第一落点）。原型必须写出具体名字——常用原型可参考：全幅大字、大数字、图表、信息图、表格、满版图、引用、左右分栏、时间线、卡片网格；不限于这十种，但**每页都要做出并写下明确的版式选择**，写不出名字的页就是还没做构图决策。通读这一列做两项核对：①配额——网格页数 ≤ 内容页总数的 20% 且互不相邻，相邻页不同原型；②节奏是否跟随叙事结构——原型的重复要么是内容使然（如成组的数据页），要么就是没做选择；写不出锚点的页，是内容撑不起一页的信号——回大纲合并或换形式增密。
 4. 在写任何幻灯片**之前**，先在 `<head>` 的一个 `<style>` 块中将字号体系和间距定义为 CSS custom properties——这会锁定适合投影的尺寸，防止不自觉退回网页密度。在 1920×1080 下，合理的起始体系为：`:root { --type-hero: 160px; --type-display: 96px; --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; }`（hero 用于封面主标题与全幅大字页，display 用于目录/章节序号、大数字、引用，均以不裁切为上限）。在 1280×720 下，按 ~0.67 缩放。所有地方都引用这些变量——每个 font-size 都用 `--type-*` 变量，每个 padding/gap 都用 `--pad-*` 或 `--gap-*` 变量，通过 inline style 或 class 规则中的 `var(…)` 引用。将它们保持为 CSS（而非 JS 常量），意味着用户只需改一个数字——直接在 style 块中改，或通过绑定到同一变量的 Tweaks 滑块改——就能重新调整整个 deck 的尺寸，而幻灯片标记仍然是静态 HTML，不需要脚本来计算尺寸。显式的 `--pad-bottom` 为每张幻灯片底部预留呼吸空间；那个留白是结构性的，不是空的。网页默认值（body 14-16px、padding 48-72px）对幻灯片太小；如果数值让你觉得不够大方，那就是还不够。如果你用了小于 24px 的尺寸，你的校验器（validator）会抛出错误。
 5. 构建幻灯片，牢记每张幻灯片既是设计练习也是文案练习。在版式、文字内容和语调方面给予每张幻灯片应有的关注。遵循上述原则，确保每张幻灯片能独立成立；一个只看这一页的人，应当无需其他上下文就能理解其高层含义。
 
@@ -136,13 +128,13 @@ deck-stage 组件会对每个 slotted 子元素做绝对定位——**绝不**
 
 - 量级在 `--pad-bottom` 上下 → 呼吸空间，合法，保留。
 - 多元素内容页底部空置接近半幅 → 违规，按「视觉平衡」的出路增密。
-- 单主体页（全幅大字、引用、大数字、章节页）→ 大留白即其形态，只看主体字号够不够大、构图有无意图。
+- 单主体页（全幅大字、引用、章节页）→ 大留白即其形态，只看主体字号够不够大、构图有无意图。
 
 逐页核对以下各项（不要用「已检查全部通过」一句带过）：
 
 - 字号匹配你的 `--type-*` 体系（而非网页密度）
 - 幻灯片边距匹配你的 `--pad-*` 值（而非网页紧凑间距）
-- 封面有统治画面的主视觉，标题位置有构图意图，不是「小图标 + 居中标题」三件套
+- 封面符合封面规格三形态之一，不是「图标 + 居中标题」三件套
 - 目录几秒内可读出章节结构，不是等高空卡片阵列
 - 结构件（页码、眉标）全 deck 位置样式一致；章节页彼此外观一致
 - 网格页数 ≤ 内容页总数的 20% 且互不相邻；相邻页版式原型不同