Template

jinye_huang dcfd820ca4 feat(poster_v2): 智能海报生成引擎 v1.0

- 新增 PosterSmartEngine，AI 生成文案 + 海报渲染
- 5 种布局支持文本换行和自适应字体
- 修复按钮/标签颜色显示问题
- 优化渐变遮罩和内容区域计算
- Prompt 优化：标题格式为产品名+描述

2025-12-10 15:04:59 +08:00

18 KiB

Raw Blame History

海报设计资产库

以小红书风格为参考
创建日期: 2024-12-10

一、小红书风格分析

1.1 视觉特征

特征	小红书风格	设计启示
比例	3:4 或 4:5 竖版	移动端优先
图片占比	60-80%	图大字少
色彩	明亮、高饱和	吸引眼球
字体	粗大、醒目	一眼抓住重点
排版	简洁、留白多	不拥挤
装饰	贴纸、emoji、手写	年轻活泼

1.2 常见布局类型

类型A: 大图+底部文字        类型B: 图片+顶部标题        类型C: 文字叠加图片
┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│                 │      │   [大标题]       │      │                 │
│    [大图]       │      │   [小标题]       │      │   [背景图]       │
│    70%         │      ├─────────────────┤      │                 │
│                 │      │                 │      │   ┌─────────┐   │
├─────────────────┤      │    [大图]       │      │   │ 标题    │   │
│  [标题]         │      │    65%         │      │   │ 副标题  │   │
│  [副标题]       │      │                 │      │   └─────────┘   │
│  [价格/标签]    │      │                 │      │                 │
└─────────────────┘      └─────────────────┘      └─────────────────┘

类型D: 左右分栏           类型E: 卡片式              类型F: 纯色+大字
┌────────┬────────┐      ┌─────────────────┐      ┌─────────────────┐
│        │        │      │  ╭───────────╮  │      │                 │
│ [图片] │[标题]  │      │  │           │  │      │    [大标题]     │
│  50%   │        │      │  │  [内容]   │  │      │                 │
│        │[价格]  │      │  │           │  │      │    [副标题]     │
│        │        │      │  ╰───────────╯  │      │                 │
│        │[详情]  │      │                 │      │    [装饰]       │
└────────┴────────┘      └─────────────────┘      └─────────────────┘

1.3 文字风格

元素	小红书常见做法
标题	粗体、大号 (40-80px)、常用感叹号
副标题	手写体或细体、小号 (20-30px)
价格	特大号、红色或对比色
标签	圆角背景色块、贴纸风格
emoji	大量使用、增加活泼感

二、布局骨架定义

2.1 基础布局 (5种)

# config/design_assets/layouts.yaml

layouts:

  # A: 大图在上，文字在下 (最常用)
  hero_bottom:
    name: 大图底部文字
    suitable_for: [景点, 美食, 酒店]
    regions:
      image:
        position: [0, 0]
        size: [100%, 65%]
      content:
        position: [0, 60%]
        size: [100%, 40%]
        effect: gradient_overlay  # 渐变遮罩融合
    content_slots:
      - title: { align: center, margin_top: 5% }
      - subtitle: { align: center }
      - price: { align: center }
      - tags: { align: center, margin_bottom: 5% }

  # B: 文字叠加在图片上 (视觉冲击强)
  overlay_center:
    name: 居中叠加
    suitable_for: [景点, 活动, 攻略]
    regions:
      image:
        position: [0, 0]
        size: [100%, 100%]
        effect: darken_overlay  # 压暗便于看字
      content:
        position: [10%, 30%]
        size: [80%, 40%]
    content_slots:
      - title: { align: center, style: bold_shadow }
      - subtitle: { align: center }
      - tags: { align: center, position: bottom }

  # C: 文字叠加在底部 (小红书最爱)
  overlay_bottom:
    name: 底部叠加
    suitable_for: [美食, 探店, 穿搭]
    regions:
      image:
        position: [0, 0]
        size: [100%, 100%]
      content:
        position: [5%, 55%]
        size: [90%, 40%]
        effect: frosted_glass  # 毛玻璃
    content_slots:
      - title: { align: left, style: bold }
      - subtitle: { align: left }
      - price: { align: left }

  # D: 左右分栏 (信息量大)
  split_vertical:
    name: 左图右文
    suitable_for: [酒店, 民宿, 商品]
    regions:
      image:
        position: [0, 0]
        size: [50%, 100%]
      content:
        position: [50%, 0]
        size: [50%, 100%]
        background: solid_color
    content_slots:
      - title: { align: left, margin_top: 15% }
      - subtitle: { align: left }
      - features: { type: list }
      - price: { align: left, position: bottom }

  # E: 卡片式 (精致感)
  card_float:
    name: 悬浮卡片
    suitable_for: [酒店, 攻略, 清单]
    regions:
      image:
        position: [0, 0]
        size: [100%, 100%]
      content:
        position: [8%, 50%]
        size: [84%, 45%]
        style: card  # 圆角、阴影、白底
    content_slots:
      - title: { align: left }
      - subtitle: { align: left }
      - features: { type: list }
      - price: { align: right, position: bottom }

2.2 布局示意图

hero_bottom           overlay_center        overlay_bottom
┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│             │      │             │      │             │
│   IMAGE     │      │   ┌─────┐   │      │   IMAGE     │
│   65%       │      │   │TEXT │   │      │             │
│             │      │   └─────┘   │      │ ┌─────────┐ │
├─────────────┤      │             │      │ │ TEXT    │ │
│   TEXT      │      │   IMAGE     │      │ │ glass   │ │
│   35%       │      │   100%      │      │ └─────────┘ │
└─────────────┘      └─────────────┘      └─────────────┘

split_vertical        card_float
┌──────┬──────┐      ┌─────────────┐
│      │      │      │             │
│IMAGE │ TEXT │      │   IMAGE     │
│ 50%  │      │      │  ╭───────╮  │
│      │      │      │  │ CARD  │  │
│      │      │      │  │       │  │
│      │      │      │  ╰───────╯  │
└──────┴──────┘      └─────────────┘

三、配色方案定义

3.1 小红书常见配色 (10种)

# config/design_assets/colors.yaml

color_schemes:

  # === 清新系 ===
  
  mint_fresh:
    name: 薄荷清新
    mood: 清新、自然、放松
    suitable_for: [民宿, 咖啡, 文艺景点]
    colors:
      primary: "#4ECDC4"      # 薄荷绿
      secondary: "#A8E6CF"    # 浅绿
      accent: "#FF6B6B"       # 珊瑚红 (点缀)
      text_light: "#FFFFFF"
      text_dark: "#2C3E50"
    gradient: ["#4ECDC4", "#44A08D"]
    
  sky_blue:
    name: 天空蓝
    mood: 清爽、干净、舒适
    suitable_for: [海边, 游泳, 夏日活动]
    colors:
      primary: "#74B9FF"
      secondary: "#A29BFE"
      accent: "#FDCB6E"
      text_light: "#FFFFFF"
      text_dark: "#2D3436"
    gradient: ["#74B9FF", "#0984E3"]

  # === 温暖系 ===
  
  sunset_warm:
    name: 日落暖橙
    mood: 温暖、活力、热情
    suitable_for: [美食, 亲子, 户外活动]
    colors:
      primary: "#FF7675"
      secondary: "#FDCB6E"
      accent: "#FFFFFF"
      text_light: "#FFFFFF"
      text_dark: "#2D3436"
    gradient: ["#FF7675", "#F39C12"]
    
  peach_pink:
    name: 蜜桃粉
    mood: 甜美、少女、浪漫
    suitable_for: [下午茶, 甜品, 约会]
    colors:
      primary: "#FFB8B8"
      secondary: "#FFEAA7"
      accent: "#FF6B81"
      text_light: "#FFFFFF"
      text_dark: "#6C5B7B"
    gradient: ["#FFB8B8", "#FF9A9E"]

  # === 高级系 ===
  
  mocha_brown:
    name: 摩卡棕
    mood: 高级、复古、质感
    suitable_for: [咖啡, 酒店, 精品店]
    colors:
      primary: "#8B7355"
      secondary: "#D4A574"
      accent: "#F5E6D3"
      text_light: "#FFFFFF"
      text_dark: "#4A3728"
    gradient: ["#8B7355", "#5D4E37"]
    
  forest_green:
    name: 森林绿
    mood: 自然、治愈、高端
    suitable_for: [森林, 温泉, 度假村]
    colors:
      primary: "#2D5A27"
      secondary: "#68A357"
      accent: "#F4D03F"
      text_light: "#FFFFFF"
      text_dark: "#1E3A1E"
    gradient: ["#2D5A27", "#1D4D1D"]

  # === 活力系 ===
  
  electric_purple:
    name: 电光紫
    mood: 潮流、时尚、年轻
    suitable_for: [演出, 夜生活, 潮玩]
    colors:
      primary: "#A855F7"
      secondary: "#EC4899"
      accent: "#22D3EE"
      text_light: "#FFFFFF"
      text_dark: "#1E1B4B"
    gradient: ["#A855F7", "#6366F1"]
    
  ocean_blue:
    name: 深海蓝
    mood: 神秘、深邃、高端
    suitable_for: [海洋馆, 潜水, 游轮]
    colors:
      primary: "#1A5F7A"
      secondary: "#159895"
      accent: "#57C5B6"
      text_light: "#FFFFFF"
      text_dark: "#0A2647"
    gradient: ["#1A5F7A", "#0E4A5D"]

  # === 极简系 ===
  
  pure_white:
    name: 纯净白
    mood: 简约、干净、日系
    suitable_for: [民宿, 文艺空间, 极简设计]
    colors:
      primary: "#FFFFFF"
      secondary: "#F8F9FA"
      accent: "#212529"
      text_light: "#FFFFFF"
      text_dark: "#212529"
    gradient: ["#FFFFFF", "#E9ECEF"]
    
  ink_black:
    name: 水墨黑
    mood: 高端、神秘、质感
    suitable_for: [高端餐厅, 酒吧, 艺术展]
    colors:
      primary: "#1A1A2E"
      secondary: "#16213E"
      accent: "#E94560"
      text_light: "#FFFFFF"
      text_dark: "#0F0F1A"
    gradient: ["#1A1A2E", "#0F0F1A"]

3.2 配色速查表

配色	主色	适用场景	情绪
🌿 薄荷清新	#4ECDC4	民宿、咖啡	清新放松
🌊 天空蓝	#74B9FF	海边、夏日	清爽干净
🌅 日落暖橙	#FF7675	美食、亲子	温暖活力
🍑 蜜桃粉	#FFB8B8	甜品、约会	甜美少女
☕ 摩卡棕	#8B7355	咖啡、酒店	高级复古
🌲 森林绿	#2D5A27	森林、度假	自然治愈
💜 电光紫	#A855F7	演出、潮玩	潮流时尚
🐋 深海蓝	#1A5F7A	海洋馆	神秘深邃
⚪ 纯净白	#FFFFFF	民宿、极简	简约干净
⚫ 水墨黑	#1A1A2E	高端餐厅	高端神秘

四、字体组合定义

4.1 可用字体资源 (assets/font/)

字体文件	风格	推荐用途
兰亭特黑简 GBK.TTF	粗黑、冲击力强	大标题
兰亭粗黑简.TTF	粗黑、稳重	标题、价格
华康海报体简.ttc	海报风、醒目	活动标题
华康方圆体W7-GB.TTC	圆润、亲和	亲子主题
字体管家棉花糖.TTF	可爱、软萌	甜品、少女风
腾祥麦黑简.TTF	简洁、易读	正文、说明
邓玉二笔体.ttf	手写、文艺	文艺风格
经典综艺体简.TTF	综艺感、活泼	娱乐主题
方正粗倩_GBK.ttf	优雅、女性	美妆、时尚
SmileySans-Oblique.OTF	斜体、现代	潮流风格

4.2 字体配对 (4种)

# config/design_assets/fonts.yaml

font_pairs:

  # 活力现代 - 小红书最常见
  modern_bold:
    name: 活力现代
    mood: 年轻、活力、直接
    title: "兰亭特黑简 GBK.TTF"      # 粗黑标题
    subtitle: "腾祥麦黑简.TTF"        # 简洁副标题
    body: "腾祥麦黑简.TTF"

  # 可爱甜美 - 甜品/亲子
  cute_sweet:
    name: 可爱甜美
    mood: 可爱、甜美、温馨
    title: "字体管家棉花糖.TTF"       # 软萌标题
    subtitle: "华康方圆体W7-GB.TTC"   # 圆润副标题
    body: "腾祥麦黑简.TTF"

  # 文艺手写 - 文艺气质
  handwritten:
    name: 文艺手写
    mood: 文艺、随性、个性
    title: "邓玉二笔体.ttf"          # 手写标题
    subtitle: "腾祥麦黑简.TTF"
    body: "腾祥麦黑简.TTF"

  # 海报冲击 - 活动促销
  poster_impact:
    name: 海报冲击
    mood: 醒目、紧迫、促销
    title: "华康海报体简.ttc"         # 海报体
    subtitle: "兰亭粗黑简.TTF"
    body: "腾祥麦黑简.TTF"

4.3 字体层级规范

typography_scale:

  # 标题 - 最大、最醒目
  hero_title:
    size_range: [80, 150]      # 根据文字长度自适应
    weight: bold
    line_height: 1.1
    effects: [shadow, outline]  # 可选效果
    
  # 副标题
  subtitle:
    size_range: [30, 50]
    weight: regular
    line_height: 1.3
    
  # 价格 - 突出
  price:
    size_range: [60, 120]
    weight: bold
    color: accent              # 使用强调色
    
  # 正文
  body:
    size: 24
    weight: light
    line_height: 1.6
    
  # 标签
  tag:
    size: 18
    weight: medium
    padding: [12, 8]
    background: accent
    border_radius: 20

五、装饰元素定义

5.1 小红书风格装饰

# config/design_assets/decorations.yaml

decorations:

  # 无装饰 - 简洁风格
  none:
    elements: []

  # 标题下划线
  title_underline:
    type: line
    position: below_title
    width: 40%
    thickness: 3
    style: solid
    color: accent

  # 渐变遮罩 (底部渐变)
  gradient_overlay:
    type: gradient
    position: bottom
    height: 50%
    direction: bottom_up
    opacity: [0, 0.8]
    color: from_image  # 从图片取色

  # 毛玻璃效果
  frosted_glass:
    type: blur
    blur_radius: 20
    opacity: 0.85
    tint: from_image

  # 角标/徽章
  corner_badge:
    type: badge
    position: top_right
    offset: [15, 15]
    style: ribbon  # ribbon | circle | tag
    text: "HOT"
    background: "#FF6B6B"

  # 圆形标签
  circle_tag:
    type: badge
    position: top_left
    style: circle
    size: 60
    text: "必去"

  # 价格标签
  price_tag:
    type: tag
    position: bottom_right
    style: flag
    background: "#FF4757"

  # emoji 装饰
  emoji_scatter:
    type: emoji
    items: ["✨", "🔥", "💕"]
    position: random
    count: 3
    size: 30

  # 卡片阴影
  card_shadow:
    type: shadow
    offset: [0, 8]
    blur: 24
    color: "rgba(0,0,0,0.15)"

六、场景模板配方

6.1 景点门票

scenario: 景点门票

recommended:
  layouts: [hero_bottom, overlay_bottom]
  colors: [ocean_blue, sunset_warm, forest_green]
  fonts: [modern_bold]
  decorations: [gradient_overlay, corner_badge]

template_examples:
  - name: 海洋馆活力款
    layout: hero_bottom
    color: ocean_blue
    font: modern_bold
    decorations: [gradient_overlay, price_tag]
    
  - name: 乐园暖阳款
    layout: overlay_bottom
    color: sunset_warm
    font: modern_bold
    decorations: [frosted_glass, emoji_scatter]

6.2 酒店民宿

scenario: 酒店民宿

recommended:
  layouts: [card_float, split_vertical, hero_bottom]
  colors: [pure_white, mocha_brown, mint_fresh]
  fonts: [elegant_serif, modern_bold]
  decorations: [card_shadow, title_underline]

template_examples:
  - name: 日式简约款
    layout: card_float
    color: pure_white
    font: elegant_serif
    decorations: [card_shadow]
    
  - name: 度假温馨款
    layout: hero_bottom
    color: mint_fresh
    font: modern_bold
    decorations: [gradient_overlay]

6.3 美食探店

scenario: 美食探店

recommended:
  layouts: [overlay_bottom, overlay_center]
  colors: [sunset_warm, peach_pink, mocha_brown]
  fonts: [modern_bold, handwritten]
  decorations: [frosted_glass, emoji_scatter, circle_tag]

template_examples:
  - name: 美食诱惑款
    layout: overlay_bottom
    color: sunset_warm
    font: modern_bold
    decorations: [frosted_glass, emoji_scatter]
    
  - name: 甜品少女款
    layout: overlay_center
    color: peach_pink
    font: handwritten
    decorations: [circle_tag]

七、快速生成矩阵

7.1 组合计算

5 布局 × 10 配色 × 4 字体 × 6 装饰 = 1200 种理论组合

7.2 推荐组合 (精选30个)

#	场景	布局	配色	字体	装饰
1	景点	hero_bottom	ocean_blue	modern_bold	gradient_overlay
2	景点	overlay_bottom	sunset_warm	modern_bold	frosted_glass
3	景点	overlay_center	forest_green	modern_bold	none
4	酒店	card_float	pure_white	elegant_serif	card_shadow
5	酒店	hero_bottom	mocha_brown	elegant_serif	gradient_overlay
6	酒店	split_vertical	mint_fresh	modern_bold	none
7	美食	overlay_bottom	sunset_warm	modern_bold	frosted_glass
8	美食	overlay_center	peach_pink	handwritten	circle_tag
9	美食	hero_bottom	mocha_brown	modern_bold	gradient_overlay
10	活动	overlay_center	electric_purple	modern_bold	corner_badge
...	...	...	...	...	...

八、下一步

验证设计 - 用 Figma/PS 手动实现几个模板，验证视觉效果
补充字体 - 确认字体文件可用性
实现引擎 - 基于这些资产实现模板渲染引擎

18 KiB Raw Blame History Unescape Escape

海报设计资产库

一、小红书风格分析

1.1 视觉特征

1.2 常见布局类型

1.3 文字风格

二、布局骨架定义

2.1 基础布局 (5种)

2.2 布局示意图

三、配色方案定义

3.1 小红书常见配色 (10种)

3.2 配色速查表

四、字体组合定义

4.1 可用字体资源 (assets/font/)

4.2 字体配对 (4种)

4.3 字体层级规范

五、装饰元素定义

5.1 小红书风格装饰

六、场景模板配方

6.1 景点门票

6.2 酒店民宿

6.3 美食探店

七、快速生成矩阵

7.1 组合计算

7.2 推荐组合 (精选30个)

八、下一步

18 KiB

Raw Blame History