UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载本文以 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 类型的值用逗号连接例如?topProbability0patternProbability0cheeksProbability0。预设还有一个关键设计它只设置一部分选项其余选项保持自由。未设置的选项会继续随 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.tsCritters 对应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极简IDbare摘要没有角、没有花纹、没有腮红。设计动机一次性关掉三个可选组件。只保留身体轮廓和脸部而该样式自带 19 张嘴型和 19 种眼睛组合来填充这张脸。完整选项{ topProbability: 0, patternProbability: 0, cheeksProbability: 0 }topProbability、patternProbability、cheeksProbability分别控制头部装饰角/耳朵/触角、身体花纹、腮红三个概率型组件的出现概率。全部设为 0意味着三个可选组件永不出现。2. Sepia棕褐IDsepia摘要一套暖棕色色阶连背景地面也算上。设计动机这里排除了 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灰度IDgreyscale摘要身体、花纹、地面全部没有色相。设计动机扁平造型加硬阴影是那种失去颜色也依然成立的画法。嘴型排除逻辑与 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双色IDduotone摘要一只薄荷绿的生物站在深绿背景上。设计动机一整组只用一个身体颜色于是除了轮廓和脸两个头像之间没有任何区别。花纹色必须与身体色保持一个色阶的差异因为该样式的定义要求它们不能相等对应样式定义中颜色组的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低饱和IDmuted摘要一群灰扑扑的小动物。设计动机该样式原本自带 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电光IDelectric摘要身体颜色比样式自带的所有颜色都要夸张。设计动机把加杠杆的方向反过来——背景地面保持近黑色让生物成为整块磁贴上唯一发光的物体。完整选项{ backgroundColor: [0f0f12], bodyColor: [ff2e88, 00e5ff, 7cff00, ffe600, ff6a00, b400ff] }7. Pastel Wall粉彩背景IDpastel-wall摘要生物身后换成淡色背景。设计动机样式自带的背景全部偏暗且饱和。换成粉彩后同一个生物从聚光灯下的标本变成了贴纸。完整选项{ backgroundColor: [ b6e3f4, c0aede, d1d4f9, ffd5dc, ffdfbf, d9f2d9 ] }8. Bold Pop高饱和撞色IDbold-pop摘要饱和背景配淡色生物。设计动机比样式自带色彩更响亮、更接近原色系。身体保持淡色因此在上面依然有清晰的边缘。完整选项{ backgroundColor: [ ff2e63, 00c2a8, ffb300, 3d5afe, 8e24aa, 00e676 ] }9. Night Shift暗色界面IDnight-shift摘要近黑背景身体颜色不变。设计动机专为暗色界面设计。身体色板本身已经很亮所以背景变暗之后其他一切都不必移动生物依然清晰可见。完整选项{ backgroundColor: [16161a] }10. Sunrise日出渐变IDsunrise摘要生物身后的暖色渐变。设计动机演示渐变背景选项——两种颜色、线性填充、固定角度。seed 依然决定两种颜色中哪一种排在上面所以整组头像里光线可以从任意一侧来。完整选项{ backgroundColor: [ff9db4, ffd5a8], backgroundColorFill: linear, backgroundColorAngle: 45 }backgroundColorFill控制背景填充方式linear为线性渐变backgroundColorAngle控制渐变角度此处固定为 45 度而渐变端点颜色仍交给 seed 从两个候选色里挑选。11. Full Cast全员配件IDfull-cast摘要角、花纹和腮红一个不落。设计动机三个可选组件全部开到 100%。该样式自带 15 种头部配件和 10 种身体花纹而在默认概率下大多数 seed 根本抽不到它们。完整选项{ topProbability: 100, patternProbability: 100, cheeksProbability: 100 }与 Bare 正好互补Bare 把三个概率降为 0Full Cast 把三个概率升到 100。这也直观展示了概率型组件probability 字段在 DiceBear 渲染管线中的作用——对应 Renderer.ts 与解析器中按概率决定组件是否渲染的机制。12. Animated开启动画IDanimated摘要打开样式内置动画。设计动机动画默认关闭animation: true打开它bobAnimation: true只播放其中一种animationSpeed设置节奏。动画会遵循prefers-reduced-motion系统偏好。完整选项{ animation: true }核心选项参考概率、嘴型、配色与动画综合 12 套预设可以提炼出 Critters 样式的几组核心选项供你在预设基础上进一步调优选项类型说明预设示例topProbabilitynumber0–100头部装饰角/耳朵/触角出现概率Bare0、Full Cast100patternProbabilitynumber0–100身体花纹出现概率Bare0、Full Cast100cheeksProbabilitynumber0–100腮红出现概率Bare0、Full Cast100mouthVariantstring[]允许出现的嘴型白名单Sepia/Greyscale/Duotone/Muted 的 14 项列表backgroundColorstring[]背景地面颜色各预设均涉及bodyColorstring[]身体颜色Sepia、Electric 等accentColorstring[]花纹/点缀颜色须与身体色不同Sepia、Duotone 等inkColorstring[]墨线/轮廓颜色Sepia、Greyscale、DuotonebackgroundColorFillsolid/linear背景填充方式SunriselinearbackgroundColorAnglenumber线性渐变角度Sunrise45animationboolean是否开启动画AnimatedtruebobAnimationboolean是否只播放 bob 动画见 Animated 说明animationSpeednumber动画播放速度见 Animated 说明关于嘴型白名单有一个值得注意的细节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预设为例JavaScriptdicebear/coreimport { createAvatar } from dicebear/core; import { critters } from dicebear/styles; const avatar createAvatar(critters, { topProbability: 0, patternProbability: 0, cheeksProbability: 0, });HTTP APIhttps://api.dicebear.com/11.x/critters/svg?topProbability0patternProbability0cheeksProbability0URL 的构造规则在 api.ts 中实现数组类型的值如多个颜色用逗号拼接布尔与数字直接作为查询参数idRandomization、fontFamily、fontWeight、title这四个库专用选项会被自动剔除unsupportedHttpApiOptions。CLIdicebear create critters \ --topProbability 0 \ --patternProbability 0 \ --cheeksProbability 0CLI 命令同样由 api.ts 的getAvatarApiCommand生成数值与布尔原样输出字符串用 shell 引号包裹。你在 编辑样式文档 中可以看到它的实际用法示例dicebear create ./critters.json -o ./test-output --count 10即以 Critters 定义文件为基础批量生成 10 个头像到./test-output。对其他语言PHP、Python、Rust、Go、Dart、C#预设中的选项同样原样映射为对应语言的构造参数例如 PythonAvatar(style, { topProbability: 0, patternProbability: 0, cheeksProbability: 0 })换句话说你只需要把预设 JSON 里的options对象抄进任何一种受支持语言的构造调用就能得到完全一致的渲染结果。预设体系的源码实现JSON、校验与组合数计算预设体系在仓库里是一套完整、可维护的工程设施值得理解其内部结构数据层每个样式一个 JSON 文件位于 .vitepress/theme/presets/通过 presets.ts 的 glob 自动发现。预设的id必须是稳定的 kebab-case 字符串因为它会被拼进 Playground 链接/playground?stylecritterspresetbare。展示层SitePresetsPage.vue 用 3 个固定 seed 渲染每一行预设StylePresetDialog.vue 弹出详情并调用computeCount(narrowDefinition(...))计算剩余可生成头像数。质量门禁validate-presets.ts 专门用来防止预设静默腐烂——如果某样式重命名了组件预设里的nameVariant选项会变成对不上任何东西的死配置组件悄悄不再出现而文档构建不会报错。该校验脚本会检查id/name/summary/description非空、id为 kebab-case 且不重复用 6 个探测 seedFelix, Aneka, Milo, Luna, Dara, Erik渲染校验预设——单个 seed 可能恰好抽不到某个变体而掩盖问题通过import.meta.resolve(dicebear/styles/style.json)加载当前样式定义确保预设引用的变体确实存在同时核对unsupportedHttpApiOptions列表保证 HTTP API 参数可正确序列化。计数层combinationCount.ts 对样式定义做精确的组合枚举——遍历组件变体、颜色组约束notEqualTo、contrastTo、连续变换区间rotate/scale/translate以及 initial/initials 文本基数算出这组选项还能渲染出多少种不同头像。预设固定掉的选项会通过narrowDefinition收窄定义因此计数立刻反映固定代价——这正是预设页面每行还能生成 N 个不同头像数字的来源。这套数据 JSON 懒加载 自动校验 组合数统计的设施让预设既对用户是开箱即用的参数包又对维护者是防回归的受控资产。在 Playground 里继续调优预设不是终点。文档的推荐工作流是挑一个预设 → 复制它的代码或直接打开 Playground → 继续调。Playground 链接的格式为/playground?stylecritterspresetbare在 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组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐终极Sunshine游戏串流指南5分钟打造跨平台私人游戏云终极Sunshine游戏串流指南5分钟打造跨平台私人游戏云 Sunshine是一款开源自托管的游戏串流服务器让你能将高性能电脑的游戏画面和操作实时传输到任何UI组件后端Qwen Code 多智能体协作/coordinate 命令、Agent Team 运行时与只读工作区实战Qwen Code 多智能体协作/coordinate 命令、Agent Team 运行时与只读工作区实战 Qwen Code 内置了一个实验性的 AgentUI组件后端DiceBear Bottts Neutral Presets11 套开箱即用的头像预设与其工作机制DiceBear Bottts Neutral Presets11 套开箱即用的头像预设与其工作机制 本文基于 DiceBear 文档站中的 Bottts NUI组件后端上一篇LMAX Disruptor高级特性揭秘动态添加处理器和优雅关闭的终极指南下一篇StatsD服务器接口详解TCP管理控制台的使用方法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考