DiceBear Pixelbot 像素机器人头像样式：玩法、预设与动画配置完全指南-平芜编程栈

UI组件
后端

【免费下载链接】dicebear

DiceBear is an avatar library for designers and developers. 🌍

项目地址：https://gitcode.com/gh_mirrors/di/dicebear

导读

Pixelbot 是 DiceBear 开源头像库中的一款“角色类（Characters）”像素机器人风格：由小方块像素在深色网格上拼出带辉光效果的机器人面孔。本文以仓库中的 Pixelbot 样式页为骨架，结合预设配置、核心选项文档与各语言核心库的实现，完整讲解如何用 HTTP API、JavaScript/PHP/Python/Rust/Go/Dart/C# 各语言库与 CLI 生成 Pixelbot 头像，逐一拆解仓库内置的 11 个官方预设，并说明其自带动画的开启方式。

Pixelbot 是什么

在 DiceBear 文档中，Pixelbot 样式页的核心描述只有一句话：

Glowing robot faces drawn from small pixel blocks on a dark grid. （由深色网格上的小像素块绘制而成的发光机器人面孔。）

从样式分类配置 styleCategories.ts 可以看到，pixelbot被归类到Characters（角色）大类，与bottts、voxel-bot、pixel-art等风格并列。它与同仓库的voxel-art（体素立体风格）、pixel-art（像素头像）是三个不同路线的像素类风格：Pixelbot 的视觉辨识度集中在“发光（glow）”与“深色网格背景”上。

根据仓库 CHANGELOG.md 的记录，pixelbot随@dicebear/styles的10.3.0版本首次引入，属于该版本新增的十三个风格之一（blobs、clay、constellation、critters、landscape、loops、moods、pixelbot、planets、sprouts、squircles、waves、weave）。

在文档站上，每个样式页都会展示一排 8 个示例 seed（其首字母拼成 “DICEBEAR”）。Pixelbot 的预览 seed 记录在 previewRowSeeds.ts：

pixelbot: ['Drew', 'Izumi', 'Chiara', 'Ethan', 'Blake', 'Elias', 'Axel', 'Ronan'],

你可以直接把这些 seed 作为占位符输入使用，例如seed=Drew或seed=Ethan，以快速预览同一风格下不同随机结果。

如何生成 Pixelbot 头像

DiceBear 的所有官方样式都遵循同一套调用方式：pixelbot就是代码中的一个样式名。文档站的样式页通过 SiteStyleUsage.vue 为每种语言生成同一套代码片段，这些片段统一维护在 usageSnippets.ts 中，保证“同一种写法，任何入口渲染结果一致”。

方式一：HTTP API（零安装）

HTTP API 是最快的接入方式——一个<img>标签即可，无需任何安装：

<!-- any img tag, no install --> <img src="https://api.dicebear.com/11.x/pixelbot/svg?seed=Felix" alt="avatar" />

URL 规则为https://api.dicebear.com/11.x/<styleName>/svg（见 HTTP API 文档），多词风格名使用小写连字符形式。所有选项都可以作为 URL 查询参数直接追加，例如?seed=user-8f3a2c可让同一个用户每次都看到相同的头像，适合用作默认头像。

方式二：JavaScript 库

// npm install @dicebear/core @dicebear/styles --save import { Style, Avatar } from '@dicebear/core'; import definition from '@dicebear/styles/pixelbot.json' with { type: 'json' }; const style = new Style(definition); const avatar = new Avatar(style, { seed: 'Felix' }); const svg = avatar.toString();

方式三：CLI

# npm install --global dicebear dicebear create pixelbot --seed "Felix"

方式四：其余官方核心库

DiceBear 为同一套样式提供多语言核心，调用形态一致（代码取自仓库 usageSnippets.ts）：

语言	安装命令	核心调用
PHP	`composer require dicebear/core dicebear/styles`	`Style::fromJson(...)`+`new Avatar($style, ['seed' => 'Felix'])`
Python	`pip install dicebear-core dicebear-styles`	`Style.from_json(...)`+`Avatar(style, {"seed": "Felix"})`
Rust	`cargo add dicebear-core serde_json`+`cargo add dicebear-styles --features pixelbot`	`Avatar::new(&style, json!({ "seed": "Felix" }))`
Go	`go get github.com/dicebear/dicebear-go/v11`+`github.com/dicebear/styles/v11`	`dicebear.NewAvatar(style, map[string]any{"seed": "Felix"})`
Dart	`dart pub add dicebear_core dicebear_styles`	`Avatar(style, {'seed': 'Felix'})`
C#	`dotnet add package DiceBear.Core`+`DiceBear.Styles`	`new Avatar(style, new JsonObject { ["seed"] = "Felix" })`

需要说明：以上各语言包的语法与入口以当前仓库 usageSnippets.ts 生成的内容为准；各语言对应核心源码位于仓库 src 目录下，例如 PHP 核心、Rust 核心与 Go 核心。

Pixelbot 的官方预设（Presets）

每个风格页都带有“Presets”区块。仓库中 Pixelbot 的预设完整定义在 pixelbot.json，共11 个官方预设。预设的本质就是一组普通渲染选项——你可以直接复制其代码，或打开 Playground 继续调参；预设未指定的选项会继续随 seed 随机变化。

Terminal（终端）

Green pixels on near-black. 绿像素配近黑底。

最原始的“点阵”形态：单一荧光绿、单一深色底色，全图无第二种颜色。

{ "backgroundColor": ["0a0f0a"], "glowColor": ["4ade80"] }

Amber（琥珀）

The warm counterpart to Terminal. 暖色版的 Terminal。

同一套想法换一种荧光色——琥珀色配棕黑底，在列表里比绿色更显暖。

{ "backgroundColor": ["120c05"], "glowColor": ["ffb020"] }

Greyscale（灰度）

White pixels, no hue at all. 纯白像素，完全无色相。

适用于“颜色已有其他语义”的界面。因为眼睛与嘴巴的形状本身足以区分头像，去色后结构信息不丢失。

{ "backgroundColor": ["141416"], "glowColor": ["f4f4f5", "d4d4d8", "a1a1aa"] }

Duotone（双色调）

One cyan for every avatar. 全套头像共用一种青色。

固定一个辉光色，让眼睛与嘴巴的形状成为头像之间唯一的差异。

{ "backgroundColor": ["061626"], "glowColor": ["22d3ee"] }

Muted（低饱和）

Dusty pixels on a slate ground. 石板灰底上的灰扑扑像素。

风格自带的九个亮色在侧边栏里“太吵”，这六个低饱和色在深色底上既可读又不抢眼。

{ "backgroundColor": ["1b1d22"], "glowColor": ["9aa88f", "b0a48c", "8fa3ad", "a894a3", "b8a06f", "8d9bb5"] }

Electric（电光）

Six colors at full saturation. 六个全饱和色。

超越风格默认配色的激进方案：在纯黑底上，这些颜色读起来像真实光源而非颜料。

{ "backgroundColor": ["000000"], "glowColor": ["ff2e88", "00e5ff", "7cff00", "ffe600", "ff6a00", "b400ff"] }

Cool / Warm（冷暖色系）

冷色：只保留蓝、青、紫；暖色：只保留红、橙、金。

冷暖两套色相互补，两拨头像仅凭色温即可区分：

{ "backgroundColor": ["0b1220"], "glowColor": ["7dd3fc", "5eead4", "a5b4fc", "c4b5fd", "67e8f9"] }

{ "backgroundColor": ["1a0d06"], "glowColor": ["fdba74", "fcd34d", "fca5a5", "fb923c", "f9a8d4"] }

Sunrise（日出渐变）

A gradient behind the matrix. 矩阵背后的渐变。

演示了背景渐变选项：两色、线性填充、固定角度。两个色标都保持深色，因为发光的像素需要深色衬托。

{ "backgroundColor": ["1e1b4b", "3b0764"], "backgroundColorFill": "linear", "backgroundColorAngle": 45, "glowColor": ["fde68a", "f9a8d4", "c4b5fd"] }

Close Up（特写）

Fewer grid cells, larger pixels. 更少的网格、更大的像素。

只改scale：脸占据更宽的网格，用“放大”换取“尺寸”，在 32 像素缩略图场景下是划算的取舍。

{ "scale": 1.3 }

Animated（动画）

Turns the style's built-in animation on. 开启风格内置动画。

动画默认关闭，animation: true开启全部；smileAnimation: true只播微笑这一个动画；animationSpeed控制节奏。动画遵循prefers-reduced-motion（系统“减少动态效果”设置）。

{ "animation": true }

深入理解选项：为什么这些配置有效

上述预设中的backgroundColor、glowColor、scale、backgroundColorFill、backgroundColorAngle并非 Pixelbot 独有，而是 DiceBear 所有风格共用的核心选项体系，定义见 Core options 文档：

通用选项：seed（确定性生成）、flip、rotate（−360～360）、scale（0～10）、borderRadius（0～50，50 为圆形）、size（1～4096，PNG/JPG 栅格化时生效）、translateX/translateY、idRandomization、title、tags等。其中[min, max]类型可传二元组，PRNG 会在区间内采样，从而让同一组配置产生不同结果。
背景选项：backgroundColor、backgroundColorFill（solid/linear/radial）、backgroundColorFillStops（渐变停靠点，最小 2）、backgroundColorAngle、backgroundColorOrder。文档明确说明每个风格都接受背景选项，即使其定义中未声明background颜色组——这正是 Sunrise 预设能生效的前提。
动态颜色选项：{color}Color、{color}ColorFill、{color}ColorFillStops、{color}ColorAngle、{color}ColorOrder。glowColor即“辉光颜色组”，是 Pixelbot 区别于其他角色风的核心颜色通道；预设中传入的多个色值默认会被打乱（ColorOrder: 'random'），若想按给定顺序使用可设为'fixed'。
组件选项：{component}Variant与{component}Probability。文档特别说明组件的旋转/位移/缩放由组件定义在渲染时采样，不是用户选项（不存在{component}Rotate等键）。

所有选项同时适用于 HTTP API 的 URL 查询参数，因此上面任何一个预设都可以直接拼成 URL 使用，例如：

https://api.dicebear.com/11.x/pixelbot/svg?backgroundColor=0a0f0a&glowColor=4ade80&seed=Felix

Pixelbot 的动画能力

pixelbot是支持动画的风格之一。根据 CHANGELOG.md 的说明，该版本为包括pixelbot在内的多个新风格加入了**可选（opt-in）**动画组件：动画默认关闭，只有设置了animationVariant或tags渲染选项，或显式传入animation: true才会播放。

动画选项（同样来自 Core options 文档）：

animation：布尔值，默认false，控制风格内置动画的总开关；
*Animation：按名称单独开关某个动画，如smileAnimation: true，优先级高于全局animation；
animationSpeed：播放速度倍率，默认1，范围 0.1～10；
animationDelay：起始偏移秒数（−3600～3600），传范围值时每个 seed 从自己的时刻开始，避免一屏头像同步运动。

动画以纯 CSS 形式内嵌于 SVG，可在普通<img>标签中播放，并尊重prefers-reduced-motion（见动画头像总览）。

周边资源与延伸阅读

预览与分类：Pixelbot 位于 Characters 分类（styleCategories.ts）；更多预览 seed 见 previewRowSeeds.ts。
样式页结构：每个样式页由 SiteStylePage.vue 统一渲染，包含 Usage、Presets、Options、Details 等区块；样式定义 JSON 按需动态加载（style.ts）。
编辑器：pixelbot已纳入 DiceBear 官方编辑器（styles.ts），可在其中实时调节选项。
样式定义文件：各语言核心读取的是pixelbot.json定义（JS 侧见@dicebear/styles/pixelbot.json），可在文档站 Details 区块下载后导入 Figma 插件（DiceBear Studio）进行二次创作。
参考文档：HTTP API 用法、核心选项表、全部样式总览、动画头像说明。

小结

Pixelbot 是 DiceBear 中辨识度很高的像素机器人风格：深色网格 + 发光像素 + 可选的 CSS 动画。接入方式与其它风格完全一致（HTTP API / 多语言库 / CLI），仓库内置的 11 个预设覆盖了从单色终端风到电光六色、从渐变背景到特写放大的常用调参路径。如果你想在自己的产品中快速获得一套“科技感”用户头像，直接复制 Terminal 或 Animated 预设，替换 seed 即可投入使用。