optimize huashu-design: §1.a升级为「核心资产协议」

重点从抽色值升级为抽核心资产矩阵：
- 资产识别度排序：Logo>产品图/UI>色值>字体>气质
- 实体产品必须有产品图，数字产品必须有UI截图，任何品牌必须有logo
- Step 1 问清单6项，不只是'有brand guidelines吗'
- Step 2-3 按资产类型分开搜索路径和下载方法
- Step 4 验证包括logo清晰度/产品图分辨率/UI真实性，不只grep色值
- Step 5 brand-spec.md模板新增核心资产区，加logo/产品图/UI文件路径字段
- 兜底策略：找不到logo必须停下问用户，找不到产品图优先nano-banana-pro生成
- 新增反例：DJI Pocket 4（2026-04-20，触发本升级）
- 禁止：用CSS剪影代替真实产品图

对应rubric维度：指令具体性(+) 整体架构(+) 实测表现(+)

花叔原话：「我们应当善用品牌核心资产...这可能是比所谓的品牌设计的spec更重要的基本逻辑。否则，我们在表达什么呢？」

SKILL.md

@@ -66,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 提取真实色值
-- **绝对不要从记忆里猜品牌色**。从下载的资产里 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 色）。
+**3.2 产品图/渲染图（实体产品必需）**
+
+按优先级：
+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 手画代替**
+
+```bash
+# 示例：下载 DJI 官网产品 hero image
+curl -A "Mozilla/5.0" -L "<hero-image-url>" -o assets/<brand>-brand/product-hero.png
+```
+
+**3.3 UI 截图（数字产品必需）**
 
-##### Step 5 · 固化为 `brand-spec.md` 文件（不可省略）
+- App Store / Google Play 的产品截图（注意：可能是 mockup 而非真实 UI，要对比）
+- 官网 screenshots section
+- 产品演示视频截帧
+- 产品官方 Twitter/X 的发布截图（常是最新版本）
+- 用户有账号时，直接截屏真实产品界面
 
-> **这一步是全协议的制胜点**。前 4 步抽完色，如果只留在内存里下一页就忘。必须写一份 `brand-spec.md` 到项目根目录，让所有 CSS 变量引用这份文件。
+##### 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 后的执行纪律**（硬要求）：
-- 写 CSS 前把 spec 色值做成 `:root { --brand-primary: ...; }` CSS 变量
-- 所有 HTML 文件只能用 `var(--brand-*)`，**不允许临场写死色号**
-- 这一条让品牌一致性从「靠自觉」变成「靠结构」——agent 想临时加色要先改 spec，改 spec 就会自觉
+**写完 spec 后的执行纪律（硬要求）**：
+- 所有 HTML 必须**引用** `brand-spec.md` 里的资产文件路径，不允许用 CSS 剪影/SVG 手画代替
+- Logo 作为 `<img>` 引用真实文件，不重画
+- 产品图作为 `<img>` 引用真实文件，不用 CSS 剪影代替
+- CSS 变量从 spec 注入：`:root { --brand-primary: ...; }`，HTML 只用 `var(--brand-*)`
+- 这让品牌一致性从「靠自觉」变成「靠结构」——想临时加色要先改 spec
+
+##### 全流程失败的兜底
+
+按资产类型分别处理：
+
+| 缺失 | 处理 |
+|---|---|
+| **Logo 完全找不到** | **停下问用户**，不要硬做（logo 是品牌识别度的根基） |
+| **产品图（实体产品）找不到** | 优先 nano-banana-pro AI 生成（以官方参考图为基底）→ 次选向用户索取 → 最后才是诚实 placeholder（灰块+文字标签，明确标注"产品图待补"） |
+| **UI 截图（数字产品）找不到** | 向用户索取自己账号的截屏 → 官方演示视频截帧。不用 mockup 生成器凑 |
+| **色值完全找不到** | 按「设计方向顾问模式」走，向用户推荐 3 个方向并标注 assumption |
 
-**全流程失败的兜底**：三条路径都失败（极罕见）才明确告诉用户「找不到 official brand guidelines，我按通用风格做并在 spec 里标注 assumption」——**不要静默用通用色硬做**。Fallback 时进入「设计方向顾问模式」（见下节）。
+**禁止**：找不到资产就静默用 CSS 剪影/通用渐变硬做——这是协议最大的反 pattern。**宁可停下问，也不要凑**。
 
-**反例**（真实踩过的坑）：
-- 为 Kimi 做动画时凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工一遍
-- 把 Lovart 产品截图里演示品牌的喜茶红当成 Lovart 自己的色——差点毁整个设计
+##### 反例（真实踩过的坑）
+
+- **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模式：先展示假设，再执行