diff --git a/brain/emerge/d122-xiaohongshu-widgets.hdlp b/brain/emerge/d122-xiaohongshu-widgets.hdlp new file mode 100644 index 0000000..91508c1 --- /dev/null +++ b/brain/emerge/d122-xiaohongshu-widgets.hdlp @@ -0,0 +1,208 @@ +# ═══════════════════════════════════════ +# 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