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
|