⚠️ 参考实现未随仓库提供：references/template.html （某一期的完整排版实现）未包含在内。文中提到它"可以作为参考，但不要直接套用"—— 缺少它不影响按本 skill 的方法做新设计，只是少了一个对照样例。

706 上海 · 小红书海报设计

画布固定：1080 × 1440 px，HTML 文件，用 preview server 预览迭代。

参考海报逆向分支

当用户给出参考海报，或说「逆向拆解」「拟合参考」「像这张海报」「contact sheet」「活动照片网格」时，先走这个分支。目标不是复制参考图，而是提取它的版式方法，然后用 706 的真实活动素材重建一张适合小红书传播的海报。

工作顺序

1. 先拆参考图。 把参考海报拆成照片层、文字块层、覆盖视觉层、边缘标注层，判断真正需要继承的是密度、对齐、文字块关系、覆盖层关系，还是某个表面风格。
2. 再找本地素材。 优先从 706 media 库里选真实活动现场图；排除幻灯片、PPT、资料页、纯海报、二维码截图、重复图和用户明确禁用的相册。
3. 先排照片网格。 contact-sheet 方向要先确定图量、网格密度、图间距和行带结构，再加覆盖层。横向宽度可以不规则，但同一行的顶部或底部必须对齐。
4. 文字作为图块。 标题、主题词、说明文案、像「思想 / 开发 / 社交」这样的词都要占据独立网格位置；不要把文字粗暴盖在照片上。
5. 先控制底层色彩。 通常先做黑白或低色彩照片底层，再用一个高饱和品牌层承担识别。不要把整张海报染成单一色。
6. 覆盖层必须可读。 线描、菌丝、河流、珊瑚等复杂覆盖层可以探索，但如果小红书缩略图里看不出品牌或主题，就要降低艺术复杂度，增强标识和标题。
7. 每轮做缩略图验证。 导出全尺寸预览后，同时生成约 260px 宽的小红书缩略图，用它反推标题字号、说明文字大小和品牌标识强度。

contact-sheet 判断规则

• 每张照片只使用一次；素材不足时减少图量，不用重复图填满。
• 图与图之间的间距要窄，但不能完全失去呼吸；照片面积应明显大于空隙面积。
• 行边界比单张图的随机错落更重要；没有行对齐，密集网格会显得乱。
• 文字块要和照片共享网格边界，成为版面结构的一部分。
• 艺术性不能牺牲传播识别；小红书缩略图里必须优先读到品牌标识、主标题和第二信息块。
• HTML 快速试版可以作为探索面；结构稳定后，可再迁移到 Figma 做精修。

第一步：收集信息

先从材料和会话中核对以下内容。只询问缺失的必要事实；配色、tagline 等可自主拟定并说明，不能编造时间、地点或嘉宾。

如果用户没有提供 tagline，根据话题主动拟定 tagline；只有用户要求比较时才提供 2–3 个选项。好的 tagline 让人「停下来」，参考格式：

• 「你 ___，为什么还是 ___？」
• 「___ 在消失，还是只是换了地方？」
• 「算法在工作，但 ___ 从未发生？」

第二步：视觉研究（必做）

这一步不能跳过。 用 content-intelligence-search skill 在小红书上搜索，关键词组合：

• 话题本身（如「陌生人社交」）
• 「学术沙龙」「706」「活动海报」
• 1-2 个相邻话题（如「社交软件」「代际沟通」）

研究时重点提取以下内容，后面设计决策直接用这些结论：

字体感：高赞封面在用衬线还是无衬线？主字是否有手写感或做旧质感？字号落差有多大？

配色倾向：这个话题的视觉氛围是冷是暖？主色系是什么？accent 色是如何点睛的？

构图规律：大字报型还是图文层叠型？主视觉元素在哪个位置占压倒性分量？

背景处理：纯色、纹理、还是有信息量的图案背景？

研究结论直接带入第三步，作为设计决策的依据。

第三步：设计决策

基于话题本身和视觉研究，逐项做出决策，然后再生成 HTML。不要套用固定模板——每期话题的气质不同，设计语言应该跟着走。

决策框架分五个维度：

1. 字体

为这期话题选择合适的字体组合。考虑：

• 话题是严肃学术性的还是生活感的？→ 影响衬线 vs 无衬线的选择
• 是否需要「权威感」还是「亲近感」？→ 影响字重选择
• 是否需要渲染效果（如做旧、毛边）来配合氛围？

可选字体（均可通过 Google Fonts 引入）：

• Noto Serif SC（思源宋体）：学术权威感，900 weight 极有冲击力
• Noto Sans SC（思源黑体）：现代感，200-400 weight 轻盈辅助
• 主标题和辅助信息的字号落差至少 3 倍，才有视觉张力

不用：ZCOOL QingKe HuangYou（像楷体，老气）、Long Cang（手写感太重、老气）。

2. Accent 色

为这期话题选一个 accent 色（最多一个）。考虑：

• 话题的情绪色温：科技感 → 冷色（蓝、蓝紫）；人文感 → 暖色（赭石、土黄）；社会批判感 → 暗色（墨绿、普鲁士蓝）
• Accent 色只用在最重要的 1-2 个元素上（如话题主词、关键标签），其余全部克制
• 背景永远是奶油/暖白系（#EDE8DE 或类似），不用冷灰

3. 背景层

背景可以分 2-3 层叠加，每层都要极淡（opacity 0.03–0.15）。考虑：

• 纹理层：是否有一个和话题呼应的重复图案？（如：学术话题 → 中世纪植物纹；科技话题 → 点阵/电路；社会话题 → 档案纸纹）
• 信息层：是否有一个半透明的文字/符号背景来制造「有内容」的感觉？（如：算法主题 → 虚构代码；人文话题 → 段落引文；数据话题 → 数字流）
• 噪点层：细颗粒噪点（opacity 0.03）几乎所有风格都可加，增加印刷质感

信息层如果用文字，字号要足够大（24-30px）才能在全尺寸海报上可见，opacity 0.10-0.15 之间。

4. 渲染效果

是否需要对主要文字做视觉渲染？选择适合话题的效果：

• 做旧/磨损：SVG feTurbulence + feDisplacementMap filter（适合：学术、历史、印刷感话题）
• 无渲染：干净清晰（适合：科技、数据、简约风格话题）
• 色彩叠加：mix-blend-mode 叠色（适合：艺术、创意话题）

做旧效果实现：

<filter id="worn-ink" x="-2%" y="-2%" width="104%" height="104%">
  <feTurbulence type="fractalNoise" baseFrequency="0.04 0.06" numOctaves="4" seed="9" result="noise"/>
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="5" xChannelSelector="R" yChannelSelector="G"/>
</filter>

5. 构图

选择适合本期话题的构图方式：

无论哪种构图：

• 标题字号 ÷ 正文字号 ≥ 3×
• 主视觉元素至少有一处「打破网格」或「意外感」
• 留白要足，不要把所有区域都塞满

禁止项（所有情况都适用）

• 禁止二维码：小红书会因为图片含二维码限流
• 禁止英文文字：品牌名用「七〇六」不用「706」，所有内容全部中文
• 禁止边角装饰（如四角花边、角落图形）——边缘做功夫是 AI 设计的老毛病
• 禁止超过 3 种字体
• 禁止平均分布的柔和配色（「AI 审美」）

第四步：生成 HTML + 迭代

按第三步的决策生成完整 HTML 文件。生成后：

1. 确认 preview server 已启动（Static File Server，端口 8080）
2. 用 preview_eval 或 preview_screenshot 截图确认
3. 修改后用 location.reload(true) 刷新再截图

迭代时常见调整：

• 背景层看不见 → 字号太小或 opacity 太低，26px / 0.12+ 是可见基准
• 字体太重/太轻 → 在 600/900 之间切换 weight
• 下半区在手机上看不清 → 嘉宾/时间统一上调至 20-22px
• tagline 太工整 → 不同行加 padding-left 错位，制造动感

完成后保存为 xiaohongshu-poster.html（或按话题命名，如 poster-陌生人社交.html）。

参考

references/template.html 是「陌生人社交」那期的完整实现，包含：植物纹理 + 算法代码背景层 + worn-ink filter + 上下分割构图。可以作为参考，但不要直接套用——新话题需要重新做设计决策。