Ardot 展示区自动编排

要解决的问题

在设计评审和展示流程中，将多个画板快速编排为结构化展示区是常见需求，例如多状态页面对照、设计评审看板或多端组件矩阵。手动分组、布局和添加标题栏不仅耗时，还可能破坏原有画板结构或意外覆盖已有内容。ardot-showcase-autolayout 旨在自动化这一过程，确保排版一致且高效。

技能如何工作

该技能通过以下核心能力实现自动编排：

• 自动分组：基于画板命名和内容语义，智能判断分组方式，如按状态、设备或模块。
• 布局轴向选择：综合原始排布意图、尺寸阈值和语义评分，决定使用 ROW（横排）、COLUMN（竖排）或 MATRIX（矩阵）布局，避免生成超长横排。
• 骨架生成与主题应用：生成标题栏、分组框和单元格小标题，并内置 4 套主题（如暗色评审、亮色评审），通过自然语言一键切换。
• 智能放置：调用 locate_available_space 在画布中寻找空位，确保新骨架与现有画板间距至少 400px，不覆盖任何已有元素。

关键工作流程包括：

1. 输入确定：优先使用当前 Ardot 选中的画板或上一步生成的 nodeId；若读取失败，仅询问一次。
2. 场景理解与分组：先确定分组逻辑，若无法推断则提供 2–4 个选项（如「保持原样」或「自定义」）让用户确认。
3. 布局决策：通过评分规则选择最佳轴向，确保可读性和结构合理性。
4. 生成与校验：使用 mcp__ardot-design__batch_edit 生成骨架，通过 batch_read 验证质量（如分隔线高度），最后截图预览并返回 Ardot 链接。

适用边界与注意点

该技能适用于：

• 多状态页面对照：如登录流程的不同屏幕，分组明确时可自动处理。
• 设计评审看板：快速生成带标题的展示区，适合团队评审。
• 多端组件矩阵：例如 mobile 和 desktop 变体对照，使用 MATRIX 布局。
• 跨模块带分隔线：在模块间插入自动撑满的分隔线，保持结构清晰。

但不处理以下情况：

• 生成画板内部 UI 元素（如按钮或图标）。
• 导出为 PDF 或 PNG 文件。
• 跨多个 Ardot 文件进行编排。
• 评估业务方案的好坏。

使用时需确保 Ardot MCP 已连接（命名空间 mcp__ardot-design__），并选中目标画板。调整布局可通过自然语言指令（如「白底 / 竖排」）灵活修改，遵循质量门禁以确保输出符合规范。