Merge core-assets-fact-check optimization (Darwin round)

Based on real DJI Pocket 4 launch animation failure (2026-04-20):
- Add Principle #0: Fact Verification First (WebSearch before assumptions)
- Upgrade §1.a from 'Brand Asset Protocol' to 'Core Asset Protocol':
  logo/product-shots/UI are now first-class assets, colors auxiliary
- Update workflow Step 1/2 to enforce the new order
- Add 'CSS silhouette for product shot' to anti-slop list
- Translate README.md to English (international audience)

Darwin score: 62.3 → 86.7 (+24.4)

LICENSE

@@ -1,21 +1,44 @@
-MIT License
+Huashu Design · Personal Use License
+Copyright (c) 2026 alchaincyf (花叔 · 花生)
 
-Copyright (c) 2026 alchaincyf (花叔)
+本 skill（以下简称「本作品」）包含 SKILL.md、scripts、references、assets、demos 及其全部派生内容。使用本作品视为同意以下条款：
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
+---
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
+## 1. 允许的使用（个人免费）
-copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+以下场景无需授权、无需打招呼：
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+- **学习与研究**：阅读代码、修改、二次开发用于自己理解
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+- **个人创作**：为自己的文章、视频、副业项目、小红书/公众号/B站等内容创作使用
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+- **非营利分享**：基于本作品做 demo、教程，发布到社交平台、博客、播客
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+- **派生作品**：在自己名下的个人仓库里基于本作品做派生 skill，需在 README 显著位置注明来源（`Derived from alchaincyf/huashu-design`）
-SOFTWARE.
+
+## 2. 禁止的使用（必须事先授权）
+
+以下场景**必须联系花生获得书面授权后方可使用**：
+
+- 任何**公司、团队、工作室、机构**将本作品集成到其内部工具链或对外产品
+- 将本作品或其派生物作为**面向付费客户的交付手段**（包括设计外包、品牌咨询、B 端 SaaS 等）
+- 基于本作品做**商业软件产品**、付费模板、付费订阅服务
+- 以**营利为目的**的培训课程、商业工作坊、闭门付费社群
+- 在**商单创作**（乙方向甲方交付物）中使用本作品生成的内容
+
+## 3. 授权联系方式
+
+商用授权请通过以下任一平台联系花生：
+
+- X / Twitter：https://x.com/AlchainHust
+- 公众号：微信搜索「花叔」
+- B 站：https://space.bilibili.com/14097567
+- YouTube：https://www.youtube.com/@Alchain
+- 小红书：https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf
+- 官网：https://www.huasheng.ai/
+
+## 4. 免责声明
+
+本作品按「现状」提供，不提供任何明示或默示的担保。作者不对因使用本作品导致的任何损失承担责任。
+
+---
+
+简而言之：**个人随便用，企业要打招呼。**

README.md

@@ -2,231 +2,240 @@
 
 # Huashu Design
 
-> *「你要做的下一个设计，何必打开图形界面」*
+> *"Type. Hit enter. A finished design lands in your lap."*
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+[![License](https://img.shields.io/badge/License-Personal%20Use%20Only-orange.svg)](LICENSE)
-[![Claude Code](https://img.shields.io/badge/Claude%20Code-Skill-blueviolet)](https://claude.ai/code)
+[![Agent-Agnostic](https://img.shields.io/badge/Agent-Agnostic-blueviolet)](https://skills.sh)
 [![Skills](https://img.shields.io/badge/skills.sh-Compatible-green)](https://skills.sh)
 
 <br>
 
-**Claude Design 把设计师塞进了浏览器。Huashu Design 让图形工具这一层消失。**
+**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.**
 
 <br>
 
-PPT、App 原型、时间轴动画、信息图、设计变体——在 Claude Code 里说一句话，agent 自己搭 design spec、自己抓品牌色、自己生成 HTML、自己跑 Playwright 验证。<br>
+Thirty seconds later, you have a slide deck, an iOS prototype, a motion-design sequence, or an infographic. Drop it in an issue, paste it into Keynote, ship it to Notion.
-没有画布，没有图层，没有插件。只剩下一个能直接复制到 Keynote、贴进飞书、发进 issue 的交付物。
+
+It doesn't look like AI made it. Twenty real design philosophies are distilled into the skill (Pentagram's information architecture, Field.io's motion poetics, Kenya Hara's eastern minimalism…). The agent grabs brand assets, builds a design spec, generates HTML, runs Playwright verification, then critiques itself against a 5-dimension rubric.
 
 ```
 npx skills add alchaincyf/huashu-design
 ```
 
-[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系)
+[See it work](#demo-gallery) · [Install](#install) · [What it does](#what-it-does) · [How it works](#core-mechanics) · [vs. Claude Design](#vs-claude-design)
-
-<br>
-
-[![Star History Chart](https://api.star-history.com/svg?repos=alchaincyf/huashu-design&type=Date)](https://star-history.com/#alchaincyf/huashu-design&Date)
 
 </div>
 
 ---
 
 <p align="center">
-  <img src="demos/w3-fallback-advisor.gif" alt="Fallback 设计顾问 · 从 20 种设计哲学推荐 3 个差异化方向" width="100%">
+  <img src="demos/w3-fallback-advisor.gif" alt="Fallback design advisor · 3 differentiated directions from 20 design philosophies" width="100%">
 </p>
 
 ---
 
-## 装上就能用
+## Install
 
 ```bash
 npx skills add alchaincyf/huashu-design
 ```
 
-然后在 Claude Code 里直接说话：
+Then just talk to Claude Code:
 
 ```
-「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」
+"Make a keynote for AI psychology. Give me 3 style directions to pick from."
-「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」
+"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."
-「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」
+"Turn this logic into a 60-second animation. Export MP4 and GIF."
-「帮我对这个设计做一个 5 维度评审」
+"Run a 5-dimension expert review on this design."
 ```
 
-没有按钮、没有面板、没有 Figma 插件。跨 agent 通用 —— Claude Code / Cursor / Trae / Hermes / OpenClaw 任一都能装。
+No buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Code, Cursor, Trae, Hermes, OpenClaw, any of them.
 
 ---
 
-## 能做什么
+## What it does
 
-| 能力 | 交付物 | 典型耗时 |
+| Capability | Deliverable | Typical time |
-|------|--------|----------|
+|---|---|---|
-| 交互原型（App / Web） | 单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证 | 10–15 min |
+| Interactive prototype (App / Web) | Single-file HTML · real iPhone bezel · clickable · Playwright-verified | 10–15 min |
-| 演讲幻灯片 | HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留） | 15–25 min |
+| Slide decks | HTML deck (browser presentation) + editable PPTX (text frames preserved) | 15–25 min |
-| 时间轴动画 | MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM | 8–12 min |
+| Motion design | MP4 (25fps / 60fps interpolation) + GIF (palette-optimized) + BGM | 8–12 min |
-| 设计变体 | 3+ 并排对比 · Tweaks 实时调参 · 跨维度探索 | 10 min |
+| Design variations | 3+ side-by-side · Tweaks live params · cross-dimension exploration | 10 min |
-| 信息图 / 可视化 | 印刷级排版 · 可导 PDF/PNG/SVG | 10 min |
+| Infographic / data viz | Print-quality typography · exports to PDF/PNG/SVG | 10 min |
-| 设计方向顾问 | 5 流派 × 20 种设计哲学 · 推荐 3 方向 · 并行生成 Demo | 5 min |
+| Design direction advisor | 5 schools × 20 philosophies · 3 directions recommended · Demos generated in parallel | 5 min |
-| 5 维度专家评审 | 雷达图 + Keep/Fix/Quick Wins · 可操作修复清单 | 3 min |
+| 5-dimension expert critique | Radar chart + Keep/Fix/Quick Wins · actionable punch list | 3 min |
 
-**跨 agent 通用**：Claude Code、Cursor、Trae、Hermes、OpenClaw 任一都能装。
+**Agent-agnostic**: installs into Claude Code, Cursor, Trae, Hermes, OpenClaw, or any markdown-skill-capable agent.
 
 ---
 
-## Demo 画廊
+## Demo Gallery
 
-### 设计方向顾问
+### Design Direction Advisor
 
-模糊需求时的 fallback：从 5 流派 × 20 种设计哲学里挑 3 个差异化方向，并行生成 3 个 Demo 让你选。
+The fallback for vague briefs: pick 3 differentiated directions from 5 schools × 20 philosophies, generate all 3 demos in parallel, let the user choose.
 
 <p align="center"><img src="demos/w3-fallback-advisor.gif" width="100%"></p>
 
-### iOS App 原型
+### iOS App Prototype
 
-iPhone 15 Pro 精确机身（灵动岛 / 状态栏 / Home Indicator）· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。
+Pixel-accurate iPhone 15 Pro body (Dynamic Island / status bar / Home Indicator) · state-driven multi-screen navigation · real images pulled from Wikimedia/Met/Unsplash · Playwright click tests before delivery.
 
 <p align="center"><img src="demos/c1-ios-prototype.gif" width="100%"></p>
 
-### Motion Design 引擎
+### Motion Design Engine
 
-Stage + Sprite 时间片段模型 · `useTime` / `useSprite` / `interpolate` / `Easing` 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。
+Stage + Sprite time-slice model · `useTime` / `useSprite` / `interpolate` / `Easing` — four APIs cover every animation need · one command exports MP4 / GIF / 60fps-interpolated / BGM-scored finals.
 
 <p align="center"><img src="demos/c3-motion-design.gif" width="100%"></p>
 
-### HTML Slides → 可编辑 PPTX
+### HTML Slides → Editable PPTX
 
-HTML deck 浏览器演讲 · `html2pptx.js` 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是**真文本框**，不是图片铺底。
+HTML decks for browser presentation · `html2pptx.js` reads DOM computed styles and translates each element into real PowerPoint objects · exports are **actual text frames**, not image-bed fakes.
 
 <p align="center"><img src="demos/c2-slides-pptx.gif" width="100%"></p>
 
-### Tweaks · 实时变体切换
+### Tweaks · Live Variation Switching
 
-配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + `localStorage` 持久化 · 刷新不丢。
+Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload.
 
 <p align="center"><img src="demos/c4-tweaks.gif" width="100%"></p>
 
-### 信息图 / 数据可视化
+### Infographic / Data Viz
 
-杂志级排版 · CSS Grid 精准分栏 · `text-wrap: pretty` 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。
+Magazine-grade typography · precise CSS Grid columns · `text-wrap: pretty` typographic details · driven by real data · exports to vector PDF / 300dpi PNG / SVG.
 
 <p align="center"><img src="demos/c5-infographic.gif" width="100%"></p>
 
-### 5 维度专家评审
+### 5-Dimension Expert Critique
 
-哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性 各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。
+Philosophical coherence · visual hierarchy · execution craft · functionality · innovation — each scored 0–10 · radar-chart visualization · outputs Keep / Fix / Quick Wins punch list.
 
 <p align="center"><img src="demos/c6-expert-review.gif" width="100%"></p>
 
-### Junior Designer 工作流
+### Junior Designer Workflow
 
-不闷头做大招：先写 assumptions + placeholders + reasoning，尽早 show 给你，再迭代。理解错了早改比晚改便宜 100 倍。
+No heroic one-shot attempts: start with assumptions + placeholders + reasoning, show it to the user early, then iterate. Fixing a misunderstanding early is 100× cheaper than fixing it late.
 
 <p align="center"><img src="demos/w2-junior-designer.gif" width="100%"></p>
 
-### 品牌资产协议 5 步硬流程
+### Core Asset Protocol · 5-step hard process
 
-涉及具体品牌时强制执行：问 → 搜 → 下载（三条兜底）→ grep 色值 → 写 `brand-spec.md`。
+Mandatory whenever the task involves a specific brand: ask → search → download (three fallback paths) → verify + extract → write `brand-spec.md` covering **logo, product shots, UI screenshots, colors, fonts** — all required assets, not just colors.
 
 <p align="center"><img src="demos/w1-brand-protocol.gif" width="100%"></p>
 
 ---
 
-## 核心机制
+## Core Mechanics
 
-### 品牌资产协议
+### Core Asset Protocol
 
-skill 里最硬的一段规则。涉及具体品牌（Stripe、Linear、Anthropic、自家公司等）时强制执行 5 步：
+The hardest rule in the skill. When the task touches a specific brand (Stripe, Linear, Anthropic, DJI, your own company, etc.), five steps are enforced:
 
-| 步骤 | 动作 | 目的 |
+| Step | Action | Purpose |
-|------|------|------|
+|---|---|---|
-| 1 · 问 | 用户有 brand guidelines 吗？ | 尊重已有资源 |
+| 1 · Ask | Checklist of 6 asset types: logo / product shots / UI screenshots / color palette / fonts / brand guidelines | Respect existing resources |
-| 2 · 搜官方品牌页 | `<brand>.com/brand` · `brand.<brand>.com` · `<brand>.com/press` | 抓权威色值 |
+| 2 · Search official channels | `<brand>.com/brand` · `<brand>.com/press` · `brand.<brand>.com` · product pages · launch films | Find authoritative assets |
-| 3 · 下载资产 | SVG 文件 → 官网 HTML 全文 → 产品截图取色 | 三条兜底，前一条失败立刻走下一条 |
+| 3 · Download by asset type | Logo (SVG → inline-SVG in HTML → social avatar) · Product shots (hero → press kit → launch video frames → AI-generated from reference) · UI (App Store screenshots → official video frames) | Three fallback paths per asset type |
-| 4 · grep 提取色值 | 从资产里抓所有 `#xxxxxx`，按频率排序，过滤黑白灰 | **绝不从记忆猜品牌色** |
+| 4 · Verify + extract | Check logo fidelity · product image resolution · UI freshness · grep color hex from real assets | **Never guess from memory** |
-| 5 · 固化 spec | 写 `brand-spec.md` + CSS 变量，所有 HTML 引用 `var(--brand-*)` | 不固化就会忘 |
+| 5 · Freeze to spec | Write `brand-spec.md` with logo paths, product image paths, UI screenshot paths, CSS variables for colors/fonts | Un-frozen knowledge evaporates |
 
-A/B 测试（v1 vs v2，各跑 6 agent）：**v2 的稳定性方差比 v1 低 5 倍**。稳定性的稳定性，这是 skill 真正的护城河。
+**Ranking of asset importance** (from the skill's internal rubric):
 
-### 设计方向顾问（Fallback）
+1. Logo — mandatory for any brand
+2. Product renders — mandatory for physical products
+3. UI screenshots — mandatory for digital products
+4. Color values — auxiliary
+5. Fonts — auxiliary
 
-当用户需求模糊到无法着手时触发：
+A/B-tested (v1 vs v2, 6 agents each): **v2 reduced stability variance by 5×**. Stability of stability — that's the real moat.
 
-- 不凭通用直觉硬做，进入 Fallback 模式
+### Design Direction Advisor (Fallback)
-- 从 5 流派 × 20 种设计哲学里推荐 3 个**必须来自不同流派**的差异化方向
-- 每个方向配代表作、气质关键词、代表设计师
-- 并行生成 3 个视觉 Demo 让用户选
-- 选定后进入主干 Junior Designer 流程
 
-### Junior Designer 工作流
+Triggered when the brief is too vague to execute:
 
-默认工作模式，贯穿所有任务：
+- Don't run on generic intuition — enter Fallback mode
+- Recommend 3 differentiated directions from 5 schools × 20 philosophies, each **from a different school**
+- Each comes with flagship works, gestalt keywords, representative designer
+- Generate 3 visual demos in parallel, let the user choose
+- Once chosen, continue into the Junior Designer main flow
 
-- 开工前 show 问题清单一次性发给用户，等批量答完再动手
+### Junior Designer Workflow
-- HTML 里先写 assumptions + placeholders + reasoning comments
-- 尽早 show 给用户（哪怕只是灰色方块）
-- 填充实际内容 → variations → Tweaks 这三步分别再 show 一次
-- 交付前用 Playwright 肉眼过一遍浏览器
 
-### 反 AI slop 规则
+The default working mode across every task:
 
-避免一眼 AI 的视觉最大公约数（紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display）。用 `text-wrap: pretty` + CSS Grid + 精心选择的 serif display 和 oklch 色彩。
+- Send the full question set in one batch, wait for all answers before moving
+- Write assumptions + placeholders + reasoning comments directly into the HTML
+- Show it to the user early (even if just gray blocks)
+- Fill in real content → variations → Tweaks — show at each of these three steps
+- Manually eyeball the browser with Playwright before delivery
+
+### Fact Verification First (Principle #0)
+
+The highest-priority rule, added after a real failure mode: when the task mentions a specific product / technology / event (e.g., "DJI Pocket 4", "Nano Banana Pro", "Gemini 3 Pro"), the first action **must** be a `WebSearch` to confirm existence, release status, current version, and specs. No claims from training-corpus memory. Cost of a search: ~10 seconds. Cost of a wrong assumption: 1–2 hours of rework.
+
+### Anti AI-slop Rules
+
+Avoid the visual common denominator of AI output (purple gradients / emoji icons / rounded-corner + left border accent / SVG humans / Inter-as-display / **CSS silhouettes standing in for real product shots**). Use `text-wrap: pretty` + CSS Grid + carefully chosen serif display faces + oklch colors.
 
 ---
 
-## 和 Claude Design 的关系
+## vs. Claude Design
 
-我大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。那份提示词反复强调**好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来**。这个原则是 65 分作品和 90 分作品的分水岭。
+I'll be upfront: the Core Asset Protocol's philosophy was lifted from system prompts Anthropic wrote for Claude Design. That prompt hammers home a single idea — **great hi-fi design doesn't start from a blank page, it grows from existing design context**. That one principle is the difference between a 65-point design and a 90-point design.
 
-定位差异：
+Positioning differences:
 
 | | Claude Design | huashu-design |
 |---|---|---|
-| 形态 | 网页产品（浏览器里用） | skill（Claude Code 里用） |
+| Form | Web product (used in browser) | Skill (used in Claude Code) |
-| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 |
+| Quota | Subscription quota | API usage · parallel agents unblocked |
-| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF |
+| Output | Canvas + Figma export | HTML / MP4 / GIF / editable PPTX / PDF |
-| 操作方式 | GUI（点、拖、改） | 对话（说话、等 agent 做完） |
+| Interaction | GUI (click, drag, edit) | Conversation (tell agent, wait) |
-| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 |
+| Complex animation | Limited | Stage + Sprite timeline · 60fps export |
-| 跨 agent | 专属 Claude.ai | Claude Code / Cursor / Trae / Hermes / OpenClaw 任一 |
+| Agent compatibility | Claude.ai only | Claude Code / Cursor / Trae / Hermes / OpenClaw |
 
-Claude Design 是**更好的图形工具**，huashu-design 是**让图形工具这层消失**。两条路，不同受众。
+Claude Design is a **better graphics tool**. Huashu-design makes **the graphics-tool layer disappear**. Two paths, different audiences.
 
 ---
 
 ## Limitations
 
-- **不支持图层级可编辑的 PPTX 到 Figma**。产出 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置。
+- **No layer-editable PPTX-to-Figma round-trip.** The output is HTML — screenshottable, recordable, image-exportable, but not draggable into Keynote for text-position tweaks.
-- **Framer Motion 级别的复杂动画不行**。3D、物理模拟、粒子系统超出 skill 边界。
+- **Framer-Motion-tier complex animations are out of scope.** 3D, physics simulation, particle systems exceed the skill's boundaries.
-- **完全空白的品牌从零设计质量会掉到 60–65 分**。凭空画 hi-fi 本来就是 last resort。
+- **Brand-from-zero design quality drops to 60–65 points.** Drawing hi-fi from nothing was always a last resort.
 
-这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。
+This is an 80-point skill, not a 100-point product. For people unwilling to open a graphical UI, an 80-point skill beats a 100-point product.
 
 ---
 
-## 仓库结构
+## Repository Structure
 
 ```
 huashu-design/
-├── SKILL.md                 # 主文档（给 agent 读）
+├── SKILL.md                 # Main doc (read by agent)
-├── README.md                # 本文件（给用户读）
+├── README.md                # This file (read by user)
 ├── assets/                  # Starter Components
 │   ├── animations.jsx       # Stage + Sprite + Easing + interpolate
 │   ├── ios_frame.jsx        # iPhone 15 Pro bezel
 │   ├── android_frame.jsx
 │   ├── macos_window.jsx
 │   ├── browser_window.jsx
-│   ├── deck_stage.js        # HTML 幻灯片引擎
+│   ├── deck_stage.js        # HTML deck engine
-│   ├── deck_index.html      # 多文件 deck 拼接器
+│   ├── deck_index.html      # Multi-file deck assembler
-│   ├── design_canvas.jsx    # 并排变体展示
+│   ├── design_canvas.jsx    # Side-by-side variation display
-│   ├── showcases/           # 24 个预制样例（8 场景 × 3 风格）
+│   ├── showcases/           # 24 prebuilt samples (8 scenes × 3 styles)
-│   └── bgm-*.mp3            # 6 首场景化背景音乐
+│   └── bgm-*.mp3            # 6 scene-specific background tracks
-├── references/              # 按任务深入读的子文档
+├── references/              # Drill-down docs by task
 │   ├── animation-pitfalls.md
-│   ├── design-styles.md     # 20 种设计哲学详细库
+│   ├── design-styles.md     # 20 design philosophies in detail
 │   ├── slide-decks.md
 │   ├── editable-pptx.md
 │   ├── critique-guide.md
 │   ├── video-export.md
 │   └── ...
-├── scripts/                 # 导出工具链
+├── scripts/                 # Export toolchain
 │   ├── render-video.js      # HTML → MP4
 │   ├── convert-formats.sh   # MP4 → 60fps + GIF
 │   ├── add-music.sh         # MP4 + BGM
@@ -234,21 +243,47 @@ huashu-design/
 │   ├── export_deck_pptx.mjs
 │   ├── html2pptx.js
 │   └── verify.py
-└── demos/                   # 9 个能力演示（本 README 引用的 GIF 都来自这里）
+└── demos/                   # 9 capability demos (referenced by this README)
 ```
 
 ---
 
-## 起源
+## Origin Story
 
-Anthropic 发布 Claude Design 那天我玩到凌晨四点。几天之后发现自己再也没点开过它，不是它不好——它是这个赛道目前最成熟的产品——是我宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面。
+The day Anthropic launched Claude Design I played with it until 4 a.m. A few days later I realized I hadn't opened it once since — not because it's bad (it's the most polished product in the category) but because I'd rather have an agent work in my terminal than open any graphical UI.
 
-于是让 agent 拆解 Claude Design 本身（包括社区流传的系统提示词、品牌资产协议、组件机制），蒸馏成结构化 spec，再写成 skill 装进自己的 Claude Code。
+So I had an agent deconstruct Claude Design itself (including the system prompts circulating in the community, the brand asset protocol, the component mechanics), distill it into a structured spec, then write it as a skill installed in my own Claude Code.
 
-感谢 Anthropic 把 Claude Design 的提示词写得清晰。这种基于其他产品灵感的二次创作，是开源文化在 AI 时代的新形态。
+Thanks to Anthropic for writing the Claude Design prompts so clearly. This kind of derivative work inspired by other products is the new form of open-source culture in the AI era.
 
 ---
 
-## License
+## License · Usage Rights
 
-MIT. Skill 和 demo 都开源，随便用。issue 里欢迎延伸讨论。
+**Personal use is free and unrestricted** — studying, research, creating things for yourself, writing articles, side projects, personal social media. Use it freely, no need to ask.
+
+**Enterprise / commercial use is restricted** — any company, team, or for-profit organization integrating this skill into a product, external service, or client deliverable **must obtain authorization from Huasheng first**. Including but not limited to:
+- Using the skill as part of internal company tooling
+- Using skill outputs as the primary creative method for external deliverables
+- Building a commercial product on top of the skill
+- Using it in paid client projects
+
+**Commercial licensing contact**: any of the social platforms below.
+
+---
+
+## Connect · Huasheng (Huashu)
+
+Huasheng is an AI-native coder, independent developer, and AI content creator. Notable work: Cat Fill Light (App Store Top 1 in Paid category), *A Book on DeepSeek*, Nüwa.skill (GitHub 12k+ stars). Combined 300k+ followers across platforms.
+
+| Platform | Handle | Link |
+|---|---|---|
+| X / Twitter | @AlchainHust | https://x.com/AlchainHust |
+| WeChat Official Account | 花叔 | Search "花叔" in WeChat |
+| Bilibili | 花叔 | https://space.bilibili.com/14097567 |
+| YouTube | 花叔 | https://www.youtube.com/@Alchain |
+| Xiaohongshu | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
+| Official Site | huasheng.ai | https://www.huasheng.ai/ |
+| Developer Hub | bookai.top | https://bookai.top |
+
+For commercial licensing, collaborations, or sponsored content, DM on any of the above.

SKILL.md

@@ -21,6 +21,43 @@ description: 花叔Design（Huashu-Design）——用HTML做高保真原型、
 
 不适用场景：生产级Web App、SEO网站、需要后端的动态系统——这些用frontend-design skill。
 
+## 核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程）
+
+> **任何涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数的事实性断言，第一步必须 `WebSearch` 验证，禁止凭训练语料做断言。**
+
+**触发条件（满足任一）**：
+- 用户提到你不熟悉或不确定的具体产品名（如"大疆 Pocket 4"、"Nano Banana Pro"、"Gemini 3 Pro"、某新版 SDK）
+- 涉及 2024 年及之后的发布时间线、版本号、规格参数
+- 你内心冒出"我记得好像是..."、"应该还没发布"、"大概在..."、"可能不存在"的句式
+- 用户请求给某个具体产品/公司做设计物料
+
+**硬流程（开工前执行，优先于 clarifying questions）**：
+1. `WebSearch` 产品名 + 最新时间词（"2026 latest"、"launch date"、"release"、"specs"）
+2. 读 1-3 条权威结果，确认：**存在性 / 发布状态 / 最新版本号 / 关键规格**
+3. 把事实写进项目的 `product-facts.md`（见工作流 Step 2），不靠记忆
+4. 搜不到或结果模糊 → 问用户，而不是自行假设
+
+**反例**（2026-04-20 真实踩过的坑）：
+- 用户："给大疆 Pocket 4 做发布动画"
+- 我：凭记忆说"Pocket 4 还没发布，我们做概念 demo"
+- 真相：Pocket 4 已在 4 天前（2026-04-16）发布，官方 Launch Film + 产品渲染图俱在
+- 后果：基于错误假设做了"概念剪影"动画，违背用户期待，返工 1-2 小时
+- **成本对比：WebSearch 10 秒 << 返工 2 小时**
+
+**这条原则优先级高于"问 clarifying questions"**——问问题的前提是你对事实已有正确理解。事实错了，问什么都是歪的。
+
+**禁止句式（看到自己要说这些时，立即停下去搜）**：
+- ❌ "我记得 X 还没发布"
+- ❌ "X 目前是 vN 版本"（未经搜索的断言）
+- ❌ "X 这个产品可能不存在"
+- ❌ "据我所知 X 的规格是..."
+- ✅ "我 `WebSearch` 一下 X 最新状态"
+- ✅ "搜到的权威来源说 X 是 ..."
+
+**与"品牌资产协议"的关系**：本原则是资产协议的**前提**——先确认产品存在且是什么，再去找它的 logo/产品图/色值。顺序不能反。
+
+---
+
 ## 核心哲学（优先级从高到低）
 
 ### 1. 从existing context出发，不要凭空画
@@ -29,86 +66,206 @@ description: 花叔Design（Huashu-Design）——用HTML做高保真原型、
 
 **如果还是没有，或者用户需求表达很模糊**（如"做个好看的页面"、"帮我设计"、"不知道要什么风格"、"做个XX"没有具体参考），**不要凭通用直觉硬做**——进入 **设计方向顾问模式**，从 20 种设计哲学里给 3 个差异化方向让用户选。完整流程见下方「设计方向顾问（Fallback 模式）」大节。
 
-#### 1.a 品牌资产协议（涉及具体品牌时强制执行）
+#### 1.a 核心资产协议（涉及具体品牌时强制执行）
 
-> **这是 v1 最核心的约束，也是稳定性的生命线。** Agent 是否走通这个协议，直接决定输出质量是 65 分还是 90 分。不要跳过任何一步。
+> **这是 v1 最核心的约束，也是稳定性的生命线。** Agent 是否走通这个协议，直接决定输出质量是 40 分还是 90 分。不要跳过任何一步。
+>
+> **v1.1 重构（2026-04-20）**：从「品牌资产协议」升级为「核心资产协议」。之前的版本过度聚焦色值和字体，漏掉了设计中最基础的 logo / 产品图 / UI 截图。花叔的原话：「除了所谓的品牌色，显然我们应该找到并且用上大疆的 logo，用上 pocket4 的产品图。如果是网站或者 app 等非实体产品的话，logo 至少该是必须的。这可能是比所谓的品牌设计的 spec 更重要的基本逻辑。否则，我们在表达什么呢？」
 
-**触发条件**：任务涉及具体品牌——用户提了产品名/公司名/明确客户（Stripe、Linear、Anthropic、Notion、Lovart、自家公司等），不论用户是否主动提供了品牌资料。
+**触发条件**：任务涉及具体品牌——用户提了产品名/公司名/明确客户（Stripe、Linear、Anthropic、Notion、Lovart、DJI、自家公司等），不论用户是否主动提供了品牌资料。
 
-**5 步硬流程**（每一步都有 fallback，但绝不可以静默跳过）：
+**前置硬条件**：走协议前必须已通过「#0 事实验证先于假设」确认品牌/产品存在且状态已知。如果你还不确定产品是否已发布/规格/版本，先回去搜。
 
-##### 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 · 下载资产 · 三条兜底路径
+| 资产类型 | 识别度贡献 | 必需性 |
+|---|---|---|
+| **Logo** | 最高 · 任何品牌出现 logo 就一眼识别 | **任何品牌都必须有** |
+| **产品图/产品渲染图** | 极高 · 实体产品的"主角"就是产品本身 | **实体产品（硬件/包装/消费品）必须有** |
+| **UI 截图/界面素材** | 极高 · 数字产品的"主角"是它的界面 | **数字产品（App/网站/SaaS）必须有** |
+| **色值** | 中 · 辅助识别，脱离前三项时经常撞衫 | 辅助 |
+| **字体** | 低 · 需配合前述才能建立识别 | 辅助 |
+| **气质关键词** | 低 · agent 自检用 | 辅助 |
 
-> **真实世界里 SVG logo 经常拿不到**。2026 年官网大多 Next.js SSR + inline SVG，或 Cloudflare 反爬返回 403。下面三条路径按成功率递减排列——**前一条失败立刻走下一条，不要停**：
+**翻译成执行规则**：
+- 只抽色值 + 字体、不找 logo / 产品图 / UI → **违反本协议**
+- 用 CSS 剪影/SVG 手画替代真实产品图 → **违反本协议**（生成的就是「通用科技动画」，任何品牌都长一样）
+- 找不到资产不告诉用户、也不 AI 生成，硬做 → **违反本协议**
+- 宁可停下问用户要素材，也不要用 generic 填充
 
-1. **独立 SVG 文件**（最理想）
+##### 5 步硬流程（每步有 fallback，绝不静默跳过）
+
+##### Step 1 · 问（资产清单一次问全）
+
+不要只问「有 brand guidelines 吗？」——太宽泛，用户不知道该给什么。按清单逐项问：
+
+```
+关于 <brand/product>，你手上有以下哪些资料？我按优先级列：
+1. Logo（SVG / 高清 PNG）—— 任何品牌必备
+2. 产品图 / 官方渲染图 —— 实体产品必备（如 DJI Pocket 4 的产品照）
+3. UI 截图 / 界面素材 —— 数字产品必备（如 App 主要页面截图）
+4. 色值清单（HEX / RGB / 品牌色盘）
+5. 字体清单（Display / Body）
+6. Brand guidelines PDF / Figma design system / 品牌官网链接
+
+有的直接发我，没有的我去搜/抓/生成。
+```
+
+##### Step 2 · 搜官方渠道（按资产类型）
+
+| 资产 | 搜索路径 |
+|---|---|
+| **Logo** | `<brand>.com/brand` · `<brand>.com/press` · `<brand>.com/press-kit` · `brand.<brand>.com` · 官网 header 的 inline SVG |
+| **产品图/渲染图** | `<brand>.com/<product>` 产品详情页 hero image + gallery · 官方 YouTube launch film 截帧 · 官方新闻稿附图 |
+| **UI 截图** | App Store / Google Play 产品页截图 · 官网 screenshots section · 产品官方演示视频截帧 |
+| **色值** | 官网 inline CSS / Tailwind config / brand guidelines PDF |
+| **字体** | 官网 `<link rel="stylesheet">` 引用 · Google Fonts 追踪 · brand guidelines |
+
+`WebSearch` 兜底关键词：
+- Logo 找不到 → `<brand> logo download SVG`、`<brand> press kit`
+- 产品图找不到 → `<brand> <product> official renders`、`<brand> <product> product photography`
+- UI 找不到 → `<brand> app screenshots`、`<brand> dashboard UI`
+
+##### Step 3 · 下载资产 · 按类型三条兜底路径
+
+**3.1 Logo（任何品牌必需）**
+
+三条路径按成功率递减：
+1. 独立 SVG/PNG 文件（最理想）：
    ```bash
    curl -o assets/<brand>-brand/logo.svg https://<brand>.com/logo.svg
+   curl -o assets/<brand>-brand/logo-white.svg https://<brand>.com/logo-white.svg
    ```
-2. **官网 HTML 全文**（80% 场景必用）：WebFetch 返回 403 时用 curl 带 UA 兜底，logo 的 inline SVG 和色值 token 直接藏在 HTML 里：
+2. 官网 HTML 全文提取 inline SVG（80% 场景必用）：
    ```bash
    curl -A "Mozilla/5.0" -L https://<brand>.com -o assets/<brand>-brand/homepage.html
+   # 然后 grep <svg>...</svg> 提取 logo 节点
    ```
-3. **产品截图取色**（App/未开源产品必走）：从用户提供的产品截图或官方 Dribbble / Twitter media 里提取主色。macOS 用 Preview 的吸管、Linux 用 `convert image.png -unique-colors txt:-` 给出主要色值。
+3. 官方社交媒体 avatar（最后手段）：GitHub/Twitter/LinkedIn 的公司头像通常是 400×400 或 800×800 透明底 PNG
 
-##### Step 4 · Grep 提取真实色值
+**3.2 产品图/渲染图（实体产品必需）**
-- **绝对不要从记忆里猜品牌色**。从下载的资产里 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` 文件（不可省略）
+按优先级：
+1. **官方产品页 hero image**（最高优先级）：右键查看图片地址 / curl 获取。分辨率通常 2000px+
+2. **官方 press kit**：`<brand>.com/press` 常有高清产品图下载
+3. **官方 launch video 截帧**：用 `yt-dlp` 下载 YouTube 视频，ffmpeg 抽几帧高清图
+4. **Wikimedia Commons**：公共领域常有
+5. **AI 生成兜底**（nano-banana-pro）：把真实产品图作为参考发给 AI，让它生成符合动画场景的变体。**不要用 CSS/SVG 手画代替**
 
-> **这一步是全协议的制胜点**。前 4 步抽完色，如果只留在内存里下一页就忘。必须写一份 `brand-spec.md` 到项目根目录，让所有 CSS 变量引用这份文件。
+```bash
+# 示例：下载 DJI 官网产品 hero image
+curl -A "Mozilla/5.0" -L "<hero-image-url>" -o assets/<brand>-brand/product-hero.png
+```
+
+**3.3 UI 截图（数字产品必需）**
+
+- App Store / Google Play 的产品截图（注意：可能是 mockup 而非真实 UI，要对比）
+- 官网 screenshots section
+- 产品演示视频截帧
+- 产品官方 Twitter/X 的发布截图（常是最新版本）
+- 用户有账号时，直接截屏真实产品界面
+
+##### Step 4 · 验证 + 提取（不只是 grep 色值）
+
+| 资产 | 验证动作 |
+|---|---|
+| **Logo** | 文件存在 + SVG/PNG 可打开 + 至少两个版本（深底/浅底用）+ 透明背景 |
+| **产品图** | 至少一张 2000px+ 分辨率 + 去背或干净背景 + 多个角度（主视角、细节、场景） |
+| **UI 截图** | 分辨率真实（1x / 2x）+ 是最新版本（不是旧版）+ 无用户数据污染 |
+| **色值** | `grep -hoE '#[0-9A-Fa-f]{6}' assets/<brand>-brand/*.{svg,html,css} \| sort \| uniq -c \| sort -rn \| head -20`，过滤黑白灰 |
+
+**警惕示范品牌污染**：产品截图里常有用户 demo 的品牌色（如某工具截图演示喜茶红），那不是该工具的色。**同时出现两种强色时必须区分**。
+
+**品牌多切面**：同一品牌的官网营销色和产品 UI 色经常不同（Lovart 官网暖米+橙，产品 UI 是 Charcoal + Lime）。**两套都是真的**——根据交付场景选合适的切面。
+
+##### Step 5 · 固化为 `brand-spec.md` 文件（模板必须覆盖所有资产）
 
 ```markdown
 # <Brand> · Brand Spec
-> 从以下资产抽取：<列出资产来源和提取日期>
+> 采集日期：YYYY-MM-DD
+> 资产来源：<列出下载来源>
 > 资产完整度：<完整 / 部分 / 推断>
 
-## 色板
+## 🎯 核心资产（一等公民）
+
+### Logo
+- 主版本：`assets/<brand>-brand/logo.svg`
+- 浅底反色版：`assets/<brand>-brand/logo-white.svg`
+- 使用场景：<片头/片尾/角落水印/全局>
+- 禁用变形：<不能拉伸/改色/加描边>
+
+### 产品图（实体产品必填）
+- 主视角：`assets/<brand>-brand/product-hero.png`（2000×1500）
+- 细节图：`assets/<brand>-brand/product-detail-1.png` / `product-detail-2.png`
+- 场景图：`assets/<brand>-brand/product-scene.png`
+- 使用场景：<特写/旋转/对比>
+
+### UI 截图（数字产品必填）
+- 主页：`assets/<brand>-brand/ui-home.png`
+- 核心功能：`assets/<brand>-brand/ui-feature-<name>.png`
+- 使用场景：<产品展示/Dashboard 渐现/对比演示>
+
+## 🎨 辅助资产
+
+### 色板
 - Primary: #XXXXXX  <来源标注>
 - Background: #XXXXXX
 - Ink: #XXXXXX
+- Accent: #XXXXXX
 - 禁用色: <品牌明确不用的色系>
 
-## 字型
+### 字型
 - Display: <font stack>
 - Body: <font stack>
+- Mono（数据 HUD 用）: <font stack>
 
-## 签名细节
+### 签名细节
-- <哪些细节是「120% 做到」的，如 2px 细线、italic em 强调>
+- <哪些细节是「120% 做到」的>
 
-## 禁区
+### 禁区
 - <明确不能做的：比如 Lovart 不用蓝色、Stripe 不用低饱和暖色>
 
-## 气质关键词
+### 气质关键词
 - <3-5 个形容词>
 ```
 
-**写完 spec 后的执行纪律**（硬要求）：
+**写完 spec 后的执行纪律（硬要求）**：
-- 写 CSS 前把 spec 色值做成 `:root { --brand-primary: ...; }` CSS 变量
+- 所有 HTML 必须**引用** `brand-spec.md` 里的资产文件路径，不允许用 CSS 剪影/SVG 手画代替
-- 所有 HTML 文件只能用 `var(--brand-*)`，**不允许临场写死色号**
+- Logo 作为 `<img>` 引用真实文件，不重画
-- 这一条让品牌一致性从「靠自觉」变成「靠结构」——agent 想临时加色要先改 spec，改 spec 就会自觉
+- 产品图作为 `<img>` 引用真实文件，不用 CSS 剪影代替
+- CSS 变量从 spec 注入：`:root { --brand-primary: ...; }`，HTML 只用 `var(--brand-*)`
+- 这让品牌一致性从「靠自觉」变成「靠结构」——想临时加色要先改 spec
 
-**全流程失败的兜底**：三条路径都失败（极罕见）才明确告诉用户「找不到 official brand guidelines，我按通用风格做并在 spec 里标注 assumption」——**不要静默用通用色硬做**。Fallback 时进入「设计方向顾问模式」（见下节）。
+##### 全流程失败的兜底
 
-**反例**（真实踩过的坑）：
+按资产类型分别处理：
-- 为 Kimi 做动画时凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工一遍
+
-- 把 Lovart 产品截图里演示品牌的喜茶红当成 Lovart 自己的色——差点毁整个设计
+| 缺失 | 处理 |
+|---|---|
+| **Logo 完全找不到** | **停下问用户**，不要硬做（logo 是品牌识别度的根基） |
+| **产品图（实体产品）找不到** | 优先 nano-banana-pro AI 生成（以官方参考图为基底）→ 次选向用户索取 → 最后才是诚实 placeholder（灰块+文字标签，明确标注"产品图待补"） |
+| **UI 截图（数字产品）找不到** | 向用户索取自己账号的截屏 → 官方演示视频截帧。不用 mockup 生成器凑 |
+| **色值完全找不到** | 按「设计方向顾问模式」走，向用户推荐 3 个方向并标注 assumption |
+
+**禁止**：找不到资产就静默用 CSS 剪影/通用渐变硬做——这是协议最大的反 pattern。**宁可停下问，也不要凑**。
+
+##### 反例（真实踩过的坑）
+
+- **Kimi 动画**：凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工一遍
+- **Lovart 设计**：把产品截图里演示品牌的喜茶红当成 Lovart 自己的色——差点毁整个设计
+- **DJI Pocket 4 发布动画（2026-04-20，触发本协议升级的真实案例）**：走了旧版只抽色值的协议，没下载 DJI logo、没找 Pocket 4 产品图，用 CSS 剪影代替产品——做出来是「通用黑底+橙 accent 的科技动画」，没有大疆识别度。花叔原话：「否则，我们在表达什么呢？」→ 协议升级。
 - 抽完色没写进 brand-spec.md，第三页就忘了主色数值，临场加了个「接近但不是」的 hex——品牌一致性崩溃
 
-**协议代价 vs 不做代价**：5-10 分钟 grep + 5 分钟写 spec = 15 分钟。不做的代价是整个产出方向错，返工 1-2 小时。**这是稳定性最便宜的投资**。
+##### 协议代价 vs 不做代价
+
+| 场景 | 时间 |
+|---|---|
+| 正确走完协议 | 下载 logo 5 min + 下载 3-5 张产品图/UI 10 min + grep 色值 5 min + 写 spec 10 min = **30 分钟** |
+| 不做协议的代价 | 做出没识别度的通用动画 → 用户返工 1-2 小时，甚至重做 |
+
+**这是稳定性最便宜的投资**。尤其对商单/发布会/重要客户项目，30 分钟的资产协议是保命钱。
 
 ### 2. Junior Designer模式：先展示假设，再执行
 
@@ -161,6 +318,7 @@ description: 花叔Design（Huashu-Design）——用HTML做高保真原型、
 | Emoji 作图标 | 训练语料里每个 bullet 都配 emoji，是"不够专业就用 emoji 凑"的病 | 品牌本身用（如 Notion），或产品受众是儿童/轻松场景 |
 | 圆角卡片 + 左彩色 border accent | 2020-2024 Material/Tailwind 时期的烂大街组合，已成视觉噪音 | 用户明确要求、或这个组合在品牌 spec 里被保留 |
 | SVG 画 imagery（人脸/场景/物品）| AI 画的 SVG 人物永远五官错位，比例诡异 | **几乎没有**——有图就用真图（Wikimedia/Unsplash/AI 生成），没图就留诚实 placeholder |
+| **CSS 剪影/SVG 手画代替真实产品图** | 生成的就是「通用科技动画」——黑底+橙 accent+圆角长条，任何实体产品都长一样，品牌识别度归零（DJI Pocket 4 实测 2026-04-20）| **几乎没有**——先走核心资产协议找真实产品图；真没有时用 nano-banana-pro 以官方参考图为基底生成；实在不行标诚实 placeholder 告诉用户"产品图待补" |
 | Inter/Roboto/Arial/system fonts 作 display | 太常见，读者看不出这是"有设计的产品"还是"demo 页" | 品牌 spec 明确用这些字体（Stripe 用 Sohne/Inter 变体，但是经过微调的） |
 | 赛博霓虹 / 深蓝底 `#0D1117` | GitHub dark mode 美学的烂大街复制 | 开发者工具产品且品牌本身走这方向 |
 
@@ -416,11 +574,15 @@ Screen 组件接 callback props（`onEnter`、`onClose`、`onTabChange`、`onOpe
 
 ### 标准流程（用TaskCreate追踪）
 
-1. **理解需求**：新任务或模糊任务必须问clarifying questions，详见 `references/workflow.md`。一次focused一轮问题通常够，小修小补跳过。
+1. **理解需求**：
-   🛑 **检查点1：问题清单一次性发给用户，等用户批量答完再往下走**。不要边问边做。
+   - 🔍 **0. 事实验证（涉及具体产品/技术时必做，优先级最高）**：任务涉及具体产品/技术/事件（DJI Pocket 4、Gemini 3 Pro、Nano Banana Pro、某新 SDK 等）时，**第一个动作**是 `WebSearch` 验证其存在性、发布状态、最新版本、关键规格。把事实写入 `product-facts.md`。详见「核心原则 #0」。**这步做在问 clarifying questions 之前**——事实错了问什么都歪。
-   🛑 **幻灯片/PPT 任务额外必问「最终交付格式」**（浏览器演讲 / PDF / 可编辑 PPTX）——**要可编辑 PPTX 就必须从第一行 HTML 开始按 `references/editable-pptx.md` 的 4 条硬约束写**，事后补救会导致 2-3 小时返工。详见 `references/slide-decks.md` 开头「开工前先确认交付格式」一节。
+   - 新任务或模糊任务必须问clarifying questions，详见 `references/workflow.md`。一次focused一轮问题通常够，小修小补跳过。
-   ⚡ **如果用户需求严重模糊（没参考、没明确风格、"做个好看的"类）→ 走「设计方向顾问（Fallback 模式）」大节，完成 Phase 1-4 选定方向后，再回到这里 Step 2**。
+   - 🛑 **检查点1：问题清单一次性发给用户，等用户批量答完再往下走**。不要边问边做。
-2. **探索资源 + 抽 spec**：读 design system、linked files、上传的截图/代码。**涉及具体品牌时必走 §1.a 五步协议**（问→搜→下载→grep→写 `brand-spec.md`）。如果用户没给 context 且挖不出资产，先走设计方向顾问 Fallback，再按 `references/design-context.md` 的品位锚点兜底。
+   - 🛑 **幻灯片/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、上传的截图/代码。**涉及具体品牌时必走 §1.a「核心资产协议」五步**（问→按类型搜→按类型下载 logo/产品图/UI→验证+提取→写 `brand-spec.md` 含所有资产路径）。
+   - 🛑 **检查点2·资产自检**：开工前确认核心资产到位——实体产品要有产品图（不是 CSS 剪影）、数字产品要有 logo+UI 截图、色值从真实 HTML/SVG 抽取。缺了就停下补，不硬做。
+   - 如果用户没给 context 且挖不出资产，先走设计方向顾问 Fallback，再按 `references/design-context.md` 的品位锚点兜底。
 3. **先答四问，再规划系统**：**这一步的前半段比所有 CSS 规则更决定输出**。
 
    📐 **位置四问**（每个页面/屏幕/镜头开工前必答）：
@@ -537,6 +699,9 @@ Screen 组件接 callback props（`onEnter`、`onClose`、`onTabChange`、`onOpe
 | 输出完后验证 | `references/verification.md` + `scripts/verify.py` |
 | **设计评审/打分**（设计完成后可选） | `references/critique-guide.md`（5 维度评分+常见问题清单） |
 | **动画导出MP4/GIF/加BGM** | `references/video-export.md` + `scripts/render-video.js` + `scripts/convert-formats.sh` + `scripts/add-music.sh` |
+| **动画加音效SFX**（苹果发布会级，37个预制） | `references/sfx-library.md` + `assets/sfx/<category>/*.mp3` |
+| **动画音频配置规则**（SFX+BGM双轨制、黄金配比、ffmpeg模板、场景配方） | `references/audio-design-rules.md` |
+| **Apple画廊展示风格**（3D倾斜+悬浮卡片+缓慢pan+焦点切换，v9实战同款） | `references/apple-gallery-showcase.md` |
 
 ## 跨 Agent 环境适配说明
 
@@ -582,11 +747,12 @@ Skill 路径引用均采用**相对本 skill 根目录**的形式（`references/
 
 ## 核心提醒
 
+- **事实验证先于假设**（核心原则 #0）：涉及具体产品/技术/事件（DJI Pocket 4、Gemini 3 Pro 等）必须先 `WebSearch` 验证存在性和状态，不凭训练语料断言。
 - **Embody专家**：做幻灯片时是幻灯片设计师，做动画时是动画师。不是写Web UI。
 - **Junior先show，再做**：先展示思路，再执行。
 - **Variations不给答案**：3+个变体，让用户选。
 - **Placeholder优于烂实现**：诚实留白，不编造。
 - **反AI slop时时警醒**：每个渐变/emoji/圆角border accent之前先问——这真的必要吗？
-- **涉及具体品牌**：先走「品牌资产协议」（核心哲学 §1.a），不要凭记忆猜配色。
+- **涉及具体品牌**：走「核心资产协议」（§1.a）——Logo（必需）+ 产品图（实体产品必需）+ UI 截图（数字产品必需），色值只是辅助。**不要用 CSS 剪影代替真实产品图**。
 - **做动画之前**：必读 `references/animation-pitfalls.md`——里面 14 条规则每条都来自真实踩过的坑，跳过会让你重做 1-3 轮。
 - **手写 Stage / Sprite**（不用 `assets/animations.jsx`）：必须实现两件事——(a) tick 第一帧同步设 `window.__ready = true` (b) 检测 `window.__recording === true` 时强制 loop=false。否则录视频必出问题。