ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

baoyu-xhs-images 的 Bold 风格实战指南:高冲击力小红书图片卡片的元素组合、配色与布局详解

baoyu-xhs-images 的 Bold 风格实战指南:高冲击力小红书图片卡片的元素组合、配色与布局详解 AI 技能AI 插件【免费下载链接】baoyu-skills项目地址https://gitcode.com/gh_mirrors/ba/baoyu-skills点击查看免费下载导读Bold 是 baoyu-xhs-images 技能内置的 12 种视觉风格中定位为impact冲击力的高识别度风格专为重要提醒、避坑指南、排行榜与对比内容设计。本文以 Bold 风格预设文档 为核心骨架结合该技能仓库中的画布、图像效果、字体与装饰资产规范逐项拆解 Bold 风格的 YAML 元素组合、高饱和配色体系、最佳布局搭配与适用场景并给出--preset warning、--preset versus等一键组合的实战用法帮助你为小红书/小红书风格图文快速产出抓眼球、高存率的内容卡片。Bold 风格在技能体系中的定位baoyu-xhs-images 是仓库中一个生成小红书风格图片卡片系列的 Agent 技能其核心机制是把复杂内容拆解为 1–10 张卡通化图片卡片由Style风格× Layout布局× Palette配色可选三个独立维度自由组合详见 SKILL.md。Bold 是其中唯一以category: impact标注的风格即高冲击力、抓眼球的美学定位。从技能的自动选择Auto-Selection规则看当输入内容出现warning / important / must / critical这类信号词时Bold 会被自动推荐为最优风格并优先搭配list或comparison布局见 SKILL.md 的 Auto-Selection 表。也就是说Bold 不是通用风格而是为必须被看见的信息设计的强提示strong cue风格。元素组合Element Combination逐项拆解Bold 风格的核心定义是一份 YAML 元素组合配置它把画布、图像效果、字体、装饰四层设计规则固化为可复用的参数模板。原始定义位于 presets/bold.md完整配置如下canvas: ratio: portrait-3-4 grid: single | dual image_effects: cutout: clean stroke: colored-solid | double filter: high-saturation typography: decorated: shadow-3d | stroke-text tags: black-white | ribbon direction: horizontal | diagonal decorations: emphasis: exclamation | star-burst | red-arrow background: solid-saturated | gradient-linear doodles: arrows-curvy | squiggles frames: none下面结合仓库中 elements/canvas.md、elements/image-effects.md、elements/typography.md、elements/decorations.md 四份要素规范逐层解读每个参数的含义。画布层canvasratio: portrait-3-4竖版 3:4 画布像素规格为 1242×1660。仓库画布规范明确指出这是小红书流量最高的比例Highest traffic on XHS (recommended)也是技能默认值。grid: single | dual网格单元数。single是单格满版构图适合冲击力最大的主视觉Hero 场景dual是双格适合前后对比 / 左右对照这类 Bold 高频使用的戏剧性结构。需要提醒的是技能画布规范同时定义了三个安全区Bold 风格排版时必须避开底部 10% 是移动端标题栏浮层区域、右上角是点赞/分享按钮、右下角是水印位置。这意味着高饱和背景与大字标题也应集中在中间安全内容区内。图像效果层image_effectscutout: clean抠图方式选用clean锐利边缘、精确边界适合产品图、科技物件等需要硬切的主体与 Bold 的利落感一致。对比如soft羽化边缘更偏人像与有机主体。stroke: colored-solid | double描边二选一。colored-solid是彩色实线描边营造品牌色/撞色贴纸感double是双层描边传达强调与高级质感。按描边宽度规范Bold 风格应使用 Thick10–15px级别以达到粗壮强调的效果——这也是 image-effects.md 中 Bold 风格效果组合的明确结论colored-solid (thick)。filter: high-saturation高饱和滤镜让色彩更鲜艳、更有冲击力。该滤镜在仓库中被归类为Energetic, eye-catching情绪与 Bold 的定位完全吻合。字体层typographydecorated: shadow-3d | stroke-text花字处理二选一。shadow-3d是 3D 阴影/挤出效果用于关键术语增加立体与重量感stroke-text是描边空心字用于封面大标题保证高可见度。二者都服务于大字、强对比、抓眼球的 Bold 字体原则。tags: black-white | ribbon标签容器。black-white是黑底白字标签品牌名、价格、分类常用ribbon是缎带/横幅形状优惠、高亮信息常用。direction: horizontal | diagonal文字方向。默认水平diagonal斜向文字用于制造动态、倾斜的张力构图是 Bold 风格区别于温和风格的重要手法。按 typography.md 的字体层级规范Bold 的标题应占据 100% 相对字号、加粗且带花字装饰正文压到 40–50%Caption 压到 30–35%形成强烈的层级落差。装饰层decorationsemphasis: exclamation | star-burst | red-arrow强调标记三选一。exclamation感叹号强调重要警告、star-burst星爆爆炸效果惊喜感、爆点、red-arrow红色箭头指向产品特性/关键点。这些正是 decorations.md 中 Bold 风格装饰的标配感叹号、箭头、警示图标、强形状、高对比元素。background: solid-saturated | gradient-linear背景二选一。solid-saturated高饱和纯色底大胆、有能量gradient-linear线性渐变底现代、动态。配合 Bold 的深黑/炭黑底色使用能产生极强的明暗对比。doodles: arrows-curvy | squiggles涂鸦二选一。arrows-curvy弯曲方向箭头引导视线流动、squiggles波浪线能量与动感。frames: none不使用任何边框容器。Bold 依赖负空间与高对比色块本身而非相框/贴纸式容器来组织版面。配色体系Color PaletteBold 风格的调色板是典型的高饱和撞色 深底组合三行即可复现角色颜色HexPrimary主色活力红、橙、黄#E53E3E、#DD6B20、#F6E05EBackground背景深黑、炭黑#000000、#1A1A1AAccents点缀白、霓虹黄#FFFFFF、#F7FF00这组配色的设计逻辑是以黑/炭黑为底压住视觉重心用红橙黄三原色渐变制造信号灯式的高警示度再用白与霓虹黄做点睛的高亮文字与箭头。它天然适配高饱和滤镜因为底色足够深色块足够鲜艳无需额外纹理即可形成强对比。注意此调色板是 Bold 风格的内置默认色。技能支持--palette覆盖macaron / warm / neon 三种可选见 palettes 目录覆盖只替换颜色、不改变 Bold 的渲染规则描边、滤镜、花字等保持不变。例如--style bold --palette neon会得到霓虹底 Bold 冲击力排版的赛博版本。视觉元素与字体原则视觉元素Visual Elements感叹号、箭头、警示图标exclamation marks, arrows, warning icons强形状、高对比元素strong shapes, high contrast elements戏剧性构图dramatic compositions粗壮的几何形式bold geometric forms字体原则Typography带阴影的粗体手写式排版bold, impactful hand lettering with shadows高对比文字处理high contrast text treatments大而统领全局的标题large, commanding headlines这些原则与仓库中 decorations.md 的 Bold 风格专项一致感叹号、箭头、警示图标、强形状、高对比元素也与 typography.md 的 Bold 专项一致带阴影的手写字、高对比色、强描边。同时注意技能有一条硬性纪律严禁在已生成的位图上用程序覆盖或改写文字文字错误必须回到 prompt 文件修正后重新生成见 SKILL.md 的 Image Modification 与Never repair rendered text规则。最佳布局搭配Best Layout PairingsBold 与 8 种布局的兼容性在 presets/bold.md 中有明确评分布局兼容性使用场景sparse✓✓冲击力宣言Impactful statementsbalanced✓警告类内容Warning contentdense✓关键信息卡片Critical information cardslist✓✓必看清单、排行榜Must-know lists, rankingscomparison✓✓戏剧性对比Dramatic contrastsflow✓关键流程步骤Critical process steps这套评分与 SKILL.md 中的Style × Layout 矩阵完全一致——矩阵中 Bold 行的评分为sparse ✓✓、balanced ✓、dense ✓、list ✓✓、comparison ✓✓、flow ✓、mindmap ✓、quadrant ✓✓。可以看到 Bold 的甜蜜区集中在sparse / list / comparison / quadrant四个布局前两者靠极简与枚举放大冲击力后两者靠左右/四象限的对抗结构制造戏剧张力。从画布规范canvas.md看sparse布局信息密度低留白 60–70%、每图仅 1–2 个要点适合封面与金句list布局支持 4–7 项的垂直枚举适合榜单comparison是左右分屏对比dense则适合 5–8 点的知识卡。Bold 配 dense 只有 ✓说明高冲击力与高信息密度天然相斥除非内容本身是必须强调的关键信息卡。最佳适用场景Best For综合预设文档与自动选择规则Bold 风格的典型适用场景为重要提示与警告Important tips and warnings必看内容Must-know content重大公告Critical announcements排行榜与对比Rankings and comparisons抓眼球的钩子封面Attention-grabbing hooks在 analysis-framework.md 的内容类型分类中测评对比与避坑指南两类内容的推荐风格都直接指向bold布局指向comparison或list——这与 Bold 的 Best For 完全闭环。实战用法预设与命令行组合Bold 风格在实战中有三种打开方式1. 直接指定风格与布局--style bold --layout comparison --style bold --layout list适合手动微调时使用--style与--layout是独立参数见 SKILL.md 的 Options 表。2. 使用一键预设Presetstyle-presets.md 为 Bold 提供了两个官方预设预设展开组合适用内容warningbold list避坑指南、重要提醒versusbold comparison正反对比、PK 内容用法示例--preset warning --preset versus任何维度都可以再被显式覆盖例如--preset warning --layout sparse会保留 bold 风格但把布局换成 sparse 封面式。显式的--style/--layout/--palette参数优先级永远高于预设值。3. 依赖自动选择Auto-Selection内容中出现warning / important / must / critical等信号词时技能会自动推荐boldlist/comparison并对应给出warning、versus预设建议见 SKILL.md 的 Auto-Selection 表。这也是推荐路径——把文案交给技能分析让它替你匹配 Bold。生成流程提醒技能默认在 Step 2 的 Smart Confirm 环节确认方案快速确认 / 自定义 / 详细模式三种路径话术模板见 confirmation.md确认通过后才进入 Step 3 批量生成。批量生成遵循封面锚点链先无参考图生成第 1 张封面再以封面作为--ref锚定后续卡片保证 Bold 风格跨卡片的红橙黄配色与描边渲染一致性。每张图的完整提示词会先写入prompts/NN-{type}-{slug}.md作为可复现记录再调用图像后端Codex imagegen / baoyu-image-gen 等渲染。所有命令与生成产物均落在image-cards/{topic-slug}/目录下。小结Bold 风格是 baoyu-xhs-images 技能中专门为高冲击、高警示、强对比场景打造的视觉方案深黑底色 红橙黄高饱和撞色 粗壮描边与 3D 花字 感叹号/星爆/红箭头强调配合 sparse、list、comparison、quadrant 四个最优布局能在小红书信息流中快速制造停留。核心配置文件与要素规范均可在仓库中继续深入研读预设定义、预设总表、画布与布局规范、图像效果规范、字体系统、装饰资产、主技能说明。赞分享AI 技能AI 插件【免费下载链接】baoyu-skills项目地址https://gitcode.com/gh_mirrors/ba/baoyu-skills点击查看免费下载相关推荐小红书复古风图片卡片实战baoyu-xhs-images retro 风格元素组合、配色与布局全解析小红书复古风图片卡片实战baoyu xhs images retro 风格元素组合、配色与布局全解析 本篇技术指南围绕 baoyu xhs images 技能AI 技能AI 插件baoyu-xhs-images 小红书图片卡片的 fresh 清新自然风格元素组合、配色体系与布局搭配实战指南baoyu xhs images 小红书图片卡片的 fresh 清新自然风格元素组合、配色体系与布局搭配实战指南 清新自然的视觉风格在健康养生、极简生活、自我AI 技能AI 插件baoyu-xhs-images Cute 风格实战指南小红书甜美少女风卡片系列的设计要素与搭配方案baoyu xhs images Cute 风格实战指南小红书甜美少女风卡片系列的设计要素与搭配方案 甜美、可爱、少女感——这是小红书平台上最具辨识度的视觉语AI 技能AI 插件创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表