minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/references/vi-aqua-glass.md

@@ -0,0 +1,200 @@
+# Aqua Glass VI 模板
+
+当用户需要“浅蓝白、玻璃、通透、现代、干净、轻科技、黑字、浅色 AI 产品页、通用 SaaS 官网、AI 模型/多模态产品页、云服务活动页、蓝紫渐变按钮、编辑式图文融合、类似火山引擎活动页质感”这类前端设计方向，或明确提到“Aqua Glass / 浅蓝白玻璃风”时，使用这个模板。
+
+这是视觉系统模板，不是某个固定品牌。可以参考现代云服务/AI 产品活动页常见的浅蓝空气背景、蓝紫渐变标题、通透轨道、少量橙粉活力点和产品权益结构，但不能复制火山引擎或任何真实品牌的名称、标识、页面结构、活动文案、图标或专有 UI。复用时要迁移视觉 DNA：清澈背景、高可读近黑文字、渐变光感系统、半透明层级、蓝紫/蓝青行动信号、轻盈但明确的信息结构。版式走**编辑式图文融合**（苹果/大疆产品详情页范式）：浅蓝白空气背景或产品视觉铺底，文字与数据浮在其上，玻璃只作**前景浮层面板**点缀层级——不要把它变成一片毛玻璃卡片堆叠分区。
+
+> **遵循 `SKILL.md` 的编辑式最高原则**：图作背景、文字浮前景、数据用图表、特写用插图，不堆卡海。本模板的「玻璃卡片」一律重新理解为**玻璃质感的前景浮层面板**（浮在背景/产品视觉之上、保留通透气质），而非用白底卡海把页面切成网格分区；真·并列指标矩阵做成图表/指标面板浮背景即可。
+
+## 视觉定位
+
+- **气质**：清澈、可信、轻盈、现代、专业但不冰冷，可以有产品活动页的活力。
+- **情绪**：像清晨光线下的云产品展台：有空气感、折射光、蓝紫行动焦点和明确权益结构，但信息仍然锋利。
+- **核心原则**：背景可以柔，文字必须清；玻璃效果来自渐变、光线、边缘、高光、层级和可读性的组合，不只是半透明。
+- **第一印象**：明亮、干净、可操作，有轻科技感和商业活动页的完成度，但不是廉价渐变模板。
+
+## 色彩与渐变 token
+
+以下作为起始色盘。可以根据用户领域微调蓝色和青色，但不要破坏“浅蓝白空气感 + 近黑可读文字 + 渐变光感 + 半透明层级”的结构。
+
+```css
+:root {
+  --ink: #0b1220;              /* 近黑蓝：主文字，比纯黑更柔和 */
+  --ink-soft: #1f2a3d;         /* 次级标题、强调文本 */
+  --muted: #526173;            /* 蓝灰：正文辅助信息 */
+  --paper: #f6fbff;            /* 冰雾白：页面背景 */
+  --paper-blue: #eaf6ff;       /* 背景冷蓝 */
+  --paper-sky: #dff2ff;        /* 天空浅蓝：大段背景 */
+  --paper-lilac: #f3efff;      /* 淡紫雾：蓝紫过渡 */
+  --surface: rgba(255, 255, 255, 0.68); /* 辅助玻璃面板 */
+  --surface-strong: rgba(255, 255, 255, 0.78); /* 主内容玻璃面板 */
+  --surface-solid: #ffffff;    /* 套餐、表单、强阅读区域 */
+  --line: rgba(11, 18, 32, 0.10);       /* 深玻璃边框 */
+  --highlight: rgba(255, 255, 255, 0.74);
+  --accent: #2f80ed;          /* 清透蓝：主行动、激活状态 */
+  --accent-deep: #1769ff;      /* 深亮蓝：标题渐变、主 CTA */
+  --violet: #7c6dff;           /* 蓝紫：行动渐变、活动标签 */
+  --signal: #24b8a8;          /* 薄荷青：正向信号、协作状态 */
+  --coral: #ff7a59;            /* 珊瑚橙：少量权益/折扣活力 */
+  --pink: #f58ad7;             /* 粉紫：少量情绪高光 */
+  --amber: #d89a24;           /* 柔琥珀：提醒 */
+  --danger: #d94a4a;          /* 克制红：风险 */
+  --shadow: rgba(31, 85, 139, 0.16);
+  --bg-gradient:
+    radial-gradient(circle at 16% 6%, rgba(73, 190, 255, 0.28), transparent 32%),
+    radial-gradient(circle at 86% 10%, rgba(124, 109, 255, 0.18), transparent 30%),
+    linear-gradient(180deg, #ffffff 0%, #f6fbff 30%, #dff2ff 100%);
+  --surface-gradient:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 250, 255, 0.74));
+  --button-gradient:
+    linear-gradient(135deg, #4ab6ff 0%, #1769ff 52%, #8b7cff 100%);
+  --promo-gradient:
+    linear-gradient(135deg, rgba(74, 182, 255, 0.22), rgba(139, 124, 255, 0.18) 54%, rgba(255, 122, 89, 0.12) 100%);
+  --edge-highlight:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.18));
+}
+```
+
+### 色彩使用
+
+- `--ink` 用于标题、正文主信息和关键按钮文字，保证浅色背景上的可读性。
+- `--paper` 与 `--paper-blue` 用于页面大背景，必须配合低对比渐变光，不要只铺纯色。
+- `--paper-sky` 用于活动页或产品页的大面积空气背景，适合作底层承托浮在其上的权益浮层和产品图文模块。
+- `--surface` 用于辅助玻璃面板；重要内容使用 `--surface-strong` 或 `--surface-gradient` 提高对比。
+- `--surface-solid` 用于价格、套餐、表格、表单和长内容，保证黑字稳定可读。
+- `--accent` 只用于主行动、当前状态、关键链接和少量图形信号。
+- `--accent-deep` 和 `--violet` 用于标题关键词、主按钮和活动标签，形成蓝紫科技焦点。
+- `--signal` 用于成功、同步、协作、可用状态，不要和主行动色抢层级。
+- `--coral` 和 `--pink` 只作为 5%-10% 的活力点，用于折扣、权益、悬浮图形或产品情绪，不要变成主色。
+- `--amber`、`--danger` 保持低面积使用，避免破坏浅色系统的清澈感。
+- 阴影使用低透明蓝黑，不使用脏灰重阴影。
+
+### 渐变使用
+
+- 背景渐变负责空气感：用大范围、低饱和、低对比的蓝白和青色光，不要出现明显彩色雾团。
+- 活动页背景可以更有“轨道感”：使用宽弧线、半透明环、折射光带、浅蓝到淡紫的空间过渡，但必须低对比、低透明，不压文字。
+- 主面板渐变负责材质：上缘更亮、下缘略冷，配合细边框和高光，让玻璃有厚度。
+- 按钮渐变负责行动：可以更饱和、更有方向，但面积要小，避免抢走页面主标题。
+- 标题关键词可以少量使用蓝到紫的线性渐变，建议只用于 2-6 个汉字或一个短语，不要整段标题都渐变。
+- 状态轨道渐变负责信息：用于进度、同步、可用性和 AI 处理状态，不要把所有状态都做成同一块蓝色。
+- 半透明只是层级工具，不是主要审美来源。如果去掉 `backdrop-filter` 后页面就失去美感，说明渐变和结构没有成立。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用主强调色一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（冷调为主、彼此分得开，玻璃白底上都可读），按系列数依次取用：
+
+`#2f80ed 清透蓝` · `#24b8a8 薄荷青` · `#7a5af0 蓝紫` · `#d89a24 柔琥珀` · `#2bb673 草绿` · `#e3608a 粉红`
+
+单系列图（单进度环/单柱）用 `accent` `#2f80ed` 一色即可；多系列按上面顺序取。A 路线插图以画面真实色为准、不受此约束，只需与 VI 协调不冲突。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题使用近黑色，字号可以大，但字重不要笨重；浅色界面需要清晰而不是粗暴。
+- 中文标题不照搬英文海报尺度。网页首屏 H1 推荐 2-4 行，避免单字孤行、短词孤行和竖向碎裂。
+- 正文建议 15-17px，行高约 1.55，避免小灰字造成“高级但看不清”。
+- 数字指标可以更紧凑、更理性，字重控制在 700-800。
+- 不使用负字距。中文标题保持字距为 0。
+- 前景浮层面板内部不要大段堆叠文字；用短句、标签、指标和行动说明建立层级。
+
+推荐尺度：
+
+```css
+.eyebrow {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+}
+
+h1 {
+  font-size: clamp(36px, 5.2vw, 72px);
+  line-height: 1.08;
+  letter-spacing: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+
+.body-copy {
+  font-size: 16px;
+  line-height: 1.55;
+  color: var(--muted);
+}
+```
+
+## 结构语言
+
+这个模板适合清晰、现代、可信的产品界面。
+
+- **清晰骨架**：顶部导航、主行动区、浮在背景上的功能/数据图表、右侧状态或洞察栏。
+- **活动横幅**：当用于云服务、AI 产品促销或发布页时，可以使用大面积浅蓝白视觉舞台、半透明光轨、悬浮模块和 1 个强 CTA。权益用横向权益条或浮层面板承接转化，文字浮在舞台上，不要把页面直接切成一排白底卡。
+- **玻璃前景浮层面板**：渐变白、背景模糊、1px 细边框、边缘高光、轻阴影，**浮在浅蓝白背景或产品视觉之上**承载局部信息层级，而非铺满成卡海分区；面板之间要有明确间距与负空间。
+- **主行动区**：一段强标题、一句具体价值说明、一个主按钮和一个次按钮，直接浮在空气背景上。
+- **数据与对比**：套餐、权益、产品能力和指标对比优先用图表（柱/饼/折线/进度环/参数胶囊/对比列）+ 前景文字浮在背景上表达；需要长内容稳定阅读时用一块更实的白底浮层面板（避免低透明玻璃发糊），但**不是把全页切成白底大卡阵**。
+- **权益条/分段器**：用横向白色胶囊或浮层条承载 3-4 个核心权益，最右侧可用浅蓝渐变强调领取/试用入口。
+- **产品呈现**：产品视觉做背景或前景切图，型号/能力名与指标浮前景，蓝紫渐变标签、图标和轻微粉紫/橙色高光点缀层级，而非塞进一张张产品大卡分区。
+- **数据指标**：近黑数字、蓝灰解释、浅色状态标签做成指标面板/图表浮在背景上，避免重色块、避免每个指标一张卡。
+- **透明浮层**：适合筛选器、设置、AI 辅助建议、变体面板和浮动工具栏。
+- **deck 舞台**：使用浅色固定 16:9 舞台，背景层 + 少量玻璃浮层面板叠加，标题足够黑、直接浮在舞台上。
+
+浮层面板圆角建议 12-18px；如果用于工具型 dashboard，可降到 8-12px。按钮圆角可略大，但不要让所有元素都变成软糖形状。通透不等于低密度，玻璃前景浮层面板必须有标题、状态、行动或明确的信息锚点；有质感的负空间要用构图（背景层 + 前景图文）解决，不能靠透明背景硬撑、更不能靠平铺卡海填满。
+
+## 视觉母题
+
+选择一个轻量母题，并持续复用：
+
+- 玻璃层叠：用前景浮层面板表达产品层级、上下文和浮动控制（浮在背景之上、非平铺卡海），每一层要有不同透明度或渐变方向。
+- 光线折射：用细微边缘高光、白色渐变和冷蓝暗部表达质感，不做夸张拟物。
+- 冰蓝网格：表达秩序、知识结构和数据空间。
+- 透明浮层：表达 AI 辅助、筛选、建议、协作状态。
+- 细线轨道：表达流程、进度、连接和输入输出关系。
+
+不要使用明显装饰球、过度模糊的大色块或廉价蓝紫渐变。浅蓝白系统的高级感来自克制、层级、渐变方向和文字对比，不来自堆效果。
+
+## 活动页与产品页规则
+
+当用户参考云服务/AI 产品活动页、促销页或“火山引擎这类浅色产品页面”时，优先采用这个子模式：
+
+1. **顶部轻导航**：导航可以是浅蓝透明底或白底，文字用近黑，当前入口用蓝色短线或浅蓝底，不要厚重深色导航。
+2. **首屏光轨舞台**：用浅蓝、白、淡紫和少量橙色建立空间感；可以用半透明弧线、长条晶体、悬浮碎片和产品模块，但要原创，不复制真实活动横幅。
+3. **标题主次**：主标题近黑，关键词用蓝紫渐变；副标题用蓝灰，避免低对比小灰字。
+4. **权益承接条**：首屏下方放一个稳定横向权益条或浮层面板，分隔线很轻，最重要权益用浅蓝渐变块，权益文字浮在背景上而非一排独立白底卡。
+5. **产品/套餐呈现**：套餐与价格对比优先做成参数胶囊/对比列/进度环等图表 + 前景文字浮在背景上；确需稳定长文阅读区时用一块更实的白底浮层面板（黑色价格/标题、蓝灰说明、渐变按钮），背景可有极浅粉紫/蓝光，但**不要把页面切成一排排白底大卡**。
+6. **活力点克制**：橙色、粉色、紫色只用于小标签、优惠标记、悬浮碎片或局部光，不要破坏浅蓝白主气质。
+7. **避免廉价感与卡海**：不要只用两张半透明卡片和一堆模糊效果，也不要靠平铺卡片墙填版；必须有明确背景舞台、前景图文层级、图表化的数据、权益条、行动按钮和真实内容。
+8. **移动端**：隐藏复杂弧线和悬浮碎片，保留标题、权益、浮在背景上的产品图文与指标图表和按钮；按钮高度不低于 44px。
+
+## 适用场景
+
+适合：
+
+- AI 产品、知识库、搜索、写作、分析和智能助手
+- 效率工具、协作软件、项目管理、轻量 SaaS
+- 数据分析、内容管理、现代控制台、创作者工具
+- 官网首屏、产品介绍页、功能发布页
+- PPT/deck、设计探索画布和需要清爽科技感的原型
+
+不适合：
+
+- 高风险运营台、重金融风控、强权威政企系统
+- 儿童娱乐、暗黑游戏、强叙事游戏界面
+- 奢侈品牌、重质感电商、复古编辑风页面
+- 需要强烈压迫感、危机感或工业粗粝感的场景
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确用户任务中的核心对象：知识、任务、数据、流程、协作、建议或洞察。
+2. 保留近黑文字和浅蓝白背景，必要时只替换强调色。
+3. 先声明渐变策略：背景光从哪里来、主面板如何变亮、按钮如何引导行动、状态轨道如何表达进度。
+4. 半透明面板必须服务层级，不要把每个卡片都做成一样的玻璃。
+5. 重要内容使用更强 surface、surface 渐变或纯白底，避免背景穿透影响阅读。
+6. 所有示例内容都要重写到用户领域，不能残留模板示例词。
+7. 移动端减少模糊和叠层数量，优先保证阅读、点击和滚动性能。
+8. deck 和固定画布必须截图确认：黑字对比充足，玻璃层级没有糊成一片。
+
+## 质量标准
+
+一个成功的 Aqua Glass 变体应该像成熟产品团队做出的浅色现代界面：轻、透、清楚、有秩序。它可以很漂亮，但不能因为漂亮牺牲可读性。检验标准是：用户能一眼看懂主行动、主要信息和当前状态，同时感到界面清爽可信。

package/skills/ui-design/references/vi-comfort-vision.md

@@ -0,0 +1,147 @@
+# 舒适视觉 VI 模板
+
+当用户需要成熟、克制、舒适、纸感、工程笔记感的**经营分析编辑式数据展示 / 管理层编辑式 deck / 风险决策类**前端设计方向，或明确提到“舒适视觉那种风格”时，使用这个模板。**它是「暖白纸感的编辑式数据叙事」**——数据用图表（柱/饼/折线/进度环/指标条）说话、要点用前景浮层文字，**不是白底卡片墙/网格分区的后台 dashboard 界面**。慎用于：需要密集表格行操作的真后台软件、强娱乐消费、艺术 editorial。
+
+这是视觉系统模板，不是界面品牌名。除非用户明确要求，否则不要把“舒适视觉”写进最终 UI。要迁移的是视觉 DNA：暖白纸感、深墨文字、克制信号色、高密度但不压迫的信息层级，以及像工程笔记/运营账本一样冷静可读的执行感。
+
+> **遵循 `SKILL.md` 的编辑式最高原则**：图作背景、文字浮前景、数据用图表、特写用插图，**dashboard 的数据面板也是图表/指标浮在纸感背景上、不是白底卡海**。本模板下出现的「面板/卡片」仅作为「图表 / 指标面板浮背景」的容器，不用来按白底卡分区。
+
+## 视觉定位
+
+- **气质**：克制、舒适、纸感、工程笔记感、基础设施感、管理层可读。
+- **情绪**：安静但有判断力。界面应该像是在帮助专业用户整理复杂信息，而不是用强视觉压迫用户。
+- **隐喻**：账本、便签、时间窗口、队列、风险暴露、执行清单和决策控制台。
+- **第一印象**：密集但有呼吸感，精确但不冰冷，专业但不营销，像一份打磨过的工作台笔记。
+
+## 色彩 token
+
+以下作为起始色盘。可以根据用户领域调整命名和强调色，但不要破坏“中性色 + 信号色”的结构。
+
+```css
+:root {
+  --ink: #102022;          /* 深墨绿：主文字、深色面板 */
+  --paper: #eef1eb;        /* 雾灰纸色：页面背景 */
+  --surface: #fbfaf3;      /* 暖白：卡片、面板、slide */
+  --surface-deep: #dfe7df; /* muted 基础设施填充 */
+  --muted: #627171;        /* 次级文字 */
+  --line: rgba(16, 32, 34, 0.16);
+  --accent: #c85f3d;       /* 铁锈橙：主强调、行动线索 */
+  --signal: #1f9eaa;       /* 信号青：可用、正向流动 */
+  --amber: #c89c35;        /* 琥珀：计划预警 */
+  --danger: #9f3d36;       /* 风险红：关键风险 */
+}
+```
+
+deck 或深色舞台背景可使用：
+
+```css
+--paper: #101819;
+--surface: #f4f1e7;
+```
+
+### 色彩使用
+
+- `--ink` 用于强标题、主文字和少量反色面板。
+- `--paper` 用作带质感的中性背景，不要做纯白空画布。
+- `--surface` 用于大面积内容平面，配合细边框。
+- `--accent` 要克制使用：左侧强调线、章节标记、关键标签、激活状态。
+- `--signal`、`--amber`、`--danger` 是语义状态色，不是装饰色。
+- 避免大面积紫蓝渐变和彩色装饰背景。这个模板成立，是因为颜色像工作信号，而不是情绪涂层。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）要用**可区分的数据系列色**，别全用主强调色一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 克制运营调性——分类色也用**低饱和、克制**的一组（彼此分得开但不喧宾夺主，暖白底上都可读），按系列数依次取用：
+
+`#c85f3d 铁锈橙` · `#1f9eaa 信号青` · `#c89c35 琥珀` · `#4a7a55 苔绿` · `#5a6b8c 钢蓝` · `#9f3d36 风险红`
+
+单系列图（单进度环/单柱）用 `accent` `#c85f3d` 一色即可；多系列按上面顺序取。A 路线插图以画面真实色为准、不受此约束，只需与 VI 协调不冲突。
+
+## 字体与排版
+
+- 标题要强、紧凑、字距为 0。
+- 大标题搭配小号操作标签；中文标签优先用简体中文，必要英文缩写可以保留。
+- 正文要短、具体、贴合领域，不写泛泛段落。
+- 指标数字要大而有重量，并配紧凑单位标签。
+- 为了可移植，字体栈可从 `"Aptos", "Helvetica Neue", Helvetica, Arial, sans-serif` 开始；若环境允许，可换成更具工业感或编辑感的无衬线字体，提高作者感。
+
+推荐尺度：
+
+```css
+.eyebrow {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+h1 {
+  font-size: clamp(48px, 7vw, 112px);
+  line-height: 0.9;
+  letter-spacing: 0;
+}
+
+.metric {
+  font-size: 38px;
+  font-weight: 800;
+}
+```
+
+## 布局语言
+
+这个模板适合需要扫描、比较、归纳和行动的信息界面。**版式走编辑式数据叙事**：一屏一件事，数据交给图表、判断交给前景浮层文字，**不靠白底卡片墙 / 网格 / 对比表格划分区域**。
+
+- **主判断面**：一个大标题浮在纸感背景上，配一个关键指数、状态判断或运营论点；不做白底卡分区。
+- **指标面板（图表化）**：两到三个关键约束用大数字 + 进度环 / 指标条 / 迷你柱表达，**做成浮在背景上的指标面板，而不是白底卡海**；真·并列指标矩阵也以图表/指标条呈现。
+- **数据图表**：容量、压力、置信度、利用率、风险暴露、时间序列一律用柱/饼/折线/进度环/横向指标条画出来，**不堆 div 对比表**。
+- **状态胶囊**：小型胶囊标签浮在前景，用于模型刷新、窗口期、当前模式、风险状态。
+- **行动要点（前景浮层）**：每条行动用左侧强调线 + 具体短句直接浮在背景上，**不装进白底行动卡**；要特写时插透明背景前景插图。
+- **deck 舞台**：固定 16:9，大字号、少段落、强层级，背景层 + 文字浮前景，适合管理层汇报。
+
+圆角保持在 8px 或以下。阴影要服务结构，不要成为装饰。出现的「面板/卡片」只许做图表/指标的容器，不许退化成白底分区卡海。
+
+## 视觉母题
+
+选择一个轻量运营母题，并持续复用：
+
+- 流向条：表达时间窗口、任务流、信息流或容量变化。
+- 细网格线：表达计划、调度、笔记纸感和控制台秩序。
+- 圆形雷达/印章：表达总览、系统状态或关键结论。
+- 左侧强调线与横向轨道：表达决策压力。
+
+不要同时堆很多母题。每个面板都有不同装饰时，这个模板会变得普通。
+
+## 适用场景
+
+适合：
+
+- 经营分析 / 管理层编辑式数据展示 deck
+- 运营、风控、资金、合规的**数据叙事页**（图表 + 前景论点，非后台软件）
+- 物流、港口、能源、电网、工厂、公共基础设施的对外汇报与策略 deck
+- 风险、合规、金融、资金、保险、事件响应的高密度决策叙事
+- 管理层简报和策略 deck
+- 需要权威感与冷静感的高密度数据编辑式页面
+
+不适合：
+
+- 需要密集表格行操作、增删改查的真后台软件界面（编辑式不擅长）
+- 强娱乐型消费新手引导
+- 青少年、游戏、创作者或娱乐产品
+- 奢侈时尚、美妆、婚礼、酒店、生活方式品牌
+- 需要强烈表达性或艺术性的 art 页面
+
+## 迁移方式
+
+复用模板时：
+
+1. 先替换领域模型：明确新任务里的“对象、状态、风险、窗口、容量、行动”分别是什么。
+2. 没有品牌色时保留中性色与语义信号色。
+3. 必要时替换强调色，但保持自然、地面化、信号化，不要改成霓虹色。
+4. 保留结构：论点（前景浮层）、约束矩阵（图表化指标面板）、状态/进度层（图表）、行动层（前景要点）；这些都浮在纸感背景上，不退回白底卡海。
+5. 所有内容都要重写到新领域。无关任务中不能残留旧样张里的港口、船舶、泊位等词。
+6. 移动端要降低正文背后的装饰母题强度。
+7. deck 必须截图确认固定舞台完整可见；静态 CSS 检查不够。
+
+## 质量标准
+
+一个成功的舒适视觉变体应该像一份有设计感的工程笔记 / 经营分析编辑式 deck：数据用图表说话、判断用前景浮层文字、一屏一件事，而**不是一面白底卡片墙**。它不应该只是“暖白背景 + 深色文字 + 橙色点缀”，也不应该退化成网格分区卡海。检验标准是：用户能指出每个视觉元素支持了哪个阅读、判断或执行动作，且每组数据都以图表/指标面板而非对比表格呈现。

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

@@ -0,0 +1,140 @@
+# `Ember Prism` VI 模板
+
+中文名：棱焰智能。
+
+当用户需要“白色为主、红色主导、少量橙色火花、黑色信息层级、蓝色和紫色少量点缀、AI 科技公司官网、模型发布、多模态产品矩阵、通用 SaaS 官网、红色发布感、编辑式图文融合”这类前端设计方向，或明确提到 `Ember Prism / 棱焰智能` 时，使用这个模板。
+
+这是原创视觉系统，不是 `MiniMax` 或任何真实 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: #fff0ed;     /* 淡红浅底 */
+  --line: rgba(16, 16, 20, 0.10);
+  --line-warm: rgba(255, 92, 56, 0.22);
+  --accent: #ff3f3a;           /* 主红：核心行动、发布标记 */
+  --accent-deep: #e21d2f;      /* 正红：大图形、当前模型、强调块 */
+  --accent-soft: #ff6b5f;      /* 珊瑚红：主视觉底、图形切面 */
+  --accent-orange: #ff8a00;    /* 少量橙：火花、节点、短线高光 */
+  --accent-pink: #ffe2de;      /* 淡红粉：辅助底、浮层背景 */
+  --blue: #2563eb;             /* 清透钴蓝：模型、API、开发者能力 */
+  --violet: #7c3aed;           /* 少量紫：多模态、智能创作 */
+  --cyan: #14b8c8;             /* 少量青：在线、同步、生成完成 */
+  --shadow: rgba(255, 63, 58, 0.18);
+}
+```
+
+### 色彩使用
+
+- `--paper` 是默认大背景，保持暖白、清爽和中文可读。
+- `--ink` 用于标题、正文主信息、数字和导航；不要把大段正文做成彩色。
+- `--accent` 用于主按钮、发布标签、关键转化入口和重要强调。
+- `--accent-deep` 用于大块红色主视觉、当前模型、强发布模块和几何切面。
+- `--accent-soft` 用于珊瑚红底、圆角色带、产品矩阵背景和插图主块。
+- `--accent-orange` 只用于火花、小节点、短线高光和少量能量提示，不要成为主色。
+- `--accent-pink` 用于淡红粉浮层、辅助背景和轻量装饰形，不要影响文字对比。
+- `--blue` 用于开发者、API、代码、模型参数、链接和可信技术信息。
+- `--violet` 用于多模态、创作、视频、语音、智能生成等扩展能力，面积小于红橙和蓝。
+- `--cyan` 用于完成、在线、同步和成功状态，不要和蓝紫一起堆成彩虹。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用主红一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（红色发布主轴 + 蓝紫多模态辅助，白底上都可读），按系列数依次取用：
+
+`#ff3f3a 主红` · `#ff8a00 橙色火花` · `#2563eb 钴蓝` · `#7c3aed 紫色` · `#14b8c8 青色` · `#d89a24 琥珀`
+
+单系列图（单进度环/单柱）用 `accent` `#ff3f3a` 一色即可；多系列按上面顺序取。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. 截图确认：是否白底足够干净，红色是否成为主视觉且不刺眼，橙色是否只是少量火花，黑色是否增强专业感，蓝紫是否只是点缀而不是抢主色。
+
+## 质量标准
+
+成功的 `Ember Prism` 变体应该像成熟 AI 科技公司做出的白底红色发布型产品矩阵官网：一眼能看到主产品、红色主视觉和行动入口，第二眼能分辨模型、API、多模态、研究和价格等不同模块。它应该明亮、红色记忆点强、可信，但不复制任何真实品牌，也不把红橙蓝紫堆成无意义装饰。

package/skills/ui-design/references/vi-nebula-console.md

@@ -0,0 +1,151 @@
+# Nebula Console VI 模板
+
+当用户需要“蓝黑科技、深色科技编辑式、科幻质感、AI 平台 / 云服务 / 数据基础设施官网、科技产品发布 deck”这类前端设计方向，或明确提到 `Nebula Console / 星云控制台` 时，使用这个模板。**它是「深色科技编辑式数据展示」**——深空背景作底、强中文标题与价值文字浮前景、数据用图表（柱/饼/折线/进度环/指标条）说话、系统关系用节点拓扑图，**不是把屏幕铺成透明数据卡片墙的后台控制台界面**。慎用于：需要密集行操作的真后台监控软件、长文内容站、温暖消费品牌。
+
+这是面向真实网页、产品官网和发布 deck 的视觉系统，不是电影道具界面。可以借鉴透明显示器、扫描线、坐标网格和蓝色光学层的**质感**，但版式服务信息结构、中文阅读和商业可信度，不堆透明卡海。
+
+> **遵循 `SKILL.md` 的编辑式最高原则**：图作背景、文字浮前景、数据用图表、特写用插图，**dashboard / 控制台的数据面板也是图表 / 指标面板浮在深空背景上、不是透明卡海**。本模板下出现的「面板」仅作为「图表 / 指标 / 节点拓扑浮背景」的容器，不用来按透明玻璃卡分区。
+
+## 视觉定位
+
+- **气质**：蓝黑、理性、可信、未来感、工程感、可商用。
+- **情绪**：像科技公司的实时系统工作台，有空间纵深和冷光层级，但不是压迫性的军用大屏。
+- **核心原则**：科幻感服务信息架构；半透明不是把内容变淡，而是用深色 surface、冷蓝高光、边缘线、网格和状态光建立层级。
+- **第一印象**：高级、清醒、系统在线、信息可控，有透明屏灵感，但在普通网页上依然清楚。
+
+## 色彩 token
+
+以下作为起始色盘。可以根据用户领域微调蓝色和青色，但不要破坏“蓝黑深色 + 冷白文字 + 电光蓝信号 + 克制半透明”的结构。
+
+```css
+:root {
+  --ink: #eef6ff;              /* 冷白：主文字 */
+  --ink-soft: #d9e8f7;         /* 次级标题 */
+  --muted: #9fb3c8;            /* 蓝灰：辅助文字 */
+  --paper: #050812;            /* 深空黑 */
+  --paper-blue: #08111f;       /* 星舰蓝黑 */
+  --surface: rgba(13, 27, 48, 0.72);       /* 深玻璃面板 */
+  --surface-raised: rgba(24, 45, 76, 0.78);/* 抬升面板 */
+  --line: rgba(174, 219, 255, 0.18);       /* 冷蓝边线 */
+  --line-strong: rgba(174, 219, 255, 0.34);
+  --accent: #3aa7ff;           /* 电光蓝：主行动、激活状态 */
+  --signal: #39d6d6;           /* 青蓝：同步、在线、连接 */
+  --violet: #7b61ff;           /* 紫蓝微光：少量空间深度 */
+  --amber: #f2b84b;            /* 琥珀：提醒 */
+  --shadow: rgba(0, 8, 24, 0.48);
+}
+```
+
+### 色彩使用
+
+- `--paper` 与 `--paper-blue` 用于页面大背景，必须叠加低对比蓝黑渐变，不要铺成一整块死黑。
+- `--surface` 用于深玻璃面板，透明度要足以透出空间感，但主文字背后必须保持稳定深色。
+- `--surface-raised` 用于重要模块、导航、控制面板和当前状态区。
+- `--accent` 只用于主行动、当前选中、关键图形节点和强状态。
+- `--signal` 用于在线、同步、连接、完成、流动状态。
+- `--violet` 只做少量空间深度光，不做主色，避免变成常见蓝紫渐变模板。
+- `--amber` 只做提示和异常，不要与主蓝色抢层级。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用主强调色一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（深空背景上的高亮色，彼此分得开、都够亮可读），按系列数依次取用：
+
+`#3aa7ff 电光蓝` · `#39d6d6 青蓝` · `#7b61ff 紫蓝` · `#f2b84b 琥珀` · `#5ee69d 荧光绿` · `#ff79c6 品红`
+
+单系列图（单进度环/单柱）用 `accent` `#3aa7ff` 一色即可；多系列按上面顺序取。A 路线插图以画面真实色为准、不受此约束，只需与 VI 协调不冲突。
+
+## 渐变与材质
+
+- 背景使用深空黑到星舰蓝黑的渐变，叠加极轻的蓝色径向光，制造空间纵深。
+- 少量必要的图表/指标容器要配合更实的内层底色、1px 冷蓝边线和顶部高光，保证文字清楚；不把整屏铺成一排透明卡。
+- 网格、扫描线、轨道线用于建立秩序，不要满屏铺装饰线。
+- 发光要克制：按钮、选中状态、关键节点可以发光，正文和大面板不要泛光。
+- 透明屏灵感要被翻译成网页层级：背景光、前景文字浮层、图表/指标面板、状态条、焦点区，而不是把所有文字放在透明玻璃卡上、也不是把屏幕铺成透明卡海。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题可以硬朗，但不能赛博朋克化；建议字重 750-850，字距保持 0。
+- H1 建议 2-4 行，上限 72px 左右；移动端优先自然断行，不做单字孤行。
+- 正文 15-17px，行高 1.55-1.65；暗色背景下不要使用过淡小灰字。
+- 参数、时间、节点编号和短标签可以使用等宽字体栈：`"SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace`。
+- 英文缩写如 AI、API、GPU、SLA 可以保留；说明性文案仍使用简体中文。
+
+推荐尺度：
+
+```css
+h1 {
+  font-size: clamp(38px, 5.4vw, 72px);
+  line-height: 1.04;
+  letter-spacing: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+
+.status-label {
+  font-family: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  color: var(--signal);
+}
+```
+
+## 结构语言
+
+这个模板适合科技公司官网和产品发布 deck，结构必须比装饰更重要。**版式走深色科技编辑式**：深空背景作底、一屏一件事，数据交给图表、能力交给前景浮层文字、系统关系交给节点拓扑，**不靠透明数据卡片墙 / 网格 / 对比表格划分区域**。
+
+- **深玻璃导航**：半透明深色、冷蓝边线、少量在线状态。
+- **主视觉区**：强中文标题、具体产品价值、主行动按钮，配一张可读的系统示意/拓扑图浮在背景上。
+- **数据图表（替代透明数据卡海）**：能力、指标、平台状态用柱/饼/折线/进度环/指标条画出来，做成**浮在深空背景上的图表 / 指标面板**，每个都有标题、信息锚点和行动含义；**不堆一排透明数据卡或 div 对比表**。真·并列指标矩阵也以指标面板/图表呈现。
+- **节点拓扑**：节点、队列、任务、模型、算力、数据流用线框拓扑图表达系统关系，而不是排成卡片网格。
+- **扫描状态条**：用于同步、部署、推理、监控、风险检测等过程，浮在前景。
+- **轨道线和坐标网格**：用于连接模块、表达系统空间，不做纯装饰背景。
+- **要点前景浮层**：能力要点、特性说明直接浮在背景上（参数胶囊 / 对比列），不装进白底/玻璃卡分区；要特写时插透明背景前景插图。
+
+少量必要的图表/指标容器圆角建议 10-16px，密集界面可降到 8-10px。按钮可以略有发光，但按钮文字必须稳定清楚。容器只作图表/指标/拓扑的载体，不许退化成透明分区卡海。
+
+## 视觉母题
+
+选择一个轻量母题并持续复用：
+
+- 星图节点：表达服务、模型、任务和依赖。
+- 轨道线：表达数据流、部署链路和系统联动。
+- 扫描光带：表达实时分析、检测、同步和推理过程。
+- 深玻璃层：表达透明控制台和浮层状态。
+- 坐标网格：表达工程秩序和空间尺度。
+
+不要使用过度霓虹、强游戏化边框、满屏十字准星、虚假雷达、复杂无意义线框或大量闪烁动画。
+
+## 适用场景
+
+适合：
+
+- AI 平台、开发者工具、云服务、数据基础设施的官网与发布 deck
+- 网络安全、智能硬件、空间科技、机器人、工业软件的对外展示
+- B2B 科技官网、产品介绍页、技术能力 deck
+- 需要蓝黑科技质感、系统在线感的高保真展示原型与数据叙事
+
+不适合：
+
+- 需要密集行操作、增删改查的真后台监控软件界面（编辑式不擅长）
+- 生活方式品牌、儿童娱乐、温暖消费产品
+- 医疗信任场景、强政务系统、教育内容站
+- 需要大量长文阅读的内容页面
+- 需要亲和、柔软、自然或手工质感的品牌
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确用户任务中的核心系统：平台、节点、数据流、状态、行动和结果。
+2. 保留蓝黑主体、冷白文字、少量电光蓝和青蓝信号。
+3. 先声明层级：背景层、前景文字浮层、图表/指标面板、节点拓扑、状态光分别承担什么信息；数据进图表、要点进前景浮层，不铺透明卡海。
+4. 把透明显示器灵感翻译成网页结构，文字浮在前景而非直接漂在复杂背景上，也不退回一排透明分区卡。
+5. 移动端减少网格、扫描线和浮层数量，优先保证阅读、点击和滚动性能。
+6. 所有示例内容都要迁移到用户领域，不能残留模板示例词。
+7. 截图确认：是否像成熟科技公司，是否过度像游戏界面或电影道具，是否蓝光太脏，是否中文可读。
+
+## 质量标准
+
+成功的 Nebula Console 变体应该像成熟科技公司做出的未来感产品官网 / 发布 deck：蓝黑有层次，透明有边界，发光有纪律，网格和扫描线服务结构，**数据用图表说话、要点用前景浮层文字、系统关系用节点拓扑，而不是一面透明数据卡片墙**。检验标准是：用户第一眼感到系统高级和在线，第二眼能快速读懂标题、状态、行动和关键模块，且每组数据都以图表/指标面板而非透明卡海呈现。