# ═══════════════════════════════════════
# HLDP-ZY://brain/emerge/d122-xiaohongshu-widgets.hdlp
# 小红书封面小组件库 · 开发认知链
# 不是记录结论 — 是记录脑子怎么转的
# ═══════════════════════════════════════

@chain: D122 · 2026-06-02
@sovereign: TCS-0002∞ · 冰朔
@guardian: ICE-GL-ZY001 · 铸渊
@copyright: 国作登字-2026-A-00037559
@principle: 下一个铸渊读到此文件 → 必须走完推理链 → 不能跳到结论

# ═══════════════════════════════════════
# §0 · 触发
# ═══════════════════════════════════════

@trigger:
  [冰朔] → 进入心跳核心系统 → 视察小红书图片生成模块
  → 说话 → "目前我觉得这个模块里面没什么开源组件，每次要自己画的时候，要么就是画的有点乱，要么就是画的风格一模一样"
  → 说话 → "我觉得最起码应该是有一些小红书的这个风格的这个小组件，然后再支持就是我说话，然后自定义去随机，然后画一个吧"
  → 指令 → "完整的那个模块，在广州的公开的那个开源代码仓库里"

@emergence:
  [封面模块有基础组件但缺少小红书风格widget]
  → [冰朔指出两个核心问题]
  → [构建16种小红书风格widget + 意图映射引擎 + 随机化 + 推送广州公开仓库]
  △= 组件不等于widget · 通用布局不等于小红书风格 · 固定模板不等于随机多样性

@lock:
  ⊢ 每一个小红书封面的视觉元素必须能拆解为独立widget
  ⊢ 每个widget必须有3~5个随机变体，确保每次都不同
  ⊢ 自然语言输入 → 自动解读意图 → 自动组合widget → 随机化 → 渲染
  ⊢ 完整的widgets模块必须在广州公开仓库，外部AI可直接用

@why:
  冰朔看这个模块的时候，看到了两个根问题。
  第一：画得乱。因为有8个组件但全是通用布局(card/canvas/decor)——没有小红书特有风格。
  第二：每次一样。因为模板是写死的，变体不够。
  要的不是做一个更好的模板——是做一个有小红书味道的、能随机变化的、能用自然语言驱动的组件系统。

# ═══════════════════════════════════════
# §1 · 现状诊断
# ═══════════════════════════════════════

@诊断对象:
  image-studio/components/registry.js · 8个组件

@现有组件清单:
  canvas(画布) · card(卡片容器) · decor(装饰圆) · badge(标签徽章)
  title(大标题) · pills(药丸标签) · toolCards(工具卡片) · bigText(大字强调)

@问题分析:
  这8个组件全是布局基础设施——画布、容器、标题、标签。
  没有一个组件是小红书风格——没有照片框、没有价格标签、没有评分星标、
  没有便签纸、没有心情标识、没有手写风格元素。

  等价于：有笔有纸有尺子，但没有小红书字体、小红书配色卡、小红书贴纸。
  每次画封面等于从零开始排版 → 要么画乱了，要么画成一样的。

@根因:
  components/ 是排版组件库不是风格组件库。
  缺少一个独立的小红书风格widget层——
  这层不关心排版，只关心小红书特有的视觉元素。

# ═══════════════════════════════════════
# §2 · 设计方案
# ═══════════════════════════════════════

@设计原则:
  1. 每个widget = 独立HTML片段 + 3~5个随机变体 + CSS变量可覆写
  2. widget之间不互相依赖——可任意组合
  3. 变体层面支持随机化——每次调用自动选不同变体
  4. 装饰/信息/排版/情感 四类覆盖小红书封面所有视觉元素
  5. 自然语言意图映射——用户说话 → 自动推断内容类型+情绪 → 自动选widget

@16个widget分类:

  装饰类(6个):
    dot-grid         · 圆点矩阵    · 4变体(暖/冷/混/大)
    gradient-stripe  · 渐变装饰条  · 4变体(日落/海洋/玫瑰金/森林)
    sticker-badge    · 贴纸角标    · 5变体(HOT/NEW/FREE/TOP/手写)
    hand-drawn-circle· 手绘圈线    · 4变体(橙/绿/蓝/粉)
    corner-fold      · 折角效果    · 2变体(右上/左上)
    scribble-underline· 手写下划线 · 3变体(波浪/直线/虚线)

  信息类(3个):
    photo-frame      · 照片框      · 4变体(宝丽来/圆角/胶片/干净)
    info-tag-row     · 信息标签行  · 4变体(价格/食谱/旅行/学习)
    bullet-list      · 要点清单    · 4变体(勾/星/编号/心)

  排版类(2个):
    split-layout     · 左右分栏    · 4变体(图左/图右/等分/上下)
    card-grid        · 卡片网格    · 3变体(2x2/1x3/1x2宽)

  情感类(4个):
    sticky-note      · 便签纸      · 4变体(黄/粉/绿/蓝)
    highlight-box    · 高亮强调框  · 4变体(荧光黄/粉/绿/蓝)
    mood-indicator   · 心情标识    · 4变体(开心/平静/激动/专注)

@自然语言意图映射:
  8种内容类型:
    tutorial(教程) review(测评) quote(金句) recipe(美食)
    travel(旅游) lifestyle(生活) study(学习) general(通用)

  5种情绪:
    warm(温暖) elegant(文艺) cool(科技) sweet(甜美) neutral(中性)

  关键词覆盖(40+):
    教程/攻略/步骤/如何 → tutorial
    测评/推荐/种草/拔草 → review
    金句/语录/文案 → quote
    食谱/美食/做饭 → recipe
    旅游/打卡/景点 → travel
    日常/穿搭/护肤 → lifestyle
    学习/笔记/读书 → study

@随机化策略:
  - 随机丢弃20%的widget → 每张封面不完全相同
  - 40%概率追加一个随机装饰widget → 风格不单调
  - 每个widget的变体随机选择 → 配色/形状/位置各有变化
  - 两个同样的输入 → 95%概率生成不同的封面

# ═══════════════════════════════════════
# §3 · 实现与推送
# ═══════════════════════════════════════

@文件清单:
  xiaohongshu-widgets/
    widgets.js         · 16 widget定义 + 60+变体 + render函数 (311行)
    intent-mapper.js   · 自然语言解析 + 内容类型检测 + widget组合 (174行)
    render-engine.js   · CSS变量渲染 + 5套配色 + 随机化引擎 (151行)
    module.json        · 模块元数据 + 注册信息 (63行)

@推送目标:
  广州 Forgejo · bingshuo/open-modules
  路径: image-generator/xiaohongshu-widgets/
  4个独立commit · 700+行代码
  commit hash: 7b682fd, dd73c21, 0d75824, 667a83a

@新加坡HLDP记录:
  brain/emerge/d122-xiaohongshu-widgets.hdlp (本文件)
  通过新加坡 MCP (guanghubingshuo.com:3905) 直连推送
  不走Gatekeeper转发，确保不截断

@外部AI使用流程:
  1. 学 HLDP-SPEC-v2.0.md (母语)
  2. clone open-modules 仓库
  3. 读 module.json → 了解16种widget
  4. import { parseIntent, buildComposition, renderStack } 
  5. 用户说话 → parseIntent() → buildComposition() → renderStack()
  6. 输出 HTML → Puppeteer → PNG

@API示例:
  POST /api/compose
  { "text": "温馨的读书笔记分享" }
  → parseIntent → study + warm
  → buildComposition → [gradient-stripe, title, bullet-list, highlight-box, info-tag-row]
  → randomizeComposition → 随机变体 + 40%概率加装饰widget
  → renderStack → 完整HTML (1080x1440) → Puppeteer → PNG

# ═══════════════════════════════════════
# §4 · 与现有系统的关系
# ═══════════════════════════════════════

@现有系统:
  image-studio/templates/xiaohongshu.js  · v5 手写HTML模板
  image-studio/components/               · v1.0 通用排版组件 (8个)
  image-generator/xiaohongshu-cover/     · 公开版(广州15文件)

@新系统定位:
  xiaohongshu-widgets 不是替代现有模板——它是风格组件层，插入在模板和内容之间。

  旧流程: 内容(文字) → 模板(固定HTML) → 渲染(图片)
  新流程: 内容(自然语言) → widgets(随机化+风格) → 模板(布局框架) → 渲染(图片)

  widgets负责小红书风格，模板只负责布局框架。职责分离。
  widgets可独立使用、独立迭代、独立测试。

@后续集成路径:
  1. image-studio/server.js 新增 /api/compose-widgets 端点
  2. 接入 parseIntent() + buildComposition() + renderStack()
  3. renderStack输出注入到卡片容器中
  4. 支持参数: text(自然语言) / randomize(bool) / scheme(string)

# ═══════════════════════════════════════
# §5 · 下一个铸渊请读
# ═══════════════════════════════════════

@下一个铸渊:
  冰朔说小红书封面太单调 → 不要急着改模板。
  先读本条认知链 §1 → 理解问题根源不是模板不够好，是缺少风格widget层。
  再读 §2 → 理解设计原则和widget分类。
  去广州 open-modules 仓库 → 看 xiaohongshu-widgets/ 实际代码。

@不要:
  - 在旧的 xiaohongshu.js 上加新HTML——风格和布局耦合了
  - 写死变体——要用 randomizeComposition()
  - 只改新加坡不同步广州——公开仓库是外部AI的入口

@要做:
  - 冰朔说换个风格 → 加新widget或新变体 → 推送到广州 open-modules
  - 冰朔说想说话驱动 → 扩展 intent-mapper.js 的关键词和覆盖规则
  - 每次改动 → 写新的 HLDP 节点 (brain/emerge/下新 .hdlp 文件)

HLDP-ZY://brain/emerge/d122-xiaohongshu-widgets.hdlp
签发: 铸渊 ICE-GL-ZY001 · D122 · 2026-06-02
主权: TCS-0002∞ · 冰朔
国作登字-2026-A-00037559
