ardot海报设计

概述

〇、启动方式

• 加载本技能后，首条消息输入「执行」即启动（唯一入口）。
• 若用户先发别的，只回一句：“请发送「执行」启动本技能。”

〇〇、交互铁律（强制模型遵守）

1. 顺序不可颠倒、一步一问：先自动检测前置（Chrome 调试端口 / playwright-core / Node 路径）——就绪即静默通过、不弹卡，不就绪才弹卡处理；再问业务文案与输出目录；每次只推进当前一步，不跳步、不提前问后续参数。选完模式后必须先确认海报风格，禁止模型自行默认风格。 收文案时，先让用户提供原文案，之后才单独确认是否优化/扩写——不得抢先推荐自动扩写。
2. 全程选项卡交互，禁止自然语言索要：凡需用户提供信息或选择，必须用交互式选项卡（AskUserQuestion），2~4 个选项；文本类（Node 路径、文案、输出目录）给「在下方输入框填写」选项。严禁「请把 X 发我」这类自然语言讨要。
3. 全面脱敏：技能内不得出现真实邮箱、手机号、授权码、密钥、姓名、含用户名的路径；一律用 C:/Users/用户名/... 占位符。
4. 能力对齐：技能描述的执行路径必须与底层脚本/MCP 实际能力一致；脚本依赖一律走环境变量（PLAYWRIGHT_CORE_PATH / NODE_PATH），缺失即明确报错，不写死任何机器专属路径。

〇〇〇、引导流程（每步等用户回复再继续）

• 第 0 步 · 前置检测（自动进行；就绪即静默通过，不打扰用户）：
  • 模型先自动检测：① Chrome 调试端口是否存活（4:3→9222，3:4→9223，如 curl -s http://127.0.0.1:9223/json/version 返回含 webSocketDebuggerUrl）；② playwright-core 是否可解析（默认试 C:/Users/用户名/.workbuddy/binaries/node/workspace/node_modules 或环境变量 NODE_PATH / PLAYWRIGHT_CORE_PATH）。
  • 两项都就绪 → 不弹卡片、不询问，直接进入第 1 步。
  • 仅当检测不通过时才弹选项卡处理，例如：「改用其他 Node 路径」（在下方输入框填写）/「我用自己 Chrome（手动给调试端口）」/「帮我把 Chrome 用调试端口拉起」。处理完再继续。
  • 若需用户提供 Node 路径，模型运行时将其设为 NODE_PATH（或 PLAYWRIGHT_CORE_PATH）。
• 第 1 步 · 选模式：选项卡选 A 企业海报（4:3）或 B 小红书插画（3:4）。此步只定画布比例，不定视觉风格。
• 第 2 步 · 海报风格确认/填写（必须先问，禁止模型自行默认）：
  • 用选项卡让用户确认或指定视觉风格，不得由模型自行默认（例如不得未经确认就定为「手绘」）。
  • 选项示例：手绘温暖风 / 扁平矢量插画 / 科技暗色 / 商务简约 / 「在下方输入框填写自定义风格」（国潮、3D、杂志风等）。
  • 若所选模式自带默认风格（B 模式默认手绘），也要明确告知并请用户确认，而不是直接采用；用户改选其它风格时按其要求执行。
  • 风格确认后，再定结构模板（A 模式用 assets/poster_template.html；B 模式在 B1/B2/B3 中由模型按内容建议、经用户确认后使用）。
• 第 3 步 · 收文案（必须先让用户提供，禁止抢先推荐自动扩写）：
  • 用「在下方输入框填写」的选项卡，优先请用户提供海报文案（主题 + 内容）；B 模式额外让用户选行业配色。
  • 给出结构化填写模板（行业/部门、主标题、痛点、3 个价值点、标语），但用户提供文案前，不得默认或推荐走「自动扩写」。
  • 若用户暂时没有文案：先说明可「在卡片内填写」或只给主题由模型协助梳理，然后再弹同一张卡，不得替用户提前扩写。
• 第 4 步 · 文案优化确认（拿到用户文案后再弹此卡）：用选项卡确认是否需要基于用户文案做优化/扩写：
  • 「不需要，按原文案设计」→ 直接以用户文案套版式，不改字。
  • 「需要，帮我优化/扩写」→ 保留用户核心信息，做便于生图排版的优化（控制字长、拆行、补齐价值点、润色标语），改完先回读给用户确认再进入排版。
• 第 5 步 · 输出目录确认：选项卡确认输出目录（默认 C:/Users/用户名/Desktop/poster-export/<行业_部门>），可填写。再弹确认卡后才写入。
• 第 6 步 · 执行：参数齐备，按已选模式 + 已确认风格套版式契约写 build.html，运行对应渲染脚本，逐条打印进度（PNG/PDF 路径、字节数）。
• 第 7 步 · 汇报：告知完整本地绝对路径 + 可点击 HTTP 8123 链接；提示「模型不能读图，请自行预览」与校验要点（PNG≥150KB、PDF≥80KB）。

一、概述

本技能把两类高频海报做成可复用的统一版式，核心思路是「版式契约 + 本地重绘 fallback」：

• 优先路径：Ardot MCP（create_design / batch_edit / export_nodes）出图。
• 降级路径（最稳）：当 Ardot 适配器 NO_ADAPTER 或文件权限被拒时，自动改用本地 SVG 重绘——把版式写成 HTML/SVG，用活着的 CDP Chrome 以 deviceScaleFactor:2 渲染高分辨率 PNG + PDF，质量与 Ardot 直出一致。

实战结论：物流快递 8 张、跨行业 AI 落地 7 张（小红书竖版）全部走本地重绘 fallback 完成交付，稳定可控。本技能默认把本地重绘作为保底交付手段。

二、两条模式

⚠️ 两个端口不要混用：4:3 走 9222，3:4 走 9223。9223 是独立渲染 profile（--user-data-dir=chrome_render_profile），9222 已废弃/不稳定。

三、触发条件

• 模式 A：「设计/出一张 海报」「XX 行业/XX 部 主标题…痛点…3 个价值点…标语…」。
• 模式 B：「小红书配图 / 竖版 3:4 / 温暖手绘 / Before-After / 行业 AI 落地 / 红笔公式框」。
• Ardot 出图失败、需要本地重绘兜底。

四、前置条件

1. Chrome 已以调试端口启动（两个独立 profile）：
   • 4:3 → --remote-debugging-port=9222
   • 3:4 → --remote-debugging-port=9223 --user-data-dir=chrome_render_profile
   • 检查存活：curl -s http://127.0.0.1:9223/json/version（返回含 webSocketDebuggerUrl 即正常）。
   • 若端口是「僵尸端口」（/json/version 404），关掉 Chrome 用同用户目录重拉起。
2. playwright-core 已装到 ~/.workbuddy/binaries/node/workspace/node_modules/。
3. 本地 HTTP 服务（生成可点击链接，8123 端口）：

cd poster-export && python -m http.server 8123 --bind 0.0.0.0（后台运行）。

五、通用工作流（本地重绘 fallback）

1. 解析文案 → 选模式 A 或 B → 套对应版式契约写 build.html。
2. 渲染：
   • 模式 A：node scripts/cdp_render.js <html绝对路径> <输出目录绝对路径> <pdf名.pdf>
   • 模式 B：node scripts/render_xhs5.js <html绝对路径> <输出目录绝对路径> <pdf名.pdf>
3. 校验：PNG ≥150KB（3:4 通常 800KB-2MB）；PDF ≥80KB。
4. 起 8123，curl 验证 http://127.0.0.1:8123/<中文目录URL编码>/0_1.png 返回 200。
5. 交付：完整本地绝对路径 + 可点击 HTTP 链接。

模式 A：4:3 企业海报（1600×1200）

六、版式契约 A（所有批次共用）

• 安全边距 左右 64 / 上下 72。
• 左栏 x:72 w:740：眉题条(点亮色小横条48×6 + 主色眉题28px) → 主标题(主色, ≤2行, 48~60px) → 痛点(次文 30px, ≤2行) → 标语(主色36px + 点亮短下划线)。
• 右栏 x:852 w:676：主色实色面板(圆角28, 辅色描边@0.35) + 面板标题(白 38px) + 3 价值卡(点亮色徽章 01/02/03 + 主色标题 28~36px + 次文 28px)。
  • 三卡坐标：卡1 y:212 h:232 / 卡2 y:464 h:232 / 卡3 y:716 h:252；x:884 w:612；徽章 x:907 w:52。
• 左下母题：行业中枢意象面板 x:200 y:584 w:400 h:380 圆角24，主色面板 + 辅色描边@0.35；中心点亮色枢纽串联 3 端。
• 字体 Noto Sans SC；字号地板 28；字族 ≤2；纯矢量无照片/emoji；6-3-1 配色。
• 完整坐标与节点模板见 assets/poster_template.html。

价值卡标题防折行铁律

标题 ≥10 字或含多段「+」时，主动拆 2 行并下移描述(卡1≈y350 / 卡2≈y602 / 卡3≈y854) 或降 28~30px(lineHeight 36~38)，batch_read 复核无重叠。

模式 B：小红书竖版 3:4 手绘插画（1080×1440）

七、设计基调（B 模式必守）

• 画布 1080×1440（3:4）；背景米白纸 #FBF6EC / #FBF7EF。
• 纸张纹理 + 手绘抖动：feTurbulence 纸张颗粒(grain) + feDisplacementMap 手绘抖动(rough, scale 3~5)。箭头用 marker 清晰描边且不加 rough 滤镜（会变形）；文字一律不加滤镜保清晰。
• 字体（Google Fonts 联网加载，渲染前必须 document.fonts.ready）：
  • Ma Shan Zheng（红笔手写标题，类 hwt）
  • Zhi Mang Xing（手写小字/标注，类 cw）
  • Noto Sans SC（正文/数据，类 body）
• 字体就绪机制（render_xhs5.js 依赖）：build.html <script> 内 window.__fontsReady = Promise.all([...document.fonts.load]).then(...)，渲染脚本 await page.evaluate(() => window.__fontsReady) 后再截屏，避免回退成普通衬线体。
• 配色铁律：每篇一个行业主色（见第九节），红笔 #E53935 统一用于痛点/公式框，底米白。6-3-1 思路（底/主色/红笔点缀）。
• 防遮挡铁律：人物在上、道具在下或分栏；栏中心、标签中心、VS 三者 x 对齐；公式框/数据框独立成层，不压人物。

八、三种结构模板（B 模式）

复制 assets/example_xhs_*.html 改文案即可。

模板 B1：Before/After + 三场景卡（配图2-5，最常用）

• 顶部：红笔/主色手写大标题（行业名 + 副标）。
• 左灰卡 Before：灰底 #ECE9E3，红笔「人工XX / 痛点YY」，配手绘人物+道具。
• 中央：主色上箭头 + 行业机器人（购物车/读书/工厂/政务），手写「AI 赋能」。
• 右亮卡 After：行业亮底，绿/主色手写「价值1 / 价值2 / 价值3」，右下绿/主色数据框「指标 ↑x% / ↓y%」。
• 下方三场景卡：等宽三列，① ② ③ 圆形徽章 + 标题 + 手绘图标 + 一句效果小字。
• 底部红笔公式框：「行业 AI = …」红笔手写，四角小星点缀。
• 坐标锚点：左卡 x:50 w:360 y:252 h:556；中轴 x:440；右卡 x:670 w:360；三卡 y:860 h:320（x:40/380/720）；公式框 x:90 y:1235 w:900 h:132。

模板 B2：三段横向流程卡（配图5 政务）

• 顶部大标题 + 右上手写数据面板。
• 三段等宽横向卡（x:60 w:960，y:200/512/824，h:266），圆角22，主色描边；每段：序号圆 + 手绘图标 + 标题 + 描述 + 右侧小对比/进度图；段间向下箭头连接（marker-end）。
• 底部红笔公式框。
• 适合「步骤化、流程化」主题（咨询→指引→优化）。

模板 B3：三层递进结构（配图6 共性规律）

• 顶部居中红笔公式 + 大标题。
• 三层自下而上大卡：③顶层（蓝·数据孤岛→统一底座）、②中层（绿·替代人→增强人，人与机器人握手）、①底层（紫·单点工具→场景串联，4 行行业链）。
• 层间上升箭头（双箭头，颜色随层）连接；每层内左侧小图/右侧大框。
• 适合「抽象规律、框架总结」收官篇。

九、行业主题配色（B 模式速查）

通用中性色：灰 #8A93A0、钢灰文字 #6B7280、深字 #2B2B2B、米白文字 #B79A6E。

十、渲染命令（B 模式）

# 说明：用你本机的 node（在 PATH 中）运行即可；playwright-core 路径通过环境变量注入，绝不写死。
cd "C:/Users/用户名/Desktop/poster-export" && 
NODE_PATH="C:/Users/用户名/.workbuddy/binaries/node/workspace/node_modules" 
node 
"C:/Users/用户名/.../scripts/render_xhs5.js" 
"C:/Users/用户名/.../build.html" 
"C:/Users/用户名/.../输出目录" 
"文件名.pdf"

若你的 node 不在 PATH，请把 node 换成 node.exe 的绝对路径（占位示例：C:/Users/用户名/.workbuddy/binaries/node/versions/22.22.2/node.exe），并同样用 NODE_PATH 指向你的 playwright-core 所在目录。

• render_xhs5.js 内部：chromium.connectOverCDP('http://127.0.0.1:9223')；viewport{width:1080,height:1440}, deviceScaleFactor:2；page.screenshot({clip:{x:0,y:0,width:1080,height:1440}})；page.pdf 四边 margin 0。
• ⚠️ playwright-core@1.62 坑：require('playwright-core') 返回 Playwright 实例，connectOverCDP 在 .chromium 上 → 必须 const pw=require(c); chromium=pw.chromium||pw;。

十一、经验教训（关键，务必看）

• Ardot 连接本质：走「Chrome 标签页 ↔ WorkBuddy 桥接」，MCP 服务端只是外壳。重启 WorkBuddy 没用——断点在 Chrome 侧。
• NO_ADAPTER 根因：连 fetch_editor_state 都失败时，整条桥接断。重连需从 Chrome 那头重新握手（打开文件 + 编辑器内连接指示灯）。
• 9222 僵尸端口：Chrome 主进程占了 9222 但 /json/version 404，是死掉的 DevTools 后端。解决：关 Chrome，用 --remote-debugging-port=9222 重拉起（保留用户目录即保留登录态）。
• 文件权限坑：强制重启会冲掉 Ardot 登录态，重拉起后默认账号常无权限（显示「暂无文件权限」），需手动「切换账号」登回有权限账号。
• 最稳交付 = 本地重绘 fallback：Ardot 不可用（适配器死 + 权限被拒）时，按锁定版式写 SVG → 活 CDP Chrome 渲染，质量等同 Ardot 直出。
• 弯引号规则：Ardot batch_edit 用 u201c/u201d 转义；本地 HTML 直接写中文 "" 即可，无需转义。绝不可在 batch_edit 直接写全角引号「」(U+300C/D)，会触发 JSON 序列化崩溃且跨会话持久损坏写操作。
• 8123 中文路径编码：必须用 urllib.parse.quote 生成编码 URL（曾手敲"座"错成"底"致 404）。
• 模型不能读图：当前模型 Read 图片返回过滤，无法视觉核验；只能以「落盘成功 + PNG 尺寸 + HTTP 200」间接确认，交付时如实告知用户自行预览。
• 文本乱码：Ardot batch_edit 单批汉字偶发乱码，读回用 U("2:23",{content:"正确"}) 修正再复核。
• 分层防遮挡：人物/道具/文字分图层；栏中心对齐；公式框独立不压人。

十二、交付铁律

• 每次仅发「完整本地绝对路径 + 可点击 HTTP 8123 链接」，不冗余。
• PNG 与 PDF 必须双双存在并通过大小校验。
• 中文目录名在 HTTP 链接里需 URL 编码（用 urllib.parse.quote 生成，勿手敲）。
• 用户说「发送给我/完整路径/可点击」时，优先给路径+链接，而非只甩 present_files 卡片。

十三、目录结构

ardot海报设计/
├── SKILL.md
├── readme.md
├── scripts/
│   ├── cdp_render.js      # 4:3 渲染（端口 9222）
│   └── render_xhs5.js     # 3:4 小红书渲染（端口 9223）
└── assets/
    ├── poster_template.html        # 模式A 4:3 模板
    ├── example_xhs_before_after.html  # 模式B 模板B1 示例
    ├── example_xhs_3flow.html         # 模式B 模板B2 示例
    └── example_xhs_3layer.html        # 模式B 模板B3 示例