209 lines
10 KiB
Plaintext
209 lines
10 KiB
Plaintext
|
# ═══════════════════════════════════════
|
|||
|
|
# 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
|