远方 HTML 社交配图

要解决什么问题

公众号、小红书、X 等平台配图既要字不能错、又要多尺寸一版套全，用 AI 生图往往改一字就要整张重来，布局和品牌色也不好控。本技能走 HTML 排版 + Playwright 截图：文案来自页面或你给的文本，版式由 CSS 和共享设计库决定，改样式即可重出，不消耗生图 API。

技能如何工作

流程按步骤推进，并在关键节点等你确认，避免静默替你做决定。

• Step 0（有 URL 时）：从页面抓取 logo、站点名、主题色、字体等，结果只作建议；无 URL 则跳过抓取，但仍会在后面问 logo 与品牌色。
• Step 1：从 URL 复用 HTML，或用 extract.js 解析纯文本，得到 title / body / points；也可直接读已有 content.json。展示后你可改字数（标题建议 ≤30 字，正文 ≤100 字，避免撑满画面）。
• Step 2：分轮询问——先选 12 个主题之一 与 多平台尺寸（可多选）；再确认左下角 logo 与 --accent 品牌色（不用则左下留白、用主题默认色）；可选顶部 badge 与中下 二维码（URL 可自动生成 QR）。
• Step 3～4：调用 render.js 出图并预览；render.js 在缺少 brand/brandImage 且未传 --theme 时会硬拒绝执行，避免无主题裸跑。

实现依赖同仓库 yuanfang-design/：base.css 变量、各主题 CSS、layout-types/cover.html 布局块；新工作流应走主题库而非自建 templates/ 目录。

适用边界与注意

• 独立部署需带上整个 yuanfang-skills 仓库（含设计库），不能只拷本 skill 单目录。
• 品牌规格缓存在项目内 ./.yuanfang/brand-specs/*.json（约 7 天 TTL），用 --refresh-brand 可强制刷新；无全局缓存，适合团队用 git 共享品牌资产。
• 旧版 --template 1-12 仍兼容，映射到 12 个主题；细节见技能内 references/（CLI、主题表、平台尺寸、提取 API、{{TOKEN}} 变量）。