用途
CI Mockup Figure 用于为论文和提案创建配图，核心目标是制作空间高效、信息密集的图，以最小页面面积传达系统设计、方法流程或架构流程图。它适用于研究论文（方法概览、架构图、流程流程图）、提案（NSF、NIH、DOE 等）、技术报告或演示文稿，尤其适合需要展示多组件结构、数据流或分步方法，且评审者会评估设计是否可信、构思是否完善的场景。
主要能力
该技能提供三条配图路径：
- HTML 模拟图路径：适用于 UI 模拟、仪表盘、时间线，以及内容为矩形、无跨节点箭头的图。流程为构建交互式 HTML、截取屏幕截图、插入 LaTeX。
- README / Markdown 主图路径：使用相同的 HTML 构建阶段，但通过无头 Chrome 截取为 PNG，并作为 Markdown 图片嵌入，引用 assets/fig.png。要求更大的字号、更高的内容密度和一个主导焦点元素。
- 抽象图路径：适用于架构概览、依赖拓扑，以及任何需要在非相邻节点之间进行箭头路由的图。使用 TikZ、skia-canvas 或 Illustrator ExtendScript。
技能还包含设计原则、空间预算建议、预检清单，以及针对抽象/架构图的设计规范。
使用方式
对于论文和提案的解释性图，尤其是概览和图 1，需通过常规技能查找解析 editable-figure，并阅读其 references/gallery/index.md 及相关图片和反馈。在设计简报和实现中应用选定的偏好维度，在喜欢时保留有意义的技术细节和领域图像。使用其持久更新程序处理新反馈。对于这些图，已确认的偏好会覆盖下方冲突的默认值。
HTML 与 TikZ 的选择取决于图是否需要在非相邻节点之间进行箭头路由。HTML 适合系统模拟、仪表盘、甘特图/时间线，以及内容本质为矩形且自然流动的图。TikZ 适合抽象框架图、依赖拓扑和架构概览，其中箭头必须在非相邻节点之间路由（L 形、曲线、跨行）。skia-canvas（Node.js）适合需要 TikZ 的箭头路由控制但希望更快迭代和更丰富视觉样式的场景。
HTML 模拟图严格优于 AI 生成图像，用于系统和方法的图。AI 图像生成仅适用于艺术/概念性概览图。
对于甘特图/时间线，HTML 也优于 PowerPoint。
适用场景
- 文档描述多组件系统或多步骤方法
- 抽象流程图显得通用，无法区分工作
- 图需要展示架构结构、数据流或方法流程，带有真实标签
- 协作者需要可交互的内容来反馈和迭代
- 文档有页数限制，图需要空间高效
- 需要时间线/甘特图用于工作计划或项目概览
限制
- 不适用于实验结果图（图表、表格、消融曲线），应使用 Python（matplotlib、seaborn、plotly）或 LaTeX（pgfplots、tikz）。
- 抽象框架图若需要跨节点箭头路由，HTML/CSS 不适合，应使用抽象图工具链。
- 不推荐使用 D2、Graphviz、matplotlib 制作此类图。
- 具体收费、价格、平台支持等信息暂未提供。