space-wechat-layout

微信公众号排版

创建一个本地 HTML 预览页，将提供的文章呈现为兼容微信的富文本 HTML，并包含一个“复制 HTML”按钮。保留文章的含义和内容；仅进行轻微的结构调整，以提升版面可读性。

公众号配图适配

定位：这是公众号「整篇视觉/排版」这一路——用户提供文章内容，你输出可直接粘贴到公众号编辑器的 HTML 排版（通过 复制 HTML 一键搬运）。这是本集合中配图 Skill 的搭档：space-chart-image / space-text-logic-diagram 生成单张配图，本 Skill 生成整篇排版。

输出：默认输出 HTML（本 Skill 的主要路径）。需要将某个区块（如头图/金句卡）导出为图片时，可对该区块截图并导出 PNG，或交给 Codex/workbuddy 内置的出图模型重绘。

内容不改写：只进行排版层面的轻微调整，保留全部事实、顺序、引用和结论。

工作流

1. 收集文章

   • 如果用户尚未提供文章，请让他们粘贴文章。
   • 从第一个 # 标题或第一行类似标题的粗体文本中识别标题。如果无法确定，请询问标题。

2. 询问风格

   • 除非用户已指定风格，否则询问要使用哪种风格：
     • Claude：暖调米白色、沉静的编辑风格、克制的边框、充足的留白。
     • OpenAI：明亮的白色、黑色/灰色，呈现实用的文档风格。
     • Google：明亮的白色，搭配柔和的蓝色/绿色/黄色/红色点缀，以及模块化卡片。
   • 如果用户说“你来定”，则根据内容选择：
     • 反思/叙事/观点 → Claude
     • 技术/教程/产品笔记 → OpenAI
     • 数据/列表/比较/教育 → Google
   • 仅在实现所选风格或比较风格时，阅读 references/style-guide.md。

3. 准备内容

   • 不要大幅改写文章。
   • 保留所有事实、顺序、引文、分数、名称和结论。
   • 仅允许进行面向版面的优化：
     • 规范标题层级；
     • 拆分特别长的段落；
     • 将明显的表格/列表转换为经过样式设计的 HTML 表格/卡片；
     • 如果用户提出要求，或某个部分特别长，则将较长的正文部分放入可滚动的预览窗口。

4. 构建本地预览

   • 尽可能优先使用单个静态 index.html。
   • 如果在现有的 Vite/前端应用中工作，请遵循应用当前的结构，而不是另建一套技术栈。
   • 包含：
     • 顶部工具栏；
     • 一个 复制 HTML 按钮；
     • 复制后显示的状态消息；
     • 居中的微信公众号内容预览（max-width: 677px）；
     • 适配移动设备的响应式布局。
   • 复制的内容必须是文章内部的 HTML，而不是整个应用界面。

5. 复制行为

   • 使用 Clipboard API，同时提供 text/html 和 text/plain。
   • 使用选中预览节点和 document.execCommand("copy") 作为回退方案。
   • 按钮文字必须清晰明确：复制 HTML 或 复制到公众号。

6. 微信公众号 HTML 限制

   • 在复制的文章 HTML 中使用内联样式。
   • 避免使用外部 CSS、脚本、网页字体、CSS 变量、仅依赖 SVG 的关键内容，以及复制文章中的交互控件。
   • 除非所选风格特别需要更小的圆角，否则卡片的 border-radius 不应超过 8px。
   • 使用简单的语义化区块：section、h1、h2、h3、p、table、blockquote。
   • 对可滚动的文章/正文窗口，在文章区块上使用内联样式设置 max-height 和 overflow-y:auto；将标题、分数摘要和结论放在滚动窗口之外。

7. 验证

   • 如果有可用的项目构建命令，则运行该命令。
   • 启动本地开发服务器或复用现有服务器。
   • 确认本地 URL 可以访问。
   • 如果 Browser 可用且运行稳定，则对页面进行视觉检查；否则报告构建/服务器验证结果。

输出格式

在当前项目中创建或更新文件。对于纯静态页面，请使用：

wechat-layout-output/
├── index.html
└── assets/        # only if local images are needed

对于现有应用，请更新应用的常规入口文件，并尽可能保持服务器 URL 不变。

默认预览外壳

预览页面应包含以下行为，并根据项目情况进行调整：

async function copyArticleHtml(articleNode, statusNode) {
  const html = articleNode.innerHTML;
  const text = articleNode.innerText;
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        "text/html": new Blob([html], { type: "text/html" }),
        "text/plain": new Blob([text], { type: "text/plain" }),
      }),
    ]);
    statusNode.textContent = "已复制 HTML，可以粘贴到公众号正文区域。";
  } catch {
    const range = document.createRange();
    range.selectNode(articleNode);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("copy");
    selection.removeAllRanges();
    statusNode.textContent = "已用兼容模式复制当前预览内容。";
  }
}

最终回复

告知用户：

• 本地预览 URL；
• 使用的风格；
• 创建或修改了哪些文件；
• 如何复制并粘贴到微信公众号；
• 已通过或无法执行的验证。