Ardot Showcase Auto Layout

Problems It Solves

In design review and presentation workflows, quickly organizing multiple frames into structured showcase areas is a common need, such as multi-state page comparisons, design review boards, or multi-device component matrices. Manual grouping, layout, and title-bar addition are time-consuming and risk disrupting existing frame structures or accidentally overlapping content. ardot-showcase-autolayout aims to automate this process for consistent and efficient layout.

How the Skill Works

The skill achieves automatic arrangement through the following core capabilities:

• Automatic Grouping: Intelligently determines grouping based on frame naming and content semantics, such as by state, device, or module.
• Layout Axis Selection: Comprehensively evaluates original arrangement intent, size thresholds, and semantic scoring to decide between ROW (horizontal), COLUMN (vertical), or MATRIX layout, avoiding overly long horizontal layouts.
• Skeleton Generation and Theme Application: Generates title bars, group frames, and cell subtitles, with 4 built-in themes (e.g., dark review, bright review) switchable via natural language.
• Smart Placement: Uses locate_available_space to find empty slots on the canvas, ensuring new skeletons are at least 400px away from existing frames and never overlap them.

The key workflow includes:
1. Input Determination: Prioritizes currently selected frames in Ardot or nodeIds from previous steps; if unreadable, asks only once.
2. Scene Understanding and Grouping: First determines grouping logic; if ambiguous, provides 2–4 options (e.g., "keep original" or "custom") for user confirmation.
3. Layout Decision: Selects the best axis through scoring rules to ensure readability and structural reasonableness.
4. Generation and Validation: Uses mcp__ardot-design__batch_edit to generate the skeleton, validates quality via batch_read (e.g., divider height), and finally captures a screenshot preview and returns an Ardot link.

Applicable Boundaries and Considerations

This skill is suitable for:
- Multi-state page comparisons: Like different screens of a login flow; can process automatically if grouping is clear.
- Design review boards: Quickly generating titled showcase areas for team reviews.
- Multi-device component matrices: Such as mobile and desktop variant comparisons, using MATRIX layout.
- Cross-module with dividers: Inserting auto-filling dividers between modules to maintain clear structure.

However, it does not handle:
- Generating UI elements inside frames (e.g., buttons or icons).
- Exporting to PDF or PNG files.
- Arranging across multiple Ardot files.
- Evaluating the quality of business solutions.

Ensure Ardot MCP is connected (namespace mcp__ardot-design__) and target frames are selected. Adjustments to layout can be made via natural language commands (e.g., "white background / vertical"), and quality gates are followed to ensure outputs meet specifications.