初始化提交：contentm_agent 工作区全量快照
内容分四块： 1、产品规划产出 —— MCN 短视频整合营销工作台的①段五份（1a 需求／1b 竞品／1c 画像／1d 策略／1e 场景）、②段两份（2a 功能／2b 布局）、③段界面（DESIGN.md 契约与令牌表 ＋ mcn-workbench.html 原型 ＋ 实测/会诊/审查三份 ＋ 23 张闸门截图）。 2、开源竞品调研 —— 5 个内容工作台项目的取证原始件与 1b 系列分析文档。 3、参考资料 —— 竞品视频抽帧 1145 张 ＋ 2 个源视频 ＋ 功能点截图。 4、机制侧 —— 协作脚本与状态台账、工作区记忆日志、抽帧/OCR 脚本。 .gitignore 只排运行时日志、脚本备份副本与一次性探针输出，其余按原样入库。
This commit is contained in:
WorkBuddy committed
commit
df56c2c137
1773 files changed
+205840
No files matched your search
+121
@@ -0,0 +1,121 @@
|
||||
---
|
||||
name: space-wechat-layout
|
||||
description: 微信公众号排版。Use when the user asks to turn an article, Markdown draft, longform post, essay, newsletter, review, or Chinese article into a WeChat Official Account-ready HTML layout with local preview, selectable Claude/OpenAI/Google-inspired styles, and a button to copy rich HTML for pasting into the WeChat editor.
|
||||
---
|
||||
|
||||
# 微信公众号排版
|
||||
|
||||
Create a local HTML preview page that renders a provided article as WeChat-compatible rich HTML and includes a “复制 HTML” button. Preserve the article's meaning and content; only make light structural adjustments for layout readability.
|
||||
|
||||
## 公众号配图适配
|
||||
|
||||
**定位**：这是公众号「整篇视觉/排版」这一路——用户给文章内容，你输出可直接贴进公众号编辑器的 **HTML 排版**（`复制 HTML` 一键搬运）。是本集合里配图 Skill 的搭档：`space-chart-image` / `space-text-logic-diagram` 出**单张配图**，本 Skill 出**整篇排版**。
|
||||
|
||||
**输出**：默认 HTML（本 Skill 主路径）。需要把某个区块（如头图/金句卡）导出成图片时，对该区块截图导出 PNG，或交给 Codex/workbuddy 内置出图模型重绘。
|
||||
|
||||
**内容不改写**：只做排版层面的轻调整，保留全部事实、顺序、引用、结论。
|
||||
|
||||
## 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.
|
||||
|
||||
2. **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 “你来定”, 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.
|
||||
|
||||
3. **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.
|
||||
|
||||
4. **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.
|
||||
|
||||
5. **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 `复制到公众号`.
|
||||
|
||||
6. **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.
|
||||
|
||||
7. **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:
|
||||
|
||||
```text
|
||||
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:
|
||||
|
||||
```js
|
||||
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.
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
interface:
|
||||
display_name: "微信公众号排版"
|
||||
short_description: "将文章排成可复制到公众号的HTML预览页"
|
||||
brand_color: "#A16207"
|
||||
default_prompt: "Use $space-wechat-layout to turn this article into a WeChat-ready HTML preview page with copyable rich HTML."
|
||||
policy:
|
||||
allow_implicit_invocation: true
|
||||
+156
@@ -0,0 +1,156 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{TITLE}}</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #171717;
|
||||
--muted: #6f6a62;
|
||||
--line: #e7e1d7;
|
||||
--soft: #fbfaf7;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
background: #f4efe7;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1120px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 18px 0 42px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.toolbar h1 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 40px;
|
||||
border: 1px solid #171717;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
background: #171717;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 12px 0;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fffdf8;
|
||||
color: #5f4a2d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#article {
|
||||
padding: 20px 0;
|
||||
background: var(--soft);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.shell {
|
||||
width: min(100% - 20px, 1120px);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: static;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="toolbar">
|
||||
<h1>{{TITLE}}</h1>
|
||||
<section class="actions">
|
||||
<button id="copyHtmlButton" type="button">复制 HTML</button>
|
||||
</section>
|
||||
</section>
|
||||
<p class="status" id="copyStatus">点击复制后，粘贴到公众号草稿箱正文区域。</p>
|
||||
<section class="frame">
|
||||
<div id="article">{{ARTICLE_HTML}}</div>
|
||||
</section>
|
||||
</main>
|
||||
<script>
|
||||
const article = document.querySelector("#article");
|
||||
const statusNode = document.querySelector("#copyStatus");
|
||||
document.querySelector("#copyHtmlButton").addEventListener("click", async () => {
|
||||
const html = article.innerHTML;
|
||||
const text = article.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(article);
|
||||
const selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
document.execCommand("copy");
|
||||
selection.removeAllRanges();
|
||||
statusNode.textContent = "已用兼容模式复制当前预览内容。";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
# Style Guide
|
||||
|
||||
Use this file after the user chooses a style.
|
||||
|
||||
## Shared Rules
|
||||
|
||||
- Copied article HTML must use inline styles.
|
||||
- Preview app chrome may use normal CSS.
|
||||
- Keep article width near WeChat's comfortable reading width: `max-width:677px`.
|
||||
- Prefer `font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',Arial,sans-serif`.
|
||||
- Use 15-16px body text, `line-height:1.8-1.95`.
|
||||
- Keep decorative elements quiet; content must remain the focus.
|
||||
- Do not add visible instructions inside the copied article body.
|
||||
|
||||
## Claude Style
|
||||
|
||||
Use for reflective essays, opinion pieces, cultural commentary, narratives, and longform analysis.
|
||||
|
||||
Visual language:
|
||||
- Background: warm off-white `#fbfaf7` or `#f8f3ea`.
|
||||
- Text: charcoal `#171717`, secondary `#6f6a62`.
|
||||
- Accent: muted amber/brown `#a16207`, soft border `#e7e1d7`.
|
||||
- Shape: 8px cards, fine borders, paper-like spacing, no heavy shadows in copied HTML.
|
||||
- Layout: generous whitespace, editorial title block, subtle callouts.
|
||||
|
||||
Useful components:
|
||||
- Top kicker in small uppercase English or Chinese label.
|
||||
- Quote/callout: left border `3px solid #d8b37c`, background `#fffaf0`.
|
||||
- Long body/essay window: white or `#fbfaf7` panel, border `#e8e3da`, `max-height:420px;overflow-y:auto`.
|
||||
|
||||
## OpenAI Style
|
||||
|
||||
Use for technical articles, product notes, tutorials, tool comparisons, API guides, and developer writing.
|
||||
|
||||
Visual language:
|
||||
- Background: pure white `#ffffff`.
|
||||
- Text: black `#111111`, secondary `#5f6368`.
|
||||
- Accent: black or cool gray; avoid decorative color.
|
||||
- Shape: crisp 6-8px panels, thin gray borders, documentation-style hierarchy.
|
||||
- Layout: dense but scannable, clear headings, compact tables.
|
||||
|
||||
Useful components:
|
||||
- Section heading with bottom border `2px solid #111`.
|
||||
- Code/tool callout: `background:#f6f8fa;border:1px solid #e5e7eb`.
|
||||
- Tables: simple gray header, compact cells, no heavy fills.
|
||||
|
||||
## Google Style
|
||||
|
||||
Use for educational explainers, ranking tables, model/product comparisons, data summaries, and broader public-facing analysis.
|
||||
|
||||
Visual language:
|
||||
- Background: white `#ffffff` with very pale cards.
|
||||
- Text: near-black `#202124`, secondary `#5f6368`.
|
||||
- Accents: Google-like but restrained: blue `#1a73e8`, green `#188038`, yellow `#fbbc04`, red `#d93025`.
|
||||
- Shape: modular cards with 8px radius, colored top bars or small badges.
|
||||
- Layout: structured cards, comparison grids, score badges.
|
||||
|
||||
Useful components:
|
||||
- Model/ranking card with small colored badge.
|
||||
- Table header in pale blue `#e8f0fe`.
|
||||
- Insight callout with left colored stripe.
|
||||
|
||||
## Choosing Components
|
||||
|
||||
- Articles with multiple evaluated works: use one card per work; put title, keyword, scores, and comments outside; put the long work body inside a scrollable preview window.
|
||||
- Articles with ranking tables: render actual HTML tables, not screenshots.
|
||||
- Articles with summary bullets: use styled numbered blocks or simple cards.
|
||||
- Very long paragraphs: split at natural sentence boundaries only; do not change meaning.
|
||||
Reference in new issue
Block a user