# Ardot Html Prototype Converter

> 将 Axure 或 HTML 原型导出物转换为可编辑的 Ardot 原型文件，并审查或修复已有 Ardot 页面。适用于 PC 与移动端 HTML/Axure 转 Ardot、PC 弹窗状态平铺、移动端多状态与长页重建、本地组件库和 sidepanel 复用、table column 表格、状态级证据、manifest 交接及结构/语义/视觉验证。

- **Type:** Skill
- **Install:** `agentstack add skill-balabalabalading-ardot-html-prototype-converter-ardot-html-prototype-converter`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [balabalabalading](https://agentstack.voostack.com/s/balabalabalading)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [balabalabalading](https://github.com/balabalabalading)
- **Source:** https://github.com/balabalabalading/ardot-html-prototype-converter

## Install

```sh
agentstack add skill-balabalabalading-ardot-html-prototype-converter-ardot-html-prototype-converter
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Ardot HTML 原型转换器

将 HTML 原型按业务结构重建为可维护、可编辑的 Ardot 页面。不要逐像素搬运 DOM，也不要只凭页面名、静态 HTML 或一张截图猜测内容。

## 必读顺序

1. 任何转换前读取 `references/workflow.md`。
2. 创建或修复页面前读取 `references/page-specs/common.md`。
3. 判断平台后只读取对应规范：
   - PC 列表页：`references/page-specs/pc-list-page.md`
   - PC 表单页：`references/page-specs/pc-form-page.md`
   - PC 详情页：`references/page-specs/pc-detail-page.md`
   - PC 报表页：`references/page-specs/pc-report-page.md`
   - PC 页面存在真实弹窗状态时，追加读取：`references/page-specs/pc-dialog.md`
   - 移动端页面：`references/page-specs/mobile.md`
4. 审查、修复、批量交接或接手已有产物时，再读取 `references/execution-checklist.md` 和 `references/failure-modes.md`。

## 平台分流

- PC 普通页面排除可选 `AnnotationLayer` 批注实例后，只保留一个 `PageFrame`。存在浏览器证据可证明的真实弹窗状态时，允许在同一 page 横向平铺 `PageFrame/默认` 与一个或多个 `PageFrame/`；详细结构以 `pc-dialog.md` 为准。
- 移动端一个 Axure 页面对应一个 Ardot page；排除可选 `AnnotationLayer` 批注实例后，page 根节点可按状态平铺多个 `Screen/`，不使用 PC sidepanel。完整结构与验收规则以 `mobile.md` 为准。
- 不确定平台时先从渲染宽度、导航模型和页面主体判断，并把决定记录到系统 manifest；不要混用两套根结构。

## 不可违反的规则

- 创建 Ardot 节点前，必须通过 HTTP 服务用 Playwright 或等价浏览器流程渲染原型。
- element JSON 和截图必须覆盖实际业务状态。移动端的 Tab、分步表单、弹窗、单位切换和动态面板按状态分别取证。
- 最终 Ardot 页面使用 auto layout、命名容器和本地组件，不按 DOM 绝对坐标散堆节点。
- 页面命名优先执行项目级约定；项目未约定时使用解析后的完整菜单 path，一个文件对应一个系统时省略系统层级。
- 组件和变量 ID 仅在当前 Ardot 文件内有效。先读取本地组件库，再整理最小组件映射。
- 页面根节点中的批注只识别主组件为当前文件本地 `AnnotationLayer` 的实例。结构、业务文本和语义校验先排除该实例及其后代；原样保留已有实例，不生成、修改、移动或删除。裸 `Text`、Rectangle 或普通 Frame 不享受此例外。
- `Content` 保持普通可编辑 frame；PC `Content` 垂直 padding 必须为 `0`，水平 padding 默认为 `24`；常用控件使用当前文件的本地组件实例。
- PC 弹窗状态必须使用独立的标准尺寸 PageFrame，不复制或继承宽表默认态的自适应宽度。其 `Content` 可以为空，但仅作为尺寸基准；必须同时存在源弹窗证据、已启用「忽略自动布局」的 `ModalLayer` 和可见 `Dialog`。普通 PC 状态的空 `Content` 仍然失败。
- PC 表格使用 `Table -> table column 组件实例`，不得改成 `TableRow -> Cell`。
- 除 `pc-dialog.md` 明确允许的弹窗评审态空 Content 外，不得隐藏、压缩、省略业务内容或用展示覆盖层伪造可验收截图；弹窗页的完整默认态仍必须保留全部业务内容。
- 列数、字段分组、顺序和信息层级以源稿为准；组件不适配时调整或新增本地组件，不能改布局迁就组件。无法实现时标记 `needs_rebuild` 或 `blocked` 并说明原因，不得标记 `completed`。
- `capture_layout` 只用于结构检查，不能单独证明页面完成。`completed` 必须同时通过结构、语义和视觉验证。
- 多页面批次按单页事务执行：创建 page 时选中它，在切换下一页前完成构建、回读、布局检查、画面节点截图和 manifest 更新；不要先批量创建空 page。
- 每个系统使用独立 manifest。PC 弹窗页面可在既有页面记录中增加可选 `states[]`，接口见 `pc-dialog.md`；移动端采用状态级 manifest v2，接口见 `mobile.md`。
- 通用 Skill 仓库只保存参数化规则、脚本和占位模板。项目专属 Axure HTML、业务数据、真实 ID、截图和证据必须保存在外部 `--project-root` 或被 Git 忽略的 `.local/`，不得写入公开仓库。
- 控制上下文：优先读取 compact page manifest、状态摘要、组件映射和单页证据，不常规输出压缩 `document.js`、全量 HTML 或完整组件子树。

## 执行方式

每批先完成一种页面类型的样板。样板通过结构、语义和视觉验证后才能复用；每个页面或状态仍需使用自己的源证据。完成一个页面或状态后立即更新 manifest 和交接记录。

公开发布或交接本 Skill 仓库前，运行 `node scripts/audit_public_repo.js --repo-root .`；项目专属敏感词只写入被忽略的 `.local/audit-policy.json`。

遇到截图、组件或状态异常时，只做最小、可解释、可回滚的修正；按 `failure-modes.md` 排查，无法定位时停止并汇报证据和节点 ID。

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [balabalabalading](https://github.com/balabalabalading)
- **Source:** [balabalabalading/ardot-html-prototype-converter](https://github.com/balabalabalading/ardot-html-prototype-converter)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-balabalabalading-ardot-html-prototype-converter-ardot-html-prototype-converter
- Seller: https://agentstack.voostack.com/s/balabalabalading
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.