launch huashu-design v1.0: 9 demos + marketing-first README

- 新增 9 个能力 demo（workflow + capability），每个 MP4 + GIF + 60fps
- README 重写：营销 hook 开头 · 功能优先结构 · 自然嵌入 GIF
- 修复 render-video.js Google Fonts networkidle 超时
- 修复 c1-ios-prototype 刘海/Home Indicator 背景色
- 补充 references/editable-pptx.md 和 scripts/export_deck_stage_pdf.mjs

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

SKILL.md

@@ -29,6 +29,87 @@ description: 花叔Design（Huashu-Design）——用HTML做高保真原型、
 
 **如果还是没有，或者用户需求表达很模糊**（如"做个好看的页面"、"帮我设计"、"不知道要什么风格"、"做个XX"没有具体参考），**不要凭通用直觉硬做**——进入 **设计方向顾问模式**，从 20 种设计哲学里给 3 个差异化方向让用户选。完整流程见下方「设计方向顾问（Fallback 模式）」大节。
 
+#### 1.a 品牌资产协议（涉及具体品牌时强制执行）
+
+> **这是 v1 最核心的约束，也是稳定性的生命线。** Agent 是否走通这个协议，直接决定输出质量是 65 分还是 90 分。不要跳过任何一步。
+
+**触发条件**：任务涉及具体品牌——用户提了产品名/公司名/明确客户（Stripe、Linear、Anthropic、Notion、Lovart、自家公司等），不论用户是否主动提供了品牌资料。
+
+**5 步硬流程**（每一步都有 fallback，但绝不可以静默跳过）：
+
+##### Step 1 · 问
+一句话问清楚：「这个品牌有 brand guidelines / 设计规范 / logo 文件吗？品牌色和字体清单？有的话直接给我；没有的话我去搜。」
+
+##### Step 2 · 搜官方品牌页
+- 典型路径：`<brand>.com/brand` / `<brand>.com/press` / `brand.<brand>.com` / `<brand>.github.io/brand`
+- `WebFetch` 搜不到时用 `WebSearch`：「`<brand>` brand guidelines logo download」
+- App 类产品另查 App Store 页面（app icon + 截图可提色）
+
+##### Step 3 · 下载资产 · 三条兜底路径
+
+> **真实世界里 SVG logo 经常拿不到**。2026 年官网大多 Next.js SSR + inline SVG，或 Cloudflare 反爬返回 403。下面三条路径按成功率递减排列——**前一条失败立刻走下一条，不要停**：
+
+1. **独立 SVG 文件**（最理想）
+   ```bash
+   curl -o assets/<brand>-brand/logo.svg https://<brand>.com/logo.svg
+   ```
+2. **官网 HTML 全文**（80% 场景必用）：WebFetch 返回 403 时用 curl 带 UA 兜底，logo 的 inline SVG 和色值 token 直接藏在 HTML 里：
+   ```bash
+   curl -A "Mozilla/5.0" -L https://<brand>.com -o assets/<brand>-brand/homepage.html
+   ```
+3. **产品截图取色**（App/未开源产品必走）：从用户提供的产品截图或官方 Dribbble / Twitter media 里提取主色。macOS 用 Preview 的吸管、Linux 用 `convert image.png -unique-colors txt:-` 给出主要色值。
+
+##### Step 4 · Grep 提取真实色值
+- **绝对不要从记忆里猜品牌色**。从下载的资产里 grep 所有 `fill`/`stroke`/`color`/`background`/`#xxxxxx` 的 6 位 hex，按频率排序，过滤黑白灰：
+  ```bash
+  grep -hoE '#[0-9A-Fa-f]{6}' assets/<brand>-brand/*.{svg,html,css} | sort | uniq -c | sort -rn | head -20
+  ```
+- **警惕示范品牌污染**：产品截图里常有用户 demo 的品牌色（如某工具截图里演示喜茶红），那不是该工具的色。**同时出现两种强色时必须区分**。
+- **品牌多切面的客观事实**：同一品牌的官网营销色（`<brand>.com` 暖底 accent 色）和产品 UI 色（产品内深底 accent 色）经常不同，比如 Lovart 官网是暖米+橙+蓝，产品 UI 是 Charcoal + Lime 青柠。**两套都是真的**——根据交付场景选合适的切面（做营销物料用官网色，做产品内/App 延伸用 UI 色）。
+
+##### Step 5 · 固化为 `brand-spec.md` 文件（不可省略）
+
+> **这一步是全协议的制胜点**。前 4 步抽完色，如果只留在内存里下一页就忘。必须写一份 `brand-spec.md` 到项目根目录，让所有 CSS 变量引用这份文件。
+
+```markdown
+# <Brand> · Brand Spec
+> 从以下资产抽取：<列出资产来源和提取日期>
+> 资产完整度：<完整 / 部分 / 推断>
+
+## 色板
+- Primary: #XXXXXX  <来源标注>
+- Background: #XXXXXX
+- Ink: #XXXXXX
+- 禁用色: <品牌明确不用的色系>
+
+## 字型
+- Display: <font stack>
+- Body: <font stack>
+
+## 签名细节
+- <哪些细节是「120% 做到」的，如 2px 细线、italic em 强调>
+
+## 禁区
+- <明确不能做的：比如 Lovart 不用蓝色、Stripe 不用低饱和暖色>
+
+## 气质关键词
+- <3-5 个形容词>
+```
+
+**写完 spec 后的执行纪律**（硬要求）：
+- 写 CSS 前把 spec 色值做成 `:root { --brand-primary: ...; }` CSS 变量
+- 所有 HTML 文件只能用 `var(--brand-*)`，**不允许临场写死色号**
+- 这一条让品牌一致性从「靠自觉」变成「靠结构」——agent 想临时加色要先改 spec，改 spec 就会自觉
+
+**全流程失败的兜底**：三条路径都失败（极罕见）才明确告诉用户「找不到 official brand guidelines，我按通用风格做并在 spec 里标注 assumption」——**不要静默用通用色硬做**。Fallback 时进入「设计方向顾问模式」（见下节）。
+
+**反例**（真实踩过的坑）：
+- 为 Kimi 做动画时凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工一遍
+- 把 Lovart 产品截图里演示品牌的喜茶红当成 Lovart 自己的色——差点毁整个设计
+- 抽完色没写进 brand-spec.md，第三页就忘了主色数值，临场加了个「接近但不是」的 hex——品牌一致性崩溃
+
+**协议代价 vs 不做代价**：5-10 分钟 grep + 5 分钟写 spec = 15 分钟。不做的代价是整个产出方向错，返工 1-2 小时。**这是稳定性最便宜的投资**。
+
 ### 2. Junior Designer模式：先展示假设，再执行
 
 你是manager的junior designer。**不要一头扎进去闷头做大招**。HTML文件的开头先写下你的assumptions + reasoning + placeholders，**尽早show给用户**。然后：
@@ -59,18 +140,47 @@ description: 花叔Design（Huashu-Design）——用HTML做高保真原型、
 
 ### 6. 反AI slop（重要，必读）
 
-AI设计最容易掉进去的陷阱。完整清单见 `references/content-guidelines.md`，速查：
+#### 6.1 什么是 AI slop？为什么要反？
 
-- ❌ 激进渐变背景（尤其紫色渐变在白底上）
-- ❌ Emoji 作为图标（除非品牌本身用）
-- ❌ 圆角卡片+左边彩色border accent
-- ❌ SVG画imagery（画人/物/场景）——留placeholder让用户提供真材料
-- ❌ Inter/Roboto/Arial/Fraunces/system fonts
-- ❌ 赛博霓虹 / 深蓝色底（#0D1117）= 审美禁区
-- ✅ `text-wrap: pretty` + CSS Grid + 高级CSS是好朋友
-- ✅ oklch定义色彩（而不是从头发明新颜色）
-- ✅ 配图优先 AI 生成（Gemini / Flash / Lovart），HTML截图仅在精确数据表格时用
-- ✅ 文案中使用「」引号而非""引号
+**AI slop = AI 训练语料里最常见的"视觉最大公约数"**。
+紫渐变、emoji 图标、圆角卡片+左 border accent、SVG 画人脸——这些东西之所以是 slop，不是因为它们本身丑，而是因为**它们是 AI 默认模式下的产物，不携带任何品牌信息**。
+
+**规避 slop 的逻辑链**：
+1. 用户请你做设计，是要**他的品牌被认出来**
+2. AI 默认产出 = 训练语料的平均 = 所有品牌混合 = **没有任何品牌被认出来**
+3. 所以 AI 默认产出 = 帮用户把品牌稀释成"又一个 AI 做的页面"
+4. 反 slop 不是审美洁癖，是**替用户保护品牌识别度**
+
+这也是为什么 §1.a 品牌资产协议是 v1 最硬的约束——**服从规范是反 slop 的正向方式**（对的事），清单只是反 slop 的反向方式（不做错的事）。
+
+#### 6.2 核心要规避的（带"为什么"）
+
+| 元素 | 为什么是 slop | 什么情况可以用 |
+|------|-------------|---------------|
+| 激进紫色渐变 | AI 训练语料里"科技感"的万能公式，出现在 SaaS/AI/web3 每一个落地页 | 品牌本身用紫渐变（如 Linear 某些场景）、或任务就是讽刺/展示这类 slop |
+| Emoji 作图标 | 训练语料里每个 bullet 都配 emoji，是"不够专业就用 emoji 凑"的病 | 品牌本身用（如 Notion），或产品受众是儿童/轻松场景 |
+| 圆角卡片 + 左彩色 border accent | 2020-2024 Material/Tailwind 时期的烂大街组合，已成视觉噪音 | 用户明确要求、或这个组合在品牌 spec 里被保留 |
+| SVG 画 imagery（人脸/场景/物品）| AI 画的 SVG 人物永远五官错位，比例诡异 | **几乎没有**——有图就用真图（Wikimedia/Unsplash/AI 生成），没图就留诚实 placeholder |
+| Inter/Roboto/Arial/system fonts 作 display | 太常见，读者看不出这是"有设计的产品"还是"demo 页" | 品牌 spec 明确用这些字体（Stripe 用 Sohne/Inter 变体，但是经过微调的） |
+| 赛博霓虹 / 深蓝底 `#0D1117` | GitHub dark mode 美学的烂大街复制 | 开发者工具产品且品牌本身走这方向 |
+
+**判断边界**：「品牌本身用」是唯一能合法破例的理由。品牌 spec 里明写了用紫渐变，那就用——此时它不再是 slop，是品牌签名。
+
+#### 6.3 正向做什么（带"为什么"）
+
+- ✅ `text-wrap: pretty` + CSS Grid + 高级 CSS：排版细节是 AI 分不清的"品味税"，会用这些的 agent 看起来像真设计师
+- ✅ 用 `oklch()` 或 spec 里已有的色，**不凭空发明新颜色**：所有临场发明的色都会让品牌识别度下降
+- ✅ 配图优先 AI 生成（Gemini / Flash / Lovart），HTML 截图仅在精确数据表格时用：AI 生成的图比 SVG 手画准确，比 HTML 截图有质感
+- ✅ 文案用「」引号不用 ""：中文排印规范，也是"有审校过"的细节信号
+- ✅ 一个细节做到 120%，其他做到 80%：品味 = 在合适的地方足够精致，不是均匀用力
+
+#### 6.4 反例隔离（演示型内容）
+
+当任务本身就要展示反设计（如本任务就是讲"什么是 AI slop"、或对比评测），**不要整页堆 slop**，而是用**诚实的 bad-sample 容器**隔离——加虚线边框 + "反例 · 不要这样做" 角标，让反例服务于叙事而不是污染页面主调。
+
+这不是硬规则（不做成模板），是原则：**反例要看得出是反例，不是让页面真的变成 slop**。
+
+完整清单见 `references/content-guidelines.md`。
 
 ## 设计方向顾问（Fallback 模式）
 
@@ -308,10 +418,20 @@ Screen 组件接 callback props（`onEnter`、`onClose`、`onTabChange`、`onOpe
 
 1. **理解需求**：新任务或模糊任务必须问clarifying questions，详见 `references/workflow.md`。一次focused一轮问题通常够，小修小补跳过。
    🛑 **检查点1：问题清单一次性发给用户，等用户批量答完再往下走**。不要边问边做。
+   🛑 **幻灯片/PPT 任务额外必问「最终交付格式」**（浏览器演讲 / PDF / 可编辑 PPTX）——**要可编辑 PPTX 就必须从第一行 HTML 开始按 `references/editable-pptx.md` 的 4 条硬约束写**，事后补救会导致 2-3 小时返工。详见 `references/slide-decks.md` 开头「开工前先确认交付格式」一节。
    ⚡ **如果用户需求严重模糊（没参考、没明确风格、"做个好看的"类）→ 走「设计方向顾问（Fallback 模式）」大节，完成 Phase 1-4 选定方向后，再回到这里 Step 2**。
-2. **探索资源**：读design system的完整定义、linked files、上传的截图/代码。如果用户没给context，先走设计方向顾问 Fallback，再按 `references/design-context.md` 的品位锚点兜底。
-3. **规划系统**：vocalize你要用的设计系统（色彩/字型/layout节奏/component pattern）。
-   🛑 **检查点2：口头说出来等用户点头，再动手写代码**。方向错了晚改比早改贵100倍。
+2. **探索资源 + 抽 spec**：读 design system、linked files、上传的截图/代码。**涉及具体品牌时必走 §1.a 五步协议**（问→搜→下载→grep→写 `brand-spec.md`）。如果用户没给 context 且挖不出资产，先走设计方向顾问 Fallback，再按 `references/design-context.md` 的品位锚点兜底。
+3. **先答四问，再规划系统**：**这一步的前半段比所有 CSS 规则更决定输出**。
+
+   📐 **位置四问**（每个页面/屏幕/镜头开工前必答）：
+   - **叙事角色**：hero / 过渡 / 数据 / 引语 / 结尾？（一页 deck 里每页都不一样）
+   - **观众距离**：10cm 手机 / 1m 笔记本 / 10m 投屏？（决定字号和信息密度）
+   - **视觉温度**：安静 / 兴奋 / 冷静 / 权威 / 温柔 / 悲伤？（决定配色和节奏）
+   - **容量估算**：用纸笔画 3 个 5 秒 thumbnail 算一下内容塞得下吗？（防溢出 / 防挤压）
+
+   四问答完再 vocalize 设计系统（色彩/字型/layout 节奏/component pattern）——**系统要服务于答案，不是先选系统再塞内容**。
+
+   🛑 **检查点2：四问答案 + 系统口头说出来等用户点头，再动手写代码**。方向错了晚改比早改贵 100 倍。
 4. **构建文件夹结构**：`项目名/` 下放主HTML、需要的assets拷贝（不要bulk copy >20个文件）。
 5. **Junior pass**：HTML里写assumptions+placeholders+reasoning comments。
    🛑 **检查点3：尽早show给用户（哪怕只是灰色方块+标签），等反馈再写组件**。
@@ -384,9 +504,11 @@ Screen 组件接 callback props（`onEnter`、`onClose`、`onTabChange`、`onOpe
 | 文件 | 何时用 | 提供 |
 |------|--------|------|
 | `deck_index.html` | **做幻灯片（默认，多文件架构）** | iframe拼接 + 键盘导航 + scale + 计数器 + 打印合并，每页独立HTML免CSS串扰 |
-| `deck_stage.js` | 做幻灯片（单文件架构，≤10页） | web component：auto-scale + 键盘导航 + slide counter + localStorage + speaker notes |
-| `scripts/export_deck_pdf.mjs` | **HTML→PDF 导出**（矢量、高保真、文字可搜） | Playwright `page.pdf()` + pdf-lib 合并。依赖 `playwright pdf-lib` |
-| `scripts/export_deck_pptx.mjs` | **HTML→PPTX 导出**（图片铺底，不可编辑） | Playwright 截图 + pptxgenjs addImage。视觉 100% 保真。**要可编辑 PPTX → 切到支持该格式的专用 skill/工具按其严格格式重构 HTML**。依赖 `playwright pptxgenjs` |
+| `deck_stage.js` | 做幻灯片（单文件架构，≤10页） | web component：auto-scale + 键盘导航 + slide counter + localStorage + speaker notes ⚠️ **script 必须放在 `</deck-stage>` 之后，section 的 `display: flex` 必须写到 `.active` 上**，详见 `references/slide-decks.md` 的两个硬约束 |
+| `scripts/export_deck_pdf.mjs` | **HTML→PDF 导出（多文件架构）** · 每页独立 HTML 文件，playwright 逐个 `page.pdf()` → pdf-lib 合并。文字保留矢量可搜。依赖 `playwright pdf-lib` |
+| `scripts/export_deck_stage_pdf.mjs` | **HTML→PDF 导出（单文件 deck-stage 架构专用）** · 2026-04-20 新增。处理 shadow DOM slot 导致的「只出 1 页」、absolute 子元素溢出等坑。详见 `references/slide-decks.md` 末节。依赖 `playwright` |
+| `scripts/export_deck_pptx.mjs` | **HTML→PPTX 导出（双模式）** · `--mode image` 图片铺底视觉 100% 保真但文字不可编辑；`--mode editable` 调 `html2pptx.js` 导出原生可编辑文本框，但 HTML 必须符合 4 条硬约束（见 `references/editable-pptx.md`）。依赖 `playwright pptxgenjs`（editable 模式还需 `sharp`） |
+| `scripts/html2pptx.js` | **HTML→PPTX 元素级翻译器** · 读 computedStyle 把 DOM 逐元素翻译成 PowerPoint 对象（text frame / shape / picture）。`export_deck_pptx.mjs --mode editable` 内部调用。要求 HTML 严格满足 4 条硬约束 |
 | `design_canvas.jsx` | 并排展示≥2个静态variations | 带label的网格布局 |
 | `animations.jsx` | 任何动画HTML | Stage + Sprite + useTime + Easing + interpolate |
 | `ios_frame.jsx` | iOS App mockup | iPhone bezel + 状态栏 + 圆角 |
@@ -406,6 +528,7 @@ Screen 组件接 callback props（`onEnter`、`onClose`、`onTabChange`、`onOpe
 | 反AI slop、内容规范、scale | `references/content-guidelines.md` |
 | React+Babel项目setup | `references/react-setup.md` |
 | 做幻灯片 | `references/slide-decks.md` + `assets/deck_stage.js` |
+| 导出可编辑 PPTX（html2pptx 4 条硬约束） | `references/editable-pptx.md` + `scripts/html2pptx.js` |
 | 做动画/motion（**先读 pitfalls**）| `references/animation-pitfalls.md` + `references/animations.md` + `assets/animations.jsx` |
 | 做Tweaks实时调参 | `references/tweaks-system.md` |
 | 没有design context怎么办 | `references/design-context.md`（薄 fallback） 或 `references/design-styles.md`（厚 fallback：20 种设计哲学详细库） |
@@ -436,6 +559,27 @@ Skill 路径引用均采用**相对本 skill 根目录**的形式（`references/
 - HTML放项目目录，不要散落到`~/Downloads`
 - 最终产出用浏览器打开检查或用Playwright截图
 
+## Skill 推广水印（仅动画产出）
+
+**只在动画产出**（HTML 动画 → MP4 / GIF）默认带「**Created by Huashu-Design**」水印，辅助 skill 传播。**幻灯片 / 信息图 / 原型 / 网页等其他场景不加**——加了反而干扰用户实际使用。
+
+- **必带场景**：HTML 动画 → 导出 MP4 / GIF（用户会拿去公众号、X、B站传播，水印能跟着流通）
+- **不带场景**：幻灯片（用户自己讲）、信息图（嵌文章）、App / 网页原型（设计 review）、配图
+- **第三方品牌的非官方致敬动画**：水印前加「非官方出品 · 」前缀，避免被误认为官方物料引发 IP 争议
+- **用户明确说"不要水印"**：尊重，移除
+- **水印模板**：
+  ```jsx
+  <div style={{
+    position: 'absolute', bottom: 24, right: 32,
+    fontSize: 11, color: 'rgba(0,0,0,0.4)' /* 深底用 rgba(255,255,255,0.35) */,
+    letterSpacing: '0.15em', fontFamily: 'monospace',
+    pointerEvents: 'none', zIndex: 100,
+  }}>
+    Created by Huashu-Design
+    {/* 第三方品牌动画前缀「非官方出品 · 」*/}
+  </div>
+  ```
+
 ## 核心提醒
 
 - **Embody专家**：做幻灯片时是幻灯片设计师，做动画时是动画师。不是写Web UI。
@@ -443,3 +587,6 @@ Skill 路径引用均采用**相对本 skill 根目录**的形式（`references/
 - **Variations不给答案**：3+个变体，让用户选。
 - **Placeholder优于烂实现**：诚实留白，不编造。
 - **反AI slop时时警醒**：每个渐变/emoji/圆角border accent之前先问——这真的必要吗？
+- **涉及具体品牌**：先走「品牌资产协议」（核心哲学 §1.a），不要凭记忆猜配色。
+- **做动画之前**：必读 `references/animation-pitfalls.md`——里面 14 条规则每条都来自真实踩过的坑，跳过会让你重做 1-3 轮。
+- **手写 Stage / Sprite**（不用 `assets/animations.jsx`）：必须实现两件事——(a) tick 第一帧同步设 `window.__ready = true` (b) 检测 `window.__recording === true` 时强制 loop=false。否则录视频必出问题。