企业官网建设流程全解析

• UI组件
• 后端

本文以 DiceBear 文档站中 Critters 样式的 Presets 页面 为骨架，结合仓库中实际的预设数据（critters.json）与渲染管线源码，完整解析 Critters 样式的 12 套官方预设：它们的参数含义、设计动机、适用场景，以及如何把预设代码直接复制进 JavaScript 库、HTTP API 或 CLI 项目中继续调优。

Preset 的本质：就是一组普通的渲染选项

DiceBear 文档对 preset 的定义非常直白：预设就是一组普通的渲染选项（render options）。它没有任何特殊格式，不依赖某种私有配置语言，也不要求特定的运行环境。正如 presets.ts 顶部注释所写：

A preset is nothing but a bag of regular render options, so it works in every library and as HTTP-API query parameters without the definition format or any of the seven cores knowing that presets exist.

这意味着预设天然具备两重可用性：

• 在代码库中：预设里的每个键值对都能直接作为Avatar(style, { ... })的第二个参数传入；
• 在 HTTP API 中：预设的选项可以直接拼成查询字符串（array 类型的值用逗号连接），例如?topProbability=0&patternProbability=0&cheeksProbability=0。

预设还有一个关键设计：它只设置一部分选项，其余选项保持自由。未设置的选项会继续随 seed（随机种子）变化，所以同一套预设在不同 seed 下仍会产出不同的头像。因此，文档页面的每一行都会显示该预设"还能生成多少个不同的头像"——这个数字正是由文档站的组合数计算器（combinationCount.ts）对"收窄后的样式定义"实时算出来的：预设固定掉的选项（尤其是颜色）越多，剩余的可变化空间就越小，数字也就越小。

Critters 样式与它的预设页面

Critters 是 DiceBear 的头像样式之一，官方页面将其描述为"圆润身体、大眼睛、表情丰富的嘴巴，头顶着角、耳朵或触角"的彩色生物（见 critters 样式页），并被归类在Characters（角色）类别下（见 styleCategories.ts）。

Critters 的预设页面（即本文所依据的 presets/index.md）由SitePresetsPage组件渲染。从 SitePresetsPage.vue 的源码可以看到它的呈现方式：

• 页面头部展示该样式所属分类、面包屑以及"N presets"等信息；
• 侧栏挑选 4 个间距均匀的预设做"精选展示"（featured计算属性按list.length / 4的步长取样，保证颜色有差异）；
• 主列表把每一个预设作为一行，行内复用文档站为该样式预置的 3 个 seed（来自 previewRowSeeds.ts，Critters 对应Dina, Inaya, Cato等种子），因此不同预设可以在同一批 seed 下横向对比；
• 点击任意预设会弹出 StylePresetDialog.vue 对话框，展示该预设的完整 seed 行、设计说明、剩余可生成头像数，以及可直接复制到各语言/CLI 的代码面板。

预设的原始数据是纯 JSON，存放在apps/docs/.vitepress/theme/presets/critters.json，通过 presets.ts 中的import.meta.glob('../presets/*.json')懒加载——每个样式一个 chunk，只在访问该样式页面时才拉取。Critters 目前共提供12 套预设，下面逐一解析。

12 套 Critters 预设逐项解析

以下每个预设都完整继承自 critters.json 的实际数据，包含预设 ID、名称、一句话摘要、设计动机说明与完整选项集。

1. Bare（极简）

• ID：bare
• 摘要：没有角、没有花纹、没有腮红。
• 设计动机：一次性关掉三个可选组件。只保留身体轮廓和脸部，而该样式自带 19 张嘴型和 19 种眼睛组合来填充这张脸。
• 完整选项：

{ "topProbability": 0, "patternProbability": 0, "cheeksProbability": 0 }

topProbability、patternProbability、cheeksProbability分别控制头部装饰（角/耳朵/触角）、身体花纹、腮红三个概率型组件的出现概率。全部设为 0，意味着三个可选组件永不出现。

2. Sepia（棕褐）

• ID：sepia
• 摘要：一套暖棕色色阶，连背景地面也算上。
• 设计动机：这里排除了 4 种嘴型——它们把粉色舌头直接画进了美术素材里，任何配色选项都覆盖不到，所以在棕褐色系下会显得突兀。
• 完整选项：

{ "backgroundColor": ["43301c"], "bodyColor": ["d9bd94", "c4a377", "e3cdb0", "b08d5f"], "accentColor": ["a8865a", "8f6d43"], "inkColor": ["2b1d10"], "mouthVariant": [ "smile", "tinySmile", "teeth", "ooh", "line", "smirk", "wavy", "catMouth", "zigzag", "frown", "sad", "slant", "dot", "tooth" ] }

这一预设说明了 Critters 配色体系的核心：backgroundColor（背景地面）、bodyColor（身体）、accentColor（花纹/点缀色）、inkColor（描边/轮廓墨色）四组颜色共同决定整体色调。

3. Greyscale（灰度）

• ID：greyscale
• 摘要：身体、花纹、地面全部没有色相。
• 设计动机：扁平造型加硬阴影，是那种失去颜色也依然成立的画法。嘴型排除逻辑与 Sepia 相同。
• 完整选项：

{ "backgroundColor": ["3f3f46"], "bodyColor": ["e4e4e7", "d4d4d8", "c1c1c7", "a1a1aa"], "accentColor": ["9c9ca4", "b4b4bb"], "inkColor": ["18181b"], "mouthVariant": [ "smile", "tinySmile", "teeth", "ooh", "line", "smirk", "wavy", "catMouth", "zigzag", "frown", "sad", "slant", "dot", "tooth" ] }

4. Duotone（双色）

• ID：duotone
• 摘要：一只薄荷绿的生物站在深绿背景上。
• 设计动机：一整组只用一个身体颜色，于是除了轮廓和脸，两个头像之间没有任何区别。花纹色必须与身体色保持一个色阶的差异，因为该样式的定义要求它们不能相等（对应样式定义中颜色组的notEqualTo约束，见 combinationCount.ts 中topoSortColorGroups/jointColorCount对约束的建模）。
• 完整选项：

{ "backgroundColor": ["0d3b2e"], "bodyColor": ["6ee7b9"], "accentColor": ["3fbf95"], "inkColor": ["07281e"], "mouthVariant": [ "smile", "tinySmile", "teeth", "ooh", "line", "smirk", "wavy", "catMouth", "zigzag", "frown", "sad", "slant", "dot", "tooth" ] }

5. Muted（低饱和）

• ID：muted
• 摘要：一群灰扑扑的小动物。
• 设计动机：该样式原本自带 12 个糖果亮度的身体，这里把同样的生物换成沉稳的色调，适合一次性展示一打头像的列表场景。粉舌嘴型同样被排除。
• 完整选项：

{ "mouthVariant": [ "smile", "tinySmile", "teeth", "ooh", "line", "smirk", "wavy", "catMouth", "zigzag", "frown", "sad", "slant", "dot", "tooth" ], "backgroundColor": ["3a3a3f", "41413a", "3a4140", "3f3a41"], "bodyColor": [ "a5a58d", "b98b73", "8e9aaf", "9c8a94", "8fa38f", "b0a58c" ], "accentColor": ["8a8a72", "9c7460", "737f94", "82707c"] }

注意这里mouthVariant不再出现在前面——Muted 预设把"排除粉舌嘴型"作为一个独立维度单独列出来，说明预设之间的选项可以彼此独立组合，每个预设只动自己关心的那几项。

6. Electric（电光）

• ID：electric
• 摘要：身体颜色比样式自带的所有颜色都要夸张。
• 设计动机：把"加杠杆"的方向反过来——背景地面保持近黑色，让生物成为整块磁贴上唯一发光的物体。
• 完整选项：

{ "backgroundColor": ["0f0f12"], "bodyColor": ["ff2e88", "00e5ff", "7cff00", "ffe600", "ff6a00", "b400ff"] }

7. Pastel Wall（粉彩背景）

• ID：pastel-wall
• 摘要：生物身后换成淡色背景。
• 设计动机：样式自带的背景全部偏暗且饱和。换成粉彩后，同一个生物从"聚光灯下的标本"变成了"贴纸"。
• 完整选项：

{ "backgroundColor": [ "b6e3f4", "c0aede", "d1d4f9", "ffd5dc", "ffdfbf", "d9f2d9" ] }

8. Bold Pop（高饱和撞色）

• ID：bold-pop
• 摘要：饱和背景配淡色生物。
• 设计动机：比样式自带色彩更响亮、更接近原色系。身体保持淡色，因此在上面依然有清晰的边缘。
• 完整选项：

{ "backgroundColor": [ "ff2e63", "00c2a8", "ffb300", "3d5afe", "8e24aa", "00e676" ] }

9. Night Shift（暗色界面）

• ID：night-shift
• 摘要：近黑背景，身体颜色不变。
• 设计动机：专为暗色界面设计。身体色板本身已经很亮，所以背景变暗之后，其他一切都不必移动，生物依然清晰可见。
• 完整选项：

{ "backgroundColor": ["16161a"] }

10. Sunrise（日出渐变）

• ID：sunrise
• 摘要：生物身后的暖色渐变。
• 设计动机：演示渐变背景选项——两种颜色、线性填充、固定角度。seed 依然决定两种颜色中哪一种排在上面，所以整组头像里光线可以从任意一侧来。
• 完整选项：

{ "backgroundColor": ["ff9db4", "ffd5a8"], "backgroundColorFill": "linear", "backgroundColorAngle": 45 }

backgroundColorFill控制背景填充方式（linear为线性渐变），backgroundColorAngle控制渐变角度（此处固定为 45 度），而渐变端点颜色仍交给 seed 从两个候选色里挑选。

11. Full Cast（全员配件）

• ID：full-cast
• 摘要：角、花纹和腮红一个不落。
• 设计动机：三个可选组件全部开到 100%。该样式自带 15 种头部配件和 10 种身体花纹，而在默认概率下，大多数 seed 根本抽不到它们。
• 完整选项：

{ "topProbability": 100, "patternProbability": 100, "cheeksProbability": 100 }

与 Bare 正好互补：Bare 把三个概率降为 0，Full Cast 把三个概率升到 100。这也直观展示了概率型组件（probability 字段）在 DiceBear 渲染管线中的作用——对应 Renderer.ts 与解析器中按概率决定组件是否渲染的机制。

12. Animated（开启动画）

• ID：animated
• 摘要：打开样式内置动画。
• 设计动机：动画默认关闭，animation: true打开它；bobAnimation: true只播放其中一种；animationSpeed设置节奏。动画会遵循prefers-reduced-motion系统偏好。
• 完整选项：

{ "animation": true }

核心选项参考：概率、嘴型、配色与动画

综合 12 套预设，可以提炼出 Critters 样式的几组核心选项，供你在预设基础上进一步调优：

关于嘴型白名单有一个值得注意的细节：mouthVariant在预设里并不是"必须这样选"，而是排除某些变体。以 Sepia 为代表的几个预设保留了smile, tinySmile, teeth, ooh, line, smirk, wavy, catMouth, zigzag, frown, sad, slant, dot, tooth这 14 种嘴型，排除的是 4 种把粉色舌头直接画进素材的嘴型——因为调色选项碰不到那抹粉色，在受限色板下会穿帮。这是预设设计思路的典型体现：预设服务于一种视觉目标，宁可牺牲一部分变化，也要保证整体观感可控。

把预设用进你的项目：JS、HTTP API 与 CLI 三种落地方式

预设之所以可以直接复制使用，是因为文档站的代码面板（StyleOptionsCodePanel.vue + code-examples.ts）会按九种目标（HTTP API、JavaScript、PHP、Python、Rust、Go、Dart、C#、CLI）自动生成等价代码。以bare预设为例：

JavaScript（@dicebear/core）

import { createAvatar } from '@dicebear/core'; import { critters } from '@dicebear/styles'; const avatar = createAvatar(critters, { topProbability: 0, patternProbability: 0, cheeksProbability: 0, });

HTTP API

https://api.dicebear.com/11.x/critters/svg?topProbability=0&patternProbability=0&cheeksProbability=0

URL 的构造规则在 api.ts 中实现：数组类型的值（如多个颜色）用逗号拼接，布尔与数字直接作为查询参数；idRandomization、fontFamily、fontWeight、title这四个库专用选项会被自动剔除（unsupportedHttpApiOptions）。

CLI

dicebear create critters \ --topProbability 0 \ --patternProbability 0 \ --cheeksProbability 0

CLI 命令同样由 api.ts 的getAvatarApiCommand生成：数值与布尔原样输出，字符串用 shell 引号包裹。你在 编辑样式文档 中可以看到它的实际用法示例：dicebear create ./critters.json -o ./test-output --count 10，即以 Critters 定义文件为基础批量生成 10 个头像到./test-output。

对其他语言（PHP、Python、Rust、Go、Dart、C#），预设中的选项同样原样映射为对应语言的构造参数，例如 Python：

Avatar(style, { "topProbability": 0, "patternProbability": 0, "cheeksProbability": 0 })

换句话说：你只需要把预设 JSON 里的options对象抄进任何一种受支持语言的构造调用，就能得到完全一致的渲染结果。

预设体系的源码实现：JSON、校验与组合数计算

预设体系在仓库里是一套完整、可维护的工程设施，值得理解其内部结构：

1. 数据层：每个样式一个 JSON 文件，位于 .vitepress/theme/presets/，通过 presets.ts 的 glob 自动发现。预设的id必须是稳定的 kebab-case 字符串，因为它会被拼进 Playground 链接（/playground?style=critters&preset=bare）。
2. 展示层：SitePresetsPage.vue 用 3 个固定 seed 渲染每一行预设；StylePresetDialog.vue 弹出详情，并调用computeCount(narrowDefinition(...))计算"剩余可生成头像数"。
3. 质量门禁：validate-presets.ts 专门用来防止预设"静默腐烂"——如果某样式重命名了组件，预设里的<name>Variant选项会变成对不上任何东西的死配置，组件悄悄不再出现，而文档构建不会报错。该校验脚本会：
   • 检查id/name/summary/description非空、id为 kebab-case 且不重复；
   • 用 6 个探测 seed（Felix, Aneka, Milo, Luna, Dara, Erik）渲染校验预设——单个 seed 可能恰好抽不到某个变体而掩盖问题；
   • 通过import.meta.resolve('@dicebear/styles/<style>.json')加载当前样式定义，确保预设引用的变体确实存在；
   • 同时核对unsupportedHttpApiOptions列表，保证 HTTP API 参数可正确序列化。
4. 计数层：combinationCount.ts 对样式定义做精确的组合枚举——遍历组件变体、颜色组约束（notEqualTo、contrastTo）、连续变换区间（rotate/scale/translate）以及 initial/initials 文本基数，算出"这组选项还能渲染出多少种不同头像"。预设固定掉的选项会通过narrowDefinition收窄定义，因此计数立刻反映"固定代价"——这正是预设页面每行"还能生成 N 个不同头像"数字的来源。

这套"数据 JSON + 懒加载 + 自动校验 + 组合数统计"的设施，让预设既对用户是开箱即用的参数包，又对维护者是防回归的受控资产。

在 Playground 里继续调优

预设不是终点。文档的推荐工作流是：挑一个预设 → 复制它的代码或直接打开 Playground → 继续调。Playground 链接的格式为：

/playground?style=critters&preset=bare

在 StylePresetDialog.vue 中，playgroundUrl正是按kebabCase(styleName)加encodeURIComponent(preset.id)拼出来的。打开后，你可以基于预设继续修改嘴型、颜色、渐变角度乃至动画参数，观察 seed 变化带来的多样性，直到找到最适合自己产品的那一版。

结语

Critters 的 12 套预设覆盖了从"极简素颜"（Bare）到"全员配件"（Full Cast）、从"灰度/双色/棕褐"等受限色板到"电光/撞色"等高饱和方案、从"暗色界面适配"到"渐变背景与动画"的完整调色板。它们的本质只是一组普通渲染选项，因此可以零成本地嵌入 JavaScript、HTTP API、CLI 以及 PHP/Python/Rust/Go/Dart/C# 任何一种接入方式。

如果你需要为其他样式扩展预设，参照 critters.json 的结构新增一个 JSON 文件，再跑一遍 validate-presets.ts 即可——这正是该仓库预设基础设施的设计初衷。

• UI组件
• 后端