minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/references/preview-feedback.md

@@ -0,0 +1,37 @@
+# 预览反馈与浏览器验证协议
+
+当用户基于预览截图、浏览器画面、拖拽位置、评论气泡或 `<mentioned-element>` 指出问题时，先读本文件。
+
+## 定位反馈
+
+- `<mentioned-element>` 是运行时定位线索，不是源码结构本身。不要直接把它当成稳定选择器长期依赖。
+- 结合可见文字、`data-screen-label`、DOM 层级、组件名、截图位置和源码上下文定位真实来源。
+- 若用户说“这个卡片”“这里太挤”“这个按钮不清楚”，先判断它属于哪个屏幕、区块、组件和状态，再改代码。
+- 若定位仍不确定，先做浏览器检查或问一个最小澄清问题，不要盲改相邻元素。
+
+## claude_design.md 原环境（claude.ai 网页）的等价验证
+
+`claude_design.md` 中的 `done`、`show_to_user`、`fork_verifier_agent` 等属于原网页环境工具协议，**本仓库没有**。在本仓库中使用以下等价流程：
+
+- 对 HTML 先运行 `scripts/check_ui_artifact.py`。
+- 对 Markdown/HTML 运行 `scripts/check_language_policy.py`。
+- 需要视觉确认时，用本地服务或文件 URL 打开浏览器，检查 console 错误、横向溢出、移动端断行、固定舞台裁切和交互状态。
+- 截图用于判断配色、层级、文字可读性和是否有通用 AI 味。
+- 最终交付给用户本地路径、URL、截图和验证结果，不写冗长解释。
+
+其它原环境工具的本仓库对应：
+
+- `write_file` / `copy_files` / `delete_file` / `str_replace_edit` → 本仓库 `Write` / `Read` / `Edit` / `Bash`。
+- `snip` / 上下文管理 → 本仓库主循环自动压缩，无需手动调用。
+- `cross-project` 路径、GitHub 导入、`.napkin`、`save_as_template`、`Send to Canva` → 本仓库无对应能力，忽略；需要外部素材时请用户提供本地路径或导出文件。
+
+## 浏览器检查清单
+
+- 桌面视口无控制台错误。
+- 移动视口无横向溢出。
+- 中文标题不断得别扭，长词和数字不溢出容器。
+- 主要按钮和控制区可见、可点，移动端命中区域不小于 44px。
+- Deck 可以切到第 2 页并保持状态，刷新后仍在合理页码。
+- 固定舞台完整显示，控制区不在缩放元素内部。
+- Tweaks 面板能打开/关闭；调整项确实改变视觉。
+- 视觉风格服务信息结构，不只是装饰层、发光、毛玻璃或渐变。

package/skills/ui-design/references/source-image-layout.md

@@ -0,0 +1,189 @@
+# 客户素材图（source 图）布局规则 —— 全图生图重绘 + cover 填满槽（dense 数据图 / 盲态原图例外 contain）+ 按朝向图文混排
+
+> 本文件**只服务 `ppt`（Word/PPT→PPT）工作流**：处理从用户文档抽取出来的「客户既有图片」。
+> webppt 的 AI 图仍按 `layout-composition.md` 的 `object-fit:cover` 规则走，**两者不冲突、互不影响**。
+> 数据来源：摄取阶段合并产出的 **`build/material.json`**，每图在 base 字段（`file / path / w / h / aspect_ratio / orient / section / near_text`）
+> 之上并入 **`vision`**（LLM 识图：`description / key_elements / key_region{x,y,w,h 归一化} / suitable_as_background / recommended_text_zone / palette_impression`）
+> 和 **`stats`**（image-stats：`average_color / dominant_colors / tone / brightness`）。识图/统计可能缺（无多模态模型时 vision=null），缺则退回「只按朝向 + contain」基本规则。
+
+## 0. 一句话原则
+
+客户图是**高权重内容资产**：必须全用、放在最相关的页。**默认全部走图生图重绘（route=source-enhanced）到槽位
+所需比例 / 高清 / 贴 PPT 风格 → 落进 §0.7 锁定骨架的 `.fig-fill` 用 `object-fit:cover` 填满整槽**（图已按槽形重绘，
+cover = 精确满铺、零白裱框零黑边）；**仅 dense-info 数据图（截图/图表，须完整保数据）与无 vision 盲态直接用的原图才 `contain`**。
+再依图片朝向把文字排在它周围（图文混排）。AI 配图 / HTML 图只填客户图覆盖不到的页。
+
+**最佳质量补充**：图生图不是简单“放大清晰”。它必须根据页面文案和用途做重绘决策：
+
+- 做背景：扩图到 16:9/21:9，移除原图中的文字、logo、截图 UI 和杂乱底色，留出 `recommended_text_zone` 的低干扰净区。
+- 做前景特写：抠透明或换成与当前 VI 协调的干净背景，主体完整、边缘自然，不带原图脏底色。
+- 做信息密集图：只做保真清晰化，不改数据、不改文字、不重构版式，且 contain 展示。
+- 做场景图：保留客户图主体，但可根据页面 takeaway 重绘环境、光线、比例和构图，让画面与文案真正匹配。
+- 所有背景/场景/特写增强图都必须明确 `no text, no words, no letters, no logos`；只有 `faithful_document` 类允许保留原图已有信息文字。
+
+## 0.4 ⚠️ 逐图决策已确定性算定：读 `build/source_layout_plan.md`，照它执行（别再逐图心算）
+
+ppt 工作流在摄取后跑 `scripts/plan_source_layout.py`，**纯算法**为每张客户图算定并落到
+`build/source_layout_plan.json`（机读）+ `build/source_layout_plan.md`（人/LLM 读）：
+
+| 字段 | 含义 | 设计/构建步怎么用 |
+|---|---|---|
+| `quality` | `ok` / `low_res`(宽<1280 或 <0.8MP) / `bad_aspect` | 低清/比例不合不得直接做大图背景 |
+| `usage_intent` | 见 §0.5 六类 | **直接服从**，别把背景图缩成角落小图、别把证据图硬铺成背景 |
+| `display_role` | `background`/`foreground_hero`/`evidence_card`/`gallery` | 决定**给多大的槽**：hero=前景主视觉/半幅大图(≈半背景)、evidence=证据图、gallery=画廊格 |
+| `min_canvas_fraction` | 该图槽位**至少占画布的比例**（hero 0.30 / evidence 0.12 / gallery 0.10 / bg 1.0） | 槽位不得小于此——**绝不把客户图缩成角落小图/底部小条看不清** |
+| `max_upscale` | 缩放上限（恒 `1.0`） | 原图**绝不放大超原生像素**（放大=糊）；要更大走图生图，不是 object-fit 硬拉伸 |
+| `enhance_required` + `enhance_target_aspect` | 是否必须图生图 + 目标比例 | true → route=source-enhanced、引用 `enhanced_<file>` |
+| `enhance_prompt` | 算好的图生图英文提示词（主体由参考图携带，只表达增强变换） | 直接用，别自己另写 |
+| `image_role` | `background` / `foreground_cutout` / `foreground_hero` / `faithful_document` / `evidence_gallery` | 决定这张图在页面里是背景、透明前景特写、半幅主视觉、保真信息图还是证据画廊 |
+| `text_policy` | `remove_all_text` / `preserve_data_text` / `avoid_new_text` | 背景/主体图必须去字；信息密集图才保留原始数据文字；所有生图都禁止新增字 |
+| `target_layer` | `background` / `foreground` / `evidence` | 对应 HTML/PPT 三层：背景整页图、中层独立切图、证据图槽 |
+| `recommended_templates` | 推荐图文混排模板（**名字对齐 `layout-composition.md` §2.1/§2.2**） | 挑其一落地 |
+| `text_zone` / `text_color` | 文字落区（避让重点区）/ 深浅 | 文字排这一侧、深墨字或白字按此 |
+
+**本文件 §0.5–§7 是这些字段背后的「为什么」与 CSS 落地法**；规划文件是「这张图的结论」。
+二者一致时以规划为准（它复用 `source_usage_check.py` 的低清阈值，单一真相源）；规划缺失（无客户图）才回退本文件逐条判。
+`enhance_required` 的图生图条目会在生图前由 `plan_source_layout.py --ensure-img-plan` 确定性并进 `img_plan.json`，
+**即便设计步漏写也不会漏生成**——这是「客户图必被正确图生图增强」的引擎级保证。
+
+## 0.5 先做图片适配判断：不是所有客户图都能当大图
+
+客户图必须用，但**不能不看分辨率和内容就铺满**。设计阶段先给每张图判一个 `usage_intent`
+（现已由 `plan_source_layout.py` 确定性算定，见 §0.4——下表是判定依据，结论直接读 `source_layout_plan.md`）：
+
+| usage_intent | 适合什么图 | 页面用法 | 版式约束 `layout_constraint` |
+|---|---|---|---|
+| `source_enhanced_bg` | `vision.suitable_as_background=true` 的背景图（合格/低清/比例不合都走它，扩成 16:9/21:9 干净底） | 图生图生成 `enhanced_src_K` 后做整页背景，`object-fit:cover` 填满，文字落 `recommended_text_zone`+scrim | **fusion_no_cards** — 编辑式融合，🚫禁表格/卡墙 |
+| `source_enhanced_hero` | 产品/设备/场景图（合格/低清/比例不合都走它，重绘高清/合比例/换干净背景，离散主体抠透明前景插图） | 图生图生成 hero 图、`cover` 填半幅，保留 `source_file` 映射 | **fusion_no_cards** — 半幅 hero + 前景浮层，🚫禁表格/卡墙 |
+| `direct_contain` | 截图/图表/信息图/产品矩阵等**信息密集图**（须完整保留每个数据点） | 图生图**忠实保真**(enhance_style=dense)后 `object-fit:contain` 展示、保数据；无 vision 盲态则直接用原图 contain | **image_text_mixed** — 图文混排，勿在图上堆卡墙 |
+| `small_evidence` | 无 vision 盲态且低清、画面只支持某个论点 | 小图、角落证据图、图像证据卡，旁边配文字解释 | **evidence_ok** — 证据卡布局 OK |
+| `gallery` | 多张同类小图，单张撑不起一页但组合有价值（每格照样图生图增强） | 四宫格/横向画廊/苹果式横向产品带 | **evidence_ok** — 画廊布局 OK |
+
+硬规则：
+
+- **🚫 有底图的页禁表格 / 禁悬浮卡片墙（`layout_constraint=fusion_no_cards`）**：凡某页用客户图做背景 / 半幅 hero（或规划了 AI 全幅底图），一律走编辑式融合（图打底 + 文字 / 参数条 / 指标胶囊 / 侧栏列表 / 对比列 浮前景 + scrim），**绝不再叠表格或悬浮卡片墙/网格划区**（上一代「卡片墙划区」反模式）。表格/卡墙只允许在「纯 HTML 结构页、且该页无客户图/无 AI 底图」。
+- **🚫 多张证据图不堆一页**：同一页最多一张大图（hero/背景 + scrim）；一页要放多张客户图时，要么拆成多页（每页一张 hero）、要么缩为统一的证据卡 / 四宫格画廊——**别把 3–5 张大图 + 长文字列表硬塞一页**挤成一团（截图实测事故）。
+- **客户图绝不缩成角落小图/底部小条看不清**（截图实测高频事故）：每张图槽位至少占到 `min_canvas_fraction`（hero ≥30%、证据 ≥12%、画廊格 ≥10% 画布）。撑不起一页的图组成 `gallery`，别一张张缩成不可读缩略图。
+- **原图缩放 ≤1×（`max_upscale`）**：栅格客户原图**绝不放大超过原生 `w×h`**（放大必糊）。想显示得比原生大 → 只能 `source-enhanced` 图生图重绘到目标分辨率，**不是**给大槽 + `object-fit` 硬拉伸。
+- **图过大别硬塞小卡**：高清大图作 `background`/`foreground_hero`（整页或半幅大图，用户原话「太大可作背景或半背景」），别缩进小角落卡。
+- **低清原图不得做全屏背景**：宽 <1280 或像素 <0.8MP 的原始 `src_K`，不得直接放进 `background-image` 或大面积 hero 槽。要么 `source-enhanced`，要么做 `small_evidence/gallery/direct_contain`。
+- **密集文字截图、图表截图、产品矩阵图不得做背景**：它们承载信息，背景化会糊、会被文字遮挡，只能 contain 展示或做证据图。
+- **图生图失败必须回退原图**：`enhanced_src_K` 没生成时，不能删掉这张客户图；必须改成原始 `src_K` 的小图/侧图/画廊用法。
+- **一页可以混合多种视觉**：AI 背景承气氛，HTML/SVG 承结构，客户图承证据或真实场景，文字承判断。不要默认“一页一张图”。
+
+## 1. 填充铁律：图生图重绘后 cover 填满槽（默认）；dense 数据图 / 盲态原图才 contain
+
+**默认路径（route=source-enhanced，绝大多数客户图）= cover 填满**：图已图生图重绘到**槽位所需比例**（plan 算定的
+`enhance_target_aspect`），所以落进 §0.7 锁定骨架的 `.fig-fill` 用 **`object-fit:cover` 填满整槽** + `object-position:<key_region 中心%>`
+保重点——图与槽同形、cover 即**精确满铺、零白裱框零黑边**。**绝不**用 `.src-figure{background:白/surface;padding}` 白裱框、
+**绝不**加 `max-height` 帽把高清大图缩成角落小裱照（真机头号事故）。半幅 hero 图填满半边、不留白边。
+
+```css
+/* 默认：图生图重绘到槽比例 → cover 精确满铺（见 layout-composition.md §0.7 .fig-fill） */
+.fig-fill{ position:relative; width:100%; height:100%; overflow:hidden; }
+.fig-fill > img{ width:100%; height:100%; object-fit:cover; object-position:62% 38%; /* = key_region 中心% */ display:block; }
+```
+
+**例外路径（contain·仅两类，须保原貌/原数据）**：
+- **dense-info 数据图**（截图/图表/参数矩阵，须完整保留每个数据点）：图生图忠实保真（`enhance_style=dense`、保原框幅不裁）后 **`object-fit:contain` 展示**。
+- **无 vision 盲态原图**（无多模态模型、未图生图，直接用 `src_K`）：同样 contain。
+
+这两类的 contain 槽：把槽 `aspect-ratio` 设成图原生比例（manifest 的 `aspect_ratio`），contain 即**精确贴合、零黑边、零裁切、零变形**；
+**绝不**用非等比的 `width:Apx;height:Bpx` 硬定宽高（会变形）。
+
+```css
+/* contain 例外槽：框比例 = 图原生比例，contain 精确贴合且填满整槽（不留角、不半填） */
+.src-figure{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
+.src-figure img{
+  max-width:100%; max-height:100%;
+  width:auto; height:auto;          /* 别同时硬定宽高 → 不变形 */
+  object-fit:contain;               /* 整图入框、不裁 */
+  display:block;
+}
+/* 在 HTML 里把 figure 的 aspect-ratio 设为该图 manifest 的 aspect_ratio，例如 16:9 图： */
+.src-figure{ aspect-ratio: 16 / 9; }   /* 竖图 3:4 → aspect-ratio: 3 / 4，按图实际写 —— 槽与图同比例才不会半填留角 */
+```
+
+> 🚨 **插图图层 = 文本之下、背景之上的「次顶层」，绝不被非文本元素遮挡**：hybrid 导出固定为 **背景 < 前景插图/卡片 < 文本（最顶可编辑）**。
+> A 路线插图（`.src-figure` / `<img>` 槽）**独占自己的 grid 单元**，**不得被任何不透明非文本元素（卡片/色块/装饰形状）压在上面**——否则截图里插图被盖住、显示不出。
+> 要装饰就放**相邻单元**，别叠在插图上；**只有文本可浮于插图之上**（垫 scrim/磨砂板保可读）。页内**一律 grid、不绝对定位**（`position:absolute` 只留给 B 路线全幅底图+浮层）。
+> 兜底：导出端 `layout_balance.py` 的【内容相互叠加】ERROR 会确定性拦截「非文本元素与插图显著相交」。
+
+## 2. 按朝向决定构图（图文混排）
+
+读 manifest 每图的 `orient`，**页内用 grid 把图与对应文字分区**（页内别绝对定位）：
+
+| orient | 图放哪 | 文字放哪 | grid 示例 |
+|--------|--------|----------|-----------|
+| **landscape（横图，ar≥1.25）** | 上半或下半的**整幅横带** | 图的上方或下方整宽 | `grid-template-rows: 1.1fr .9fr`（图带 + 文字带）|
+| **portrait（竖图，ar≤0.8）** | 左列或右列的**整列** | 对侧栏（与图等高并列） | `grid-template-columns: .8fr 1.2fr`（竖图列 + 文字列）|
+| **square（近方，0.8~1.25）** | 左/右半，或居中配题注 | 另一半，或图下方题注 | `grid-template-columns: 1fr 1fr` 或单列居中 |
+
+- 文字（标题/要点/题注）就放在图的**互补区**——横图配上下、竖图配左右——形成自然图文混排，别让图占满整页把文字挤没。
+- 图带/图列的尺寸由**图的原生比例**定（见 §1），文字区吃剩余空间；别为凑满版面把图拉变形。
+- 多张同朝向小图可排成 grid 画廊（每格一个 `.src-figure`，各自 `aspect-ratio` 按各图），仍 contain 不裁。
+- 题注/出处可用 manifest 的 `near_text`/`section` 提炼一句（精炼说人话），放图旁小字。
+
+## 3. 客户图高权重的分配策略（设计阶段）
+
+- **先把 source 图安排进最相关的页**：按 `section`/`near_text` 与该页 `key_point` 的契合度匹配，一页可放 1 张主图（多图画廊页除外）。
+- **默认 `route=source-enhanced`（全图生图重绘）**：design.json 该页 `visual` 写
+  `{"route":"source-enhanced","source_file":"src_K.png","enhanced_file":"enhanced_src_K.png","usage_intent":"source_enhanced_hero","aspect":"16:9","prompt":"<plan 算好的 enhance_prompt>"}`；
+  deck 引用 `enhanced_src_K.png`、`data-source-file="src_K.png"` 保映射，`object-fit:cover` 填满。
+- **仅无 vision 盲态的极少例外才 `route=source`**（直接用原图 contain）：`{"route":"source","source_file":"src_K.png","aspect_ratio":1.78,"orient":"landscape","side":"top"}`。
+- **客户图用尽后**，剩余需要画面的页才用 AI 图（route=ai-*）；能用 HTML/SVG 表达的结构图仍走 HTML（红线不变）。
+- **图生图增强图 `enhanced_src_K` 进 img_plan.json**（`mode:"image-to-image"`，由 plan `--ensure-img-plan` 确定性并入、不靠设计 LLM 记得加）；
+  **仅 route=source 的盲态原图不进 img_plan**（它已在 `build/assets/src_K.png`、不需生图，deck 直接 `<img src="assets/src_K.png">`）。
+
+## 4. 与导出/构图门的关系（无需特殊处理）
+
+- 导出器截的是**浏览器渲染结果**：默认 cover 填满（图已重绘到槽比例）渲染出来就是「满铺无白边」，dense/盲态 contain+aspect 槽渲染出来就是「整图无裁无变形」，切图照搬即正确，**导出引擎无需改**。
+- 源图/增强图是 `<img>`、无 DOM 文本 → 不触发【截图夹带文本】；其槽按内容定尺寸、填实 → 不触发占空比 WARNING。
+- 唯一注意：contain 例外槽别做得比图大很多留黑边（违 §1 的 aspect 贴合），也别硬塞超画布（图带/列高 ≤ 画布，多图就拆页）。
+
+## 5. 用 material.json 的「识图 + 统计」让图文真正贴合（有 vision/stats 时）
+
+base 字段只够「放对位置、不裁不变形」；要让**文案对得上图、配色不打架、文字不被图压**，必须吃 `vision` + `stats`：
+
+- **文案对齐识图内容（治"文字跟图片内容对不上"）**：该页标题/要点/题注要呼应 `vision.description` 与 `key_elements`——
+  图里是「带标注电容的电路板特写」，文案就讲电路/元件/工艺，**别配一句与画面无关的口号**。
+- **配色随图取色（治"配色跟图片不搭"）**：页面强调色 / 卡片底 / 分隔线优先取自 `stats.dominant_colors`（与图同源更协调）；
+  **文字颜色按图亮度定对比**：图（或图上叠字区）`stats.brightness.mean` 高（亮）→ 文字用深墨字；低（暗）→ 白/浅字。**绝不让文字与图靠色**。
+- **文字避让重点区（治"图当背景文字盖住主体"）**：`vision.key_region` 是图中重点内容的归一化框（x,y,w,h）；
+  把文字/卡片排到 `vision.recommended_text_zone`（left/right/top/bottom/center 的**互补侧**），**绝不压在 key_region 上**。
+
+## 6. 构图好、适合做背景的图 → 铺成整页背景（与 HTML 图元/AI 插图配合）
+
+`vision.suitable_as_background=true` 的图（画面完整、留白足、不是密集图表）可当**整页底图**，让该页更有冲击：
+
+```css
+.src-bg{ position:absolute; inset:0; z-index:0;
+  background-image:url("assets/enhanced_src_K.png");  /* 背景图已图生图重绘到 16:9 高清干净底（route=source-enhanced） */
+  background-size:cover;                 /* 背景铺满允许裁切 */
+  background-position: 62% 38%;          /* = key_region 中心(%)，把重点留在画面里、别被裁掉 */
+}
+.src-bg-scrim{ position:absolute; inset:0; z-index:1;  /* scrim 只压「文字区」，别糊住重点区 */
+  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.62) 42%, transparent 70%); }
+.src-bg-text{ position:relative; z-index:2; }   /* 文字落在 recommended_text_zone 一侧 */
+```
+
+- `background-position` 用 **key_region 中心百分比**（`x+w/2`、`y+h/2`），保证 cover 裁切时重点不被切掉。
+- scrim/文字板只覆盖 `recommended_text_zone` 那一侧（按 §5 对比规则），**不要全屏暗化糊住图的重点**。
+- 背景图与 HTML 图元（图表/卡片/SVG）、AI 插图可同页配合：背景承气氛、HTML 承结构、源图承真实画面，分工不抢。
+- ⚠️ **但有背景图的页前景禁卡片墙/表格**（`layout_constraint=fusion_no_cards`，见 §0.5）：前景只放文字 / 参数条 / 指标胶囊 / 侧栏列表 / 对比列，**别在背景图上再叠一堆悬浮卡片或表格划区**；**同页最多一张大图**，多张客户图拆页或缩为证据画廊、不堆叠。
+
+## 7. cover 填满时用 object-position 对准 key_region「保住重点」（默认路径必做）
+
+默认 cover 填满（§1）——图生图已重绘到槽比例、cover 基本不裁，但模板格子比例与生成图仍有细微差时 cover 会裁掉边缘。
+**凡 cover（背景 / hero / 大图），`object-position` 一律对准 key_region 中心**，被裁的是无关边缘、重点留在框内（纯 CSS、导出引擎无需改）：
+
+```css
+.fig-fill > img{
+  width:100%; height:100%;
+  object-fit:cover;                 /* 默认：填满槽、裁掉无关边缘 */
+  object-position: 62% 38%;         /* = vision.key_region 中心(%)，重点留在框内 */
+}
+```
+
+优先级：**① cover 填满 + object-position 对准 key_region（默认）→ ② dense 数据图 / 盲态原图才 contain（保数据/保原貌，槽 aspect=图比例零黑边）**。
+**永远不要**非等比硬拉宽高（变形）；cover 裁切只在「对准重点」的前提下用，宁可裁掉无关边缘，不可切掉 key_region。

package/skills/ui-design/references/starter-components.md

@@ -0,0 +1,78 @@
+# Starter Components 与固定舞台协议
+
+当任务涉及浏览器演示 deck、静态设计画布、设备框、浏览器窗口、动画演示、React/Babel 或 speaker notes 时，先读本文件。若目标是导出 PPTX，优先读 `export-pptx.md`，不要套浏览器演示 deck 协议。
+
+`claude_design.md` 中的 `copy_starter_component`、`gen_pptx`、`design_canvas`/设备框等是**原 claude.ai 网页环境能力，本仓库没有同名工具**：
+
+- starter / deck shell / 设计画布 / 设备框 → 用 `scripts/scaffold_ui_artifact.py` 的备用模板，满足同等行为约束；未来若提供真 starter 资源再优先使用。
+- 导出 PPTX → **改用本仓库 `pptx` 技能**，不要调 `gen_pptx`。
+- React/Babel 固定版本 → 见下「React 与 Babel」，三条标签已抄录于本文件，不依赖 `claude_design.md`。
+
+## 浏览器演示 Deck 舞台
+
+理想 starter：`deck_stage.js`。没有 starter 时，备用模板必须具备：
+
+- 固定 16:9 舞台，推荐 `1920x1080`。
+- 使用 JS 根据视口计算 `transform: scale(...)`。
+- 设置 `transform-origin`，确保舞台在桌面和移动端完整可见。
+- 导航控制放在缩放舞台外，避免按钮被缩小或裁切。
+- 每张 slide 使用 `data-screen-label="01 中文标题"`，从 1 开始编号。
+- 使用 `localStorage` 持久化当前 slide。
+- 切页时发送 `slideIndexChanged`，便于预览环境和讲者备注同步。
+
+## PPTX 导出 Deck
+
+PPTX 导出 deck 与浏览器演示 deck 是两条路径：
+
+- 固定 `1920x1080` 静态画布，不使用 JS 视口缩放。
+- 不使用 Tweaks/EDITMODE、localStorage、postMessage、翻页 nav 或 React/Babel。
+- 每页仍使用 `data-screen-label="01 中文标题"`。
+- 使用 `scripts/scaffold_ui_artifact.py --mode deck-pptx` 可生成静态起点；旧命令 `--mode deck --pptx-export` 继续兼容。后续按 `export-pptx.md` 和 `layout-composition.md` 做构图闸门与导出。
+
+## 设计画布
+
+静态视觉探索、2 个以上方向对比、字体/配色/组件实验，优先使用单个设计画布。画布要清楚标注方案，不要生成多个分散文件让用户来回打开。
+
+## 设备框与窗口框
+
+移动应用、桌面软件、浏览器产品页可以使用设备框或窗口框，但它们只是帮助理解场景，不应抢过真实 UI 的信息层级。若没有 starter，创建简洁原创框架即可。
+
+## 动画与视频类产物
+
+动画、时间线、演示 demo 和视频感产物要包含播放状态或时间状态持久化线索，例如 `localStorage`、`currentTime`、`isPlaying` 或明确的时间线状态。固定舞台同样需要缩放和外置控制区。
+
+## 讲者备注
+
+仅当用户明确要求演讲备注、讲者备注或 `speaker notes` 时才添加。添加后应：
+
+- 使用 `id="speaker-notes"` 的 JSON 数据块保存备注。
+- 初始化和切页时发送 `slideIndexChanged`。
+- 备注内容使用简体中文，除必要名称外不写英文。
+
+## React 与 Babel
+
+使用 React + inline JSX 时：
+
+- 必须使用以下固定版本 + `integrity` 的 React、`ReactDOM`、Babel script 标签，不要用未固定版本或省略 `integrity`：
+
+```html
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+```
+
+（与 `claude_design.md` 一致；本仓库以这份为准，若上游更新版本则以更新后为准。）
+
+- 不要用 `type="module"` 引入辅助脚本或 JSX 依赖。
+- 不要在全局写 `const styles = {}`，它容易和 starter 或其他脚本冲突。
+- 多个 `type="text/babel"` 文件共享组件时，用 `Object.assign(window, {...})` 暴露组件或工具函数。
+
+## Tweaks
+
+推荐持久化消息使用：
+
+```js
+window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
+```
+
+旧产物中的 `keys` 可以兼容读取，但新产物优先使用 `edits`。必须先注册 message listener，再发送 `__edit_mode_available`。

package/skills/ui-design/references/vi-aegis-vector.md

@@ -0,0 +1,144 @@
+# `Aegis Vector` VI 模板
+
+中文名：蓝盾矢量。
+
+当用户需要“中国兵器、中国兵器工业集团风格灵感、蓝白、央企工业、国防科技、装备制造、光电雷达、智能制造、安全技术、责任与创新、政企官网、工业集团展示”这类前端或 deck 设计方向，或明确提到 `Aegis Vector / 蓝盾矢量` 时，使用这个模板。它走“装备 / 光电 / 工厂画面作背景、中文大字与能力短句浮前景、指标与责任走图表”的工业编辑式版式，最适合装备科技展厅 / 能力平台 / 政企汇报 deck。
+
+这是原创视觉系统，不是中国兵器工业集团、北方工业或任何真实军工央企的品牌复刻。可以参考用户提供的公开截图中“白底、黑色中文大字、稳定蓝色导航、蓝色信息块、科技光标/准星感”的行业气质，但不能复制真实企业名称、标识、标志轮廓、官网版式、新闻图、专有文案、搜索框结构或导航结构。
+
+## 视觉定位
+
+> **遵循 SKILL.md 的「★ 编辑式最高原则」**：图作背景 / 主角、文字浮前景、数据用图表、特写用插图，不堆卡海。蓝白工业气质照样走编辑式：装备 / 光电 / 工厂 / 雷达画面（客户图 / AI 渲染 / 白到极浅蓝渐变 + 矢量准线纹理 + scrim）铺底，中文大字、能力短句、责任与行动直接浮在背景上，能力指标 / 里程碑 / 数据走图表（柱/进度环/指标条/对比列浮背景），装备 / 接口特写走插图。能力矩阵、蓝色焦点块只保留为「图表 / 指标面板浮背景」的例外，不是白底三栏卡墙。
+
+- **气质**：稳健、精密、可信、现代、工程感强。
+- **情绪**：像一套面向装备制造、光电科技、智能工厂和安全基础设施的央企级视觉系统：白底承担公开透明与阅读，蓝色承担信任和技术，黑字承担权威，浅蓝高光表达现代化。
+- **核心原则**：蓝色不是大面积涂满页面，而是用于导航、信息焦点、矢量线、状态和行动；白底让信息清楚，黑字让标题有力量，浅蓝让老式门户感升级为现代科技感。
+- **第一印象**：权威但不笨重，科技但不炫技，像现代装备集团官网、技术展厅或产品能力平台，而不是传统新闻门户。
+
+## 色彩 token
+
+以下作为起始色盘。蓝色来自用户提供截图的公开视觉印象，但不声明为任何真实企业标准色。
+
+```css
+:root {
+  --ink: #101318;              /* 主文字黑 */
+  --ink-soft: #2e343c;         /* 次级标题 */
+  --muted: #66717f;            /* 辅助文字 */
+  --paper: #f7fafc;            /* 近白页面底 */
+  --paper-clean: #ffffff;      /* 大面积阅读白 */
+  --paper-blue: #edf7ff;       /* 极浅蓝分区 */
+  --surface: #ffffff;          /* 主内容面板 */
+  --surface-steel: #f1f5f8;    /* 工业灰蓝面板 */
+  --line: rgba(16, 19, 24, 0.12);
+  --line-blue: rgba(0, 124, 196, 0.22);
+  --arsenal-blue: #2477a6;     /* 主蓝：导航、主信息块 */
+  --deep-blue: #0f3f78;        /* 深蓝：权威标题、深色按钮 */
+  --signal-blue: #0aa6e8;      /* 亮蓝：科技高光、数据链路 */
+  --aero-cyan: #49d4ff;        /* 冷青：光学/雷达高光 */
+  --steel: #8a96a3;            /* 工业灰 */
+  --warning: #d49522;          /* 预警 */
+  --danger: #c8423d;           /* 风险 */
+  --shadow: rgba(15, 63, 120, 0.14);
+}
+```
+
+### 色彩使用
+
+- `--paper-clean` 和 `--paper` 是默认背景，保证中文长信息和政企内容可读。
+- `--ink` 用于标题、正文、数据和导航；不要用过浅灰色承载核心内容。
+- `--arsenal-blue` 用于导航条、能力重点、信息块、主按钮、标题短线和图形母题。
+- `--deep-blue` 用于权威模块、深色信息面板、战略能力标题和页脚。
+- `--signal-blue` 与 `--aero-cyan` 只用于光电、智能化、数据链路、雷达扫描和状态高光，不大面积铺底。
+- `--surface-steel` 和 `--steel` 用于工业背景、参数表格、结构线和辅助信息。
+- `--warning`、`--danger` 只用于风险、告警、安全状态，不做装饰。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用主蓝一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（蓝白工业调性，兼顾光电、工程、预警与风险语义），按系列数依次取用：
+
+`#2477a6 兵工蓝` · `#0aa6e8 亮蓝` · `#49d4ff 冷青` · `#8a96a3 工业灰` · `#d49522 预警琥珀` · `#c8423d 风险红`
+
+单系列图（单进度环/单柱）用 `--arsenal-blue` 一色即可；多系列按上面顺序取。A 路线插图以画面真实色为准，不强行染蓝，只需与蓝白工业气质协调。
+
+## 渐变与材质
+
+- 背景使用白到极浅蓝的低对比渐变，表达公开、清洁和技术感。
+- 深蓝信息块可以使用从 `--arsenal-blue` 到 `--deep-blue` 的细腻线性渐变，避免纯色块显得像旧官网。
+- 光电/雷达母题可使用浅蓝径向光、矢量线、坐标刻度、准线圆环，但透明度要低，不能压住文字。
+- 面板使用白底、细线、少量灰蓝阴影，强调结构和秩序，不用厚重拟物阴影。
+- 主按钮可以使用深蓝到亮蓝渐变；次按钮使用白底蓝边框。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题要硬朗、清楚、权威，但不能过度压缩。H1 建议 44-72px，行高 1.08-1.16。
+- 正文建议 15-17px，行高 1.55-1.7；新闻、公告和能力说明可稍密，但必须有清晰分组。
+- 导航和短标签使用 14-16px、700 左右字重；不要把导航做得过粗过挤。
+- 参数、设备编号、项目代号可以使用等宽数字栈，但中文解释仍使用系统无衬线。
+- 禁止中文标题出现单字孤行；长标题要拆成两条语义完整短句。
+
+## 结构语言
+
+这个模板适合央企官网、工业集团能力页、智能制造平台、装备科技展厅、技术服务 dashboard 和政企汇报 deck。
+
+- **顶部导航**：白底品牌区 + 蓝色主导航，或现代化的白底悬浮导航 + 蓝色短线；导航要规整，不做花哨动画。
+- **首屏**：装备 / 工厂 / 光电 / 雷达画面或矢量准线作背景铺底，强标题和责任/技术短句浮在前景，不直接复制真实标识。
+- **能力矩阵**：展示“智能制造、光电感知、车辆平台、材料工程、国际服务”等能力时，优先做成图标/插图 + 能力短句的图文浮层；真·并列能力矩阵才做成图表化指标面板浮在背景上，每项有具体说明，不堆白底三栏卡墙。
+- **蓝色焦点块**：承载重点结论、战略能力、核心数据或行动入口的前景强调浮层（深蓝渐变 + 白字），白字必须足够大、行距足够松，是前景重点而非分区卡。
+- **技术图层**：用低透明矢量线、扫描弧线、圆形准线、坐标网格表达精密技术，不做纯装饰 HUD。
+- **数据与责任**：以图表（指标条/进度环/折线）+ 项目里程碑、责任清单、创新成果和安全状态呈现，不堆表格、不只放口号。
+- **行动区**：按钮短、稳、明确，例如“查看能力图谱”“进入项目中心”“下载技术资料”。
+
+用到图表 / 指标面板时圆角建议 6-12px，整体偏方正；工业央企风格需要稳定基线、清楚网格和严谨边距。但页面主体走编辑式前景浮层，不要堆白底分区卡海或漂浮玻璃卡，也不要把页面做成老式三栏新闻列表。
+
+## 视觉母题
+
+选择 1-3 个母题持续复用：
+
+- **矢量准线**：圆环、四向刻度、中心坐标，用于表达精密、定位和安全。
+- **蓝色导航带**：承接政企官网识别，但用现代间距和更轻的边界升级。
+- **光电扫描**：浅蓝扫描弧、数据链路、波束线，表达智能化与探测。
+- **工业模块**：方正模块、参数条、剖面线、设备轮廓，表达制造能力。
+
+不要复制真实中国兵器标识的造型、字形、比例或十字准星组合。可以做原创的抽象矢量图形，但必须与真实标识保持明显差异。
+
+## PPT/deck 方向
+
+如果用于 HTML deck 或 PPT 风格页面：
+
+1. 封面用装备 / 工厂 / 光电画面或白底 + 浅蓝矢量准线作背景 + 深蓝标题浮前景，不要整页深蓝、也不要白底空卡。
+2. 目录页用 4-6 个编号项浮在背景上，深蓝编号、黑色标题，不堆白底分区卡。
+3. 能力页走“背景层（装备 / 工厂图或矢量技术图层）+ 标题与能力短句浮前景 + 蓝色焦点强调 + 图表/指标面板”的编辑式结构，不堆参数卡 / 责任卡墙。
+4. 数据页用图表（柱/折线/进度环/指标条）+ 里程碑、流程图承载，不堆长表格、不只放新闻列表；真·并列矩阵才做成图表化指标面板。
+5. 结论页以“能力结论 + 下一步行动 + 责任字段”浮在背景上收束。
+
+## 适用场景
+
+适合：
+
+- 装备制造、工业集团、央企官网、技术展厅、国防科技民用化展示
+- 光电雷达、智能制造、材料工程、车辆平台、能源装备、安全技术
+- 企业门户改版、业务能力页、技术服务平台、政企汇报 deck
+
+不适合：
+
+- 消费娱乐、儿童产品、潮流品牌、奢侈时尚
+- 轻量 SaaS、生活方式产品、强插画品牌
+- 需要温暖亲和、医疗信任或金融风控的场景
+- 纯科幻 HUD 或游戏化界面
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确行业对象：装备、光电、车辆、材料、智能制造、工程服务或安全平台。
+2. 保留白底、黑字、蓝色导航/焦点块、浅蓝技术图层和严谨网格，不复制真实品牌内容。
+3. 每个蓝色元素必须承担层级功能：导航、重点、行动、状态或技术图层。
+4. 若用于官网，减少旧门户的密集新闻列表，增加能力图谱、技术模块和行动入口。
+5. 若用于 dashboard，蓝色负责状态和链路，白底负责表格与决策内容。
+6. 移动端隐藏复杂准线装饰，保留标题、重点能力、行动按钮和关键指标。
+
+## 质量标准
+
+成功的 `Aegis Vector` 变体应该像一个现代央企工业科技团队设计的视觉系统：白底清楚、黑字有权威、蓝色有识别度、浅蓝有技术感，矢量准线和工业网格服务信息结构而不是装饰。用户第一眼应感到稳重可信，第二眼能读懂业务能力、技术优势、责任与行动。

package/skills/ui-design/references/vi-amber-prism.md

@@ -0,0 +1,133 @@
+# `Amber Prism` VI 模板
+
+中文名：琥珀棱镜。
+
+当用户需要“白色为主、橙金为辅、少量红色、黑色信息层级、蓝色和紫色少量点缀、AI 科技公司官网、模型发布、多模态产品矩阵、通用 SaaS 官网、温暖发布感、编辑式图文融合”这类前端设计方向，或明确提到 `Amber Prism / 琥珀棱镜` 时，使用这个模板。
+
+这是从早期 `Ember Prism` 测试中沉淀出的偏橙金版本，作为独立模板保留。它适合更温暖、轻盈、亲和的 AI 产品展示，不追求强红色冲击。版式上走**编辑式图文融合**（苹果/大疆产品详情页范式）：产品视觉/背景作底、文字浮前景、能力与参数用图表说话，而非橙金卡片墙。它仍然是原创视觉系统，不复刻任何真实 AI 公司品牌、页面结构、文案、插画或专有 UI。
+
+> **遵循 `SKILL.md` 的编辑式最高原则**：图作背景、文字浮前景、数据用图表、特写用插图，不堆卡海。本模板下出现的「卡片」仅作为「图表/指标面板浮背景」的罕见例外，不用来按白底卡分区。
+
+## 视觉定位
+
+- **气质**：明亮、温暖、开放、工程可信、有轻发布感。
+- **情绪**：像一家 AI 科技公司的产品矩阵首页：白色空间足够干净，橙金带来能量和亲和，黑色让信息可信，蓝紫点缀表达模型能力和多模态广度。
+- **核心原则**：白底负责可读，黑色负责层级，橙金负责行动和温暖发布节奏，蓝紫只做能力分类和科技点缀。
+- **第一印象**：清爽、温暖、活跃但不刺眼，像成熟 AI 公司官网而不是普通 SaaS 卡片页。
+
+## 色彩 token
+
+以下作为起始色盘。橙金是模板记忆点，红色作为辅助强调；蓝和紫是能力色，不做大面积背景。
+
+```css
+:root {
+  --ink: #101014;              /* 主文字黑 */
+  --ink-soft: #2b2b33;         /* 次级标题 */
+  --muted: #636574;            /* 辅助文字 */
+  --paper: #fffdfb;            /* 暖白页面背景 */
+  --paper-cool: #f7f9ff;       /* 冷白分区背景 */
+  --surface: #ffffff;          /* 主内容面板 */
+  --surface-warm: #fff6ec;     /* 橙金浅底 */
+  --line: rgba(16, 16, 20, 0.10);
+  --line-warm: rgba(255, 92, 56, 0.22);
+  --accent: #ff7a2f;           /* 主橙：核心行动、发布标记 */
+  --accent-red: #f0442f;       /* 辅助红：重要提醒、发布标记 */
+  --accent-gold: #ffc247;      /* 金黄：轻量高光 */
+  --blue: #2563eb;             /* 清透钴蓝：模型、API、开发者能力 */
+  --violet: #7c3aed;           /* 少量紫：多模态、智能创作 */
+  --cyan: #14b8c8;             /* 少量青：在线、同步、生成完成 */
+  --shadow: rgba(255, 122, 47, 0.16);
+}
+```
+
+### 色彩使用
+
+- `--paper` 是默认大背景，保持暖白、清爽和中文可读。
+- `--ink` 用于标题、正文主信息、数字和导航；不要把大段正文做成彩色。
+- `--accent` 用于主按钮、发布标签、当前模型、关键转化入口和重要强调。
+- `--accent-red` 用于重要提醒、发布标记和少量高优先级状态，不做大面积底色。
+- `--blue` 用于开发者、API、代码、模型参数、链接和可信技术信息。
+- `--violet` 用于多模态、创作、视频、语音、智能生成等扩展能力，面积小于红橙和蓝。
+- `--cyan` 用于完成、在线、同步和成功状态，不要和蓝紫一起堆成彩虹。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用橙金一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（暖主轴 + 冷科技辅助，白底上都可读），按系列数依次取用：
+
+`#ff7a2f 主橙` · `#ffc247 金黄` · `#f0442f 辅助红` · `#2563eb 钴蓝` · `#7c3aed 紫色` · `#14b8c8 青色`
+
+单系列图（单进度环/单柱）用 `accent` `#ff7a2f` 一色即可；多系列按上面顺序取。A 路线插图以画面真实色为准，不要把所有插图染成橙金。
+
+## 渐变与材质
+
+- 背景以白色为主，只在首屏、章节交界和产品矩阵背后加入低对比橙金光晕；内容页让产品视觉或橙金同色系渐变·纹理铺底（配 scrim 压住），文字浮其上，而不是切成白底卡。
+- 主按钮可以使用橙到金的短渐变，文字保持白色；次按钮用白底黑字或黑底白字。
+- 能力与参数优先用图表（柱/饼/折线/进度环/参数胶囊/对比列）+ 前景文字浮在产品视觉或背景上表达，用橙金、蓝、紫做数据系列色或细顶部线分组；只有真·并列指标矩阵且做成图表/指标面板浮背景时才退回卡片，不要把每屏都切成铺满彩色渐变的卡墙。
+- 黑色模块用于代码示例、模型调用、价格/用量重点、开发者入口和页脚行动区。
+- 蓝紫点缀要像棱镜折出的辅助光：细线、标签、图标底、进度点，而不是整屏蓝紫雾。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题用黑色，字重 750-850；中文不使用负字距。
+- H1 建议 56-88px，移动端 38-52px；不要让中文出现单字孤行。
+- 正文建议 15-17px，行高 1.55 左右；产品说明保持具体，不写空泛口号。
+- 模型名、参数、API、Token、版本号可以使用等宽字体栈：`"SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace`。
+- 少量渐变文字只能用于 1-3 个关键词，正文和按钮不做花字。
+
+## 结构语言
+
+这个模板适合 AI 公司官网、模型发布页、多产品矩阵、开发者平台和轻量 deck。
+
+- **顶部导航**：白底、黑字、细分隔线；右侧主行动按钮用橙金，语言/文档/API 入口保持克制。
+- **首屏发布区**：产品/模型主视觉或橙金渐变铺底，大标题、短副标题、橙金主行动、黑色次行动直接浮在视觉上，而非塞进白底卡。
+- **能力呈现**：语言模型、视频、语音、代码、Agent、API 等用图表 + 前景文字浮在产品视觉或背景上分组表达（按颜色角色区分），内容必须具体——不堆能力三联/四联白底卡。
+- **模型与参数**：型号/能力名做前景大字，关键指标用进度环/参数胶囊/对比列等图表浮在视觉上，配一个行动入口；只有真·并列指标矩阵才退回做成图表/指标面板浮背景，不是白底卡分区。
+- **开发者黑色面板**：用黑色承载代码调用、上下文长度、延迟、价格、Token 用量等硬信息。
+- **研究/新闻列表**：白底黑字，橙金标签标记最新，蓝色链接表示阅读/文档。
+- **底部行动区**：可用黑底，橙金按钮，蓝紫只做细节光线。
+
+图表/指标面板（罕见的卡片例外）圆角建议 14-20px；官网首屏可以更开阔，工具型控制台可降到 8-12px。布局要有产品矩阵的横向扩展感（靠背景视觉 + 前景图文编排，而非白底卡阵），移动端转为清晰纵向流，指标仍以图表/前景文字呈现。
+
+## 视觉母题
+
+选择一个母题并持续复用：
+
+- 棱镜光束：橙金主光，蓝紫作为折射出来的能力色，做背景层光感。
+- 模型矩阵：多个模型/产品像图文段落一样在背景视觉上横向展开，每段标题/指标浮前景，而非卡片阵列。
+- 能量轨道：橙金线条表达发布、加速、用量增长和推理流。
+- 黑色控制台：表达 API、开发者、工程可信和模型硬指标。
+
+不要使用真实 MiniMax 标识、真实产品截图、真实官网插画、品牌图标轮廓或原始文案。不要做成彩虹糖页面；彩色必须服务产品分类和行动层级。
+
+## 适用场景
+
+适合：
+
+- AI 科技公司官网、模型发布页、开发者平台、API 产品页
+- 多模态产品矩阵、视频/语音/代码/Agent 能力集合
+- Token 套餐、模型能力对比、研究成果页面
+- 需要白底清晰、橙金活力、黑色可信、蓝紫科技点缀的 deck
+
+不适合：
+
+- 高风险运营台、严肃金融风控、医疗信任场景
+- 暗色硬件官网、摄影器材、电影机控制台
+- 儿童娱乐、复古手工、奢侈时尚品牌
+- 长篇阅读型内容站或需要极低刺激的政企系统
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确产品矩阵：模型、产品、API、研究、价格或开发者入口。
+2. 保留白底、黑字、橙金行动、蓝紫能力点缀，不复制真实官网内容。
+3. 每个彩色必须有角色：橙金是行动/发布，蓝是开发者/参数，紫是多模态/创作，青是状态。
+4. 首屏不要只放口号，必须给出具体模型、能力、产品入口或硬指标。
+5. 移动端减少光晕和彩色线条，优先保证中文标题、按钮和浮在背景上的指标图表可读可点。
+6. 截图确认：是否白底足够干净，橙金是否有能量但不刺眼，黑色是否增强专业感，蓝紫是否只是点缀而不是抢主色。
+
+## 质量标准
+
+成功的 `Amber Prism` 变体应该像成熟 AI 科技公司做出的温暖白底产品矩阵官网：一眼能看到主产品和行动入口，第二眼能分辨模型、API、多模态、研究和价格等不同模块。它应该明亮、亲和、可信，但不复制任何真实品牌，也不把橙金蓝紫堆成无意义装饰。