DiceBear Open Peeps 风格指南：手绘半身人物头像的生成、配置与自定义

• UI组件
• 后端

Open Peeps 是 DiceBear 头像库中的一款手绘风格头像：素描质感的轮廓线（sketchy outlines）勾勒出半身人物，头发、表情与配饰均可自由混搭。本文以仓库中 Open Peeps 风格文档 为骨架，结合 核心选项文档、HTTP API 与 JS 库源码，完整讲解如何通过 URL、命令行与代码生成 Open Peeps 头像，如何利用组件/颜色选项做精细化定制，以及预置选项（Presets）的使用方法。读完本文，你可以在任何项目中快速集成并自定义这款手绘人物头像风格。

风格概述：Open Peeps 是什么

根据文档页面的定义，Open Peeps 属于"人物"类别的手绘风格头像：

Hand-drawn half-body characters with sketchy outlines and mix-and-match hair, expressions and accessories.

即：手绘半身人物 + 素描轮廓线 + 可混搭的头发、表情与配饰。它适合用作个人资料头像、用户默认头像与产品占位图——尤其是需要"有人味、非机械感"视觉的场景。

从仓库实现看，Open Peeps 是 DiceBear 官方 63 种风格之一，其风格定义文件为@dicebear/styles/open-peeps.json，在编辑器（Editor）中同样注册可用：

• 编辑器样式注册表 通过import openPeepsDef from '@dicebear/styles/open-peeps.json'引入定义；
• 在availableStyles集合中以openPeeps键注册（见 styles.ts）。

快速开始：HTTP API 一行 URL 生成

DiceBear 的 HTTP API 文档 说明，只需把<styleName>替换成open-peeps，无需任何认证即可拿到 SVG：

https://api.dicebear.com/11.x/open-peeps/svg

加上seed参数即可生成确定性头像——同一 seed 永远返回同一张图片，适合"同一用户 ID 对应同一头像"的场景（例如用户尚未上传照片时的默认头像）：

https://api.dicebear.com/11.x/open-peeps/svg?seed=Sam

若 seed 含空格或特殊字符，需先做 URL 编码。除 SVG 外，API 还支持 PNG、JPG、WebP、AVIF（最大 256×256）与 JSON 元数据输出，SVG 为推荐格式。

仓库中的 Hero 图生成脚本 就是一个真实可复现的用法示例——它用seed: 'Sam'生成了 Open Peeps 头像，并叠加了两个自定义选项：

{ style: 'open-peeps', seed: 'Sam', options: { backgroundColor: 'bbf7d0', expressionVariant: 'cute' }, }

对应到 HTTP API 即为：

https://api.dicebear.com/11.x/open-peeps/svg?seed=Sam&backgroundColor=bbf7d0&expressionVariant=cute

使用 JavaScript / TypeScript 库

核心库@dicebear/core的用法在 README 中有完整范式，把lorelei.json换成open-peeps.json即为 Open Peeps 版本：

import { Avatar, Style } from '@dicebear/core'; import definition from '@dicebear/styles/open-peeps.json' with { type: 'json' }; const avatar = new Avatar(new Style(definition), { seed: 'Sam', size: 128, }); avatar.toString(); // SVG 字符串 avatar.toDataUri(); // data:image/svg+xml;charset=utf-8,...

值得注意的源码细节：@dicebear/core的入口 中Style与Avatar构造函数在解析前会分别经StyleValidator与OptionsValidator校验定义与选项；如果你需要跳过校验（例如定义来自你自己的代码），可以使用@dicebear/core/lite。也就是说，Open Peeps 的组件名、选项名若写错，会在渲染前被明确拒绝而非静默失败。

除 JS 库外，DiceBear 还提供 PHP、Python、Rust、Go、Dart、C# 七种语言的官方核心库（见 README 语言对照表），各端口通过共享测试套件保证与 JS 参考实现输出逐字节一致——同一 seed 在浏览器与后端生成的 Open Peeps SVG 完全相同。也可以使用 CLI 批量生成（README 示例风格名可替换为open-peeps）：

npx dicebear create open-peeps -o ./avatars --count 10

核心选项：适用于所有风格

Open Peeps 支持 DiceBear 的通用核心选项（详见 核心选项文档），以下为最关键的一部分：

数值型选项的[min, max]表示可传固定值或二元组，由 PRNG 在区间内采样——所以即便固定了某选项，不同 seed 仍会得到不同取值，这正是确定性随机的基础。

Open Peeps 的组件与颜色选项

每个风格都声明自己的组件与颜色组，文档页的"Options"区块由 SiteStylePage 组件 在运行时从风格定义自动渲染。根据风格文档的描述，Open Peeps 的组件围绕头发（hair）、表情（expressions）、配饰（accessories）展开。

对每个组件，核心库提供两种动态选项（详见 核心选项文档）：

仓库中可验证的 Open Peeps 组件选项实例来自 Hero 脚本的expressionVariant: 'cute'——即通过expressionVariant把表情限定为cute变体。同理可推断，其他组件（如头发、配饰）遵循{component}Variant/{component}Probability命名规则。

对每个颜色组（如skin、hair以及background），提供五类动态颜色选项（见 核心选项文档）：

需要说明：组件的旋转、平移、缩放由风格定义在渲染时采样，不是用户选项——不存在{component}Rotate、{component}Scale这类键（核心选项文档）。

预置选项（Presets）：复制即用的配置集

Open Peeps 预置选项文档 给出了这套机制的精确定义：

A preset is an ordinary set of render options. Pick one, read its code or open it in the Playground and keep tuning. Options a preset leaves alone keep varying with the seed, so each row lists how many distinct avatars it still gives you.

要点有三：

1. 预置集本质就是普通渲染选项——复制其代码即可直接使用；
2. 可继续调优——把预置集丢进 Playground 继续微调；
3. 未固定选项随 seed 变化——预置集每行会标注"还剩多少个不同头像"，因为没写死的选项会继续由 seed 随机采样。

例如上面 Hero 脚本的配置（backgroundColor: 'bbf7d0'+expressionVariant: 'cute'）本身就是一个迷你预置集：背景色与表情被固定，而其他组件与颜色继续随 seed 变化，因而同一预置仍能产出大量不同的头像。

源码视角：文档页是如何渲染的

Open Peeps 的文档页面本身极简，只包含一段描述与一行组件挂载：

<SiteStylePage styleName="open-peeps"> Hand-drawn half-body characters with sketchy outlines and mix-and-match hair, expressions and accessories. </SiteStylePage>

页面主体由 SiteStylePage.vue 从风格定义与统计数据在运行时渲染，按顺序呈现以下区块（见 模板部分）：

• Usage：各语言的调用示例（同一 seed、任意渲染方式产出相同头像）；
• Presets：预置选项列表（仅当存在预置时显示）；
• Options：通用选项 + 每个组件的变体/概率选项 + 每个颜色组的五个选项；
• Popularity：托管 API 按周统计的热度（仅对有统计数据的风格显示）；
• Details：作者、许可证与源文件信息。

因此"每个风格一个页面"是统一模板的实例化，Open Peeps 页同样共享这套结构，你可以在 样式总览 中浏览全部风格。

小结

• 生成：HTTP APIhttps://api.dicebear.com/11.x/open-peeps/svg?seed=...免认证即用；JS 库通过new Avatar(new Style(openPeepsDefinition), options)渲染，七种语言核心库保证输出字节一致。
• 定制：核心选项（seed、size、rotate、backgroundColor 等）+ 每组件{component}Variant/{component}Probability+ 每颜色组五类颜色选项。
• 复用：预置选项是普通选项集合，复制即用、可继续在 Playground 调优，未固定项随 seed 保持随机。

如需更深层的参数细节，可继续查阅 核心选项文档 与 HTTP API 文档；想对比其他风格，可浏览 样式总览。

• UI组件
• 后端