minimal-agent 0.9.0 → 0.10.0

package/skills/ui-design/references/vi-obsidian-optics.md

@@ -0,0 +1,139 @@
+# Obsidian Optics VI 模板
+
+当用户需要“深色摄影器材、电影机、影像科技、黑白红、专业硬件、录制信号”这类前端设计方向，或明确提到“Obsidian Optics / 黑曜影像”时，使用这个模板。它是“器材影像作背景 / 主角、参数与录制信号浮前景、规格走图表与时间码”的暗场编辑式版式，最适合影像器材详情页 / 发布页 / 控制台 / HTML deck。
+
+这是原创视觉系统模板，不是任何真实摄影品牌的复刻。用户提到红龙摄像机、电影机或类似高端影像设备时，只迁移“黑白红、精密工业、录制信号、光学科技”的方向；不要复用真实品牌名称、标识、商标、专有字形、产品名或独特 UI。
+
+## 视觉定位
+
+> **遵循 SKILL.md 的「★ 编辑式最高原则」**：图作背景 / 主角、文字浮前景、数据用图表、特写用插图，不堆卡海。本模板的「电影机控制台」气质天然就是编辑式：器材影像 / 镜头光学画面（客户图 / AI 渲染 / 黑石墨冷光底）出血铺底，标题、核心卖点、录制信号与时间码直接浮在画面上，分辨率/帧率/动态范围等规格走图表（柱/进度环/参数胶囊）与时间码，镜头/接口/材质走特写插图。面板只保留为「图表 / 参数面板浮背景」的例外，不是黑底模块化卡墙。
+
+- **气质**：精密、锋利、专业、轻科技、高端影像硬件。
+- **情绪**：像一台待命的电影机控制台，有录制前的专注感，但不压抑。
+- **核心原则**：黑不是一片纯黑，而是分层暗面、金属边缘、镜头玻璃高光和红色信号点。
+- **第一印象**：冷静、昂贵、可控、参数清楚，有工业感但不笨重。
+
+## 色彩 token
+
+以下作为起始色盘。可以根据用户领域微调红色或冷光色，但不要破坏“黑白主体 + 少量红色信号 + 光学冷光”的结构。
+
+```css
+:root {
+  --ink: #f4f5f6;             /* 冷白：主文字 */
+  --ink-soft: #d8dde3;        /* 次级标题 */
+  --muted: #8c939d;           /* 雾灰：辅助文字 */
+  --paper: #07080a;           /* 深背景 */
+  --surface: #101216;         /* 主面板 */
+  --surface-raised: #171a20;  /* 抬升面板 */
+  --surface-metal: #20242b;   /* 金属暗面 */
+  --line: rgba(244, 245, 246, 0.12);
+  --line-strong: rgba(244, 245, 246, 0.22);
+  --accent: #e21b2d;          /* 信号红：录制、选中、关键行动 */
+  --accent-deep: #7b0f18;     /* 暗红：深层警示、阴影 */
+  --optic: #b9c7d6;           /* 镜头冷光 */
+  --shadow: rgba(0, 0, 0, 0.42);
+}
+```
+
+### 色彩使用
+
+- `--ink` 用于主标题、关键参数和按钮文字，保证深色背景上的阅读。
+- `--paper` 不能铺成死黑，必须配合石墨微渐变、冷光和细线层级。
+- `--surface` 与 `--surface-raised` 用于面板层级，面板之间靠明度和边线区分。
+- `--accent` 只用于录制点、选中状态、关键 CTA、进度线和少量状态标记。
+- `--accent-deep` 用于红色暗部，不要做大面积红色背景。
+- `--optic` 用于镜头高光、焦平面线、冷色边缘和参数辅助信号。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+本 VI 近乎黑 + 信号红的精密工业调，图表（柱/饼/折线/进度环）仍需**可区分的数据系列色**，别全用强调红一种（见 `layout-composition.md` §0.9 配色解耦）。
+分类色保持冷静、克制（红 + 冷光系，深背景上都可读），按系列数依次取用：
+
+`#e21b2d 信号红` · `#b9c7d6 镜头冷光` · `#4a90c2 冷蓝` · `#d8a13a 琥珀` · `#5fae8c 青绿` · `#8c939d 雾灰`
+
+单系列图（单进度环/单柱）用 `accent` `#e21b2d` 一色即可；多系列按上面顺序取。A 路线插图以画面真实色为准、不受此约束，只需与 VI 协调不冲突。
+
+## 渐变与材质
+
+- 背景使用黑到石墨的微渐变，叠加非常轻的冷光，让页面有深度但不脏。
+- 面板使用低对比金属渐变：上缘略亮、下缘更暗，配合 1px 细边框。
+- 红色用于“信号”，不是“主题底色”。任何大面积红色都会让界面变重。
+- 镜头/光学母题可用圆环、刻度、焦平面线、红色录制点、窄线栅格。
+- 阴影要深但薄，像设备缝隙，不要做厚重卡片阴影。
+
+## 字体与排版
+
+- 中文标题硬朗但不能过粗，建议字重 750-850；不要使用负字距。
+- H1 上限建议 72-84px，适合硬件官网；控制在 2-4 行，避免中文单字孤行。
+- 正文使用冷灰，字号建议 15-17px，暗色背景下不要用小号浅灰长段落。
+- 参数标签、规格、时间码可使用等宽字体栈：`"SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace`。
+- 英文缩写如 ISO、FPS、RAW、HDR 可以保留；解释性文案仍使用简体中文。
+
+推荐尺度：
+
+```css
+h1 {
+  font-size: clamp(42px, 6vw, 76px);
+  line-height: 0.98;
+  letter-spacing: 0;
+}
+
+.spec-label {
+  font-family: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+```
+
+## 结构语言
+
+这个模板适合展示专业影像设备和影像工作流。版式遵循编辑式：器材影像作背景 / 主角，参数与状态浮前景，规格走图表而非堆卡。
+
+- **主机位首屏**：器材影像或精密设备视觉母题铺底，一个强标题、少量核心卖点浮在画面前景。
+- **参数视觉化**：分辨率、帧率、动态范围、接口、电池、存储等规格用图表（柱/进度环/参数胶囊浮背景）+ 时间码呈现，不堆参数表格或参数卡墙。
+- **录制状态**：红色点、时间码、状态线、进度条直接浮在器材背景上，红色面积必须克制。
+- **镜头环/刻度**：用于建立光学识别，不需要真实镜头图也能有器材感。
+- **机身模块拼接（罕见例外）**：仅当真·并列规格矩阵时，才把它做成边缘锐利的图表化指标面板浮在背景上（圆角 6-10px），不是默认的黑底分区卡墙。
+- **暗色按钮**：主按钮可用红色或冷白描边，次按钮用暗面板和细边框。
+
+## 视觉母题
+
+选择一个轻量母题并持续复用：
+
+- 录制红点：表达待命、捕捉、关键行动。
+- 镜头圆环：表达光学、焦距、传感器、监看。
+- 焦平面线：表达精度、画幅、构图。
+- 参数栅格：表达专业控制、硬件规格。
+- 金属边缘高光：表达设备质感，不要变成重金属纹理。
+
+## 适用场景
+
+适合：
+
+- 摄影器材、电影机、镜头、稳定器、监看工具
+- 影像工作流、调色工具、素材管理、创作者硬件
+- 专业设备官网、产品发布页、控制台、HTML deck
+- 需要黑白红、精密、科技、硬件可信度的界面
+
+不适合：
+
+- 轻消费 SaaS、儿童娱乐、生活方式、电商软装
+- 医疗、金融、教育等需要柔和信任感的场景
+- 强游戏化、赛博朋克、霓虹夜店风页面
+- 需要大面积彩色插画或温暖亲和感的品牌
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确用户任务里的“设备、参数、状态、动作、输出”分别是什么。
+2. 保留黑白主体和少量红色信号，禁止把红色扩展成大面积背景。
+3. 用石墨渐变、冷光、边线和参数模块减轻纯黑压迫感。
+4. 所有内容都要重写到新领域，不能残留电影机样例参数，除非任务就是摄影器材。
+5. 移动端减少装饰刻度和过密参数，优先保证黑底白字对比和点击目标。
+6. 截图确认：页面是否高端、科技、专业、不沉重；红色是否像信号而不是情绪涂层。
+
+## 质量标准
+
+一个成功的 Obsidian Optics 变体应该像专业影像设备的现代控制界面：黑白有层次，红色有纪律，参数有秩序，整体锋利但不压迫。检验标准是：用户能快速识别它属于高端影像/硬件领域，同时愿意长时间阅读其中的参数与说明。

package/skills/ui-design/references/vi-obsidian-xui.md

@@ -0,0 +1,143 @@
+# `Obsidian XUI` VI 模板
+
+中文名：黑曜界面。
+
+当用户需要“黑色科技、XUI、科幻质感、深色科技编辑式、渐变光、精密线框、HUD 灵感、工业数据可视化、科技感更强”这类前端设计方向，或明确提到 `Obsidian XUI / 黑曜界面` 时，使用这个模板。**它是比 `Nebula Console` 更黑更锋利的「深色科技编辑式数据可视化」**——极黑背景作底、强中文标题与论点文字浮前景、数据用图表（柱/饼/折线/进度环/指标条）说话、系统关系用精密线框拓扑，**不是把屏幕铺成发光数据卡片矩阵 / HUD 卡海的数据大屏界面**。慎用于：需要密集行操作的真后台软件、长文内容站、温暖消费品牌。
+
+这是面向真实网页、产品官网和演示 artifact 的原创视觉系统，不是电影道具或游戏界面。可以借鉴黑色 XUI、未来显示器、扫描线、精密边框和发光数据节点的**质感**，但版式服务中文阅读、按钮可点、信息层级清楚，不堆 HUD 卡海。
+
+> **遵循 `SKILL.md` 的编辑式最高原则**：图作背景、文字浮前景、数据用图表、特写用插图，**数据大屏 / 控制台型的数据面板也是图表 / 指标面板浮在极黑背景上、不是发光卡片矩阵**。本模板下出现的「面板」仅作为「图表 / 指标 / 线框拓扑浮背景」的容器，不用来按玻璃卡 / HUD 卡分区。
+
+## 视觉定位
+
+- **气质**：黑色、锋利、精密、未来、系统在线、科技强度高。
+- **情绪**：像一个高端设备或智能系统的核心控制界面，深色空间里有渐变光、透明层、线框和数据流，但用户仍能清楚读字和操作。
+- **核心原则**：科幻感来自“深色层级 + 渐变光 + 半透明面板 + 精密线框 + 高对比文字”，不是把文字放到花背景上。
+- **第一印象**：高级、冷静、强科技、可控，而不是廉价蓝光大屏、游戏 HUD 或满屏装饰线。
+
+## 色彩 token
+
+以下作为起始色盘。黑色是主体；青蓝是主信号；紫蓝和绿光只做点缀；红橙只用于告警。
+
+```css
+:root {
+  --ink: #f2f7ff;              /* 主文字冷白 */
+  --ink-soft: #d5e2f2;         /* 次级标题 */
+  --muted: #91a3b7;            /* 辅助文字 */
+  --paper: #03050a;            /* 深黑背景 */
+  --paper-blue: #060d18;       /* 蓝黑渐变底 */
+  --surface: rgba(10, 18, 30, 0.82);        /* 稳定深色阅读面 */
+  --surface-glass: rgba(16, 32, 52, 0.62);  /* 半透明玻璃面 */
+  --surface-raised: rgba(24, 42, 66, 0.88); /* 抬升控制面 */
+  --line: rgba(148, 213, 255, 0.18);
+  --line-strong: rgba(148, 213, 255, 0.40);
+  --accent: #33b8ff;           /* 电光蓝：主行动、选中 */
+  --signal: #2ee8d6;           /* 青蓝：在线、连接、流动 */
+  --matrix: #8dffb4;           /* 少量绿光：校验、通过 */
+  --violet: #8b5cf6;           /* 紫蓝：空间深度、AI 状态 */
+  --amber: #f5b84b;            /* 告警 */
+  --danger: #ff4d5e;           /* 风险 */
+  --shadow: rgba(0, 10, 28, 0.62);
+}
+```
+
+### 色彩使用
+
+- `--paper` 与 `--paper-blue` 用于大背景，必须有低对比渐变，不要纯黑死板。
+- `--surface` 是正文和长信息的默认承载层。所有正文、表格、说明文本都必须落在稳定深色面上。
+- `--surface-glass` 用于浮层、状态条、工具栏和短信息面板；透明度不能低到影响可读。
+- `--accent` 用于主按钮、选中状态、关键节点和高亮边框。
+- `--signal` 用于在线、连接、流动、同步和数据传输。
+- `--matrix` 只用于通过、校验、健康状态和少量代码感信号，不做大面积绿色。
+- `--violet` 只做 AI、预测、空间深度和渐变边缘，不做主色。
+- `--amber` / `--danger` 只用于告警和风险，不做装饰。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用电光蓝一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（深黑背景上的高对比科技色，彼此分得开），按系列数依次取用：
+
+`#33b8ff 电光蓝` · `#2ee8d6 青蓝` · `#8dffb4 绿光` · `#8b5cf6 紫蓝` · `#f5b84b 琥珀` · `#ff4d5e 风险红`
+
+单系列图（单进度环/单柱）用 `accent` `#33b8ff` 一色即可；多系列按上面顺序取。A 路线插图以画面真实色为准，只需与深色科技底协调。
+
+## 渐变与材质
+
+- 背景使用黑到蓝黑的纵深渐变，可以叠加少量斜向电光蓝/紫蓝径向光。
+- 主面板使用“半透明外层 + 稳定内层阅读面”的双层结构：外层负责科幻感，内层负责文字对比。
+- 边缘高光使用 1px 冷蓝线、角标、短切线和内阴影，不做厚重霓虹边框。
+- 扫描线和网格透明度要低，通常不超过 0.08；它们只服务空间感和对齐，不承载主体美感。
+- 渐变必须有方向：背景纵深、按钮行动、状态流动、节点连接。不要把蓝紫青绿混成脏雾。
+
+## 可读性铁律
+
+- 正文、表格、注释、按钮文字必须达到高对比；不要把文字直接放在复杂光效、网格或动态图层上。
+- 任何半透明面板中，如果背景细节穿透导致阅读变脏，必须增加内层 `rgba(3, 5, 10, 0.72+)` 或实色遮罩。
+- 暗色背景下正文不低于 15px，行高不低于 1.55；辅助文字不要低于 `#91a3b7` 的对比水平。
+- H1 可以发光或用渐变描边，但可读文字本体必须是冷白或接近白色。
+- 移动端减少扫描线、网格、背景光和浮层数量，优先保证标题、按钮和关键指标清楚。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题硬朗但不做赛博朋克字形；字重 750-850，字距保持 0。
+- H1 建议 44-76px；移动端 36-48px；不要出现单字孤行。
+- 正文 15-17px，行高 1.55-1.65。
+- 参数、时间码、设备编号、节点 ID 可使用等宽字体栈：`"SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace`。
+- 短标签可以全大写英文缩写，但解释性文案必须简体中文。
+
+## 结构语言
+
+这个模板适合高科技产品官网、工业数据可视化、AI 系统、空间/机器人/安全/工业产品的展示与 deck。**版式走深色科技编辑式**：极黑背景作底、一屏一件事，数据交给图表、论点交给前景浮层文字、系统关系交给精密线框拓扑，**不靠发光数据卡片矩阵 / 网格 / HUD 卡海 / 对比表格划分区域**。
+
+- **黑色主舞台**：全局深黑，强标题与论点文字浮在前景，背景层负责纵深与质感。
+- **数据图表（替代发光卡片矩阵）**：指标、状态、负载用柱/饼/折线/进度环/指标条画出来，做成**浮在极黑背景上的图表 / 指标面板**，XUI 质感（半透明边框、角标、短切线、状态灯、微弱内发光）只作这些图表/指标容器的边框语言；**不排成一片发光数据卡矩阵或 div 对比表**。真·并列指标矩阵也以指标面板/图表呈现。
+- **线框拓扑与节点**：用精密线框、节点、短标签表达系统连接，不做无意义雷达，也不退化成卡片网格。
+- **数据轨道**：进度、扫描、流动状态用细线、进度环和小面积渐变，不铺满。
+- **要点前景浮层**：特性、能力要点直接浮在背景上（参数胶囊 / 对比列），不装进玻璃/HUD 卡分区；要特写时插透明背景前景插图。
+- **告警状态**：琥珀/红色只在异常状态出现，保持克制。
+- **行动按钮**：主按钮电光蓝或青蓝渐变，按钮高度不低于 44px，文字清楚。
+
+少量必要的图表/指标容器圆角建议 6-12px、越密集越方正；官网首屏可用 12-16px。不要套普通 SaaS 大圆角卡片，不要把所有模块都做成同一种透明玻璃，更不要把屏幕铺成发光卡片矩阵——容器只作图表/指标/拓扑的载体。
+
+## 视觉母题
+
+选择一个母题并持续复用：
+
+- 深层控制台：背景、主面、浮层、状态面四级分层。
+- 精密线框：角标、切线、测量线、分区线。
+- 数据航道：流动线、节点、脉冲、路径追踪。
+- 透明装甲：半透明外层 + 稳定内层阅读面。
+- 校验矩阵：少量绿光表示通过、健康和系统稳定。
+
+不要使用满屏十字准星、假雷达、复杂无意义 HUD、闪烁动画、密集随机数字雨或过度霓虹。XUI 的高级感来自克制和结构，不来自堆效果。
+
+## 适用场景
+
+适合：
+
+- AI 系统、工业软件、机器人系统、空间科技、网络安全的官网与展示
+- 工业数据可视化、数字孪生、设备能力 deck、黑色科技官网
+- 需要比 `Nebula Console` 更强 XUI 科幻质感的编辑式数据 artifact
+
+不适合：
+
+- 需要密集行操作、增删改查的真后台软件 / 监控控制台界面（编辑式不擅长）
+- 长文内容站、温暖消费产品、医疗信任场景、儿童娱乐
+- 严肃政务报告、传统金融报告、生活方式品牌
+- 需要白底高可读或大量文档型阅读的页面
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确系统对象：设备、模型、节点、任务、风险、控制动作。
+2. 先声明层级：背景光、前景文字浮层、图表/指标面板、线框拓扑、状态光分别承担什么信息；数据进图表、要点进前景浮层，不铺发光卡矩阵。
+3. 把最重要文字浮在前景、放在稳定深色阅读面上，装饰光和网格退到底层；数据交给图表/指标面板而非排成卡片网格。
+4. 用青蓝/电光蓝表达正常系统动作，用琥珀/红色表达异常，用紫蓝表达 AI/预测。
+5. 移动端减少 HUD 线条，只保留标题、状态、关键指标和行动按钮。
+6. 截图确认：是否黑色有层次，文字是否清楚，渐变是否有方向，是否过度像游戏界面或电影道具。
+
+## 质量标准
+
+成功的 `Obsidian XUI` 变体应该像真实高科技系统的产品官网 / 数据可视化 deck：黑色深而不死，透明有边界，发光有纪律，文字始终清楚浮在前景，**数据用图表说话、要点用前景浮层文字、系统关系用精密线框拓扑，而不是一片发光数据卡片矩阵 / HUD 卡海**。用户第一眼感到强科技和系统在线，第二眼能明确读懂状态、风险、动作和下一步，且每组数据都以图表/指标面板而非卡海呈现。

package/skills/ui-design/references/vi-precision-horizon-dark.md

@@ -0,0 +1,117 @@
+# `Precision Horizon Dark` VI 模板
+
+当用户需要“深色产品官网、专业硬件发布页、高性能设备、黑色产品剧场、类似 iPhone Pro / MacBook Pro 深色产品详情页那种图文融合气质”这类前端设计方向，或明确提到 `Precision Horizon Dark / 精密地平线深色版` 时，使用这个模板。它天生就是“产品边缘光作主角、文字与大参数浮前景”的暗场编辑式版式，最适合专业产品详情页 / 发布页 / 产品介绍 deck。
+
+这是 `Precision Horizon / 精密地平线` 的深色版本，专门处理高端专业产品的暗色发布感。它不是 Apple、DJI 或任何真实品牌的复刻。可以学习“黑色剧场、产品边缘光、暖橙/深蓝材质色、性能参数冲击”的方法，但不能复制真实品牌名称、标识、字体、产品摄影、页面结构、文案、图标或专有 UI。
+
+## 视觉定位
+
+> **遵循 SKILL.md 的「★ 编辑式最高原则」**：图作背景 / 主角、文字浮前景、数据用图表、特写用插图，不堆卡海。深色版的「黑色剧场 + 产品边缘光」天然就是编辑式：产品（客户图 / AI 渲染 / 暖黑·深蓝黑材质光底）出血铺底，短标题、大参数与收益句直接浮在产品边缘光上，性能数据走大数字 + 图表（柱/进度环/芯片面板），材质走接口/散热/屏幕特写插图。深色面板只保留为「图表 / 指标面板浮背景」的例外，不是黑底分区卡墙。
+
+- **气质**：专业、强性能、沉浸、高端、锋利，但不能沉闷。
+- **情绪**：像一台专业设备在黑色摄影棚里被灯光扫过，性能、散热、屏幕和材质都被精准展示。
+- **核心原则**：深色版靠“黑色层级 + 产品边缘光 + 材质强调色 + 大参数”建立发布感，不靠赛博朋克装饰。
+- **第一印象**：强、稳、贵、专业，有暗场戏剧性，但中文仍然清楚。
+
+## 色彩 token
+
+```css
+:root {
+  --ink: #f5f5f7;              /* 主文字冷白 */
+  --ink-soft: #d8dbe2;         /* 次级标题 */
+  --muted: #9a9fa8;            /* 辅助文字 */
+  --paper: #050506;            /* 主背景黑 */
+  --paper-warm: #120b08;       /* 暖黑，用于橙色产品 */
+  --paper-blue: #070b14;       /* 深蓝黑，用于屏幕/芯片 */
+  --surface: #111217;          /* 主面板 */
+  --surface-raised: #1a1d24;   /* 抬升面板 */
+  --line: rgba(245, 245, 247, 0.16);
+  --line-strong: rgba(245, 245, 247, 0.28);
+  --accent: #ff7a1a;           /* 暖橙：产品材质、主行动 */
+  --accent-blue: #2f8cff;      /* 深色屏幕蓝 */
+  --accent-red: #ff3b4f;       /* 专业警示/录制信号，低面积 */
+  --accent-violet: #8b5cf6;    /* 屏幕/智能能力点缀 */
+  --metal: #c7ccd5;
+  --graphite: #545b66;
+  --shadow: rgba(0, 0, 0, 0.55);
+}
+```
+
+## 配色变化
+
+- **黑橙性能版**：黑底、暖黑渐变、橙色材质光。适合高性能手机、电脑、芯片、专业设备。
+- **黑蓝影像版**：黑底、深蓝屏幕光、冷白文字。适合影像、显示、AI、创作工具。
+- **黑银工艺版**：黑底、银色产品边缘、低饱和强调色。适合高端硬件、音频、精密仪器。
+- **黑红录制版**：黑底、少量红色信号。只适合录制、影像、专业状态，不要大面积红。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用暖橙一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（黑色产品剧场上高可读，保留专业硬件质感），按系列数依次取用：
+
+`#ff7a1a 暖橙` · `#2f8cff 深色屏幕蓝` · `#ff3b4f 录制红` · `#8b5cf6 智能紫` · `#c7ccd5 金属银` · `#1f9d78 状态绿`
+
+单系列图（单进度环/单柱）用 `accent` `#ff7a1a` 一色即可；多系列按上面顺序取。A 路线产品插图和场景图以产品本色、材质光和屏幕色为准，不强行染成橙色。
+
+## 渐变与材质
+
+- 背景至少有 2 层暗面：主黑、石墨暗面、局部暖黑或深蓝光。
+- 产品周围要有边缘光、反射或屏幕亮面，让黑色产品能从黑底中分离出来。
+- 暖橙、蓝、红只用于材质光、关键参数、按钮、屏幕内容或状态点。
+- 不要堆深色卡片墙。深色版更适合产品大图作背景 + 大标题、大参数与少量说明浮前景；要用面板时只用于承载图表或指标面板浮在产品背景上。
+- 不使用满屏网格、霓虹线框、科幻 HUD 或游戏界面语言，除非用户明确要求。
+
+## 字体与排版
+
+- 中文标题用冷白或暖白，字重要稳，不能过细。
+- H1 桌面建议 56-84px；移动端控制在 40-54px。深色页可以有冲击力，但不能让中文挤压、断裂或单字孤行。
+- 正文 16-18px，辅助文字不能低于可读对比。
+- 参数数字可以更大、更有冲击，配短单位和一句收益解释。
+- 渐变文字可以使用暖橙到金色、蓝到紫，但只用于 1 个短关键词或一句短标题。
+
+### 中文断行与图文安全区
+
+- 深色版的标题通常更粗更亮，更容易显得拥挤。每个大标题都要检查桌面和移动端断行，禁止最后一行只剩单个汉字或标点。
+- 优先把标题拆成语义完整的两段，例如“为高负载影像而生的 / 专业工作站”，不要让浏览器随机截断。
+- 产品图、边缘光和参数浮层必须有独立空间。首屏可以左右分栏或上下分区，但不能让产品图压到标题、按钮或参数。
+- 桌面图文安全距离至少 48px；移动端至少 28px。深色发光会扩大视觉占位，要把光晕也算进安全距离。
+- 结尾行动标题建议控制在 12-18 个汉字，必要时手动换行成完整短语。不要出现“安 / 静”这类拆字式断行。
+
+## 结构语言
+
+- **首屏剧场**：黑色背景、产品大图或原创渲染铺底，短标题、主行动和 2-3 个核心参数浮在产品边缘光上。
+- **性能章节**：大数字 + 芯片/散热/屏幕视觉，数据走图表（柱/进度环/芯片面板浮背景），不堆深色卡墙。
+- **工艺章节**：边缘、接口、镜头、屏幕、材料剖面特写插图浮在产品背景上。
+- **专业场景**：暗场摄影棚、工作台、夜景、渲染窗口、屏幕内容作背景，文案浮前景。
+- **型号对比**：用双列对照或参数图表浮背景表达 Pro / Max / 标准版本差异；真·多型号并列指标矩阵才做成图表化指标面板，不堆长表格或分区卡海。
+
+## 视觉母题
+
+- 产品边缘光：表达薄、硬、贵、精密。
+- 暖橙光带：表达性能、热力、能量和材料。
+- 深蓝屏幕光：表达显示、影像、AI 和数据。
+- 石墨剖面：表达内部结构、散热、芯片和工程可信度。
+
+## 适用与不适用
+
+适合：
+
+- 高性能电脑、手机、专业相机、影像设备、AI 硬件、工作站、显示器、芯片
+- 深色官网首屏、发布页、产品介绍 deck、专业产品参数页
+
+不适合：
+
+- 轻生活消费品、儿童娱乐、普通 SaaS、医疗信任场景、大量长文内容站
+- 需要温暖、轻快、亲和的产品
+
+## 迁移方式
+
+1. 先确定产品的“深色理由”：性能、专业、影像、材料、夜景、屏幕或芯片。
+2. 选择一个强调色，不要同时使用橙、蓝、红、紫做主色。
+3. 先做产品边缘光，再加文字和参数。
+4. 每个深色章节只讲一个能力，避免全部内容都在黑卡里。
+5. 移动端减少暗场装饰，保证标题、按钮、参数和产品图足够清楚。
+
+## 质量标准
+
+成功的 `Precision Horizon Dark` 应该像高端专业设备的深色发布页：黑色有层次，产品边缘清楚，强调色有节制，参数有冲击，整体不是游戏 HUD，也不是一片死黑。用户第一眼感到“这是专业产品”，第二眼能读懂它强在哪里。

package/skills/ui-design/references/vi-precision-horizon.md

@@ -0,0 +1,215 @@
+# `Precision Horizon` VI 模板
+
+当用户需要“高端产品展示、硬件官网、产品发布页、科技设备、影像设备、智能硬件、极简高级、浅色产品官网、深色产品剧场、类似 Apple/DJI 产品详情页那种图文融合气质”这类前端设计方向，或明确提到 `Precision Horizon / 精密地平线` 时，使用这个模板。它天生就是“产品作主角、图文融合、参数视觉化”的编辑式版式，最适合产品详情页 / 发布页 / 产品介绍 deck。
+
+这是原创产品展示 VI，不是 Apple、DJI 或任何真实品牌的复刻。可以学习“产品作为主角、材质光、极简叙事、参数视觉化、克制配色”的方法，但不能复制真实品牌名称、标识、字体、产品摄影、页面结构、文案、图标或专有 UI。
+
+## 视觉定位
+
+> **遵循 SKILL.md 的「★ 编辑式最高原则」**：图作背景 / 主角、文字浮前景、数据用图表、特写用插图，不堆卡海。本模板的「产品叙事镜头」段（见下）就是这条原则的范本——产品（客户图 / AI 渲染 / VI 同色系摄影棚渐变）铺底，标题/价值句/参数直接浮在产品镜头上，数据走参数视觉化与对比，特写走材质插图。卡片只保留为「图表 / 指标面板浮背景」的例外，不是白底分区卡海。
+
+- **气质**：克制、高端、精密、清晰、可信，但不能冷清。浅色版要有灰白空间、活跃产品图和少量彩色提气；深色版要有黑石墨剧场、暖色材质光和强产品边缘。
+- **情绪**：像新品发布官网：第一屏让产品被光线托起，后续用产品大图、场景画面、参数视觉化和对比逐屏展开，一屏一件事，而不是一屏塞满小卡片。
+- **核心原则**：产品永远是主角。背景、字体、留白、参数、动效和渐变字都服务于“看清产品、理解价值、相信工艺”。
+- **第一印象**：高级但不呆板，干净但不单调，有产品发布感和真实内容密度。
+
+## 色彩 token
+
+以下作为起始色盘。它不是单一配色，而是一个“产品展示系统”：灰白是底，产品色和屏幕色负责活力，深色版用材质色和边缘光建立冲击。
+
+```css
+:root {
+  --ink: #111113;              /* 主文字：近黑 */
+  --ink-soft: #2b2d32;         /* 次级标题 */
+  --muted: #6b7078;            /* 辅助文字 */
+  --paper: #f5f5f7;            /* 祖传灰白页面背景 */
+  --paper-clean: #ffffff;      /* 纯白大留白 */
+  --paper-warm: #fbfaf7;       /* 暖白背景，用于生活化产品 */
+  --paper-cool: #f2f4f7;       /* 冷灰背景，用于科技设备 */
+  --paper-lilac: #f5f0ff;      /* 淡紫雾，用于智能/创造力 */
+  --surface: #ffffff;          /* 主内容面板 */
+  --surface-soft: #fbfbfd;
+  --dark: #050506;             /* 深色发布页背景 */
+  --dark-soft: #111217;        /* 深色分区 */
+  --dark-warm: #1a100c;        /* 暖黑，用于橙色/铜色产品 */
+  --line: rgba(17, 17, 19, 0.12);
+  --line-dark: rgba(245, 245, 247, 0.16);
+  --metal: #c9ced6;            /* 金属高光 */
+  --graphite: #575d66;         /* 石墨灰 */
+  --accent: #0071e3;           /* 默认行动蓝，可按产品改 */
+  --accent-warm: #d9822b;      /* 暖金/橙，用于行动或场景能量 */
+  --accent-orange: #f26d21;    /* 深色产品剧场中的暖橙 */
+  --accent-pink: #f45bb3;      /* 屏幕/创造力点缀 */
+  --accent-violet: #8b5cf6;    /* 智能/创造力渐变 */
+  --accent-cool: #3aa7ff;      /* 冷蓝，用于影像、空气、飞行 */
+  --screen-blue: #67b7ff;      /* 屏幕/系统画面 */
+  --screen-green: #9bd95f;     /* 活跃屏幕色 */
+  --success: #1f9d78;
+  --warning: #c98a1a;
+  --shadow: rgba(18, 24, 36, 0.16);
+}
+```
+
+### 色彩变化
+
+根据产品特性选择一种主背景策略，不要在一个页面里平均使用所有颜色。
+
+- **祖传灰白**：`--paper` + `--surface` + 近黑文字。适合产品线、分类入口、型号对比和浅色官网主叙事。它不是蓝白，而是微灰、温和、干净。
+- **纯净白场**：`--paper-clean` + 大留白 + 产品本体色。适合单品首屏和高端消费电子，重点是产品轮廓、材质、阴影和短价值句。
+- **活力浅色**：灰白底上加入少量屏幕渐变、产品颜色、彩色前景浮层或渐变标题。适合轻薄设备、创作工具、智能产品。彩色必须来自“屏幕内容、产品色、场景图”，不能变成背景乱涂。
+- **深色剧场**：`--dark` / `--dark-warm` + 冷白文字 + 暖橙或深蓝材质光。适合专业设备、影像硬件、高性能产品、发布会首屏。重点是光线、边缘、产品局部和参数冲击。
+- **冷雾科技**：`--paper-cool` + 少量冷蓝光 + 石墨文字。只在飞行、影像、空间产品中使用，不能把整个浅色版做成发青。
+- **暖白生活**：`--paper-warm` + 暖金/橙小面积强调。适合消费电子、家庭设备、生活方式科技。重点是亲和、舒适和使用场景。
+- **材料同色系**：从产品材质中提取一个颜色作为强调色，如银、钛、深蓝、沙金、陶瓷白。强调色只用于按钮、局部标题、参数焦点或背景微光。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用默认蓝一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（中性产品展示底上可读，兼顾屏幕色、材质色与状态色），按系列数依次取用：
+
+`#0071e3 行动蓝` · `#d9822b 暖金` · `#8b5cf6 智能紫` · `#3aa7ff 冷蓝` · `#1f9d78 成功绿` · `#f45bb3 创作粉`
+
+单系列图（单进度环/单柱）用 `accent` `#0071e3` 一色即可；多系列按上面顺序取。A 路线产品插图和场景图以产品本色、屏幕内容和真实场景色为准，不强行染成品牌色。
+
+### 浅色版规则
+
+- 页面底色优先用 `#f5f5f7`、`#fbfbfd`、`#ffffff`，不要默认浅蓝。
+- 大标题使用近黑，字号可以很大，但周围要有真实产品图或产品线内容承接。
+- 少量渐变字体可以用于一句核心价值或关键词，建议只占 1-2 行，颜色从产品屏幕或产品材质提取。
+- 活力来自产品图、屏幕内容、场景画面和颜色选择器，不来自大面积背景渐变。
+- 内容页优先「产品图作背景 / 主角 + 标题与参数浮前景」，不要默认堆白底卡片墙；真要用卡片，只用于承载图表或指标面板浮在产品背景上，且卡内要有强图像或强产品语义，不是白卡加小文字。
+- 灰白大留白要配合产品镜头、横向产品线、场景大图或对比控件承接实质，否则会显得空。
+
+### 深色版规则
+
+- 深色不是单纯 `#000` 铺底，而是黑、石墨、暖黑、深蓝黑的层级。
+- 文字以冷白为主，辅助文字不能太暗；正文最低要有足够对比。
+- 少量暖橙、深蓝、紫红或青蓝用于产品材质光、屏幕内容、芯片/性能图和主按钮。
+- 深色版首屏要有“产品边缘光”：轮廓、反射、屏幕亮面、接口、摄像头、芯片或散热结构至少出现一种。
+- 参数可更有冲击力，但仍然一屏只讲一件事；不要做成游戏 HUD 或赛博朋克。
+
+## 渐变与材质
+
+- 背景使用低对比线性或径向渐变，模拟摄影棚灯光，而不是显眼装饰色块。
+- 浅色页面优先使用灰白和暖白的微妙层次；只有产品本身需要时才加入冷蓝。
+- 深色页面用黑到石墨、暖黑或深蓝黑的层次，配合产品边缘高光，避免死黑。
+- 金属产品使用细腻高光、柔和投影和反射线，不使用厚重拟物纹理。
+- 飞行、影像和运动产品可以加入极淡轨迹线、地平线、透视网格或环境雾，但必须服务产品运动方向。
+- 渐变文字只做少量强调：适合“轻得更有力”“性能全开”“影像再进化”这类短句，不要把整段标题都做渐变。
+- 渐变的职责是“托起产品”和“分隔叙事段落”，不是制造背景热闹。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题要大、短、稳。中文标题建议 2-3 行内完成，不使用负字距，不做过度压缩。
+- H1 桌面建议 56-82px；硬件发布页可短暂到 88px，但必须检查中文断行。不要为了模仿大标题而让中文产生单字孤行。
+- 正文建议 16-18px，行高 1.55 左右；首屏正文不超过 2-3 行。
+- 参数数字可以使用等宽或紧凑数字栈，但参数解释仍用简体中文。
+- 大标题用近黑或冷白，辅助文案用中性灰；不要把正文放成低对比浅灰。
+
+### 中文断行与图文安全区
+
+- 中文大标题必须人工检查断行。禁止出现最后一行只有 1 个汉字或 1 个标点的“孤字行”，例如把“电脑。”单独挤到下一行。
+- `text-wrap: balance` 只能作为辅助，不能替代设计判断。必要时用更短文案、手动 `<br>`、限制 `max-width` 或降低字号控制断行。
+- 6-12 个汉字的短标题尽量保持一行；超过 12-18 个汉字时，优先拆成两条语义完整的短句，而不是任由浏览器断开。
+- 图文同屏时必须给文字和产品图各自稳定区域。推荐用网格或弹性布局明确分区，避免绝对定位的产品图压住标题。
+- 图文安全距离：桌面文字与产品图至少 40px；移动端至少 24px。若产品图进入文字区域，先改布局，不要只缩小图片。
+- 大标题行高建议 1.05-1.14。中文粗体太大时要增加行高和容器高度，避免上下行视觉挤压。
+- 结尾行动标题要优先自然断成完整短语，例如“选一台适合你的 / 创作电脑”，不要让“脑”或“器”单独成行。
+
+推荐尺度：
+
+```css
+h1 {
+  font-size: clamp(42px, 5.8vw, 82px);
+  line-height: 1.08;
+  letter-spacing: 0;
+  text-wrap: balance;
+}
+
+.lead {
+  font-size: clamp(16px, 1.5vw, 20px);
+  line-height: 1.55;
+  color: var(--muted);
+}
+
+.spec-value {
+  font-variant-numeric: tabular-nums;
+  font-size: clamp(30px, 4vw, 56px);
+  line-height: 1;
+}
+```
+
+## 产品展示方式
+
+这个模板的核心不是卡片，而是“产品叙事镜头”——这正是 SKILL.md 编辑式最高原则的范本：图（产品）作背景 / 主角、文字浮前景、数据用图表与参数视觉化、特写用插图，不靠卡片墙划分区域。每个页面至少选择一种强展示方式。
+
+- **英雄产品镜头**：首屏大产品图或原创产品渲染占据视觉中心，文案围绕它收敛。没有真实图片时，用抽象设备框、材质块、镜头/翼面/屏幕轮廓表达产品，不要用普通插画假图。产品渲染必须有体积、阴影、屏幕/镜头/接口细节，不能像扁平图标。
+- **产品线横排**：适合浅色官网首页，用一排小产品缩略图、型号名和新款标记建立真实产品矩阵。每个缩略图要有不同形态或屏幕颜色。
+- **材质特写**：展示边缘、接口、镜头、屏幕、折叠结构、传感器、按键或表面材质，让高级感有依据。
+- **功能场景**：用一张强场景图或场景化背景表达产品在真实环境中的价值，如飞行、创作、办公、家庭、户外。没有真实图时，用大面积场景色块、屏幕内容、窗口画面、星空/城市/工作台等原创视觉模拟，不要空白占位。
+- **参数剖面**：把关键参数放进剖面、爆炸图、轨迹线、镜头圆环或芯片面板中，而不是堆成普通表格。
+- **对比矩阵**：用于型号、规格或套餐比较。桌面可以用分栏表格；移动端优先改成型号卡，不要把表格硬堆成很长的单列。
+- **滚动章节**：一屏讲一个能力。标题短，说明少，视觉强，参数随章节出现。
+
+## 参数与描述规则
+
+- 首屏只放 2-4 个核心卖点，不要把所有参数塞进第一屏。
+- 参数要分层：核心数字最大，单位和解释次级，备注最小。
+- 技术名词必须翻译成用户收益，例如“4K 120fps”后面要说明“高速动作更清晰”。
+- 描述文案要具体，不写“颠覆体验、重新定义、极致性能”这类空话，除非后面马上有参数或场景支撑。
+- 规格区使用清晰网格：3 列或 4 列桌面，移动端变成单列或双列。
+- 长参数表放后面；主叙事区只展示最能建立信任的参数。
+
+## 结构语言
+
+- **顶部导航**：极简，透明或纯白/纯黑，保留产品名、章节、购买/预约按钮。
+- **首屏**：产品名、短价值句、产品视觉、两个以内行动按钮、2-4 个关键参数。
+- **亮点章节**：每屏一个核心能力，配产品特写、场景或参数视觉化。
+- **参数章节**：用大数字和短说明建立可信度，避免密密麻麻。
+- **场景章节**：展示产品如何被使用，帮助从“好看”过渡到“有用”。
+- **对比章节**：适合多型号产品，使用克制表格和差异标记。
+- **结尾行动**：购买、预约、了解方案或下载资料，保持简短。
+
+## 视觉母题
+
+选择 1-3 个母题持续复用：
+
+- 地平线：表达远景、飞行、空间、发布感和产品方向。
+- 材质边缘光：表达精密加工、薄、硬、轻、强。
+- 轨迹线：表达运动、飞行、捕捉、连接和性能路径。
+- 参数坐标：表达专业、可量化、可信。
+- 产品影子：表达真实体积和摄影棚质感。
+
+不要同时使用太多母题。产品页的高级感来自克制和连续性。
+
+## 适用场景
+
+适合：
+
+- 智能硬件、消费电子、无人机、相机、机器人、可穿戴、电脑、手机、屏幕设备
+- 产品官网、发布页、营销首屏、产品介绍 deck、型号对比页
+- 需要“高端、清晰、产品主角、技术可信、中文可读”的展示型页面
+
+不适合：
+
+- 高密度运营 dashboard、复杂后台、金融风控、政务系统
+- 儿童娱乐、强插画品牌、强游戏化界面
+- 需要大量长文阅读的内容站
+- 没有明确产品对象、只能展示抽象服务的 SaaS 页面；这类任务应先选择其他 VI 或建立独立视觉概念
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确产品对象：外观、材质、核心能力、使用场景、关键参数、购买动作。
+2. 选择一种背景策略：纯净白场、深色剧场、冷雾科技、暖白生活或材料同色系。
+3. 先设计产品镜头，再安排文字。不要先堆卡片再找产品图。
+4. 把参数转成视觉层级：大数字、短单位、场景解释、对比差异。
+5. 如果没有真实产品图片，用原创抽象产品渲染、设备框、剖面线或材质块表达，不要复制 Apple/DJI 图片。
+6. 移动端减少产品旁边的散点参数，改成产品图在上、核心卖点在下、按钮 44px 以上。
+7. 截图检查：产品是否是主角，首屏是否空泛，参数是否可信，留白是否高级而不是没内容。
+
+## 质量标准
+
+成功的 `Precision Horizon` 变体应该像一个成熟科技公司为新品做的产品展示页：第一眼看清产品，第二眼知道价值，第三眼相信参数。它可以是白色、黑色、冷雾或暖白，但一定要克制、清楚、产品中心、中文阅读舒服。检验标准是：去掉品牌名后，页面仍然有明确产品对象和高端发布感，而不是普通 SaaS 落地页。