# Ardot HTML Prototype Converter

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

- Skill: `balabalabalading/ardot-html-prototype-converter` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add balabalabalading/ardot-html-prototype-converter`
- Raw SKILL.md: https://api.skillmd.com/api/skills/balabalabalading/ardot-html-prototype-converter/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: balabalabalading (https://skillmd.com/u/balabalabalading)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/balabalabalading/ardot-html-prototype-converter

---


# Ardot HTML 原型转换器

将浏览器中的真实业务状态重建为可维护、可编辑的 Ardot 页面。源证据优先于 Skill 默认值；项目约定优先于通用约定。

## 按需读取

1. 转换前读取 `references/workflow.md`。
2. 目标系统没有既有交接文档或 manifest、用户称其为全新系统、或系统简称无法直接映射到 HTML 时，读取 `references/system-discovery.md`，先完成系统发现与初始化。
3. 创建或修复页面时读取 `references/page-specs/common.md`，再只读取对应平台规范：
   - PC：按主体读取 `references/page-specs/pc-list-page.md`、`references/page-specs/pc-form-page.md`、`references/page-specs/pc-detail-page.md` 或 `references/page-specs/pc-report-page.md`；存在真实弹窗时追加 `references/page-specs/pc-dialog.md`。
   - 移动端：读取 `references/page-specs/mobile.md`。
4. 审查或交接时读取 `references/execution-checklist.md`；出现异常时再读取 `references/failure-modes.md`。

## 硬约束

- 创建 Ardot 节点前，必须通过 HTTP 服务用 Playwright 或等价浏览器流程渲染原型，并保存本批实际业务状态的 element JSON 与截图。
- 全新系统必须先从 Axure 导出的源页面树建立“源 page ID、页面名、HTML URL、完整菜单 path”映射，再识别系统范围和模块。不得仅因系统简称全文搜索无命中，或缺少既有交接文档、manifest、专属 sidepanel 组件，就判定原型不存在或要求用户手工列出全部页面。
- 规则优先级为：源状态证据 → 项目命名、设计和交接约定 → 本 Skill 的回退默认值。不得用通用默认值补造源稿不存在的区块、控件或状态。
- 页面使用 auto layout、命名容器和当前文件的本地组件；只建立本批需要的“业务角色 → component ID”最小映射，不跨文件硬编码 ID，也不用 Rectangle/Text 模拟交互控件。
- PC 与移动端分别遵循对应根结构。已有根节点本地 `AnnotationLayer` 实例原样保留，并从结构和业务语义校验中排除。
- 列数、字段分组、顺序、样例值和信息层级以源证据为准。无法可靠实现时标记 `needs_rebuild` 或 `blocked`，不得压缩、隐藏或伪造内容后标记完成。
- `completed` 必须同时通过结构、语义和视觉验证；`capture_layout` 只证明现有节点的几何状态。视觉通过以内容完整、层级和主要布局一致、无裁切重叠、文字可读为准，除非项目明确要求像素级还原。
- 每个系统使用独立 manifest。页面完成后更新对应记录；人工交接文档按批次更新，不在每个状态重复抄写 manifest。
- 控制上下文：优先读取 compact manifest、状态摘要、最小组件映射和单页证据；不常规输出 `document.js`、全量 HTML、完整组件库或整页实例子树。
- 通用 Skill 仓库只保存参数化规则、脚本和占位模板；项目业务数据、真实 ID 与证据保存在外部 `--project-root` 或被忽略的 `.local/`。

## 执行策略

- 先判定“已有系统续做”或“全新系统初始化”。已有系统以当前 manifest 和交接为入口；全新系统按 `references/system-discovery.md` 自动发现页面树、系统边界和模块，再初始化项目记录。
- 先按结构签名选择代表样板；只有根结构、区块组合或交互模型真正变化时才增加新样板。
- 已知存在跨页节点失效、或项目明确要求时使用严格单页事务；其他环境可用小批次，但不得先创建大量空 page 后集中补建和取证。
- 每个状态保留源证据与 Ardot 证据。批量视觉检查使用 `scripts/build_visual_review_sheet.js`，同一图片只查看一次，异常项再展开原图。
- 修改保持最小、可解释、可回滚；重建页通过三层验证后，才删除本轮明确创建的废弃页。