minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/evals/evals.json

@@ -0,0 +1,254 @@
+{
+  "skill_name": "ui-design",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "为一个产品分析工具设计精致的 SaaS dashboard 首页。用户需要高保真 HTML UI，整体气质偏严肃企业级，提供几个布局或视觉变体，不要泛泛的填充指标。最终界面必须使用简体中文。",
+      "expected_output": "一个响应式 HTML 应用界面，具备清晰设计系统、真实有意义的 dashboard 内容、变体或 Tweaks，并通过配套检查脚本验证。",
+      "files": [],
+      "expectations": [
+        "输出选择 app-ui/产品界面路线，而不是泛泛落地页。",
+        "没有现成设计上下文时，工作流会先询问或建立清晰设计方向。",
+        "交付物是 HTML artifact，并在主屏幕添加 data-screen-label。",
+        "设计提供有意义的变体或 Tweaks 用于探索。",
+        "最终 HTML 文件运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 2,
+      "prompt": "把产品发布大纲做成 6 页 HTML deck，用于公司全员会。它应该像可编辑的 PPT 风格设计，能持久化当前页，并且在笔记本和投影屏上都完整缩放。最终演示文案必须使用简体中文。",
+      "expected_output": "一个固定尺寸 HTML deck，包含 1 起始编号 slide 标签、viewport scaling、当前页持久化和简洁的演示内容。",
+      "files": [],
+      "expectations": [
+        "输出选择 deck/PPT 风格路线。",
+        "slide 使用 1 起始 data-screen-label，例如 01 标题、02 议程。",
+        "deck 使用 localStorage 或等效机制持久化当前页。",
+        "固定尺寸画布通过 viewport scaling 完整显示，而不是依赖浏览器缩放。",
+        "最终 HTML 文件运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 3,
+      "prompt": "基于现有品牌方向探索一个移动端新手引导流程的三种视觉方向：克制字体、暖中性背景、一个锐利强调色。要能通过 Tweaks 比较方案。最终界面必须使用简体中文。",
+      "expected_output": "一个设计探索 HTML artifact，比较多个 UI 变体，使用给定品牌方向，并提供实时 Tweaks 或控件切换方案。",
+      "files": [],
+      "expectations": [
+        "输出选择适合比较变体的 canvas 或交互原型路线。",
+        "设计使用用户给定视觉方向，而不是引入无关配色或通用 UI 套路。",
+        "artifact 中至少有三个视觉方向或变体。",
+        "Tweaks 使用唯一合法的 EDITMODE JSON block，并实现持久化消息。",
+        "最终 HTML 文件运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 4,
+      "prompt": "使用 舒适视觉 这种成熟运营型 VI 模板，为某区域电力公司的能源调度 dashboard 做一个高保真界面。保留克制的信号系统气质，但所有内容、标签、指标和视觉母题都要改成电力负荷、停电风险、备用容量和调度动作。最终 UI 不能出现港口内容，也不能出现英文界面文案。",
+      "expected_output": "一个高保真 HTML dashboard，读取 舒适视觉 VI reference，将运营型视觉 DNA 迁移到能源调度场景，并避免复制原港口内容。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-comfort-vision.md，因为 prompt 明确要求使用该模板。",
+        "输出使用模板的克制运营色盘、信号色、高密度层级和行动导向结构。",
+        "内容完全迁移到能源调度，不包含 舒适视觉 品牌文案或港口术语。",
+        "交付物是中文 HTML artifact，并包含 data-screen-label 和必要 Tweaks block。",
+        "最终 HTML 文件运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 5,
+      "prompt": "使用 Aqua Glass 浅蓝白玻璃风，为一个 AI 知识库产品设计中文官网首页。整体要通透、现代、浅色、黑字高可读，体现搜索、知识整理、团队协作和 AI 摘要能力。最终界面必须使用简体中文，不要套用 舒适视觉 的运营台结构。",
+      "expected_output": "一个高保真中文 HTML 首页，读取 Aqua Glass VI reference，将浅蓝白玻璃风迁移到 AI 知识库场景，并保持黑字可读、半透明层级清晰和移动端可用。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-aqua-glass.md，因为 prompt 明确要求使用 Aqua Glass 模板。",
+        "输出使用浅蓝白背景、近黑文字、半透明面板、细边框、轻阴影和蓝青信号色。",
+        "内容完全迁移到 AI 知识库场景，体现搜索、整理、协作和摘要能力，不复制 舒适视觉 的港口或运营台内容。",
+        "交付物是中文 HTML artifact，并包含 data-screen-label 和必要 Tweaks block。",
+        "最终 HTML 文件运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 6,
+      "prompt": "使用 Obsidian Optics 黑曜影像 VI，为一款原创电影机控制台或中文官网首页生成 HTML。整体要黑白为主、少量红色作为录制信号和关键行动，具有高端摄影器材和影像科技感，但不要沉重，不要出现 RED、红龙或任何真实摄影品牌内容。最终界面必须使用简体中文。",
+      "expected_output": "一个高保真中文 HTML 页面，读取 Obsidian Optics VI reference，将黑白红、精密工业、镜头冷光和参数模块迁移到原创影像设备场景，并保持红色克制、文字可读、移动端可用。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-obsidian-optics.md，因为 prompt 明确要求使用 Obsidian Optics 模板。",
+        "输出使用分层暗面、冷白文字、少量信号红、镜头冷光、细边框和参数模块。",
+        "内容完全原创，不包含 RED、红龙或其他真实摄影品牌的名称、标识、产品名、专有字形或独特 UI。",
+        "交付物是中文 HTML artifact，并包含 data-screen-label 和必要 Tweaks block。",
+        "最终 HTML 文件运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 7,
+      "prompt": "使用 Nebula Console 星云控制台 VI，为一家原创中文科技公司生成两个 HTML 样张：一个官网首页和一个 AI 控制台。整体要蓝黑科技、深色半透明、冷白文字、电光蓝和青蓝信号，吸收透明显示器和飞船界面灵感，但不能像电影道具或游戏 HUD。最终界面必须使用简体中文，不要出现真实科技公司品牌内容。",
+      "expected_output": "两个高保真中文 HTML 样张，读取 Nebula Console VI reference，将蓝黑半透明、冷蓝高光、坐标网格、扫描状态条和深玻璃层级迁移到科技公司首页与 AI 控制台场景，并保持中文可读、移动端可用和商用品质。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-nebula-console.md，因为 prompt 明确要求使用 Nebula Console 模板。",
+        "输出使用蓝黑深色背景、冷白文字、深玻璃面板、电光蓝主行动、青蓝在线状态、克制网格和扫描线。",
+        "官网首页像成熟科技公司产品页面，控制台像可用产品界面，不是电影道具 HUD 或游戏界面。",
+        "内容完全原创，不包含真实科技公司的名称、标识、产品名、专有字形或独特 UI。",
+        "两个 HTML artifact 都包含 data-screen-label 和唯一合法的 Tweaks block，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 8,
+      "prompt": "使用 Violet Meridian 紫曜经线 VI，为一个原创中文 AI 开发工具或智能工作台设计官网首页 HTML。整体要白底、固定主紫、黑色结构锚点、协调钴蓝、清晰科技、智能路径和协作感，可以借鉴 Codex 配色图标的紫白科技气质，但不能出现 Codex、OpenAI 或任何真实品牌内容。最终界面必须使用简体中文，并通过 Tweaks 调整光轨强度、黑色锚点密度或界面密度。",
+      "expected_output": "一个高保真中文 HTML 首页，读取 Violet Meridian VI reference，将冷白底、黑色信息锚点、固定主紫、钴蓝状态信号、路径节点和智能建议卡迁移到 AI 开发工具场景，并保持紫色克制、中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-violet-meridian.md，因为 prompt 明确要求使用 Violet Meridian 模板。",
+        "输出使用冷白背景、近黑文字、黑色结构锚点、固定主紫路径系统、白色主 surface、轻量边缘光和钴蓝状态信号。",
+        "内容完全原创，不包含 Codex、OpenAI 或其他真实品牌的名称、标识、图标轮廓、专有形状或独特 UI。",
+        "交付物是中文 HTML artifact，包含 data-screen-label 和唯一合法的 EDITMODE JSON block。",
+        "Tweaks 持久化使用 edits 载荷，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 9,
+      "prompt": "使用 Solar Relay 日冕中继 VI，为一个原创中文网络加速或隐私连接工具设计官网首页 HTML。整体要红橙主导、多彩弧带、轻快安全、移动互联网产品感，可以借鉴 Cloudflare WARP+ 那种多彩网络加速气质，但不能出现 Cloudflare、WARP+、1.1.1.1 或任何真实品牌内容。最终界面必须使用简体中文，并通过 Tweaks 调整主红橙、彩带强度或界面活力等级。",
+      "expected_output": "一个高保真中文 HTML 首页，读取 Solar Relay VI reference，将红橙日冕、青蓝网络、深蓝稳定底、流量路径卡、连接状态和移动端产品感迁移到原创网络加速场景，并保持彩色克制、中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-solar-relay.md，因为 prompt 明确要求使用 Solar Relay 模板。",
+        "输出使用红橙主轴、珊瑚/金黄弧带、青蓝安全信号、深蓝稳定底和白色主 surface。",
+        "内容完全原创，不包含 Cloudflare、WARP+、1.1.1.1 或其他真实品牌的名称、标识、图标轮廓、广告卡片结构、专有 UI 或原始文案。",
+        "交付物是中文 HTML artifact，包含 data-screen-label 和唯一合法的 EDITMODE JSON block。",
+        "Tweaks 持久化使用 edits 载荷，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 10,
+      "prompt": "我没有明确品牌资料，只想做一个中文 AI 工具首页，要求看起来成熟、清爽、有设计感。请按 ui-design skill 自行选择合适 VI 或从零建立视觉系统，生成 HTML，并保存设计执行声明、检查结果、截图和评审结论。",
+      "expected_output": "一个高保真中文 HTML 首页，执行者不会直接套默认页面，而是先读取 design-execution-playbook.md，选择合适 VI 或声明从零设计策略，完成设计执行声明、HTML、Tweaks、静态检查、语言检查、浏览器截图和评审。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/design-execution-playbook.md，因为 prompt 故意较空，需要强执行轨道。",
+        "执行者明确写出设计执行声明，包括任务类型、上下文来源、VI 选择或从零设计理由、视觉系统、中文排版、Tweaks 和验证计划；若不使用现有 VI，则读取 references/aesthetic-direction.md。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并使用 edits 载荷。",
+        "最终运行 scripts/check_ui_artifact.py、scripts/check_language_policy.py 和浏览器截图检查。",
+        "评审结论诚实说明设计是否合格、哪里仍需优化，并体现脚本通过不等于设计通过。"
+      ]
+    },
+    {
+      "id": 11,
+      "prompt": "没有品牌资料，但我希望为一个中文协作软件官网做一个更大胆、有记忆点、不要普通 SaaS 味的 HTML 首页。请先建立审美方向和视觉概念，再生成页面；最终必须保存设计执行声明、检查结果、截图和评审结论。",
+      "expected_output": "一个高保真中文 HTML 首页，读取 design-execution-playbook.md 和 aesthetic-direction.md，先声明审美方向与记忆点，再生成具有清晰产品结构、中文可读、非模板化且可验证的 HTML artifact。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/design-execution-playbook.md 和 references/aesthetic-direction.md，因为用户要求从零建立大胆审美方向。",
+        "设计执行声明明确写出审美方向、记忆点、字体/色彩/空间/材质/动效策略，以及这些策略如何服务中文协作软件。",
+        "输出避免普通 SaaS 套路，不只是白底渐变、三张圆角卡片和无意义指标。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并使用 edits 载荷。",
+        "最终运行 scripts/check_ui_artifact.py、scripts/check_language_policy.py 和浏览器截图检查，并写出诚实评审结论。"
+      ]
+    },
+    {
+      "id": 12,
+      "prompt": "把一个使用 ui-design VI 模板生成的中文 HTML deck 导出为 PPTX。需要一个高保真图片版和一个文字可编辑的混合版，保留复杂渐变、玻璃或光效，不要为了可编辑性牺牲视觉质量。请说明两版 PPT 的可编辑边界，并完成 PowerPoint 包校验。",
+      "expected_output": "执行者读取 references/export-pptx.md 和 pptx 相关规则，为 HTML deck 添加必要导出分层语义，分别生成 flat 与 hybrid PPTX，输出截图、manifest、导出报告和 OPC 校验结果，并诚实说明可编辑程度。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/export-pptx.md，因为用户明确要求导出 PPTX 和文字可编辑版本。",
+        "HTML deck 保持中文界面、VI 视觉质量、data-screen-label、唯一合法 EDITMODE JSON block，并为可编辑前景添加 data-pptx-layer 和 data-pptx-kind。",
+        "使用 scripts/export_pptx_from_html.mjs 生成 flat.pptx 和 hybrid.pptx，而不是直接用 python-pptx 粗糙重画。",
+        "生成后运行 minimal-agent/skills/pptx/scripts/opc_check.py 或导出脚本内置 OPC 校验，避免 PowerPoint 打开修复。",
+        "交付说明明确 flat 基本不可编辑，hybrid 背景不可编辑但文字和简单形状可编辑，并说明复杂图标、图表、光效的限制。"
+      ]
+    },
+    {
+      "id": 13,
+      "prompt": "使用 Precision Horizon 精密地平线 VI，为一款原创中文智能硬件产品设计官网首页 HTML。整体要有 Apple/DJI 产品官网那种产品主角、极简高级、材质光、参数视觉化和发布感，但不能出现 Apple、DJI 或任何真实品牌内容。请展示产品首屏、核心卖点、参数模块、使用场景和型号对比，最终界面必须使用简体中文。",
+      "expected_output": "一个高保真中文产品展示 HTML 首页，读取 Precision Horizon VI reference，将产品主角、克制黑白灰、材质光、地平线/轨迹母题、参数视觉化和滚动章节叙事迁移到原创智能硬件场景，并保持中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-precision-horizon.md，因为 prompt 明确要求使用 Precision Horizon 模板。",
+        "输出先选择纯净白场、深色剧场、冷雾科技、暖白生活或材料同色系中的一种背景策略，并在设计执行声明中说明理由。",
+        "首屏以原创产品视觉为主角，不是普通 SaaS 卡片页；参数通过大数字、短说明、剖面、轨迹线或对比矩阵视觉化。",
+        "内容完全原创，不包含 Apple、DJI 或其他真实品牌的名称、标识、字体、产品摄影、页面结构、文案、图标或专有 UI。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 14,
+      "prompt": "使用 Precision Horizon Dark 精密地平线深色版 VI，为一款原创中文高性能专业设备设计深色产品官网首页 HTML。整体要像高端专业产品发布页：黑色有层次、产品边缘光明显、暖橙或深蓝材质色克制、参数有冲击，但不能像游戏 HUD，也不能出现 Apple、DJI、iPhone、MacBook 或任何真实品牌内容。最终界面必须使用简体中文。",
+      "expected_output": "一个高保真中文深色产品展示 HTML 首页，读取 Precision Horizon Dark VI reference，将黑石墨层级、产品边缘光、暖橙/深蓝材质色、大参数和专业场景迁移到原创设备场景，并保持中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-precision-horizon-dark.md，因为 prompt 明确要求使用 Precision Horizon Dark 模板。",
+        "输出先选择黑橙性能、黑蓝影像、黑银工艺或黑红录制中的一种深色策略，并在设计执行声明中说明理由。",
+        "首屏以原创产品视觉和边缘光为主角，不是普通深色卡片页；参数通过大数字、短说明和专业场景视觉化。",
+        "内容完全原创，不包含 Apple、DJI、iPhone、MacBook 或其他真实品牌的名称、标识、字体、产品摄影、页面结构、文案、图标或专有 UI。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 15,
+      "prompt": "使用 Ember Prism 棱焰智能 VI，为一家原创中文 AI 科技公司设计官网首页 HTML。整体要白色为主、红色主导、少量橙色火花、黑色信息层级、蓝色和紫色少量点缀，呈现模型官网、多模态产品矩阵、开发者 API、研究成果和套餐入口。可以参考 MiniMax 官网的红色发布感和白色浮动信息卡气质，但不能出现 MiniMax 或任何真实 AI 公司品牌内容。最终界面必须使用简体中文。",
+      "expected_output": "一个高保真中文 HTML 首页，读取 Ember Prism VI reference，将白底清晰空间、黑色专业锚点、红色发布主视觉、白色浮动信息卡、蓝色开发者/参数信号、紫色多模态点缀和产品矩阵结构迁移到原创 AI 科技公司场景，并保持中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-ember-prism.md，因为 prompt 明确要求使用 Ember Prism 模板。",
+        "输出使用白色主背景、黑色标题和专业模块、红色主行动、红色产品矩阵主视觉、白色浮动信息卡、蓝色开发者/API/参数信号、紫色多模态点缀，橙色只能作为少量火花或节点。",
+        "首页必须包含具体产品矩阵、模型能力、开发者入口、研究或价格信息，不只是空泛口号和通用卡片。",
+        "内容完全原创，不包含 MiniMax 或其他真实 AI 公司的名称、标识、产品名、页面结构、文案、插画或专有 UI。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 16,
+      "prompt": "使用 Amber Prism 琥珀棱镜 VI，为一家原创中文 AI 科技公司设计官网首页 HTML。整体要白色为主、橙金为辅、少量红色、黑色信息层级、蓝色和紫色少量点缀，呈现温暖亲和的模型官网、多模态产品矩阵和开发者入口。最终界面必须使用简体中文。",
+      "expected_output": "一个高保真中文 HTML 首页，读取 Amber Prism VI reference，将白底清晰空间、黑色专业锚点、橙金行动能量、少量红色提醒、蓝色开发者/参数信号、紫色多模态点缀和产品矩阵结构迁移到原创 AI 科技公司场景，并保持中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-amber-prism.md，因为 prompt 明确要求使用 Amber Prism 模板。",
+        "输出使用白色主背景、黑色标题和专业模块、橙金主行动、少量红色提醒、蓝色开发者/API/参数信号、紫色多模态点缀，不能误用成红色主导的 Ember Prism。",
+        "首页必须包含具体产品矩阵、模型能力、开发者入口、研究或价格信息，不只是空泛口号和通用卡片。",
+        "内容完全原创，不包含真实 AI 公司的名称、标识、产品名、页面结构、文案、插画或专有 UI。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 17,
+      "prompt": "使用 Verdant Grid 绿脉电网 VI，为一个原创中文智能电网调度平台设计 HTML 首页或 PPT-style deck。整体要以白色、深绿、浅绿、黑色为主，体现能源行业可信感、电网拓扑、负荷预测、储能调度、风险告警和低碳指标。可以参考国家电网官网和公开电力汇报模板的绿色能源气质，但不能出现国家电网或任何真实能源企业品牌内容。最终界面必须使用简体中文。",
+      "expected_output": "一个高保真中文 HTML artifact，读取 Verdant Grid VI reference，将白底清晰空间、黑色权威文字、深绿主色、浅绿分区、电网线稿、节点拓扑和蓝色数字化信号迁移到原创能源行业场景，并保持中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-verdant-grid.md，因为 prompt 明确要求使用 Verdant Grid 模板。",
+        "输出使用白底、黑字、深绿主色、浅绿分区、细电网线稿、拓扑节点、蓝色数字化信号和琥珀/红色告警，不把绿色铺满整页。",
+        "内容必须包含能源行业真实结构，例如负荷预测、调度建议、储能状态、线路风险、碳减排或供电可靠性，不只是环保口号。",
+        "若输出 deck/PPT 风格，必须有章节横条、编号模块、数据页和结论行动页，不照搬公开 PPT 模板版式。",
+        "内容完全原创，不包含国家电网或其他真实能源企业的名称、标识、标准色手册、摄影资产、PPT 模板版式、图标或专有 UI。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 18,
+      "prompt": "使用 Obsidian XUI 黑曜界面 VI，为一个原创中文高科技系统控制台设计 HTML。整体要黑色科技、深色半透明、渐变光、精密线框、XUI 科幻感更强，包含系统状态、节点拓扑、风险告警、操作控制和数据轨道。但必须保证中文标题、正文、按钮和指标都清楚可读，不能做成游戏 HUD 或电影道具。最终界面必须使用简体中文。",
+      "expected_output": "一个高保真中文 HTML 控制台，读取 Obsidian XUI VI reference，将深黑背景、稳定深色阅读面、半透明玻璃浮层、电光蓝/青蓝信号、少量紫蓝和绿光点缀、精密线框和数据轨道迁移到原创高科技系统场景，并保持中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-obsidian-xui.md，因为 prompt 明确要求使用 Obsidian XUI 模板。",
+        "输出先声明透明层级：背景光、主阅读面、玻璃浮层、状态光分别承担什么信息。",
+        "所有正文、表格、说明和按钮文字都放在稳定深色 surface 上，不直接压在复杂光效、网格或扫描线背景上。",
+        "使用黑色层级、半透明面板、渐变光、精密线框、电光蓝/青蓝主信号、少量紫蓝/绿光点缀，并克制使用琥珀/红色告警。",
+        "内容必须包含真实控制台结构，例如系统状态、节点拓扑、风险告警、控制动作、数据轨道或任务队列，不只是装饰线框。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    },
+    {
+      "id": 19,
+      "prompt": "使用 Aegis Vector 蓝盾矢量 VI，为一个原创中文央企工业科技集团官网或装备技术平台设计 HTML 首页。整体要白色为主、黑字权威、蓝色导航和信息焦点、浅蓝光电高光、矢量准线、工业网格和能力矩阵，可以参考中国兵器工业集团公开官网的蓝白政企工业气质，但不能出现中国兵器、北方工业或任何真实军工央企品牌内容。最终界面必须使用简体中文。",
+      "expected_output": "一个高保真中文 HTML 首页，读取 Aegis Vector VI reference，将白底清晰空间、黑色权威文字、兵工蓝导航/焦点块、浅蓝光电高光、矢量准线、工业网格和能力矩阵迁移到原创央企工业科技场景，并保持中文可读、移动端可用和原创边界。",
+      "files": [],
+      "expectations": [
+        "工作流读取 references/vi-aegis-vector.md，因为 prompt 明确要求使用 Aegis Vector 模板。",
+        "输出使用白底、黑字、蓝色导航或焦点块、浅蓝技术图层、矢量准线、工业网格和能力矩阵，不把页面做成旧式新闻门户。",
+        "内容必须包含真实工业科技结构，例如智能制造、光电感知、车辆平台、材料工程、项目能力、责任创新或安全状态，不只是空泛口号。",
+        "内容完全原创，不包含中国兵器、北方工业或其他真实军工央企的名称、标识、官网版式、新闻图、搜索框结构、专有文案或专有 UI。",
+        "交付物是中文 HTML artifact，包含 data-screen-label、唯一合法 EDITMODE JSON block，并运行 scripts/check_ui_artifact.py 和 scripts/check_language_policy.py。"
+      ]
+    }
+  ]
+}

package/skills/ui-design/references/aesthetic-direction.md

@@ -0,0 +1,83 @@
+# 审美方向方法
+
+本文件用于从零建立视觉方向，或把“更有设计感、更高级、更独特、更大胆、更有品牌记忆点”这类需求转成可执行的界面语言。它不是 VI 模板，也不替代 `design-execution-playbook.md`、现有 VI 模板和检查脚本。
+
+## 何时读取
+
+- 用户没有明确品牌资料，但希望页面或产品界面有鲜明审美方向。
+- 用户觉得当前设计普通、模板化、没有记忆点。
+- 用户要求更大胆、更高级、更独特、更有品牌感或更像成熟设计团队产物。
+- 当前没有合适 VI 模板，需要为一次任务临时建立原创视觉系统。
+
+## 先选审美方向
+
+开始写 HTML 前，先用一句话定义本次设计的审美方向。方向要服务产品和受众，不要为了炫技而偏离任务。
+
+可选方向示例：
+
+- 极简冷静：少元素、大留白、强网格、精确排版。
+- 精密工业：暗面、细线、参数、金属边缘和状态信号。
+- 编辑杂志：强标题、非对称版式、图文节奏和段落呼吸。
+- 科技光感：透明层级、冷色高光、路径线和系统状态。
+- 轻快消费：高明度色彩、圆润节奏、清楚行动和移动端亲和力。
+- 奢华克制：少色、材质感、精细边框、低调但昂贵的留白。
+- 复古未来：旧介质秩序与现代交互结合，但避免装饰压过信息。
+
+不要只写“现代、简洁、高级”。必须说明具体方向如何落到色彩、字体、结构、材质和动效。
+
+## 建立一个记忆点
+
+每个从零设计都应有一个能被用户记住的核心视觉概念。记忆点可以很克制，但必须明确。
+
+可用来源：
+
+- 构图：斜向流动、中心仪表、左右张力、层叠工作台、环形路径。
+- 材质：玻璃、纸张、金属、雾面、光轨、织物纹理、硬件边缘。
+- 字体：强标题、窄参数、编辑感标题、温和正文，但中文必须清楚。
+- 色彩：单一强强调色、冷暖对比、低饱和系统色、状态信号。
+- 动效：一次有节奏的进入、关键状态变化、路径推进、悬浮反馈。
+- 组件：独特导航、状态胶囊、路径卡、控制条、产品预览框。
+
+如果说不出记忆点，设计很容易退回普通卡片页面。
+
+## 五个审美维度
+
+- 字体：中文优先可读。标题可以强，但不要负字距、不要过粗压扁汉字；正文保持稳定行高。若使用特殊字体气质，要有系统字体回退。
+- 色彩：选择主色、辅助色、背景色、文字色和状态色的职责。不要平均分配所有颜色；让一个主视觉承担识别，一个或两个信号色承担行动和状态。
+- 空间：要么有强秩序，要么有明确张力。不要让所有区块都是同宽圆角卡片。页面首屏要有节奏：主信息、证据、行动和产品预览各有位置。
+- 材质：背景、surface、边框、阴影、高光、纹理必须服务层级。装饰材质不要盖住文字，不要让页面变脏。
+- 动效：动效用于表达状态、路径和反馈。优先少量高质量动效，避免每个元素都飘、闪、弹。
+
+## 大胆但不失控
+
+大胆不是堆效果。大胆设计仍然要满足：
+
+- 第一眼知道产品是什么、给谁用、下一步做什么。
+- 中文标题和正文清楚，不被渐变、纹理、透明度或动效干扰。
+- 移动端减少装饰，保留结构和行动。
+- 所有组件有统一规则，不是每张卡片都换一种风格。
+- 每个视觉选择能解释为“服务产品气质或信息结构”。
+
+如果任务是高频工具、运营后台、数据控制台，优先清晰、密度和状态系统；如果任务是品牌首页、发布页、视觉探索，可以更强调记忆点和情绪。
+
+## 避免模板味
+
+交付前检查这些问题：
+
+- 是否只是白底紫色渐变、三张圆角卡片和一排无意义指标。
+- 是否所有模块都像同一个卡片复制出来。
+- 是否用了很多图标、数字和标签，但没有真实信息价值。
+- 是否为了“高级”牺牲了中文可读性。
+- 是否有漂亮背景，但产品界面或核心对象不够明确。
+- 是否把动效当装饰，而不是表达状态或交互。
+
+发现这些问题时，先回到“审美方向 + 记忆点 + 五个维度”重新收束。
+
+## 与 ui-design 流程的关系
+
+读取本文件后，仍必须执行 `SKILL.md` 的完整流程：
+
+- 写设计执行声明，说明审美方向和记忆点。
+- 生成 HTML artifact，并包含 `data-screen-label` 和必要 Tweaks。
+- 运行静态检查、语言检查和浏览器截图检查。
+- 写评审结论，说明视觉是否真的比普通模板更有识别度。

package/skills/ui-design/references/claude-design-protocol.md

@@ -0,0 +1,36 @@
+# Claude Design 协议清理版
+
+本文件是 `../claude_design.md` 的可执行设计协议清理版。原文件保留为来源备份，但从第 279 行开始混入原 claude.ai 环境的工具结构描述与损坏文本，执行时不要直接吞读那一段。
+
+## 核心迁移原则
+
+- 先理解用户目标、受众、内容、品牌上下文和已有资源，再开始设计。缺少关键上下文时，能合理推断就声明假设；会改变方向的问题才合并问一轮。
+- 代码、设计 token、组件和现有设计系统优先于截图。截图用于校验视觉，不替代源码语义。
+- 小型 artifact 可单文件完成；大型原型、复杂 React 或长 deck 要拆入口、组件、样式和脚本，避免一个文件超过 1000 行。
+- 复杂设计先建立视觉系统：字体、色彩角色、空间结构、组件语言、动效/状态、可调参数。不要边写边堆样式。
+- 默认简体中文。用户可见 UI、设计说明、评审和测试题都用简体中文，必要英文仅保留品牌名、代码标识、API/CSS/JS 名称和行业缩写。
+- 避免通用 AI 味：不要无意义渐变、泛 SaaS 卡片堆、左边框强调卡片、假 SVG 图、填充无意义占位文本、空泛大词和不服务内容的装饰。
+- 固定尺寸内容必须有明确舞台、缩放或导出策略。浏览器演示 deck 与 PPTX 导出 deck 是两条不同路径，不混用协议。
+- 设计探索默认给 3 个以上方向或 Tweaks 控制；用户只要单案时才收敛到一个方案。
+- 交付前必须验证：静态检查、语言检查、浏览器截图或固定画布构图闸门。脚本通过不等于设计通过，必须结合截图做人工评审。
+
+## Web / 原型协议
+
+- 可以使用 Tweaks/EDITMODE 暴露颜色、密度、布局、风格强度等真实有意义的变体。
+- Tweaks 推荐使用 `{ edits: patch }`，保留兼容旧字段但新产物不要再写散乱 key。
+- React/Babel 只用固定 CDN；不要在 inline Babel 场景混用 `type="module"`；多 Babel 文件共享组件时显式挂到 `window`。
+- 不使用 `scrollIntoView`。
+- 移动端按钮和可点击目标不低于 44px；中文标题要自然断行，避免最后一字孤行。
+
+## Deck / PPTX 导出协议
+
+- PPTX 导出优先生成静态 16:9 HTML deck，以 `1920x1080` 为基准。
+- PPTX 导出 deck 不使用 Tweaks、localStorage、postMessage、JS 视口缩放、翻页 nav 或 React/Babel。
+- 每页使用 `data-screen-label="01 中文标题"`，从 1 开始编号。
+- 每页应有明确构图 archetype 和真实视觉元素，先用 `export_pptx_from_html.mjs --measure-only` 量几何，再用 `layout_balance.py` 修重叠、空心卡片和明显失衡。
+- `hybrid` 导出说明清楚：背景为整页底图，前景为独立图片对象，文本为原生可编辑文本框。不要承诺完全原生可编辑。
+
+## 预览反馈协议
+
+- 原 claude.ai 的 `<mentioned-element>`、`done`、`show_to_user`、`fork_verifier_agent` 在本仓库没有同名能力。对应做法见 `preview-feedback.md`：用 DOM、截图、浏览器检查和最终路径替代。
+- 原 `copy_starter_component` 在本仓库没有同名工具。对应做法见 `starter-components.md`：优先真实 starter，缺失时使用脚手架备用方案，并满足同等行为约束。

package/skills/ui-design/references/design-context.md

@@ -0,0 +1,53 @@
+# 设计上下文与资源导入协议
+
+当任务涉及已有界面、代码、截图、PDF、PPTX、DOCX、品牌文档、组件库、设计系统、GitHub 仓库或用户说“参考这个/照这个改”时，先读本文件。
+
+## 上下文优先级
+
+1. 源码、设计 token、全局 CSS、组件实现和实际数据结构优先于截图。
+2. 截图、录屏和视觉稿用于确认真实布局、间距、密度、状态和品牌气质。
+3. 用户口头描述用于补足目标、受众、风格偏好和交付范围。
+4. 缺少品牌、代码或截图时，要明确声明设计假设；只有在用户接受从零探索时，才从零生成完整方案。
+
+不要在没有上下文的情况下生成泛泛的模板页面。若任务目标会影响产品定位、信息架构或关键文案，先问清楚；若只是局部润色或用户已经给出足够语境，可以直接执行。
+
+## 文件与资料读取
+
+- `Markdown`、HTML、CSS、JS、TS、JSON 和普通文本：直接读取相关文件，优先找主题 token、布局组件、页面入口、文案数据和复用组件。
+- 图片和截图：用视觉检查确认真实颜色、间距、层级、断行、图标风格和组件状态；不要只凭文件名推断。
+- PDF、PPTX、DOCX：使用当前环境可用的文档、演示或 PDF 工具提取文字、页面结构和图片资源；无法提取时，说明限制并请求可读版本或截图。
+- GitHub 或仓库资料：如果本地已有仓库，直接读取源码；如果只有远程链接且当前环境不能访问网络，要请求用户提供本地路径或导出的关键文件。
+- UI kit 或设计系统：优先提取色彩、字体、圆角、阴影、间距、按钮、输入框、卡片、表格、导航、图标和状态色规则。
+
+## 资源复制与版本保留
+
+- 只复制当前产物实际需要的图片、字体、数据或脚本资源，不要整包复制无关资产。
+- 交付 HTML 不应引用用户其他项目中的绝对本地路径；需要资源时复制到产物目录下的相对路径。
+- 重大修订、对比实验或用户要求保留旧版时，创建 `v2`、`iteration-2` 或清晰命名的新文件，不要覆盖可比较版本。
+- 不要复制真实品牌独特 UI、商标、标识、专有插画或受版权保护的界面细节；应迁移设计原则并生成原创表达。
+
+## 内容策略
+
+- 不填充 `Lorem ipsum`、`TODO`、占位指标或无意义图表。
+- 信息架构先服务用户目标，再服务视觉效果。每个区块必须回答“它帮助用户理解什么或完成什么”。
+- 若需要补写文案，使用简体中文，并保持与产品行业、受众和界面密度一致。
+- 若新增页面、功能或产品承诺会改变用户业务含义，先询问用户，不要擅自发明。
+
+## 色彩与系统化
+
+- 优先使用已有设计系统的 token。若缺少扩展色，可用 `oklch()`、`color-mix()` 或同色相明度/彩度变化生成协调层级。
+- 色彩必须形成角色：背景、surface、边框、主行动、状态、风险、成功、弱提示。不要把所有强调都堆到同一种蓝色或紫色。
+- 浅色玻璃风要用渐变光感、边缘高光和文字对比建立层级；深色科技风要用暗面分层、冷光线和高对比文字保证可读。
+
+## 尺寸与可用性
+
+- 移动端可点区域不低于 44px。
+- `1920x1080` deck 的正文通常不低于 24px，重要标题和数字要按中文断行重新检查。
+- 固定尺寸舞台必须完整缩放到视口内，控制区放在缩放舞台外，避免按钮被一起缩小或裁切。
+- 大型原型可以拆分入口 HTML、CSS、JS、JSX 或组件文件；根 HTML 超过 1000 行时应考虑拆分。
+
+## 询问策略
+
+优先询问会改变设计方向的问题：目标受众、品牌气质、内容来源、保真度、使用场景、是否需要多方案、是否有设计系统。不要为可以从文件中读取的信息反复询问用户。
+
+`claude_design.md` 要求「至少问 10+ 问题」，那是网页交互环境的范式，**本仓库不适用**：本仓库常在 `-p` / workflow / 绿色版弱模型等**非交互**场景运行。本仓库节奏是「**开头合并问一轮、之后自主执行**」——能从文件/上下文推断的自己定，只把真正改变方向的少数问题一次性问完；非交互环境用 `AskUserQuestion` 的推荐项兜底，不要中途反复追问。

package/skills/ui-design/references/design-execution-playbook.md

@@ -0,0 +1,82 @@
+# 设计执行手册
+
+本手册用于约束“空白 AI”执行 `ui-design` 任务。它不是审美模板，而是强制流程：先形成设计判断，再写 HTML，再验证和评审。
+
+## 何时读取
+
+- 用户需求较空，只给了“做个页面”“科技风”“好看一点”等模糊目标。
+- 用户要求使用某个 VI 模板，或要求新增、迁移、测试视觉风格。
+- 任务包含网页、产品 UI、deck、设计画布、动画演示或多方案探索。
+- 执行者无法明确说明色彩、结构、字体、组件和验证策略。
+
+## 生成前必须写的设计执行声明
+
+在动手生成 HTML 前，用简短中文写出以下内容。可以很短，但不能省略关键判断。
+
+```md
+## 设计执行声明
+
+- 需求复述：这次要为谁、解决什么界面问题、输出什么 artifact。
+- 上下文来源：已读取哪些源码、截图、品牌资料、VI 模板或 reference；如果没有，写清楚假设。
+- 设计路线：从零设计 / 使用 VI 模板 / 延续现有 UI，并说明原因。
+- 视觉系统：主色、辅助色、背景、surface、边框、阴影、状态色各自承担什么角色。
+- 中文排版：标题长度、字号范围、行高、断行、正文密度和按钮触达策略。
+- 结构语言：首屏/主面板/卡片/状态/导航/行动区如何组织，为什么这样组织。
+- Tweaks 计划：暴露哪些真实有用的调节项，使用 `edits` 持久化。
+- 输出与验证：文件路径、静态检查、语言检查、浏览器截图和评审保存位置。
+```
+
+如果上述内容说不清，先不要写页面。缺少品牌、产品、受众、已有 UI 或内容时，先询问用户；若用户明确让你自行决定，写明假设并选择一个成熟 VI 或清晰原创方向。
+
+## VI 使用规则
+
+- 用户明确点名某个 VI 时，必须读取对应 `references/vi-*.md`。
+- 用户没有品牌但需要成熟方向时，可选择最匹配的 VI，并说明为什么选它。
+- 只迁移视觉 DNA，不复制模板示例内容、真实品牌、真实文案或专有 UI。
+- 不能只抄色值。必须同时迁移结构语言、视觉母题、组件气质、信息密度和适用边界。
+- 模板不匹配时不要硬套，应从零建立新的视觉系统，或建议新增 VI 模板。
+
+## 从零设计规则
+
+从零设计不是默认路线，而是最后手段。必须先确认没有可用设计系统、品牌资料、截图、源码或合适 VI。然后建立一个清楚的系统：
+
+- 定义 1 个主视觉比喻，例如“经线路径”“网络弧带”“金属参数面板”。
+- 定义 1 个主要结构骨架，例如“首屏价值 + 产品面板 + 状态证据 + 行动区”。
+- 定义 1 套色彩角色，而不是随意堆色。
+- 定义 2 到 4 个可复用组件，例如按钮、状态标签、指标卡、控制面板。
+- 避免默认 SaaS 套路、无意义数据、装饰性图标和占位假文。
+
+## 质量门槛
+
+交付前必须用截图回答这些问题：
+
+- 配色是否有主次、冷暖、明暗和状态区分，还是只有一层颜色——**图表数据系列是否可区分（别全是同一个品牌色，柱/饼/折线一眼分得开）、非背景插图/辅助图形是否被单一品牌色吞没**（配色解耦：VI 管底，图表/插图以内容为准）。
+- 中文标题是否自然断行，是否因为英文式排版显得挤、散或过粗。
+- **正文与图内文字（图表坐标轴/图例/标签、框图节点名）是否放映级可读**（deck 正文 ≥38px、≈1.5× 阶梯；别用网页 16px；任何非主标元素不得 ≥ 该页主标；屏上别低于 24px 导出下限），**图形是否够大装下文字不挤不裁**。
+- 字色在背景、渐变、玻璃或深色面板上是否清楚。**封面/章节文字在氛围底图（尤其浅色底图）上对比是否达标**——浅色模板首选「深字 + 浅色磨砂板」，别白字靠弱 scrim（浅底白字必糊）。
+- **每页文字与其背景对比是否达标（WCAG ≥4.5）**——浅底配深墨字、深底配白/浅字，**绝不深底深字/浅底浅字**（真机：深紫底黑字对比 ~1.1 全糊）。导出端【文字对比度不足】WARNING 提示（不硬拦，靠这条铁律在设计阶段写对）。
+- **上屏文案是否精炼、说人话**——用类比/例子把概念讲透（近似但好懂优于堆砌精确），没有把长定义硬塞一页导致顶出/缩字。
+- **所有可读文字都是真实 DOM 文本节点吗**——没有把可读文字写进 `::before/::after content` 或烧进背景图/HTML 图元（否则会被截图夹带、不可编辑、还可能与还原文本双层）；唯一例外是 AI 插图画面自带字。
+- **list/目录等稀疏页是否占满整宽**，没有内容挤在左/单列、右半大片空白。
+- **可拖结构是否用离散 HTML 元素搭**（架构层/流程节点/决策树/一排圆/卡片矩阵 = 每块一个 div，非整块 SVG）——否则导出后整组并成一张、节点不可单独调；SVG 只画连线/真矢量。
+- **卡片/选项卡/悬浮卡内部是否填实**（无大白卡装一句话、无图元挤一角旁大片留白）；**整页内容是否未高过画布**（无一列堆到 >1080 被裁）。
+- 结构是否能让用户第一眼知道产品、价值和下一步行动。
+- 每个数字、图标、模块是否有信息意义，是否存在数据噪音。
+- 移动端是否减少装饰并保持可读、可点、无横向溢出。
+- Tweaks 是否调节真实设计维度，而不是摆设。
+
+静态脚本只负责发现结构和协议问题；视觉质量必须通过截图和人工评审判断。
+
+## 评审结论格式
+
+```md
+## 评审结论
+
+- 指令对齐：是否满足用户目标、中文输出、指定 VI 和原创边界。
+- 视觉质量：配色、层级、字体、留白、组件完成度是否达到可展示水平。
+- 功能可用：响应式、按钮触达、Tweaks、deck/动画机制是否正常。
+- 风险与不足：哪里仍像模板、哪里过度装饰、哪里内容不够真实。
+- 下一轮建议：如果继续优化，优先改哪 1 到 3 件事。
+```
+
+如果评审结论里出现严重问题，应先修改 artifact，再复跑静态检查、语言检查和浏览器检查。