space-wechat-layout

WeChat Official Account formatting

Create a local HTML preview page that renders a provided article as WeChat-compatible rich HTML and includes a “Copy HTML” button. Preserve the article's meaning and content; only make light structural adjustments for layout readability.

Official Account image adaptation

Positioning: This is the “whole-article visual/formatting” track of the Official Account—the user provides article content, and you output HTML formatting（复制 HTML one-click transfer). It is the partner of the image Skill in this collection:space-chart-image / space-text-logic-diagram producessingle images, and this Skill produceswhole-article formatting。

Output: HTML by default (the main path of this Skill). When a certain block (such as a header image or quote card) needs to be exported as an image, take a screenshot of that block and export it as PNG, or hand it to the built-in image generation model of Codex/workbuddy for redrawing.

No content rewriting: Only make light adjustments at the formatting level, preserving all facts, order, quotations, and conclusions.

Workflow

1. Collect the article
   • If the user has not provided the article, ask them to paste it.
   • Detect title from the first # heading or first strong title-like line. If unclear, ask for a title.

1. Ask for style

   • Ask which style to use unless the user already specified one:
     • Claude: warm off-white, calm editorial, restrained borders, generous whitespace.
     • OpenAI: crisp white, black/gray, utilitarian documentation feel.
     • Google: bright white, soft blue/green/yellow/red accents, modular cards.
   • If the user says “You decide”, choose based on content:
     • reflective/narrative/opinion → Claude
     • technical/tutorial/product notes → OpenAI
     • data/list/comparison/education → Google
   • Read references/style-guide.md only when implementing the chosen style or when comparing styles.

2. Prepare the content

   • Do not rewrite the article substantially.
   • Keep all facts, order, quotes, scores, names, and conclusions intact.
   • Allow only layout-oriented optimization:
     • normalize heading levels;
     • split very long paragraphs;
     • convert obvious tables/lists into styled HTML tables/cards;
     • wrap long body sections in scrollable preview windows if the user asks or if a section is very long.

3. Build the local preview

   • Prefer a single static index.html when possible.
   • If working inside an existing Vite/front-end app, follow the app's current structure instead of creating a separate stack.
   • Include:
     • a top toolbar;
     • a 复制 HTML button;
     • a visible status message after copying;
     • a centered WeChat content preview (max-width: 677px);
     • responsive mobile layout.
   • The copied payload must be the inner article HTML, not the whole app chrome.

4. Copy behavior

   • Use the Clipboard API with both text/html and text/plain.
   • Fall back to selecting the preview node and document.execCommand("copy").
   • Button text must be clear: 复制 HTML or 复制到公众号.

5. WeChat HTML constraints

   • Use inline styles inside the copied article HTML.
   • Avoid external CSS, scripts, web fonts, CSS variables, SVG-only essential content, and interactive controls inside the copied article.
   • Keep cards at border-radius: 8px or less unless the chosen style specifically needs smaller corners.
   • Use simple semantic blocks: section, h1, h2, h3, p, table, blockquote.
   • For scrollable essay/body windows, inline style the article section with max-height and overflow-y:auto; keep headings, score summaries, and conclusions outside the scroll window.

6. Verify

   • Run the project build command if available.
   • Start or reuse a local dev server.
   • Confirm the local URL responds.
   • If Browser is available and stable, visually inspect the page; otherwise report build/server verification.

Output Shape

Create or update files in the current project. For a plain static page, use:

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

For an existing app, update the app's normal entry files and keep the server URL unchanged when feasible.

Default Preview Shell

The preview page should include this behavior, adapted to the project:

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 = "已用兼容模式复制当前预览内容。";
  }
}

Final Response

Tell the user:

• the local preview URL;
• which style was used;
• which files were created or changed;
• how to copy and paste into WeChat;
• any verification that passed or could not be run.