minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/references/vi-solar-relay.md

@@ -0,0 +1,130 @@
+# `Solar Relay` VI 模板
+
+当用户需要“红橙、多彩、彩色弧带、网络加速、隐私连接、移动应用、活力科技、类似 `Cloudflare WARP+` 配色气质”这类前端设计方向，或明确提到 `Solar Relay / 日冕中继` 时，使用这个模板。版式走**编辑式图文融合**（日冕弧带/网络路径背景打底、连接状态与速度数据浮前景、数据用图表），保持红橙多彩的活力连接气质，不是套餐卡/广告卡堆叠的营销页。
+
+这是原创视觉系统，不是 `Cloudflare`、`WARP+` 或 `1.1.1.1` 品牌复刻。可以借鉴“红橙、珊瑚、黄色、青蓝、深蓝、洋红、多彩弧带、流量加速”的气质，但不能复制真实品牌名称、标识、图标轮廓、广告卡片结构、专有 UI 或原始文案。
+
+## 视觉定位
+
+- **气质**：红橙主导、多彩、轻快、网络科技、移动端友好、可信但不沉重。
+- **情绪**：像一条被阳光照亮的网络中继路径，彩色流带表达连接、加速、绕行和保护。
+- **核心原则**：遵循 SKILL.md 的**编辑式最高原则**——图作背景、文字浮前景、数据用图表、特写用插图，不堆卡海。日冕弧带/网络路径/同色系暖色渐变光打底（叠 scrim 或落在深蓝稳定底上保对比），标题、连接状态、速度/延迟数据**直接浮在背景上**并做成图表（进度环/速度计/折线/参数胶囊），不靠白底套餐卡/广告卡分区。彩色是“流量路径”和“加速轨迹”，不是满屏装饰；前景主信息必须有 scrim 或深蓝稳定底兜对比。
+- **第一印象**：明快、快速、安全、有移动应用活力，像图文融合的连接产品，但不是儿童化糖果色、不是套餐卡墙营销页，也不是复制真实网络品牌。
+
+## 色彩 token
+
+以下作为起始色盘。可以根据用户领域调低彩度或替换辅助色，但不要破坏“红橙日冕 + 青蓝网络 + 深蓝稳定底”的结构。
+
+```css
+:root {
+  --ink: #101326;              /* 深墨蓝：主文字 */
+  --ink-soft: #262b42;         /* 次级标题 */
+  --muted: #596174;            /* 蓝灰：辅助文字 */
+  --paper: #fffaf7;            /* 冷暖白页面背景 */
+  --surface: #ffffff;          /* 主内容面板 */
+  --surface-warm: #fff3ea;     /* 暖白信息区 */
+  --line: rgba(16, 19, 38, 0.12);
+  --accent: #ff6b4a;           /* 主红橙：主行动、连接状态 */
+  --coral: #f45b6c;            /* 珊瑚红：加速轨迹 */
+  --orange: #ff9f2f;           /* 暖橙：高亮和渐变中段 */
+  --sun: #ffc640;              /* 金黄：权益、增益、能量 */
+  --teal: #1dbb9c;             /* 青绿：安全、保护、已连接 */
+  --cyan: #16b8d8;             /* 亮青：网络流动、同步 */
+  --blue: #1857b8;             /* 深蓝：稳定底、技术背板 */
+  --indigo: #27328f;           /* 靛蓝：深层路径 */
+  --magenta: #d81b8c;          /* 洋红：分享、社交、活动 */
+  --shadow: rgba(255, 107, 74, 0.22);
+}
+```
+
+### 色彩使用
+
+- `--accent`、`--coral`、`--orange` 和 `--sun` 构成日冕主轴，用于主行动、连接按钮、弧带和加速状态。
+- `--teal` 与 `--cyan` 表达安全、在线、保护和流量通畅。
+- `--blue` 与 `--indigo` 用于技术背板、夜间卡片和需要白字的彩色区域。
+- `--magenta` 只用于分享、活动、奖励或少量视觉跳点，不做主色。
+- 大面积正文仍使用 `--ink` 和 `--muted`，不要在彩色弧带上直接放长段文字。
+- 彩色背景上的文字必须使用白字、深蓝底或半透明稳定底保证对比。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+本 VI 本就多彩，图表（柱/饼/折线/进度环）直接用这组**原生分类色**即可，别只用强调色一种（见 `layout-composition.md` §0.9 配色解耦）。
+按系列数依次取用（暖主轴 + 冷对比，彼此分得开）：
+
+`#ff6b4a 红橙` · `#ff9f2f 暖橙` · `#ffc640 金黄` · `#1dbb9c 青绿` · `#16b8d8 亮青` · `#d81b8c 洋红`
+
+单系列图（单进度环/单柱）用 `accent` `#ff6b4a` 一色即可；多系列按上面顺序取（暖冷交替更易分辨）。A 路线插图以画面真实色为准、不受此约束，只需与 VI 协调不冲突。
+
+## 渐变与材质
+
+- 背景可以使用大曲率弧带：红橙到金黄表达加速，青蓝到深蓝表达网络路径，洋红只做局部活力。
+- 弧带要有方向，建议从左上到右下或从底部向右上流动，模拟“流量被中继加速”。
+- 前景文字落在弧带背景上时优先用 scrim、深蓝稳定底或半透明底兜对比，避免彩色背景干扰阅读；图表/指标面板这类前景容器可用轻阴影细边框，但不堆白底分区卡海。
+- 深蓝面板适合做连接状态、夜间加速模式、安全通道或移动端 App 屏幕的前景容器/背景层，浮在彩带之上提供稳定阅读区。
+- 按钮可以使用红橙到洋红或红橙到金黄的渐变，但按钮面积要克制。
+- 彩带之间的过渡要干净，避免脏灰混色和低质霓虹。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题可以活泼、有冲击力，但不要幼稚；字重 780-880，字距保持 0。
+- H1 建议 2-4 行，上限 72px 左右；移动端避免单字孤行。
+- 正文建议 15-17px，行高 1.55 左右；彩色区域中的说明文字要更短。
+- 数字、套餐、延迟、速度、流量可以用更强字重形成产品节奏。
+- 英文缩写如 VPN、App、GB、`Mbps` 可以保留；说明性文案仍使用简体中文。
+
+## 结构语言
+
+这个模板适合移动互联网和网络连接产品。**版式遵循 SKILL.md 编辑式最高原则：日冕弧带/网络路径打底、状态与速度浮前景、数据用图表，不堆套餐卡/广告卡分区。**
+
+- **彩色弧带背景（核心母题）**：日冕弧带表达流量路径、加速绕行和中继轨迹，作为品牌记忆点和**内容页的背景层**，标题/状态/数据浮在其上。
+- **连接状态（前景浮层）**：已连接、保护中、延迟降低、路径优化等状态直接浮在弧带背景上，用状态点 + 参数胶囊呈现，不做一排白底状态卡。
+- **加速开关**：可使用红橙渐变开关浮在背景上，但不要复刻真实产品开关样式。
+- **移动端 App 展示区**：适合用原创手机框做前景特写浮在弧带背景上，展示连接状态和权益，不复制真实 App UI。
+- **权益/速度数据**：奖励、流量、加速额度、延迟降幅用**图表**（进度环/速度计/对比列/参数胶囊）浮在背景上，不做白底套餐卡墙或广告卡结构。
+- **安全说明（前景浮层）**：用青绿和亮青表达安全、加密、保护、无日志等可信信息，做成前景要点列/状态点浮在背景上，而非并排白底说明卡。
+- **路径模块**：用节点、弧线、速度标记、地区或通道说明组成网络路径浮在背景上，是替代卡片墙的主结构语言。
+
+卡片圆角建议 14-22px（仅用于图表/指标面板/手机框这类前景容器）；移动 App 展示可以更圆润，但工具型控制台应收敛到 8-12px。彩色越强，结构越要简单。**卡片只保留为「图表/指标面板/手机框浮背景」例外**，弧带路径 + 前景数据是主角，不做白底套餐卡/广告卡海。
+
+## 视觉母题
+
+选择一个母题并持续复用：
+
+- 日冕弧带：表达加速能量、网络中继和流量绕行。
+- 流量节点：表达入口、通道、加速节点和出口。
+- 保护气泡：表达隐私、安全、加密和连接保护。
+- 速度轨迹：表达延迟降低、下载提升和路径优化。
+
+不要使用真实品牌云朵、数字标识、原广告卡片布局、原移动界面或相似图标轮廓。
+
+## 适用场景
+
+适合：
+
+- 网络加速、VPN、隐私连接、移动应用
+- 通信工具、云网络、流量管理、边缘网络
+- 消费级安全产品、加速权益页、推荐奖励页
+- 活力科技官网、产品发布页、移动端推广页和 deck
+
+不适合：
+
+- 严肃金融风控、政企后台、医疗信任场景
+- 黑白硬件、暗色电影器材、重工业设备
+- 长文内容站、低调奢侈品牌、极简企业官网
+- 高密度专业控制台，除非大幅降低彩色面积
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确用户任务中的网络路径：入口、加速、中继、保护、出口和结果。
+2. 保留红橙主轴和青蓝安全信号，不复制模板示例内容。
+3. 先声明彩带职责：哪些弧带表达加速，哪些表达保护，哪些只是背景深度。
+4. 主标题和核心信息浮在弧带背景上时，用 scrim、深蓝稳定底或半透明底兜对比，不直接压在复杂彩带上裸放文字。
+5. 移动端减少弧带数量，优先保证标题、按钮和连接状态前景浮层清楚（状态点 + 参数胶囊，非白底状态卡）。
+6. 截图确认：红橙是否明快但不刺眼，彩带是否服务结构，是否像原创网络产品。
+
+## 质量标准
+
+成功的 `Solar Relay` 变体应该像成熟移动网络产品：颜色有活力但不乱，弧带有方向，连接状态一眼可读，安全感和速度感同时成立。检验标准是：用户第一眼感到“连接更快更安全”，第二眼能读懂当前状态、主行动和权益。

package/skills/ui-design/references/vi-template-workflow.md

@@ -0,0 +1,48 @@
+# VI 模板制作流程
+
+当用户要求新增、总结、优化或复用 VI 模板时，读取本文件。它记录的是 `ui-design` 当前已验证的制作闭环，不替代具体 VI 模板。
+
+## 标准流程
+
+1. **理解风格意图**：先把用户的模糊描述转译成可执行的视觉关键词、适用行业和明确禁区。
+2. **命名模板**：给模板一个可记忆的英文代号和中文名。名称只用于识别视觉系统，不代表后续输出必须出现该品牌。
+3. **写 VI 文档**：独立创建 `references/vi-*.md`，不要把完整模板塞进 `SKILL.md`。
+4. **更新模板库索引**：在 `SKILL.md` 的视觉模板库中加入触发词、适用场景和原创边界。
+5. **补充评测题**：在 `evals/evals.json` 增加真实提示词，验证模板能迁移到具体产品，不只停留在色盘。
+6. **生成样张**：至少生成一个中文 HTML 样张，包含真实信息结构、`data-screen-label` 和 Tweaks。
+7. **静态检查**：运行 `check_ui_artifact.py`、`check_language_policy.py` 和必要的 JSON/Python 校验（浏览器截图检查见下一步 `browser_check_ui_artifact.mjs`）。
+8. **浏览器检查**：截图桌面和移动端，检查控制台错误、横向溢出、中文断行、文字对比和响应式。
+9. **视觉评审**：写 `review.md`，诚实判断是否高级、是否可复用、哪里像通用 AI 味。
+10. **反推优化**：如果效果一般，先改 VI 模板和样张，再复测；不要只改截图结论。
+
+## VI 文档结构
+
+每个 VI 模板建议包含：
+
+- 触发场景：用户怎样描述时读取该模板。
+- 视觉定位：气质、情绪、核心原则和第一印象。
+- 色彩 token：主文字、次级文字、背景、surface、边框、主强调、辅助信号、风险/提醒、阴影。
+- 渐变与材质：背景、面板、按钮、状态和视觉焦点如何使用渐变。
+- 中文排版：字体栈、标题尺度、正文大小、行高、数字和短标签处理。
+- 结构语言：导航、首屏、卡片、状态、行动、deck 或控制台的组织方式。
+- 视觉母题：选择 1-3 个可迁移的图形语言，避免每次重做。
+- 适用与不适用场景：防止模板被硬套。
+- 迁移方式：如何换行业语义、换强调色、换密度，同时保留视觉 DNA。
+- 质量标准：用几句话定义“什么才算这个模板做对了”。
+
+## 最新协议约束
+
+- 用户可见内容默认简体中文，只有必要英文名称、代码标识和行业缩写可保留。
+- 模板可以借鉴风格方向，但不能复制真实品牌的名称、标识、图标轮廓、商标、专有 UI 或独特字形。
+- 新产物的 Tweaks 持久化优先使用 `{ edits: patch }`。
+- 高级屏幕或 slide 必须有 `data-screen-label`，编号从 1 开始并包含中文标题。
+- 移动端优先保证中文阅读和 44px 可点击目标。
+- 样张必须跑静态检查、语言检查和浏览器截图；评审要记录不足，而不是只写“通过”。
+
+## 常见失败模式
+
+- 只写色值，没有结构语言，导致执行者仍生成普通卡片页。
+- 只强调半透明、发光或渐变，忽略文字对比和信息层级。
+- 样张内容太空，无法判断模板是否能服务真实产品。
+- 复制真实品牌的视觉资产或专有符号。
+- 模板写得太绝对，导致不同领域迁移时没有弹性。

package/skills/ui-design/references/vi-verdant-grid.md

@@ -0,0 +1,141 @@
+# `Verdant Grid` VI 模板
+
+中文名：绿脉电网。
+
+当用户需要“能源行业、电力公司、电网调度、绿色、浅绿、白色、黑色、国家电网风格灵感、央企/国企能源报告、智能电网、能源管理平台、电力汇报 deck/PPT”这类前端或 deck 设计方向，或明确提到 `Verdant Grid / 绿脉电网` 时，使用这个模板。版式走**编辑式图文融合**（能源场景图/电网线稿打底、结论与负荷数据浮前景），稳健可信、像成熟电网企业的汇报视觉，不是老旧绿色表格 PPT。
+
+这是原创视觉系统，不是国家电网或任何真实能源企业品牌复刻。可以借鉴公开能源行业官网与电力汇报模板常见的“白底、深绿、浅绿、黑字、输电线、网格、圆形图片、章节横条、绿色数据可视化”的气质，但不能复制真实企业名称、标识、标准色手册、PPT 模板版式、摄影资产、图标或专有 UI。
+
+## 视觉定位
+
+- **气质**：稳健、可信、清洁、现代、公共基础设施感强。
+- **情绪**：像一套面向能源集团、电网公司、调度中心和政府/企业汇报的视觉系统：白底清楚，绿色代表能源与秩序，黑色提供权威，浅绿表达低碳和安全。
+- **核心原则**：遵循 SKILL.md 的**编辑式最高原则**——图作背景、文字浮前景、数据用图表、特写用插图，不堆卡海。能源场景图/电网线稿/同色系浅绿渐变纹理打底（叠 scrim 保对比），结论、负荷、碳减排等数据**直接浮在背景上**并做成图表（柱/折线/进度环/指标面板），不靠白底悬浮卡片分区、不堆绿色表格对比。白底负责阅读，黑色负责权威，深绿负责品牌记忆，浅绿负责分区和安全感，线稿/网格表达电力网络。
+- **第一印象**：专业、清爽、有组织，像成熟电网企业的图文融合汇报，不是泛泛环保风，也不是过时的绿色表格模板 PPT。
+
+## 色彩 token
+
+以下作为起始色盘。深绿接近中国电力行业常见主色，但不声明为任何真实企业标准色。
+
+```css
+:root {
+  --ink: #111513;              /* 主文字黑 */
+  --ink-soft: #27302b;         /* 次级标题 */
+  --muted: #5f6b64;            /* 辅助文字 */
+  --paper: #fbfdfb;            /* 近白背景 */
+  --paper-green: #eef8f1;      /* 浅绿分区底 */
+  --surface: #ffffff;          /* 主内容面板 */
+  --surface-soft: #f7fbf8;     /* 柔白绿面板 */
+  --line: rgba(17, 21, 19, 0.10);
+  --line-green: rgba(0, 122, 61, 0.22);
+  --grid-green: #007a3d;       /* 深电网绿：主记忆色 */
+  --energy-green: #0b9b55;     /* 鲜绿：行动、状态、增长 */
+  --leaf-green: #74c88a;       /* 浅绿：辅助图形、分区 */
+  --pale-green: #dff3e5;       /* 极浅绿：标签、底纹 */
+  --blue: #1769d1;             /* 调度蓝：数字化、电力数据 */
+  --amber: #d99722;            /* 预警琥珀 */
+  --danger: #c93d3d;           /* 风险红 */
+  --shadow: rgba(0, 122, 61, 0.12);
+}
+```
+
+### 色彩使用
+
+- `--paper` 是默认背景，保持清洁、留白和中文可读。
+- `--ink` 用于标题、正文、数据和导航；能源/政企场景不能用低对比小灰字承载重要信息。
+- `--grid-green` 用于导航重点、标题短线、章节横条、主按钮、关键编号和电网线稿。
+- `--energy-green` 用于运行正常、负荷健康、低碳增长、完成状态和正向指标。
+- `--leaf-green` 与 `--pale-green` 用于浅色分区、卡片底、表格隔行和柔和背景，不做大面积饱和绿。
+- `--blue` 用于数字化、调度、监测、云平台、AI 预测和数据链路，不和绿色抢主色。
+- `--amber` 和 `--danger` 只用于告警、风险和异常，不做装饰。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用电网绿一种（见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（能源语义清楚，绿色为主但不单色），按系列数依次取用：
+
+`#007a3d 深电网绿` · `#0b9b55 鲜绿` · `#1769d1 调度蓝` · `#74c88a 浅绿` · `#d99722 预警琥珀` · `#c93d3d 风险红`
+
+单系列图（单进度环/单柱）用 `--grid-green` 一色即可；多系列按上面顺序取。A 路线能源插图以真实场景色为准，不要把风机、光伏、地图和设备全部染成同一种绿色。
+
+## 渐变与材质
+
+- 背景以白色和极浅绿为主，局部使用从白到浅绿的线性渐变，表达清洁能源和安全运行。
+- 深绿不铺满全屏；它适合做顶部导航、章节横条、重点按钮、表头和切角装饰。
+- 可以使用非常细的电网线稿、输电塔轮廓、等值线、地理网格和节点连线，但透明度要低，不能压过文字。
+- 数据面板优先做成图表（柱/折线/进度环/指标面板）浮在背景上；仅在真·密集明细需要逐行核对时才退回白底浅绿表头细线表格，不把表格当主叙事。
+- 汇报型 deck 可以使用斜切绿条、圆形图片、编号胶囊、章节横幅作前景标记浮在背景层上，但每页结构走编辑式图文融合、现代化，不能照搬白底分区卡墙的老模板。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题用黑色或深绿，字重 700-850；中文不使用负字距。
+- 官网/平台 H1 建议 44-72px；deck 封面标题可到 72-88px，但要避免单字孤行。
+- 正文建议 15-17px，行高 1.55 左右；报告说明和指标注释不能小于 13px。
+- 数据、编号、站点编码和设备编号可以使用等宽字体栈：`"SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace`。
+- 汇报页标题要短，优先“结论 + 数据”，不要写空泛大词。
+
+## 结构语言
+
+这个模板适合能源行业官网、调度 dashboard、智能电网平台、电力汇报 deck、绿色能源专题页。**版式遵循 SKILL.md 编辑式最高原则：电网/能源场景图或线稿打底、结论与数据浮前景、数据一律用图表，不堆卡海/表格分区。**
+
+- **顶部导航**：白底或深绿底，黑字/白字清楚；重点入口用深绿按钮。
+- **首屏**：电网地图/调度场景/输电线稿做背景层（叠 scrim），左侧强标题和关键指标**浮在背景上**，右侧用进度环/趋势线呈现能源态势，不靠并排白卡分区。
+- **负荷态势（编辑式前景浮层）**：负荷、发电、储能、碳减排、供电可靠性、告警数量用**图表 + 参数胶囊**直接浮在背景上（柱/折线/进度环/指标面板），不做整页白底指标卡墙。
+- **电网拓扑**：节点、线路、区域负荷和状态色组成清晰网络浮在背景上，绿色正常、琥珀预警、红色风险、蓝色数据链路。
+- **章节汇报页**：用一张低透明能源场景图/线稿打底 + 深绿半透明横幅 + 章节标题浮前景，不要让装饰压过内容。
+- **数据呈现**：优先趋势线、对比列、占比环、指标面板浮背景；左对齐文字、右对齐数字。**真·并列指标矩阵**才用图表化指标面板（仍浮在背景上），不用绿色隔行表格做主叙事。
+- **行动呈现**：明确“调度建议 / 风险处置 / 设备巡检 / 低碳优化”，每条带真实动作和责任字段，做成前景要点列/参数胶囊浮在背景上，而非一排白底行动卡。
+
+卡片圆角建议 8-14px；政企汇报可更方正，互联网产品页可稍柔和。**别用大量漂浮卡片**：能源汇报需要稳定的基线、网格和层级——但这条"稳定"靠**编辑式图打底 + 前景数据图表浮层**来实现，而非白底卡海。卡片只保留为「图表/指标面板浮背景」这一例外容器。
+
+## 视觉母题
+
+选择一个母题并持续复用：
+
+- 电网脉络：输电线、节点、站点、区域网络。
+- 绿色调度：负荷曲线、储能进度、低碳指标、运行状态。
+- 基建线稿：输电塔、变电站、风机、光伏、抽蓄水库的低透明线稿。
+- 汇报横条：深绿标题条、浅绿信息块、编号圆点和结论短线。
+
+不要使用真实国家电网标识、真实企业建筑照片、真实 PPT 模板截图或未经授权的电力摄影。不要把页面做成“环保叶子风”；这是电网/能源基础设施 VI，不是普通绿色公益海报。
+
+## PPT/deck 方向
+
+如果用于 HTML deck 或 PPT 风格页面：
+
+1. 封面用能源场景图/输电线稿打底（叠 scrim）+ 深绿横条/斜切块 + 标题浮前景，不要把整页染成深绿、也不做空白底封面。
+2. 目录页用 4-6 个编号锚点浮在背景层上（深绿编号、黑色标题），不做并排白底分区卡。
+3. 章节页用一张低透明能源场景图或线稿打底，叠加深绿半透明横幅 + 章节标题浮前景。
+4. 数据页优先趋势线、占比环、流程图、对比列等图表浮在背景上，仅密集明细才用表格；不要只放装饰图、也不堆白底指标卡墙。
+5. 结论页用“关键结论 + 调度行动 + 责任/时间”结构做成前景要点列浮在背景上，避免感谢页空泛、避免白卡分区。
+
+## 适用场景
+
+适合：
+
+- 电网公司、电力集团、能源央企/国企、城市能源平台
+- 调度中心、配网运维、负荷预测、储能管理、碳排管理
+- 智能电网、虚拟电厂、新能源并网、输变电工程
+- 工作汇报、经营分析、项目验收、年度总结、能源安全专题
+
+不适合：
+
+- 消费娱乐、儿童产品、潮流品牌、奢侈时尚
+- 高度科幻的蓝黑控制台、摄影器材、游戏 UI
+- 需要强烈创意冲击而非可信汇报的营销页面
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确任务类型：官网、dashboard、汇报 deck、专题页或数据报告。
+2. 先声明能源对象：电网、储能、新能源、调度、巡检、碳排、虚拟电厂等。
+3. 保留白底、黑字、深绿主色、浅绿分区和蓝色数字化信号，不复制真实品牌内容。
+4. 每个绿色元素必须服务层级：导航、章节、状态、编号、行动，不做无意义装饰。
+5. 移动端减少线稿和表格列数，优先保证指标、状态和操作按钮可读可点。
+6. 截图确认：是否可信、是否现代、是否像能源行业，是否过度模板化，是否把绿色用得太满。
+
+## 质量标准
+
+成功的 `Verdant Grid` 变体应该像一个成熟能源企业或智能电网产品团队做出的视觉系统：白底清晰、绿色有权威、浅绿有呼吸感、黑字稳、蓝色表达数字化，电网线稿和节点结构服务信息而不是装饰。用户第一眼应感到可信和专业，第二眼能读懂负荷、风险、调度、行动和结果。

package/skills/ui-design/references/vi-violet-meridian.md

@@ -0,0 +1,172 @@
+# `Violet Meridian` VI 模板
+
+当用户需要“紫色、白色、黑色、清爽紫蓝、智能科技、AI 工作台、开发者工具、智能路径/任务编排、类似 `Codex` 配色灵感、图标配色”这类前端设计方向，或明确提到 `Violet Meridian / 紫曜经线` 时，使用这个模板。版式走**编辑式图文融合**（AI 氛围图/经线路径示意打底、智能路径与数据浮前景），清爽、智能、有路径感，不是白底三栏面板堆叠的工具页。
+
+这是原创视觉系统，不是 `Codex` 或 `OpenAI` 品牌复刻。可以借鉴“白底、紫色、黑色高对比、协调蓝色、智能路径、清晰科技”的气质，但不能复制真实品牌名称、标识、图标轮廓、专有形状、专有 UI 或字体风格。
+
+## 视觉定位
+
+- **气质**：明亮、智能、精确、轻科技、可信，带一点创造力和黑色界面的利落感。
+- **情绪**：像一个会把复杂任务拆成清晰路径的智能工作台，有稳定紫色焦点、黑色信息锚点和清透蓝色信号，但信息仍然清楚。
+- **核心原则**：遵循 SKILL.md 的**编辑式最高原则**——图作背景、文字浮前景、数据用图表、特写用插图，不堆卡海。AI 氛围图/经线路径示意/同色系冷白渐变光打底（叠极淡 scrim 保对比），标题、智能路径、节点、状态**直接浮在背景上**，数据做成图表（进度环/折线/参数胶囊），不靠白底面板/三栏卡分区。白底清晰信息 + 黑色结构锚点 + 紫色路径系统 + 钴蓝状态信号；紫色用于路径、行动和焦点，不铺满整个页面。
+- **第一印象**：干净、聪明、现代、可协作，像图文融合的智能工作台，但不是廉价紫色渐变页，也不是一整屏发灰的淡紫界面，更不是白底三栏面板堆叠。
+
+## 色彩 token
+
+以下作为起始色盘。**主紫 `#7c3aed` 不要随意改变**，它是模板记忆点。新增黑色用于标题、导航、关键面板和高对比区域；新增钴蓝用于状态、数据、链接和辅助行动。不要破坏“冷白底 + 黑色结构 + 固定主紫 + 清透钴蓝”的结构。
+
+```css
+:root {
+  --ink: #11121a;              /* 近黑紫：主文字 */
+  --ink-soft: #27243a;         /* 次级标题、强调文本 */
+  --muted: #5d6274;            /* 灰蓝紫：辅助文字 */
+  --black: #08080f;            /* 纯净黑：强标题、深色锚点 */
+  --black-soft: #171622;       /* 柔黑：深色面板、代码区 */
+  --black-line: rgba(8, 8, 15, 0.12);
+  --paper: #fbfbff;            /* 冷白页面背景 */
+  --paper-violet: #f4f0ff;     /* 淡紫纸色 */
+  --surface: #ffffff;          /* 主内容面板 */
+  --surface-soft: rgba(255, 255, 255, 0.82);
+  --line: rgba(30, 25, 70, 0.12);
+  --line-violet: rgba(124, 58, 237, 0.22);
+  --accent: #7c3aed;           /* 主紫：主行动、焦点路径，保持不变 */
+  --accent-blue: #5865f2;      /* 蓝紫：次级行动、连接节点 */
+  --clear-blue: #2563eb;       /* 清透钴蓝：状态、链接、数据强调 */
+  --blue-soft: #e8f0ff;        /* 浅蓝底：蓝色状态浅底 */
+  --glow: #a78bfa;             /* 亮紫光：边缘和路径高光 */
+  --signal: #22c7d8;           /* 青蓝：同步、在线、完成 */
+  --amber: #d89a24;            /* 提醒 */
+  --danger: #d9485f;           /* 风险 */
+  --shadow: rgba(80, 60, 180, 0.16);
+}
+```
+
+### 色彩使用
+
+- `--paper` 用于大背景，保持冷白和可读，不要让页面被紫色吞掉。
+- `--paper-violet` 用于轻微分区、渐变底和空状态，不做大面积饱和色块。
+- `--black` 用于主标题、深色导航、代码/命令面板、关键数字和底部强对比区，让浅色页面有重量。
+- `--ink` 用于正文主信息，确保白底可读；不要把正文做成淡紫灰。
+- `--accent` 用于主按钮、当前路径、关键节点和激活状态，主紫保持 `#7c3aed`。
+- `--clear-blue` 用于链接、数据状态、同步完成、辅助行动和蓝色细线；它是清透钴蓝，不是把主紫调蓝。
+- `--accent-blue` 只用于紫蓝过渡、路径节点和渐变中间色，不承担主要状态语义。
+- `--signal` 仅在需要更轻的运行/在线提示时使用；如果页面已经有 `--clear-blue`，不要再堆太多青色。
+- 紫色阴影要轻，避免页面变脏或像游戏界面。
+
+### 数据可视化分类色（图表/点缀，与本 VI 协调）
+
+图表（柱/饼/折线/进度环）与辅助图形要用**可区分的数据系列色**，别全用主紫一种（这正是「整页一片紫、数据分不清」的根因；见 `layout-composition.md` §0.9 配色解耦）。
+本 VI 现成分类色序列（冷调为主、彼此分得开，冷白底上都可读），按系列数依次取用：
+
+`#7c3aed 主紫` · `#5865f2 蓝紫` · `#22c7d8 青蓝` · `#d89a24 琥珀` · `#3fb27f 草绿` · `#d9485f 珊瑚红`
+
+单系列图（单进度环/单柱）用 `accent` `#7c3aed` 一色即可；多系列按上面顺序取。A 路线插图以画面真实色为准、不受此约束，只需与 VI 协调不冲突。
+
+## 渐变与材质
+
+- 背景使用冷白到淡紫的低对比渐变，局部加入极淡紫光或极淡蓝光，制造智能空间感。
+- 主面板以白色或高不透明白为主，边缘可以有淡紫高光，不牺牲文字对比。
+- 主按钮优先使用固定主紫，必要时加入很短的紫到钴蓝方向渐变；面积要小、文字要稳。
+- 黑色面板用于代码区、实时运行日志、关键结果摘要和底部行动区；黑色面板上用白字、紫色焦点线和钴蓝状态点。
+- 路径线、流程轨道、连接节点和图标底可以使用紫到钴蓝的细线渐变，表达“推理路径”和“任务经线”，不要做大面积发光色块。
+- 状态标签使用浅底深字，不做高饱和整块紫底。
+- 如果去掉所有发光后页面就失去结构，说明视觉系统没有成立；先强化布局和信息层级。
+
+## 页面级背景变化（deck 多页防雷同）
+
+多页 deck 最常见的败笔：除首页 AI 图外，**所有页背景一模一样**，缺变化与美感。本 VI 的色 token 已够用——
+在**同色系内**做深浅 / 黑白对比 / 光位变化即可，不破坏「冷白底 + 黑色锚点 + 紫色经线 + 钴蓝信号」的一致性：
+
+- **页型分层**：封面 / 章节分隔页用**更沉的底**（`--paper-violet` 满铺 + 较强径向紫光，或 AI 氛围底图 + scrim）；
+  内容页用**冷白** `--paper` + 极淡径向光，保证大段文字可读。两者交替，节奏自然出来。
+- **径向光位置轮换**：相邻内容页把那束 `radial-gradient` 极淡蓝紫光放在**不同角**（左上 / 右上 / 右下…），
+  即便底色相同，光位一换观感就不同。
+- **黑色锚点轮换**：部分页面加入黑色代码面板、黑色底部行动条或黑色参数面板（图表/指标容器），让浅色紫色页面不再漂浮；这是「黑色执行台」母题，不是白底分区卡海。
+- **蓝色信号轮换**：`--clear-blue` 用在状态、链接、节点编号和数据线，帮助紫色体系产生清晰信息分工。
+- **强调带 / 分隔光**：每页用 `--line-violet` / `--glow` 画一条经线或顶部强调带，位置/长度随页变化，是低成本的"每页不同"。
+
+铁律：**变化服务信息层级**，不是把页面染花。冷白底与文字对比永远优先；紫色仍只做焦点与路径、不铺满；黑色只做结构锚点；蓝色只做信号和辅助行动。
+相邻页**至少有一处不同**（底深浅 / 光位 / 强调带），但整套 deck 一眼仍是同一个 Violet Meridian。
+
+## 字体与排版
+
+- 中文优先使用系统无衬线栈：`"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif`。
+- 标题用近黑或纯净黑，字重 750-850；中文不使用负字距。紫色可以用于标题中的少量关键词，但不要整行渐变紫字。
+- H1 建议 2-4 行，上限 72px 左右；移动端优先自然断行，避免单字孤行。
+- 正文建议 15-17px，行高约 1.55；辅助说明不要低对比小灰字。
+- 代码、任务编号、模型状态可以使用等宽字体栈：`"SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace`。
+- 英文缩写如 AI、API、CLI、SDK 可以保留；说明性文案仍使用简体中文。
+
+推荐尺度：
+
+```css
+h1 {
+  font-size: clamp(38px, 5.2vw, 72px);
+  line-height: 1.06;
+  letter-spacing: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+
+.body-copy {
+  font-size: 16px;
+  line-height: 1.55;
+  color: var(--muted);
+}
+```
+
+## 结构语言
+
+这个模板适合白底科技产品、AI 工具和开发者工作台。**版式遵循 SKILL.md 编辑式最高原则：AI 氛围图/经线路径示意打底、标题与路径浮前景、数据用图表，不堆白底面板/三栏卡分区。**
+
+- **清晰导航**：白色或半透明白底，淡紫边线；当前页面、主入口或账号入口可以用黑色胶囊增强识别。
+- **主视觉区**：背景层用 AI 氛围图或经线路径示意（叠极淡 scrim），强中文标题、具体价值说明、主/次行动**直接浮在背景上**，「智能路径」用线 + 节点示意浮在前景，而非装进白底面板。
+- **经线路径（核心母题）**：用紫到钴蓝的线、节点、步骤和轻量图标**浮在背景上**表达任务拆解、推理链路、自动化流程和协作关系，这是本 VI 替代卡片墙的主结构语言。
+- **智能建议（前景浮层）**：建议标题 + 下一步行动直接浮在背景上、用紫蓝经线/编号节点串联，不做并排白底建议卡墙。
+- **数据呈现**：用量、耗时、成功率、上下文占用等用图表（进度环/折线/参数胶囊）浮在背景上，不用白底数据卡或对比表。
+- **代码/任务模块**：柔黑面板承载代码、命令、运行日志和关键结果（这是「黑色执行台」母题，浮在浅色背景上提供结构重量，属合理例外，非白底分区卡）。
+- **状态系统**：钴蓝表示链接、同步、完成和数据状态，紫色表示进行中/当前焦点，琥珀和红色低面积使用。
+
+卡片圆角建议 12-16px（仅用于图表/指标面板/黑色执行台这类容器）；工具型 dashboard 可降到 8-12px。页面可以轻盈，但不要空泛，大块留白由经线路径、节点示意、图表或真实内容锚定——而非靠白底卡海填满。**卡片只保留为「图表/指标面板/黑色执行台浮背景」例外**，路径与数据是主角。
+
+## 视觉母题
+
+选择一个母题并持续复用：
+
+- 紫色经线 + 钴蓝信号点：表达任务路径、推理过程、上下文连接和自动化链路。
+- 智能节点：表达模型、工具、文件、步骤、结果和协作者。
+- 轻量光标：表达输入、编辑、生成和确认动作。
+- 分层白板 + 黑色运行台：白板表达规划和建议，黑色模块表达执行、代码和结果回放。
+
+不要使用大量抽象球体、廉价蓝紫雾团、无意义霓虹线框、复杂 3D 图标或真实 Codex/OpenAI 标志化图形。不要把钴蓝和紫色混成一片渐变雾；蓝色必须有明确的信息角色。
+
+## 适用场景
+
+适合：
+
+- AI 工具、开发者平台、智能工作台、自动化产品
+- 知识协作、代码辅助、任务编排、内容生成、数据分析
+- 官网首屏、产品介绍页、功能发布页、轻量 dashboard
+- deck、设计探索画布和需要清晰紫蓝科技感的原型
+
+不适合：
+
+- 高风险运营台、重金融风控、军事/安全大屏
+- 摄影器材、电影机、暗色硬件官网
+- 儿童娱乐、复古编辑风、自然生活方式品牌
+- 需要长篇阅读、极强权威感或温暖手工感的页面
+
+## 迁移方式
+
+复用模板时：
+
+1. 先明确用户任务中的核心路径：输入、理解、拆解、执行、检查、交付。
+2. 保留冷白底、黑色结构锚点、固定主紫、钴蓝状态，不复制模板示例内容。
+3. 先声明路径系统：哪些节点、连线、状态和行动承载用户目标。
+4. 主内容走编辑式图文融合（背景层 + 前景要点/路径/图表浮层），黑色用于执行台和重点摘要，紫色只做焦点和路径，不做整屏底色、不堆白底三栏面板。
+5. 移动端减少经线和光效，优先保证中文标题、按钮和前景浮层（图表/指标面板）可读可点。
+6. 截图确认：是否像成熟 AI 产品，是否紫色过量，是否白底太空，黑色是否增强结构而不是压暗页面，蓝色是否清楚承担状态/链接角色，是否有廉价渐变感。
+
+## 质量标准
+
+成功的 `Violet Meridian` 变体应该像成熟 AI 产品团队做出的白底紫色界面：信息清楚，路径有方向，紫色有纪律，黑色提供结构重量，钴蓝承担状态和数据信号，中文阅读舒服。检验标准是：用户第一眼知道产品在帮他组织复杂任务，第二眼能读懂主行动、关键节点和下一步。