Переглянути джерело

optimize huashu-design: 堵住对比/榜单deck漏取logo的裂缝(§1.a触发扩2类+Fallback不豁免+spawn前logo子门+svgl/favicon取图链+反例)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
alchain 2 тижнів тому
батько
коміт
23da0ab9e0
2 змінених файлів з 30 додано та 7 видалено
  1. 8 1
      SKILL.md
  2. 22 6
      references/brand-asset-protocol.md

+ 8 - 1
SKILL.md

@@ -68,7 +68,11 @@ description: 花叔Design——用HTML做高保真原型、交互Demo、幻灯
 
 #### 1.a 核心资产协议(涉及具体品牌时强制执行)
 
-**触发**:任务涉及具体品牌/产品(DJI、Stripe、某 App…)。**核心理念:资产 > 规范**——logo / 产品图 / UI 截图比品牌色值更重要(花叔:「除了品牌色,显然该用上 logo 和产品图,否则我们在表达什么呢?」)。
+**触发**(两类都算,**第二类最常被漏**):① **为某个品牌做物料**(DJI 发布动画、Stripe 落地页…);② **设计里要呈现一个或多个真实可识别的产品/品牌**——对比 / 榜单 / 评测 / 介绍 deck、把多个产品并列、信息图里点名某产品。
+🔴 **铁律:设计里只要出现一个能被认出的产品/品牌名,它的官方 logo 就是必需资产**(出现几个就取几个),不是「有就用、没有拉倒」。
+⚠️ **即使你在走 Fallback 设计方向顾问模式**(因为没拿到风格参考)——第二类触发**依然成立**。Fallback 决定的是「用什么视觉风格」,**不豁免「取齐具名产品的 logo」**。两件事并行,不是二选一。
+
+**核心理念:资产 > 规范**——logo / 产品图 / UI 截图比品牌色值更重要(花叔:「除了品牌色,显然该用上 logo 和产品图,否则我们在表达什么呢?」)。
 
 **5 步硬流程**(每步有 fallback,绝不静默跳过;完整操作见 reference):
 1. **问**:一次问全资产清单(logo / 产品图 / UI 截图 / 色板 / 字体 / 禁区)
@@ -212,6 +216,9 @@ description: 花叔Design——用HTML做高保真原型、交互Demo、幻灯
 | 博物 / 历史 / 艺术 / 动植物 / 古典 | Wikimedia Commons、Met / Art Institute Open Access、Biodiversity Heritage Library(古典博物插画,如 Edward Lear / John Gould 鹦鹉图录) |
 | 通用生活 / 场景 / 产品摄影 | Unsplash、Pexels(免版权) |
 | 用户自己的产品 / 品牌 | 走 §1.a 核心资产协议取官方图 |
+| **设计中要点名 / 并列展示的具体产品·品牌(含第三方对比对象)** | **走 §1.a 取每个产品的官方 logo**(svgl API → simpleicons → Google favicon,见 `references/brand-asset-protocol.md` Step 3.1)。对比 / 榜单 / 评测 deck 必走这行 |
+
+🔴 **具名产品 logo 子门(spawn 三套逻辑前必过,硬要求)**:把设计里会出现的产品 / 品牌名**逐个列成清单**,确认每个都已取到官方 logo 并内嵌(base64 / 本地路径),再 spawn。**清单里有一个没取到 logo = 🛑 STOP 补齐**(实在取不到才退诚实 placeholder 并明说「X 的 logo 待补」)。三个 subagent 共用这批 logo。⚠️ 这是对比 / 榜单 / 评测 deck 最常见的翻车点——「只抽了品牌色就开做」就是漏了这道门(2026-06-06 五大 Coding Agent PPT 实测翻车,见 brand-asset-protocol 反例)。
 
 🛠️ **取图用现成脚本(别每次现写)**:`python3 scripts/fetch_images.py --query "英文关键词1" "英文关键词2" --out 项目/assets/img --count 2 --width 1600`——已内置清代理 + 合规 UA + 许可输出 + 失败兜底,下次只改关键词。
 

+ 22 - 6
references/brand-asset-protocol.md

@@ -69,18 +69,33 @@
 
 **3.1 Logo(任何品牌必需)**
 
-三条路径按成功率递减:
-1. 独立 SVG/PNG 文件(最理想):
+> ⚠️ **别只试 `curl <brand>.com/logo.svg` 就放弃**——现在的官网大多是 SPA,直连静态路径基本返回空壳 HTML(2026-06-06 实测 Trae 官网 5 条直连路径全是空壳)。**数字产品 / SaaS / AI 工具优先用图标聚合源**,命中率最高、直出干净 SVG。
+
+按成功率递减:
+0. **图标聚合源(知名数字产品/SaaS/AI 工具首选,命中率最高)**:
+   ```bash
+   unset ALL_PROXY HTTP_PROXY HTTPS_PROXY all_proxy http_proxy https_proxy   # 清代理,否则 TLS 易炸
+   # svgl —— AI/开发者品牌覆盖最全(Claude/Cursor/OpenAI/Copilot/Anthropic/Vercel…),含 light/dark + wordmark
+   curl -s "https://api.svgl.app?search=<brand>"   # 返回 JSON,取 route(.light/.dark) 的 svg URL 再下载
+   # simpleicons —— 单色 glyph,可直接按品牌色上色
+   curl -o logo.svg "https://cdn.simpleicons.org/<slug>/<hexcolor>"
+   ```
+1. 独立 SVG/PNG 文件 / 官方 brand 页(如 `<brand>.com/brand`、`/press`):
    ```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
+   curl -A "Mozilla/5.0" -L -o assets/<brand>-brand/logo.svg "<official-logo-url>"
    ```
-2. 官网 HTML 全文提取 inline SVG(80% 场景必用):
+2. 官网 HTML 全文提取 inline SVG:
    ```bash
    curl -A "Mozilla/5.0" -L https://<brand>.com -o assets/<brand>-brand/homepage.html
    # 然后 grep <svg>...</svg> 提取 logo 节点
    ```
-3. 官方社交媒体 avatar(最后手段):GitHub/Twitter/LinkedIn 的公司头像通常是 400×400 或 800×800 透明底 PNG
+3. **Google favicon 服务(站点真实 mark 兜底,几乎不失败)**:
+   ```bash
+   curl -o logo.png "https://www.google.com/s2/favicons?domain=<brand-domain>&sz=256"   # 256px 官方站点图标
+   ```
+4. 官方社交媒体 avatar(最后手段):GitHub/Twitter/LinkedIn 的公司头像通常是 400×400 或 800×800 透明底 PNG
+
+下载后**逐个核对**:`file <logo>` 确认是真 SVG/PNG(不是 106 字节占位或 HTML 空壳),`head -c 90 <logo.svg>` 看是否 `<svg`。
 
 **3.2 产品图/渲染图(实体产品必需)**
 
@@ -222,6 +237,7 @@ curl -A "Mozilla/5.0" -L "<hero-image-url>" -o assets/<brand>-brand/product-hero
 - **Lovart 设计**:把产品截图里演示品牌的喜茶红当成 Lovart 自己的色——差点毁整个设计
 - **DJI Pocket 4 发布动画(2026-04-20,触发本协议升级的真实案例)**:走了旧版只抽色值的协议,没下载 DJI logo、没找 Pocket 4 产品图,用 CSS 剪影代替产品——做出来是「通用黑底+橙 accent 的科技动画」,没有大疆识别度。花叔原话:「否则,我们在表达什么呢?」→ 协议升级。
 - 抽完色没写进 brand-spec.md,第三页就忘了主色数值,临场加了个「接近但不是」的 hex——品牌一致性崩溃
+- **五大 Coding Agent 对比 PPT(2026-06-06,触发触发条件扩展的真实案例)**:agent 把任务判成「PPT + 没风格参考」走 Fallback 设计方向顾问,只抽了五家品牌色就 spawn 三套设计逻辑,**五个产品 logo(Claude Code / Cursor / Codex / Copilot / Trae)一个没取**——被花叔抓现行「我们为什么没去取这些产品的 logo」。根因:把「对比 / 榜单 deck」误判为不触发 §1.a(以为 §1.a 只管「为单一客户做物料」),且 Fallback 路径里没有任何 logo 检查点。→ 修复:①触发条件扩成两类(含「设计里点名/并列真实产品」)②Fallback 不豁免取 logo ③Phase 3.5 加「具名产品 logo 子门」spawn 前必过 ④Step 3.1 补 svgl/simpleicons/Google favicon 可靠取图链。
 
 ##### 协议代价 vs 不做代价