voxflow 1.15.6 → 1.17.0

package/skills/card/scripts/render-cards.mjs

@@ -0,0 +1,219 @@
+#!/usr/bin/env node
+import { mkdir, readdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const RATIOS = {
+  '1:1': { width: 1080, height: 1080 },
+  '3:4': { width: 1080, height: 1440 },
+  '4:5': { width: 1080, height: 1350 },
+  '9:16': { width: 1080, height: 1920 },
+  '16:9': { width: 1920, height: 1080 },
+};
+
+function usage() {
+  console.log(`Usage:
+  node render-cards.mjs --input <html-dir> --output <png-dir> [--ratio 1:1|3:4|9:16] [--size 1080x1920] [--selector .card] [--scale 2]
+
+Options:
+  --input     Directory containing card-*.html files, or any .html files.
+  --output    Directory for PNG exports and audit.json.
+  --ratio     Aspect ratio. Defaults to 1:1. Supports known ratios or custom a:b.
+  --size      Exact viewport size in WIDTHxHEIGHT. Overrides --ratio.
+  --selector  Element to screenshot when present. Defaults to .card.
+  --scale     deviceScaleFactor. Defaults to 2 for retina-quality exports.
+  --wait      Milliseconds to wait after load. Defaults to 250.
+`);
+}
+
+function parseArgs(argv) {
+  const args = {
+    ratio: '1:1',
+    selector: '.card',
+    scale: 2,
+    wait: 250,
+  };
+
+  for (let i = 0; i < argv.length; i += 1) {
+    const token = argv[i];
+    if (token === '--help' || token === '-h') {
+      args.help = true;
+      continue;
+    }
+    if (!token.startsWith('--')) {
+      throw new Error(`Unexpected argument: ${token}`);
+    }
+    const key = token.slice(2);
+    const value = argv[i + 1];
+    if (!value || value.startsWith('--')) {
+      throw new Error(`Missing value for ${token}`);
+    }
+    args[key] = value;
+    i += 1;
+  }
+
+  return args;
+}
+
+function viewportFromArgs(args) {
+  if (args.size) {
+    const match = String(args.size).match(/^(\d+)x(\d+)$/i);
+    if (!match) throw new Error('--size must be WIDTHxHEIGHT, for example 1080x1920');
+    return { width: Number(match[1]), height: Number(match[2]) };
+  }
+
+  if (RATIOS[args.ratio]) return RATIOS[args.ratio];
+
+  const match = String(args.ratio).match(/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/);
+  if (!match) throw new Error(`Unsupported ratio: ${args.ratio}`);
+
+  const a = Number(match[1]);
+  const b = Number(match[2]);
+  if (a <= 0 || b <= 0) throw new Error(`Invalid ratio: ${args.ratio}`);
+
+  const width = 1080;
+  return { width, height: Math.round((width * b) / a) };
+}
+
+async function htmlFiles(inputDir) {
+  const entries = await readdir(inputDir, { withFileTypes: true });
+  return entries
+    .filter((entry) => entry.isFile() && entry.name.toLowerCase().endsWith('.html'))
+    .map((entry) => path.join(inputDir, entry.name))
+    .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+}
+
+async function auditPage(page) {
+  return page.evaluate(() => {
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      scrollWidth: document.documentElement.scrollWidth,
+      scrollHeight: document.documentElement.scrollHeight,
+    };
+
+    const visibleElements = Array.from(document.querySelectorAll('body *')).filter((element) => {
+      const style = window.getComputedStyle(element);
+      const rect = element.getBoundingClientRect();
+      return style.visibility !== 'hidden' && style.display !== 'none' && rect.width > 0 && rect.height > 0;
+    });
+
+    const outOfBounds = [];
+    const overflow = [];
+
+    for (const element of visibleElements) {
+      const rect = element.getBoundingClientRect();
+      const label = element.id ? `#${element.id}` : element.className ? `.${String(element.className).trim().split(/\s+/).join('.')}` : element.tagName.toLowerCase();
+
+      if (rect.left < -1 || rect.top < -1 || rect.right > window.innerWidth + 1 || rect.bottom > window.innerHeight + 1) {
+        outOfBounds.push({
+          element: label,
+          rect: {
+            left: Math.round(rect.left),
+            top: Math.round(rect.top),
+            right: Math.round(rect.right),
+            bottom: Math.round(rect.bottom),
+          },
+        });
+      }
+
+      if (element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1) {
+        overflow.push({
+          element: label,
+          scrollWidth: element.scrollWidth,
+          clientWidth: element.clientWidth,
+          scrollHeight: element.scrollHeight,
+          clientHeight: element.clientHeight,
+        });
+      }
+    }
+
+    return {
+      viewport,
+      hasHorizontalScroll: viewport.scrollWidth > viewport.width + 1,
+      hasVerticalScroll: viewport.scrollHeight > viewport.height + 1,
+      outOfBounds,
+      overflow,
+    };
+  });
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help) {
+    usage();
+    return;
+  }
+
+  if (!args.input || !args.output) {
+    usage();
+    throw new Error('--input and --output are required');
+  }
+
+  const viewport = viewportFromArgs(args);
+  const inputDir = path.resolve(args.input);
+  const outputDir = path.resolve(args.output);
+  const files = await htmlFiles(inputDir);
+  if (files.length === 0) throw new Error(`No .html files found in ${inputDir}`);
+
+  let chromium;
+  try {
+    ({ chromium } = await import('playwright'));
+  } catch {
+    throw new Error('Playwright is not installed. Run: npm install -D playwright && npx playwright install chromium');
+  }
+
+  await mkdir(outputDir, { recursive: true });
+
+  const browser = await chromium.launch();
+  const audit = [];
+
+  try {
+    for (let index = 0; index < files.length; index += 1) {
+      const file = files[index];
+      const page = await browser.newPage({
+        viewport,
+        deviceScaleFactor: Number(args.scale),
+      });
+
+      await page.goto(pathToFileURL(file).href, { waitUntil: 'load' });
+      // Wait for locally embedded fonts to finish loading before screenshotting,
+      // otherwise the capture can show fallback glyphs / font swap.
+      await page.evaluate(() => document.fonts && document.fonts.ready).catch(() => {});
+      await page.waitForTimeout(Number(args.wait));
+
+      const handle = await page.$(args.selector);
+      const baseName = path.basename(file, path.extname(file));
+      const outputPath = path.join(outputDir, `${baseName}.png`);
+
+      if (handle) {
+        await handle.screenshot({ path: outputPath });
+      } else {
+        await page.screenshot({ path: outputPath, fullPage: false });
+      }
+
+      const pageAudit = await auditPage(page);
+      audit.push({
+        file,
+        output: outputPath,
+        selector: handle ? args.selector : null,
+        viewport,
+        ...pageAudit,
+      });
+
+      await page.close();
+      console.log(`Rendered ${index + 1}/${files.length}: ${outputPath}`);
+    }
+  } finally {
+    await browser.close();
+  }
+
+  const auditPath = path.join(outputDir, 'audit.json');
+  await writeFile(auditPath, `${JSON.stringify(audit, null, 2)}\n`);
+  console.log(`Audit: ${auditPath}`);
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exitCode = 1;
+});

package/skills/voxflow-slice/SKILL.md

@@ -1,415 +0,0 @@
----
-name: voxflow-slice
-description: "Author + iterate on a VoxFlow Slice card video (1080×1920 vertical, 33 themes) locally in Claude Code / Cursor — the user's own Claude does the work, no VoxFlow API call to slice (0 quota). Full multi-turn workflow: (1) fork a curated template via `voxflow slice fork <id>` OR slice an article into a deck.json by hand; (2) edit deck.json fields in place with Edit/Write tools while `voxflow slice preview deck.json` is running (browser hot-reloads in ~50ms); (3) audition voice per card with ▶ in the browser (proxies /api/tts/synthesize, content-hash cached); (4) regenerate AI images per card with 🎨 (card.images: [{id, prompt, aspect, quality}], proxies hunyuan-image, content-hash cached); (5) render mp4 with `voxflow slice render deck.json` — audio + AI images baked in by default, --no-audio / --no-images opt out, --legacy silent fallback. Schema gains: per-card `voiceover` (voiceId/text/rate/enabled), per-card `images` registry, V2 LayoutTree `el: \"raw-html\"` escape hatch (4096 char cap). Loop rules: edit only the fields the user asked about (preserve diff highlight), never re-run `voxflow slice <article>` during iteration (overwrites edits), don't restart the preview server, don't call /api/audition or /api/imagine yourself (user-driven via ▶/🎨). Pick this skill for ANY iterative Slice work — even when the user has a token; the iteration loop is faster + cheaper than the one-shot cloud route. Triggers: slice / paper-slide / paperslide / card video / 卡片视频 / 切片视频 / 知识卡片 / 文章转视频 / 抖音知识号 / 小红书图文转视频 / 知乎长文转视频 / 公众号转视频 / iterate slice / multi-turn slice / 多轮编辑切片 / 迭代切片 / fork template / slice fork / 模板 / 模板市场 / template gallery / audition card / play voiceover / 试听口播 / 试听卡片 / regenerate image / 生图 / image-gen card / raw-html slice / custom panel / offline slice / local slice / 离线切片 / 本地切片 / 不联网 / no-cloud slice. For the one-shot cloud route (calls /api/slice/deck, 200 quota, no iteration), use the `slice` skill instead."
----
-
-# voxflow-slice — Article → deck.json (offline)
-
-This skill owns the **slicing workflow** for VoxFlow Slice in pure local mode: you read an article the user points at, then write a `deck.json` that picks ONE of the 33 curated Remotion themes and fills in card fields. The user's own Claude does the work — there is no VoxFlow API call, no JWT, no quota deduction.
-
-Compare with the broader `voxflow:slice` skill (which routes between web app, `voxflow slice` cloud command, and `voxflow slice stage` preview). This skill is the local-only alternative: when the user has no token, wants to iterate freely, or asks for an offline slice — slice here, hand off to `voxflow slice preview deck.json` for visual review.
-
-## Hard rules
-
-1. **Write exactly one file**: `deck.json` in the directory the user points at (or the current working directory if they don't specify). Never write `.tsx`, `.css`, `.jsx`, or any React/Remotion source — themes are fixed; you only fill in card fields.
-2. **Pick ONE theme from the registry** (see Theme catalog below). Do not invent themes. Typo'd theme ids are hard-rejected by the validator.
-3. **5–8 cards inclusive.** First card must be `kind: "title"`. An optional `kind: "outro"` may appear *only as the last card* (server-side BrandKit usually appends this — leave it off unless the user explicitly asks for a CTA card).
-4. **No images you didn't already have.** Don't `WebFetch` or generate stock-photo URLs. `imageUrl` is only valid when the user explicitly provides a public http(s) URL and the chosen theme supports it (`photo-feature` / `atmospheric`).
-5. **`figureKeyword` must come from the controlled list** in the Card shapes section below. Invented keywords render as a default arrow.
-6. **No `narration` ≥ 60 zh chars and no `caption` ≥ 16 zh chars** — these are hard validator caps; the renderer's text-box clips overflows silently.
-7. **Captions must NOT end with punctuation** (no 。！？…）— they are subtitles, not prose.
-8. **Do not call any VoxFlow API.** This skill is offline. The user pays nothing.
-
-## When to use this skill vs `voxflow:slice`
-
-| Situation | Pick |
-|---|---|
-| User wants a `deck.json` produced locally, no quota cost | **this skill** |
-| User asks "切一下这篇文章" and is logged in via `voxflow login` | `voxflow:slice` → uses `voxflow slice <file>` (200 quota) |
-| User wants the mp4 too | `voxflow:slice` → web app |
-| User wants to iterate visually on an existing deck | hand off to `voxflow slice preview deck.json` (after this skill writes the file) |
-
-## Step 1 — Locate the article
-
-The user will give you one of:
-- a path to a `.md` / `.txt` / `.mdx` file (read it with the Read tool)
-- raw text pasted into the chat
-- a URL — only fetch it if the user is on a system with network access *and* explicitly asked you to fetch; otherwise ask them to paste the text
-
-Minimum content: **80 characters** (validator floor). If shorter, ask for more material before slicing.
-
-## Step 2 — Pick a theme
-
-Confirm with the user once. Default is `paper-slide` (good for 抖音 / 视频号 / 小红书 knowledge-card content). If they have a target platform in mind, suggest the matching theme from the catalog below. **Only pick from the 33 registered ids** — anything else is rejected by `backend/services/paper-slide/deck-validator.js:148`.
-
-## Step 3 — Plan the structure
-
-Sketch the deck as a list before writing JSON. Default arc:
-
-| Slot | Kind | Purpose |
-|---|---|---|
-| 1 | `title` | Hook line (反差 / 悬念 / 数字), 2 short rows |
-| 2 | `body` | The setup — first idea, one sentence |
-| 3 | `body` | Pivot or evidence — second idea |
-| 4 | `body` | Payoff — third idea |
-| 5 | `body` | Closing point — last idea (or a `data` / `quote` / `list` swap-in) |
-
-Rules of thumb:
-- One idea per card. Don't cram two into one `body`.
-- Vary adjacent `figureKeyword` — never two consecutive `thinking` / `evidence-board` etc.
-- A `quote` card is only justified if the article literally contains a stand-out line (≤30 zh chars).
-- A `data` card is only justified if the article cites a memorable number.
-- A `list` card is only justified if the article has an explicit 2–4 point structure.
-- Each rich kind (quote / data / list) appears **at most once per deck**.
-
-## Step 4 — Write `deck.json`
-
-Use the schemas in the next section. The validator lives at `backend/services/paper-slide/deck-validator.js` and is the source of truth — when in doubt, read it.
-
-## Deck schema (V1 — the shape this skill produces)
-
-```jsonc
-{
-  "header": "顶部小字，≤22 zh chars",           // required, non-empty string
-  "seriesTitle": "系列名，≤10 zh chars",        // required, will be wrapped in 【】 by some themes
-  "seriesTagline": "底部斜体副标题，≤22 zh chars",  // required
-  "theme": "paper-slide",                       // optional but recommended — must be in catalog
-  "coverHookCaption": "封面钩子，≤18 zh chars",    // optional; falls back to first body's caption
-  "coverFigureKeyword": "growth-system",         // optional; falls back to first body's figureKeyword
-  "cards": [ /* 2–9 entries; first must be title; outro only last */ ]
-}
-```
-
-### Card shapes by `kind`
-
-All cards require a non-empty `narration` string (TTS reads this; 30–60 zh chars, ends with 。).
-
-```jsonc
-// kind: "title" — first card only
-{
-  "kind": "title",
-  "title": ["第一行 ≤14 zh chars", "第二行 ≤14 zh chars"],   // non-empty array
-  "narration": "30–60 zh chars 开场白，自然口语。"
-}
-
-// kind: "body" — default for ideas
-{
-  "kind": "body",
-  "caption": "一句金句字幕，≤16 zh chars，结尾无标点",      // required
-  "figureKeyword": "problem-framing",                       // pick from controlled list below
-  "narration": "30–60 zh chars 配音稿，自然口语。"
-}
-
-// kind: "quote" — quote card (max 1 per deck)
-{
-  "kind": "quote",
-  "quote": {
-    "text": "≤60 chars 引文，结尾无标点",
-    "attribution": "出处或人名（可省略），≤30 chars"
-  },
-  "narration": "30–60 zh chars 配音稿。"
-}
-
-// kind: "data" — number card (max 1 per deck)
-{
-  "kind": "data",
-  "data": {
-    "value": "≤12 chars，如 80 / 3x / 240万+",
-    "unit": "≤8 chars（可省略），如 % / 倍 / 年",
-    "label": "≤30 chars 数字解释"
-  },
-  "narration": "30–60 zh chars 配音稿。"
-}
-
-// kind: "list" — 2–4 items (max 1 per deck)
-{
-  "kind": "list",
-  "list": {
-    "items": [
-      { "text": "≤30 chars 短句", "glyph": "✦" },      // glyph is optional emoji/char
-      { "text": "≤30 chars 短句" },
-      { "text": "≤30 chars 短句" }
-    ]
-  },
-  "narration": "30–60 zh chars 配音稿。"
-}
-
-// kind: "outro" — only allowed as LAST card; usually server-appended
-{
-  "kind": "outro",
-  "narration": "8–60 chars 关注语口播。",
-  "outro": {
-    "cta": "关注 + 系列名，看下集",
-    "handle": "@voxflow（可省略）"
-  }
-}
-```
-
-### Optional per-card `images` registry (Phase B)
-
-Any card kind may carry an `images: [{ id, prompt, aspect?, quality? }]`
-array of AI-generation recipes. The stage UI's 🎨 button resolves each
-entry through `/api/imagine` (proxies hunyuan-image, content-hash cached
-at `~/.config/voxflow/stage-image-cache/`); the first entry's resolved
-URL is used as the card's `slide.imageUrl` at render time, overriding any
-external `card.imageUrl`.
-
-```jsonc
-{
-  "kind": "body",
-  "caption": "...",
-  "narration": "...",
-  "figureKeyword": "growth-system",
-  "images": [
-    {
-      "id": "hero",                 // stable id ([a-zA-Z0-9_-]+, ≤64 chars, unique on card)
-      "prompt": "晨雾中的山脉，水墨风",   // ≤1000 chars
-      "aspect": "portrait",          // portrait | landscape | square (default: portrait)
-      "quality": "fast"              // fast (200 quota) | hd (500 quota)
-    }
-  ]
-}
-```
-
-Validator caps: `prompt` ≤ 1000 chars, `id` ≤ 64 chars matching `[a-zA-Z0-9_-]+`,
-at most 8 images per card, unique `id` within a card.
-
-### Optional per-card `el: "raw-html"` element (Phase C)
-
-V2 LayoutTree decks may carry a `{ el: "raw-html", html: "..." }` child to
-escape into arbitrary markup. The validator accepts strings up to 4096
-chars and `normalizeV2Children` maps the first occurrence to a `rawHtml`
-field on the V1 normalized output. **PaperSlide composition rendering of
-arbitrary HTML lands in a follow-up PR** — for now the composition
-silently skips the element, so a deck with raw-html validates + saves +
-edits cleanly but renders blank visually until the JSX side is updated.
-
-```jsonc
-{
-  "kind": "body",
-  "narration": "...",
-  "children": [
-    { "el": "heading", "text": "Custom panel" },
-    { "el": "raw-html", "html": "<div style='font-size:48px'>★</div>" }
-  ]
-}
-```
-
-On a body card, exactly one of `paper-figure` OR `raw-html` is required
-(both is rejected). Other kinds (title / quote / data / list) allow
-`raw-html` as a supplementary element.
-
-### Optional per-card `voiceover` override
-
-Any card kind may carry a nested `voiceover` object to tune its audio
-track. All four sub-fields are optional inside an optional object —
-absent ⇒ the renderer uses the job-level default voice with
-`card.narration` at 1× speed (back-compat with Phase 0 silent decks).
-
-```jsonc
-{
-  "kind": "body",
-  "caption": "短字幕",
-  "narration": "默认是 TTS 朗读的文本",
-  "voiceover": {
-    "enabled": true,             // false → this card is silent in the mp4
-    "voiceId": "v-female-R2s4N9qJ", // overrides the job-level default voice
-    "text": "口播稿可以跟字幕不一样",  // overrides narration for TTS only (visible caption unaffected)
-    "rate": 1.1                  // [0.5, 2.0], default 1.0
-  }
-}
-```
-
-Validator caps: `voiceover.text` ≤ 500 chars; `rate ∈ [0.5, 2.0]`.
-Render-time resolution precedence:
-`voiceover.voiceId → card.voiceId → job-level default`.
-
-> **Source of truth**: `backend/services/paper-slide/deck-validator.js` — caps live at lines 39–46 (QUOTE_TEXT_MAX, DATA_VALUE_MAX, LIST_ITEM_MAX_LEN, etc.). Read it if anything below seems ambiguous.
-
-### Controlled `figureKeyword` list
-
-Pick from these (mirrors `backend/services/paper-slide/prompt.js:31–61`). Anything else renders as a default arrow.
-
-**Narrative scenes** (best for paper-slide / daisy-pastel / showa-catalog / photo-feature / atmospheric / hand-lettered):
-`problem-framing` · `evidence-board` · `customer-pain` · `timeline-review` · `owner-deadline` · `risk-guardrail` · `cashflow-ledger` · `team-alignment` · `before-after` · `learning-loop` · `decision-fork` · `growth-system`
-
-**Pose / mood** (paper-slide family only):
-`climbing` · `thinking` · `stuck` · `running` · `celebrating`
-
-**Single-symbol Lucide glyphs** (use these for all other themes — see Theme catalog for which themes are Lucide-only):
-`briefcase` · `users` · `target` · `trending-up` · `dollar-sign` · `clock` · `message-circle` · `flame` · `lightbulb` · `chart-bar` · `rocket` · `bell`
-
-## Theme catalog (33 themes)
-
-All ids are valid for `deck.theme`. The "figure mode" column tells you which `figureKeyword` vocabulary to draw from — themes marked **Lucide** ignore narrative scene keywords.
-
-| Theme id | Vibe (1 line) | Platform fit | Figure mode |
-|---|---|---|---|
-| `paper-slide` | 泛黄纸纹 + 衬线红字 + 手绘印章 | 抖音 / 视频号 / 小红书 | narrative |
-| `editorial-mag` | 米白页面 + 衬线斜体 + 杂志感留白 | 知乎 / 公众号 / LinkedIn | Lucide |
-| `bold-poster` | 左侧 accent 条 + 黑体超粗大字 + 红方块数字 | X / Threads / LinkedIn | Lucide |
-| `notion-card` | 纯白底 + 暖灰墨 + 蓝色 accent + 页面图标 | 公众号 / 飞书 / 知识星球 | Lucide |
-| `brutalist` | 黑白纯色 + 粗边框 + NO.NN 标签 + raw 排版 | X / Mastodon / 播客 | Lucide |
-| `glass-dark` | 深色渐变 + 紫色发光 + 玻璃拟态 + 短视频感 | 抖音 / 视频号 / TikTok | Lucide |
-| `broadsheet` | FT 三文鱼底 + 重磅衬线 + 首字下沉 + DATELINE | LinkedIn / 知乎 / 雪球 | Lucide |
-| `blueprint` | 青底 + 白色网格 + 橙色尺寸标 + 工程图纸感 | 少数派 / 知乎 / GitHub | Lucide |
-| `daisy-pastel` | 奶油底 + 手绘雏菊 + 星星 + 粉嫩可爱 | 小红书 / 微博 / 即刻 | narrative |
-| `showa-catalog` | 70s city-pop + 彩虹斜条 + 太阳印章 | 小红书 / B 站 / 播客 | narrative |
-| `photo-feature` | 全屏摄影 + 渐变压底 + 重磅衬线（needs `imageUrl`） | 小红书 / 知乎 / 微博 | narrative |
-| `atmospheric` | 黑底 + 一束暖光 + 衬线粉红 italic + 深夜散文 | 微博 / 即刻 / 播客 | narrative |
-| `art-mag` | 颗粒感色块 + 大字衬线 + 几何球 + 艺术画廊感 | 小红书 / 播客 / 即刻 | Lucide |
-| `tome-noir` | 纯黑画布 + humanist sans + 60/40 非对称 + 暖光晕 | X / LinkedIn / 即刻 | Lucide |
-| `flomo-mute` | #fafafa Muji 纸面 + IBM Plex + 苹方 + 绿色细线 | 小红书 / 即刻 / 微博 | Lucide |
-| `substack-drop` | 米色衬线 + 首字下沉 + 章节分隔 + 阅读时间 chip | 公众号 / 知乎 / 少数派 | Lucide |
-| `ink-scroll` | 米黄宣纸 + 楷体竖排 + 印章红 + 水墨边缘 | 小红书 / 微博 / B 站国创 | Lucide |
-| `podcast-clip` | 封面渐变 + 圆形封面 + 大字幕 + 波形底栏 | 小宇宙 / 即刻 / 抖音 | Lucide |
-| `ink-wash` | 宣纸 + 思源宋体 + 横排单字 + 笔触 + 朱印 + 留白 | 知乎长文 / 小红书 / 公众号 | Lucide |
-| `morandi-calm` | 低饱和粉褐 / 灰绿 / 灰蓝色块 + 苹方 Light | 小红书 / 公众号 / 即刻 | Lucide |
-| `douyin-data` | 纯黑底 + 抖音品红 + 湖蓝 + RGB 色差 + 大数字 | 抖音 / 视频号 / 小红书 | Lucide |
-| `highlighter-note` | 奶油格纸 + 印刷体黑字 + Caveat 手写 + 黄色荧光笔 | 小红书 / B 站 / 知乎 | Lucide |
-| `memphis-design` | 奶油 + 原色块 + 波浪线 + 锯齿 + 实心圆 + 1986 后现代 | 即刻 / 小红书 / 播客 | Lucide |
-| `bauhaus-grid` | 奶油纸 + 红黄蓝原色 + 圆方三角 + 1923 包豪斯几何 | LinkedIn / 设计博客 / 知乎 | Lucide |
-| `riso-print` | 荧光粉 + 钴蓝错版 + 网点 + 噪点 + Risograph | 独立开发 / 设计 newsletter | Lucide |
-| `chrome-y2k` | 镀铬全息 + 像素栅 + 双径向辉光 + Y2K Bratz/iPod | 小红书 girlie / 抖音 Z / TikTok | Lucide |
-| `botanical-press` | 羊皮纸 + Cormorant 斜体 + 拉丁学名 + 18 世纪植物标本 | 茶道 / 园艺 / 慢生活 | Lucide |
-| `art-nouveau` | Mucha 曲线 + 烫金 + 装饰边框 + 1900 巴黎沙龙海报 | 艺术评论 / 美术志 / 插画家 | Lucide |
-| `tabloid-print` | 红色 BREAKING + Anton 巨字 + 半调 + 双栏 + 小报头条 | 行业八卦 / 争议事件 / 独立专栏 | Lucide |
-| `arcade-pixel` | CRT 扫描线 + 8-bit 像素 + RGB 色差 + 80s 街机标题屏 | 独立游戏 / 像素艺术 / 90s 复古 | Lucide |
-| `hand-lettered` | 黑板绿底 + 粉笔白字 + Caveat 手写 + 咖啡馆菜单板 | 咖啡馆菜单 / 教师笔记 / 生活感 | narrative |
-| `stamp-collector` | 齿孔 + 邮戳 + 面额 + 复古集邮册标本页 | 旅行游记 / 收藏品 / 怀旧专栏 | Lucide |
-| `tropical-postcard` | 落日渐变 + 椰影 + 浪潮线 + 60s 旅游海报明信片 | 旅行游记 / 夏日散文 / 小红书 vlog | Lucide |
-
-### Per-theme caption voice (quick guide)
-
-The slicing prompt at `backend/services/paper-slide/prompt.js:94–237` defines per-theme caption tone. Highlights:
-
-- `paper-slide`: 短、实、有冲击；反差/悬念/痛点钩子
-- `bold-poster`: 数字 + 硬观点，≤12 字最佳
-- `glass-dark`: 未来 / tech 感，断句多
-- `broadsheet`: 财经评论调，开篇即判断 + 数字
-- `ink-scroll` / `ink-wash`: 文言短句 / 现代东方意味
-- `douyin-data`: "你不知道的…" / "%/倍/前 N" 爆款句式
-- `morandi-calm`: 安静、克制、像周报作者写给自己
-- `hand-lettered`: 温暖、随手、像便签上一句话
-
-When picking caption vocabulary, match the theme's register. The user's own LLM (you) is doing the slicing — read the relevant block in `prompt.js` for the chosen theme if precision matters.
-
-## Top schema invariants you MUST enforce
-
-These are the most common failure modes. The validator surfaces a clean error, but it's faster to get them right the first time.
-
-1. **First card is `kind: "title"`** — `deck-validator.js:198–200`. Reordering would push a body to slot 0; the renderer assumes title at slot 0 for cover-card composition.
-2. **Card count 2–9 inclusive** — `deck-validator.js:195–197`. Target 5 cards; never exceed 8 (BrandKit may append an outro server-side, room for 1 more).
-3. **`caption` must not end with punctuation** for body cards — implicit in V2 at `deck-validator.js:323` and prompt rule line 425. Trailing 。！？…）leaks into subtitles.
-4. **`figureKeyword`** has no validator check on the keyword string itself (only that it's a string if present) — but **unknown keywords render as a default arrow**. Always pick from the controlled list.
-5. **`outro` card invariant** — at most one, must be last. `deck-validator.js:204–208`. Multiple outros = wiring bug, mid-deck outro = bug.
-
-## Quick start with curated templates
-
-When the user is new to Slice and wants something to copy from, point them
-at the curated gallery. Five hand-picked decks ship with the CLI and
-match the most common content shapes (product launch, founder lesson,
-data finding, incident review, quiet essay).
-
-```bash
-voxflow slice fork --list                    # browse the gallery
-voxflow slice fork product-launch            # copy the deck.json to cwd
-voxflow slice preview product-launch-deck.json   # iterate
-```
-
-The same gallery is browsable at `voxflow.studio/apps/slice/templates`.
-
-## Hand-off
-
-After writing `deck.json`, tell the user:
-
-```
-Wrote deck.json (<N> cards, theme: <theme-id>). Next:
-
-  voxflow slice preview deck.json                    # browser preview + per-card audition + 🎨 + render
-  voxflow slice render deck.json --output out.mp4    # one-shot mp4 from the terminal
-```
-
-Do not run either command yourself unless the user asks.
-
-Both commands work fully offline for the visual side. **Audio (per-card
-TTS audition + render audio track) requires `voxflow login`** — 100 quota
-per unique `(voice, text)` clip, then cached at
-`~/.config/voxflow/stage-tts-cache/`. With no login, both commands fall
-back silently to a Phase-0-style silent video; pass `--no-audio` to
-`render` to suppress the audio pass entirely.
-
-## Multi-turn editing loop (Claude Code / Cursor / native `Edit`)
-
-When the user is iterating — "shorten card 2", "swap order", "different
-voice for card 3", "hear card 1 again" — they are **NOT** asking for a
-regen. Stay in this loop:
-
-```bash
-# Run once at the start of the session; auto-opens http://127.0.0.1:5180.
-# The page hot-reloads on every save of deck.json (~50 ms fs watcher).
-voxflow slice preview deck.json &
-```
-
-Then for every follow-up:
-
-| User intent | Your move | Cost |
-|---|---|---|
-| "card N is too long" | `Edit` `cards[N-1].caption` / `.narration` — page hot-reloads | 0 |
-| "swap card 2 and 3" | `Edit` the `cards` array order | 0 |
-| "different voice for card 3" | `Edit` `cards[2].voiceover.voiceId` — or tell user to paste a voiceId in the toolbar voice picker | 0 (Edit) |
-| "make card 4 silent" | `Edit` `cards[3].voiceover = { "enabled": false }` | 0 |
-| "口播说点不一样的" | `Edit` `cards[i].voiceover.text` so TTS reads override while caption stays | 0 |
-| "I want to hear card 3" | Tell user to click ▶ on card 3 in the browser; the toolbar shows cache hit / quota cost / error | 100 (first time per clip), 0 (cached) |
-| "regenerate the image on card 2" | `Edit` `cards[1].images[0].prompt` — user clicks 🎨 in stage to see the new variant | 200 (first time per prompt), 0 (cached) |
-| "give me a custom panel on card 4" | `Edit` `cards[3].children` to swap `paper-figure` for `raw-html` (V2 LayoutTree only) | 0 |
-| "render mp4" | Tell user: click **Render mp4 (local)** in the browser, OR `voxflow slice render deck.json` | TTS + image pass (cached if seen) + render |
-
-### Loop rules
-
-1. **Edit only the fields the user asked about.** Other cards must stay
-   byte-identical — the stage UI's diff highlight is the user's "what
-   changed" indicator. Touching extra fields breaks that signal.
-2. **Never re-run `voxflow slice <article>` during iteration** — that
-   costs 200 quota AND overwrites every user edit with a fresh LLM draft.
-3. **Re-validate after every save** by re-reading the file. If the user
-   says "page shows old content" or "red banner appeared", the JSON has a
-   syntax error (trailing comma, unbalanced quote) — open, fix, save.
-4. **Don't restart the preview server.** One process handles the whole
-   session; restarting wipes snapshot history.
-5. **Don't call `/api/audition` yourself.** It's user-driven via the ▶
-   button. Editing `cards[i].voiceover.voiceId` is enough — the next ▶
-   click picks up the new voice.
-
-## Self-review checklist
-
-Before declaring the slice done:
-
-- [ ] `deck.json` parses as JSON (no trailing commas, no comments)
-- [ ] `theme` is one of the 33 registered ids
-- [ ] 5–8 cards (target 5; max 8 without outro, 9 with)
-- [ ] First card is `title`, with `title` as a non-empty array of 1–2 short strings
-- [ ] Every card has a non-empty `narration`
-- [ ] No `caption` ends with 。！？…
-- [ ] Every `figureKeyword` is in the controlled list
-- [ ] No `caption` exceeds 16 zh chars; no `narration` exceeds 60 zh chars
-- [ ] At most one of each rich kind (quote / data / list)
-- [ ] If the theme is `photo-feature` or `atmospheric` and the user provided per-card images, `imageUrl` starts with `https://`
-- [ ] No outro card unless the user explicitly asked for one
-- [ ] No React, TSX, or CSS files were created
-- [ ] If any card has a `voiceover` object, every key inside it (`enabled` / `voiceId` / `text` / `rate`) matches the schema (boolean / non-empty string ≤128 / string ≤500 / number in [0.5, 2.0])
-
-## Anti-patterns
-
-- ❌ Inventing themes ("modern-clean", "tech-blue"). Only the 33 registered ids work.
-- ❌ Writing TSX / React / CSS — the renderer is fixed; you only fill in card fields.
-- ❌ `narration` longer than 60 zh chars — gets clipped silently by the TTS-text-box constraint.
-- ❌ `caption` ending in 。！？— these are subtitles, not prose.
-- ❌ Two consecutive `figureKeyword: "thinking"` — visually repetitive.
-- ❌ Adding a `kind: "outro"` card on your own — the server's BrandKit usually appends it.
-- ❌ Calling `voxflow slice <file>` to do the work — this skill is the **offline** path.
-- ❌ Fetching arbitrary image URLs into `imageUrl` — only public http(s) URLs the user explicitly provided.
-
-## Examples
-
-See `examples/article.md` for a representative input and `examples/expected-deck.json` for the matching output that validates cleanly. Run `node examples/validate.mjs` to verify any deck against the real backend validator.

package/skills/voxflow-slice/examples/article.md

@@ -1,13 +0,0 @@
-# 为什么远程办公提升了生产力
-
-我做了五年远程办公，从最初被全公司怀疑"在家肯定摸鱼"，到现在团队整体效率比坐班时期高出 30%。这五年我换过三家公司，从 8 人创业团队到 200 人 SaaS，结论高度一致：远程办公不是没人监督就摸鱼，而是把"坐在工位"这个伪指标，换成了"交付的具体东西"。
-
-第一个变化是会议变少了。坐班时同事一抬眼就能拉你聊五分钟，五个五分钟一天就废了。远程之后大家默认异步沟通，能发文档就不开会，能 Slack 就不视频。我现在每周开会时间从 15 小时降到 4 小时，省下来的 11 小时全部用在写代码、写文档、做深度思考。
-
-第二个变化是通勤消失了。我以前在上海每天通勤来回 3 小时，地铁上根本没法做任何有质量的工作。现在这 3 小时变成 1.5 小时锻炼 + 1.5 小时早晨 deep work。整个人精神状态完全不一样，下午也不会累瘫。
-
-第三个变化是产出可被衡量。坐班时管理者看的是"在不在工位"——这是个伪指标。远程必须看 PR、看文档、看 demo，结果反而是真正的好员工更容易被看到。我团队里两个内向的工程师，坐班三年一直没存在感，远程半年成了团队顶梁柱，因为他们的 PR 质量本来就最高。
-
-最后一个变化是招聘半径变大了。我们最近一年招的 8 个人里，有 4 个不在公司所在城市。这意味着我们能挑全国最合适的人，不再被"必须搬来上海"这个门槛卡住。同样的薪资能买到的人才质量直接提升一档。
-
-所以远程办公提升生产力，不是因为人变勤奋了，而是因为把"看起来在工作"换成了"实际交付了什么"。把伪指标换成真指标，效率自然会上来。这个转变对管理者要求其实更高——但回报也大得多。