← 返回
未分类

ardot-showcase-autolayout

用于在 Ardot 中把多个已有画板自动编排成可交付的衍生展示区 / showcase board。适合多状态页面对照、设计评审看板、流程演示、角色/设备矩阵、设计师向 PM 或研发交付单个 Ardot 链接的场景。也可作为 CodeBuddy + Ardot AI 设计工作流的收尾节点:当 AI 完成 UI 生成后,引用本技能可将零散画板自动组织成一个结构化、可直接交付的展示区,生成 Ardot 链接供产品/研发评审。This skill should be used when arranging multiple existing ardot canvases into a clean, deliverable showcase / overview / review board; it builds the surrounding layout skeleton, decides row/column/matrix axis, and auto-places the board without overlap. Also triggers as the final step in
用于在 Ardot 中把多个已有画板自动编排成可交付的衍生展示区。适合多状态对照、设计评审看板、流程演示、角色/设备矩阵。也可作为 CodeBuddy + Ardot AI 设计工作流的收尾节点,将 AI 生成的零散画板自动整理成结构化展示区并输出可分享链接。
kaka king
未分类 community v1.0.9 10 版本 100000 Key: 无需
★ 1
Stars
📥 312
下载
💾 0
安装
10
版本
#latest

概述

衍生展示区自动编排

10 秒上手

前提:已连接 Ardot MCP,并在 Ardot 里打开目标文件。

典型用法

  • 在 Ardot 里选中几个画板或一个 page,说「把选中的画板用这个技能重新排版」。
  • agent 刚生成一批 Ardot 画板后,说「顺便用这个技能规范化排版」。
  • 直接说「把这几个画板排成评审展示区,发我链接」。

技能做什么:自动排版 → 标题栏 + 分组 + 单元格小标题 → 找空位放置(不覆盖已有画板)→ 截图预览 → 返回 Ardot 链接。

想调整时直接说:「白底 / 灰底 / 演示模式」「竖排 / 矩阵」「按设备分组」「日期写 X」。

适用与边界

适合多状态页面对照、设计评审看板、流程演示、角色/设备矩阵,以及 AI 设计工作流的收尾整理。

不处理:生成画板内部 UI、导出 PDF/PNG、跨多个 Ardot 文件编排、判断业务方案好坏。

四步工作流

Step 1   确定输入画板 + 目标页面
Step 1.5 场景理解与分组确认
Step 2   判断布局轴向
Step 3   生成骨架 + 校验 + 截图 + 返回链接

Step 1 — 确定输入画板 + 目标页面

输入源优先级:

  1. 当前 Ardot selection(最常见)。
  2. agent 上一步刚生成的 nodeId 列表。
  3. 用户显式提供的 nodeId / page。

输出位置默认当前页面。若读取不到文件、页面或 selection,只问一次:「请在 Ardot 里选中要排版的画板,或告诉我 nodeId / 目标页面。」环境依赖见 references/dependencies.md

Step 1.5 — 场景理解与分组确认

先解决「谁和谁是一组」,再决定「怎么排」。仅凭尺寸、命名或坐标推断分组属于拍脑袋。

满足以下全部条件可直接沿用原结构:用户已明确分组;入口节点已有清晰容器语义;不存在多种合理解释。否则必须给 2-4 个分组选项,并包含「保持原样」和「自定义」。详情见 references/scene-grouping.md

Step 2 — 判断布局轴向

先看原始画布是否已有明确排布意图,再用尺寸评分选择 ROW / COLUMN / MATRIX:

  • 原始内容已明显竖排,或横排会生成超长展示区时,优先 COLUMN / MATRIX。
  • 整页多状态默认 ROW,但必须通过宽高阈值校验;超过阈值不继续硬横排。
  • 裸组件、组件目录、多维内容按 references/layout-decision-tree.md 的评分规则选择。

不要只按内容类型拍板。详细决策树见 references/layout-decision-tree.md

Step 3 — 生成骨架并放置

  1. 先通过 references/quality-harness.md 的不可触犯契约:不能超宽/超长、不能覆盖已有画布、不能交付未校验结果。
  2. references/skeleton-spec.md §4 计算 outer 尺寸。
  3. 调用 locate_available_spacepadding >= 400,严禁手写坐标。
  4. 使用 batch_edit({ operations: ... }) 生成结构,不使用旧版 edits[]
  5. 生成前仅在覆盖旧展示区、同名展示区已存在、或单次大量写入时确认一次;普通新增展示区不额外确认。
  6. 生成后用 batch_read 校验尺寸、对齐、token、divider、主题对比度。
  7. 调用 capture_screenshot 展示预览,并返回 Ardot 链接。

骨架数值、对齐硬契约、mini-title、column divider、Reject Signals 统一维护在 references/skeleton-spec.md

关键门禁

交付前至少通过以下 5 项;完整 19 条见 references/skeleton-spec.md §7。

  1. 分组已确认或满足跳过条件,没有打散原始结构。
  2. 已调用 locate_available_space,且没有覆盖/贴边已有画板。
  3. 布局轴向已通过原始排布 + 尺寸阈值 + 语义评分校验,没有生成超长横排。
  4. Titlebar / subtitle / group / cell row 左边缘对齐,主题对比度可读。
  5. 命名、日期、subtitle、mini-title、outer 100px 圆角符合规范。

出错时不要抛原始 API 报错,要翻译成「发生了什么 + 用户该做什么」。恢复策略见 references/quality-harness.md

参考文件

按需读取,不必预读:

  • references/dependencies.md:Ardot MCP 依赖与环境排查。
  • references/scene-grouping.md:Step 1.5 分组确认方法。
  • references/layout-decision-tree.md:ROW / COLUMN / MATRIX 判断。
  • references/skeleton-spec.md:骨架数值合同、对齐、Reject Signals。
  • references/naming-conventions.md:outer 名称、titlebar、subtitle、mini-title 文案。
  • references/presets.md:主题 preset、自然语言切换与对比度。
  • references/ardot-api-cheatsheet.md:Ardot MCP 调用速查。
  • references/quality-harness.md:运行恢复与发布前 smoke tests。
  • references/faq.md:完整常见问题。
  • references/examples.md:完整示例。
  • assets/preset-config.json:实际主题数值配置,生成前必须读取。

版本历史

版本号以本章为单一来源,须与 assets/preset-config.json$version、发布包文件名、SkillHub 发布版本保持一致。

v1.0.8 (2026-06-24)

  • 修复 当前发布应基于 SkillHub 已有 1.0.7 递增,统一版本为 1.0.8
  • 新增 不可触犯契约:禁止超宽/超长画布、禁止覆盖已有画布、禁止交付未校验结果
  • 优化 发包命名规则为 skill-name-version.zip,发布包使用 ardot-showcase-autolayout-1.0.8.zip

v1.0.7 (2026-06-24)

  • 新增 智能布局评分:结合原始排布、尺寸阈值、语义适配和超长风险判断 ROW / COLUMN / MATRIX
  • 新增 outer frame 默认 100px 圆角,写入所有 preset 的 outer.cornerRadius
  • 优化 subtitle 模板为「客户端 · 链路/设计稿说明」,不再写「N 屏对照」类数量信息
  • 修复 type:"ref" 仅适用于 component,普通 FRAME 画板必须用 Copy(C);cheatsheet 改为「先判断是否组件」决策流
  • 新增 dependencies 增加 NO_ADAPTER 命名空间回退(ardot ↔ ardot-design)与 padding 语法约束(不接受简写字符串)
  • 修复 assets/preset-config.json$version 同步为 1.0.7

v1.0.6 (2026-06-23)

  • 修复 版本号多处不一致问题,统一 frontmatter / preset-config / 发布包 / 发布页为同一版本号
  • 新增 dependencies / naming-conventions / faq / examples 拆分文档
  • 优化 SKILL.md 为入口路由,正文只保留工作流概览和关键决策点

v1.0.5 (2026-06-23)

  • 修正 batch_edit 调用文档为当前 Ardot MCP 的 operations 字符串语法
  • 优化 以「质量门禁」方式整合失败恢复、FAQ、发布前 smoke tests

v1.0.4 (2026-06-17)

  • 新增 灰底护眼主题 gray-review
  • 新增 $themeAliases 自然语言主题切换
  • 修复 标题与内容左边缘不对齐的对齐硬契约

v1.0.3 (2026-05-26)

  • 新增 Step 1.5 场景理解与分组确认
  • 新增 references/scene-grouping.md

v1.0.2 (2026-05-20)

  • 优化 全部文档中文化,移除项目专属内容
  • 优化 重命名为 ardot-showcase-autolayout

版本历史

共 10 个版本

  • v1.0.9 修复 column divider 在不同高度卡片间只显示上半段的问题。 当前
    2026-07-01 16:09 安全 安全
  • v1.0.8 本轮从省 token 角度审视后,仅做低风险优化:移除 preset-config.json 中冗余说明字段($comment / $description / displayName),保留全部生成所需配置与质量契约,不牺牲最终生成质量。
    2026-06-24 14:17 安全 安全
  • v1.0.7 本版将主文档瘦身为 5000 字符以内,并拆分命名规范、FAQ、依赖说明和示例,提升规范性与可维护性。
    2026-06-23 12:32 安全 安全
  • v1.0.6 修正 Ardot MCP 调用格式,并以质量门禁方式整合失败恢复、FAQ 与发布前检查,提升技能可靠性与规范性,同时保持包结构精简。
    2026-06-23 10:43 安全 安全
  • v1.0.5 修复已知问题,增强稳定性与易用性,支持一句话精细调整排版。
    2026-06-22 22:29 安全 安全
  • v1.0.4 修正触发场景为「选中画板/page 后调用」,新增出错提示翻译表与 FAQ 高频索引,提升可靠性与规范性。
    2026-06-17 13:01 安全 安全
  • v1.0.3 扩充 API 常见错误诊断(10 条);增加 MATRIX 布局完整示例;新增常见问题 FAQ 章节
    2026-06-17 12:18 安全 安全
  • v1.0.2 新增 灰底护眼主题(gray-review),适合不想要纯黑/纯白的中性底展示 新增 自然语言切主题:说「白底」「灰底」「深色」「演示」自动识别,无需记 preset 名 修复 标题与内容左边缘不对齐(标题「歪掉」)的布局 bug 优化 切换主题时文字颜色自动联动,不会出现白底白字或灰底浅字
    2026-06-17 11:58 安全 安全
  • v1.0.1 把"猜分组"从 skill 里彻底拿掉。轴向决策(Step 2)只解决"怎么排",分组语义必须先在 Step 1.5 跟用户确认。
    2026-05-25 17:05 安全 安全
  • v1.0.0 Initial release
    2026-05-21 13:24 安全 安全

安全检测

腾讯云安全 (Keen)

安全,无风险
查看报告

腾讯云安全 (Sanbu)

安全,无风险
查看报告

🔗 相关推荐

design-media

Nano Banana Pro

steipete
使用 Nano Banana Pro (Gemini 3 Pro Image) 生成或编辑图像。支持文生图、图生图及 1K/2K/4K 分辨率,适用于图像创建、修改及编辑请求,使用 --input-image 指定输入图像。
★ 438 📥 118,553
design-media

Openai Whisper

steipete
使用 Whisper CLI 进行本地语音转文字(无需 API 密钥)
★ 337 📥 95,232
design-media

UI/UX Pro Max

xobi667
提供 UI/UX 设计智能与实现指导,帮助打造精美界面。适用于 UI 设计、UX 流程、信息架构、视觉风格、设计系统/标记、组件规格、文案/微文案、无障碍及前端 UI(HTML/CSS/JS、React、Next.js、Vue、Svelte
★ 233 📥 49,840