企业官网建设流程全解析

• AI 技能
• AI 插件

Pop 风格是 baoyu-xhs-images 技能库中 12 种视觉风格之一，定位为"vibrant, energetic, eye-catching"（活泼、能量感、抓眼球），通过高饱和色块、漫画式爆炸框与夸张手绘排版，让信息图卡片在信息流中瞬间抢占注意力。本文以 Pop 风格规格文档 为核心骨架，结合 baoyu-xhs-images 主文档 与元素库源码，完整讲解 Pop 风格的元素组合、配色、排版、布局适配与实战调用方式，读完后你可以直接用--style pop或--preset hype / pop-facts生成一套高冲击力的小红书图片卡片。

Pop 风格是什么

Pop 风格是 baoyu-xhs-images 中category: energetic（能量型）风格的典型代表，其美学语言源自波普艺术与美式漫画：高饱和原色 + 粗描边 + 漫画式爆炸图形 + 动态构图。它与其他风格的分工非常明确：

• bold（冲击力）靠强对比与警告符号制造紧张感，用于"避坑、必看"类内容；
• retro（复古）用网点、旧徽章营造怀旧情绪；
• pop则强调活力与娱乐性，适合"好玩、炸裂、惊叹"型内容。

在 SKILL.md 的 Auto-Selection 规则 中，当源内容出现fun, exciting, wow, amazing等信号时，系统会自动匹配pop风格并推荐sparse/list布局；在 Style × Layout Matrix 中，pop 与 sparse、balanced、list、comparison 均为 ✓✓ 级强适配。这意味着 Pop 风格既适合单点爆发的封面，也适合列表式的趣味盘点。

Pop 风格小红书信息图卡片示例

上图即仓库中 Pop 风格的真实渲染示例：黄色星形爆炸框配半调网点、粗黑边对话气泡、红黄蓝绿高饱和色块，以及 "GO!" "YEAH!" 等倾斜夸张手写标语，完整呈现了 Pop 风格"复古漫画 + 活力"的视觉语言。

元素组合：Pop 风格的完整配方

Pop 风格规格文档 以 YAML 形式给出了风格级元素配方，这是生成提示词时"样式片段"的直接来源，完整内容如下：

canvas: ratio: portrait-3-4 grid: single | quad image_effects: cutout: stylized stroke: colored-solid | double filter: high-saturation typography: decorated: stroke-text | shadow-3d tags: bubble | ribbon direction: horizontal | curved decorations: emphasis: star-burst | exclamation background: solid-saturated | dots doodles: stars-sparkles | confetti | squiggles frames: none

逐项对照元素库解析：

这套配方与 decorations.md 的 Style-Specific Decorations 中 Pop 条目完全一致：Bold shapes、speech bubbles、comic-style effects、starburst、dynamic energetic decorations——即粗壮形状、对话气泡、漫画式效果与星爆图形构成了 Pop 风格的核心装饰词汇。

配色方案：高饱和原色 + 霓虹点缀

Pop 风格规格文档 给出三组角色色：

配色逻辑清晰：背景保持干净的浅色以突出高饱和色块，主色采用红黄蓝绿四原色形成强对比撞色，点缀色引入霓虹粉与电光紫拉高"抓眼球"度。

值得一提的是，Pop 风格与 neon 霓虹调色板 天然互补——neon 调色板（深紫#1A1025背景 + 霓虹青/品红/绿/粉 + 电光黄）在 "Best Paired With" 一节中明确写道pop — neon takes the vibrancy further。如果想把 Pop 的能量感推到极致，可以在调用时叠加--palette neon，让高饱和色块在深色底上产生霓虹发光效果；neon 调色板还带有一条语义约束："Use neon sparingly — too many glowing elements become chaotic. Let dark background breathe"，即霓虹元素要克制使用，让深色背景呼吸。

视觉元素与排版规范

视觉元素清单

Pop 风格规格文档 定义的视觉元素：

• Bold shapes, speech bubbles（粗壮形状、对话气泡）
• Comic-style effects, starburst（漫画式效果、星形爆炸）
• Dynamic, energetic compositions（动态、能量感的构图）
• High-energy decorations（高能量装饰）

排版规范

Pop 风格规格文档 定义的字型方向：

• Dynamic, energetic hand lettering with outlines（带描边的动态手写）
• Bold color combinations（大胆撞色组合）
• Playful, expressive forms（俏皮、有表现力的字形）

对照 typography.md 的通用排版系统，Pop 的排版可以落到具体实现层：

• 花字：优先stroke-text描边字做封面大标题（高可见度），shadow-3d立体字做关键词（增加体积感）；
• 标签：bubble对话气泡承载"注释、旁白、callout"，ribbon缎带承载"亮点、推荐"；
• 方向：curved曲线文字可围绕星形爆炸框做装饰性环绕；
• 层级：遵循 typography.md 的 H1(100%) → H2(70-80%) → H3(50-60%) → Body(40-50%) → Caption(30-35%) 相对字号体系，标题加粗加装饰，正文保持可读；
• 效果：outline（轮廓）与shadow（阴影）可叠加在文字上提升 busy 背景下的可读性。

布局适配：Pop 与 8 种布局的配对矩阵

Pop 风格规格文档 给出了 Pop 风格的布局适配表：

这与 SKILL.md 的 Style × Layout Matrix 中 pop 行的评分完全一致：sparse / balanced / list / comparison 为 ✓✓，dense / flow 为 ✓。结合 canvas.md 的布局规格 可以进一步细化：

• sparse（低密度，留白 60-70%，1-2 个要点）：Pop 最适配的封面布局——单一焦点居中、四周留白，让星形爆炸框和巨大描边标题成为绝对主角；
• list（4-7 条纵向枚举）：适合"趣味冷知识""排行榜"型内容，配合高饱和色块序号与气泡标签；
• comparison（左右对比）：适合"PK 对比""前后变化"，高饱和色块天然强化两侧的戏剧张力；
• dense（高密度，5-8 要点）：Pop 与 dense 的适配度为 ✓ 而非 ✓✓，因为 Pop 的装饰元素较多，堆砌过多信息易显杂乱——密集信息场景建议改用 notion 等更克制的风格。

同时 canvas.md 提醒，无论哪种布局都要避开小红书移动端的三个危险区：底部 10% 标题栏遮罩区、右上角点赞/分享按钮区、右下角水印区，关键信息一律放在中间安全区内。

最佳用途：Pop 风格适合讲什么内容

Pop 风格规格文档 列出的适用内容：

• Exciting announcements（激动人心的公告）
• Fun facts（趣味冷知识）
• Engaging tutorials（有代入感的教程）
• Entertainment content（娱乐内容）
• Youth-oriented content（面向年轻用户的内容）

一句话概括：凡是内容本身带"兴奋感"的题材都适合 Pop。公告、彩蛋、上新、节日活动、趣味盘点、娱乐资讯、面向 Z 世代的种草内容，都是 Pop 的主场。

实战调用：两种方式使用 Pop 风格

baoyu-xhs-images 以 SKILL.md 为技能入口，通过 CLI 风格的--style、--preset等参数控制风格与布局：

# 方式一：直接指定风格与布局 --style pop --layout sparse # 炸裂封面 --style pop --layout list # 趣味盘点 # 方式二：使用预设快捷组合 --preset hype # pop + sparse：炸裂封面、惊叹分享 --preset pop-facts # pop + list：趣味冷知识 # 可选叠加霓虹调色板，把能量感推到极致 --style pop --layout sparse --palette neon

style-presets.md 明确记录了pop相关的两个预设：pop-facts=pop+list，hype=pop+sparse。预设只是"风格 + 布局（+可选调色板）"的快捷方式，任何显式传入的--style/--layout/--palette参数都会覆盖预设值，例如--preset pop-facts --style bold会得到 bold 风格 + list 布局。

在 SKILL.md 的 Auto-Selection 中，系统还会根据内容信号自动推荐：遇到fun, exciting, wow, amazing等关键词时自动匹配pop风格并建议hype/pop-facts预设，你也可以通过--preset手动指定来覆盖自动推荐。

源码视角：Pop 样式片段如何进入生成提示词

从 prompt-assembly.md 可以看到，Pop 风格的规格文档不是装饰性文档，而是提示词装配流水线的直接输入。整个装配流程如下：

1. Step 0 解析预设：--preset pop-facts被解析为style=pop, layout=list（映射表在 style-presets.md）；
2. Step 1 加载风格定义：读取references/presets/pop.md，提取其中的配色、视觉元素、排版风格、最佳实践，填充进提示词的## Style: Pop片段（即上文 YAML 配方的格式化输出）；
3. Step 1.5 应用调色板覆盖：若指定--palette neon（或风格 frontmatter 声明了default_palette），用调色板颜色整体替换 Pop 自带配色，但保留 Pop 的渲染规则（视觉元素、排版、风格约束不变）——优先级为：显式--palette> 预设 palette > 风格default_palette> 无覆盖；
4. Step 2 加载布局：从 canvas.md 提取所选布局的信息密度、留白比例、结构与视觉平衡描述；
5. Step 3-5 拼装：填入内容片段、可选水印片段，并在多图生成时执行"image-1 锚点链"（首图不带--ref生成，后续图全部以首图为参考）保证系列风格一致；
6. Step 6 合并：按固定骨架（Image Specifications → Core Principles → Text Style → Language → Style → Layout → Content → Watermark）拼装成最终提示词。

在## Text Style (CRITICAL)一节中，装配器强制所有文字必须是手绘风格（"DO NOT use realistic or computer-generated fonts"），这保证了 Pop 的"带描边动态手写"规范不会在生成时退化成系统字体。另外 SKILL.md 还有一条硬性规则：禁止用 SVG/HTML/Canvas 代码替代位图渲染，也不允许用图像处理程序事后"修补"卡片上的文字，文字出错必须改提示词重新生成——Pop 风格高饱和、强装饰的视觉特点对这两条规则尤其敏感。

小结

Pop 风格是 baoyu-xhs-images 技能库中能量感最强的视觉方案之一：以高饱和红黄蓝绿为主色、霓虹粉紫为点缀，以星形爆炸框、对话气泡、粗描边手写字为装饰语言，适配 sparse / balanced / list / comparison 四种布局。它在生成流水线中扮演的是"提示词样式片段提供者"的角色，通过--style pop、--preset hype / pop-facts即可一键调用，也可以叠加--palette neon进一步放大冲击力。无论做炸裂封面、趣味盘点还是年轻向娱乐内容，Pop 风格都是一套开箱即用的高抓眼方案。相关规格文件的仓库路径如下，供进一步查阅：

• 风格规格：references/presets/pop.md
• 技能主文档：SKILL.md
• 预设定义：references/style-presets.md
• 提示词装配：references/workflows/prompt-assembly.md
• 画布与布局：references/elements/canvas.md
• 图片特效：references/elements/image-effects.md
• 排版系统：references/elements/typography.md
• 装饰资产：references/elements/decorations.md
• 霓虹调色板：references/palettes/neon.md
• 渲染示例：screenshots/xhs-images-styles/pop.webp

• AI 技能
• AI 插件