Ardot Website Workflow
Overview
本 skill 封装一条经过实战验证的完整建站流水线，分两大阶段：
- 阶段一：Ardot 设计稿——确认需求 → 选模板 DNA → 定义设计系统 → 规划页面结构 → 创建设计稿 → 上传并挂载图片素材 → 布局校验修复。
- 阶段二：设计稿 → HTML 交付——导出图片素材 → 建项目目录 → 设计 token 转 CSS 变量 → 单文件 HTML（内联 CSS/JS、响应式、动效、无障碍）→ 浏览器预览交付。
详细踩坑记录（必须遵守）见 references/ardot-pitfalls.md；HTML 交付标准（token 映射、断点、交互、无障碍清单）见 references/html-delivery-standard.md。开始工作前先读取这两个文件。
阶段一：Ardot 设计稿
Step 1 需求确认
与用户确认（缺项时按合理假设处理并在回复中说明）：
- 主题与内容来源：网站主题、文案/资料来源（如百科词条）、用户提供的照片数量与用途。
- 模板 DNA：以哪个模板为底（如"黑色个性设计师网站模板"），保留其结构基因，替换为定制配色与内容。
- 交付策略：默认"单 HTML 文件 · 响应式重排 · 滚动动效 + 导航锚点"。
Step 2 定义设计系统
在动手前先落成一份设计系统，避免边画边改：
- 背景层次：主背景 / 交替区块 / 数据带 / 卡片面 / 分隔线，共 4–5 个深浅档（暗色模板示例：
#0A0A0C/#101014/#0D0D11/#16161B/ 边框 白 8%）。 - 双色点睛：行动色（CTA、eyebrow、日期）与成就色（数字）分离，各承担一种语义（示例：行动色
#F9004D，成就色#FDB927）。 - 字体体系：英文标题与数字用强显示字体（如 Anton），中文用 Noto Sans SC，小标签用 Inter SemiBold + letterSpacing 3。
- 正文灰阶：正文
#989BA6/ 弱化#5E6270。
Step 3 规划页面结构
按 1440 宽设计，先列出分段清单（典型 8–10 段）：
Header → Hero（照片背景+渐变遮罩）→ About（照片+标签+里程碑）→ 荣誉/作品卡片 → Stats 数据带 → 精选内容渐变卡 → Quote 引用带 → Legacy/档案卡 → Contact（左文右表单）→ Footer。
每段先定布局类型（全幅 / 栅格 / 左右分栏），再填内容。
Step 4 创建设计稿并挂载图片
- 用 Ardot 工具创建设计文件，逐段搭建，每段完成后用
capture_layout(problemsOnly:true)检查告警（如Outside parent bounds）。 - 用户提供的照片先复制到工作目录并改名为 ASCII 文件名，再通过
register_assets上传（上传细节与坑见references/ardot-pitfalls.md第 2、3 条，务必照做）。 - 全幅照片背景层若用
layoutPositioning: "ABSOLUTE"，注意父级 padding 偏移问题（见 pitfalls 第 1 条）。 - SVG 装饰元素（图标、引号等）不导出文件，直接内联到设计稿/最终 HTML 中。
Step 5 设计稿验收
- 用
capture_layout确认零告警。 - 向用户展示设计稿，确认设计系统与内容无误后再进入阶段二。
阶段二：设计稿 → HTML 交付
Step 1 建项目目录并导出素材
- 在工作区建
<project-name>/目录，内含index.html与assets/images/。 - 用
export_nodes导出需要的位图节点——该工具没有outputDir参数，返回的是远程 URL 映射（key = nodeId），需用 curl 逐个下载到assets/images/（下载与命名规范见references/ardot-pitfalls.md）。 - 装饰性 SVG 直接内联进 HTML，不落盘。
Step 2 设计 token → CSS 变量
在设计稿颜色值转 CSS 时：hex = round(float * 255)。将设计系统的全部颜色落成 :root CSS 变量（命名语义化：--bg-main / --bg-alt / --bg-band / --card-face / --accent / --achievement / --text-body / --text-muted / --divider）。
Step 3 生成单文件 HTML
按 references/html-delivery-standard.md 的完整清单执行，核心要求：
- 单 HTML 文件，内联全部 CSS/JS，无构建依赖，双击可开。
- 响应式断点（默认：1360 / 1180 / 980 / 860 / 520）。
- 交互：吸顶头部 blur、IntersectionObserver 滚动入场（同组错开 90ms）、数字 countUp（easeOutCubic 1.4s）、标签切换（含键盘 ←/→）、导航滚动高亮（rootMargin -45%/-50%）、表单校验。
- 无障碍：tablist/aria 属性完整、无悬空锚点、
prefers-reduced-motion下关闭动效。
Step 4 交付
用 present_files 打开 index.html 预览，并附项目目录说明（HTML + 图片目录结构）。
Resources
references/ardot-pitfalls.md— Ardot 布局偏移、register_assets 上传、export_nodes 下载三大坑的详细规避方案（每次执行流程前必读）。references/html-delivery-standard.md— HTML 交付标准：token 映射、断点、交互、无障碍清单。
