UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载导读DiceBear 的 Micah 是一款扁平化半身人像风格干净的轮廓、简约的五官、大胆的发色与服装配色组合。本文围绕 Micah 预设页面 展开讲解什么是预设preset、Micah 风格现成的 12 组渲染选项组合各自的配色与用途以及如何在代码、HTTP API 与 Playground 中直接使用这些预设。读完本文你将能够把任意一组预设复制进自己的项目或打开 Playground 继续微调并理解预设背后未覆盖的选项仍随 seed 变化的变体计数机制。什么是预设普通渲染选项的打包按 Micah 预设页面与原文档的定义预设就是一组普通的渲染选项a preset is an ordinary set of render options。它不引入任何新的渲染机制只是把若干options字段预先填好例如指定背景色backgroundColor指定肤色/发色/衬衫色的候选色板指定某个部件的出现概率如earringsProbability调整画布缩放如scale选项组预设未触及的部分仍然会随 seed 变化——也就是说预设只是冻结了它列出的那些选项其余所有维度依然由 seed 驱动。这也是预设页面每一行都会标注该预设仍能产生多少种不同头像的原因。在实际使用中一个预设就是一段可以直接拼进createAvatar()调用或 HTTP API 查询串的 options 对象。预设数据以纯 JSON 形式存放在 apps/docs/.vitepress/theme/presets/micah.json不依赖任何核心库的特殊格式。正如 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.——它可以在每种语言的库里、以及 HTTP API 查询参数中直接工作七个核心实现根本不需要知道预设的存在。Micah 的 12 组预设全解析以下内容完整来自 micah.json每组预设都给出选项原文、设计意图与适用场景。1. Bare裸装{ backgroundColor: [], earringsProbability: 0, glassesProbability: 0, facialHairProbability: 0 }一句话无背景、无眼镜、无耳环、无胡茬。说明把风格剥到最简——不画背景让头像直接坐在你页面自己的底色上同时把只在约 1/3 的 seed 中出现的三个部件耳环、眼镜、面部毛发全部关掉。适用头像需要融入宿主页面背景、不想出现任何装饰性部件时。2. Sepia复古棕调{ backgroundColor: [e3d2b4], baseColor: [d8b48c, c19a70, a37e58], hairColor: [5a3d28, 6b4f35, 7d6047], shirtColor: [8a6a48, 9c7c58], eyebrowsColor: [3f2d1e], eyesColor: [3f2d1e], mouthColor: [3f2d1e], facialHairColor: [3f2d1e], eyeShadowColor: [f0e2cc], glassesColor: [3f2d1e], earringColor: [8a6a48], mouthVariant: [frown, nervous, pucker, sad, smile, smirk] }一句话肤色、发色、衬衫共用一套暖棕。说明这是真正的复古照片效果——肤色也跟着走棕。其他预设通常把肤色留给 seed但这个不行因为一张彩色人像照片不可能是棕色的。注意mouthVariant被限定为 6 个值Micah 的 8 种嘴型中有 2 种是固定粉色的不走 mouth 颜色组因此被剔除。适用怀旧风、复古 UI、摄影展板风格。3. Greyscale全灰阶{ backgroundColor: [ececee], baseColor: [dcdcde, b6b6b9, 8c8c90], hairColor: [343437, 5a5a5e, 828286], shirtColor: [6e6e72, 9a9a9e], eyebrowsColor: [232326], eyesColor: [232326], mouthColor: [232326], facialHairColor: [232326], eyeShadowColor: [f2f2f4], glassesColor: [232326], earringColor: [6e6e72], mouthVariant: [frown, nervous, pucker, sad, smile, smirk] }一句话任何地方都没有彩色包括皮肤。说明是真灰而不是彩脸配灰发。适用于打印样式表、禁用态或任何颜色会传递不该传递的含义的场合。同样剔除两个粉色嘴型。适用禁用态头像、灰度打印、严肃/极简场景。4. Duotone双色调{ backgroundColor: [dfe3f5], baseColor: [9aa2d2], hairColor: [3d4272], shirtColor: [6a71a8], eyebrowsColor: [23264a], eyesColor: [23264a], mouthColor: [23264a], facialHairColor: [23264a], eyeShadowColor: [e8eaf7], glassesColor: [23264a], earringColor: [6a71a8], mouthVariant: [frown, nervous, pucker, sad, smile, smirk] }一句话同一种靛蓝的四个明度台阶别无他物。说明背景、皮肤、头发、衬衫取同一色相、四个明度。因为风格要求这几组颜色彼此不同所以双色调在这里实际是一条四级明度阶梯。适用品牌统一色调、现代版式、海报化表达。5. Muted低饱和{ backgroundColor: [ece7de], hairColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58], shirtColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58], glassesColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58], earringColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58] }一句话灰扑扑的头发和衬衫肤色留给 seed。说明Micah 风格自带一套横跨头发、衬衫、眼镜、耳环的 13 色鲜艳调色板这个预设把它换成灰土色调避免一整页头像看起来像颜料盒。适用内容社区、评论列表、需要安静的界面。6. Electric电光色{ backgroundColor: [101216], hairColor: [ff2e88, 00e5ff, ffe600, 7cff00, ff6a00, b400ff], shirtColor: [ff2e88, 00e5ff, ffe600, 7cff00, ff6a00, b400ff] }一句话头发和衬衫满饱和、近黑背景。说明与 Muted 在同一个旋钮上反向拧到头——六种超越风格自带色域的荧光色配上深色背景让它们像发光一样。肤色仍来自 seed。适用游戏、音乐、娱乐、潮流向产品。7. Pastel Wall粉彩墙{ backgroundColor: [ffe3ea, e3edff, e2f5e9, fdf1d4, efe6ff] }一句话五种柔和背景其余原封不动。说明不改变人物本身只改变他们面前的墙。这是让一组头像看起来属于彼此最轻量的方式。适用女性向/儿童向产品、温和的社区氛围、粉色系品牌。8. Bold Pop高饱和撞色{ backgroundColor: [ff5d8f, ffb703, 43aa8b, 4d96ff, b57bff] }一句话饱和背景故意喧闹。说明Pastel Wall 的大声版。强度足以让头像在繁忙页面上站得住这也是唯一会跟彩色界面打架而不是安安静静待在里面的预设。适用活动页、营销位、需要抓眼球的展示场景。9. Sunrise日出渐变{ backgroundColor: [ffd9b0, ffa8bf], backgroundColorFill: linear, backgroundColorAngle: 135 }一句话暖色渐变背景其余原封不动。说明展示渐变背景选项的用法两个颜色、线性填充、固定角度。seed 仍然决定两个颜色谁在上谁在下。适用首页 Hero、欢迎页、温暖活泼的产品调性。10. Night Shift夜班模式{ backgroundColor: [16161c], hairColor: [f9c9b6, d2eff3, e0ddff, ffeba4, ffedef], shirtColor: [d2eff3, e0ddff, ffeba4, 6bd9e9] }一句话近黑背景、浅色头发和衬衫。说明为深色界面而设。头发和衬衫落到风格自带色域的浅端避免人物剪影消失进背景里。适用深色模式、夜间产品、Dashboard。11. Full Cast全员登场{ backgroundColor: [f4f1ea], earringsProbability: 60, glassesProbability: 55, facialHairProbability: 40 }一句话眼镜、耳环、胡茬全部拉高。说明Micah 的三个部件默认只有 10%~30% 概率小批量头像里很难见到它们。此预设把三者全部调高——适合展示风格多样性而不是填满用户列表。适用风格画廊、模板预览、演示页。12. Close Up近景特写{ backgroundColor: [f4f1ea], scale: 1.2 }一句话放大到脸部适合小尺寸头像。说明用缩放而不是颜色。在评论区的头像尺寸下默认构图大部分面积是肩膀裁进去能买回细节。适用评论区小头像、列表缩略图、消息气泡。如何在代码与 HTTP API 中使用预设预设就是 options 对象因此接入方式与普通选项完全一致JavaScript 库参考 JavaScript 集成指南把预设的 options 展开进createAvatar()import { createAvatar } from dicebear/core; import { style } from dicebear/collection; // 以 sepia 预设为例直接复制 micah.json 中的 options const avatar createAvatar(style, { seed: Felix, backgroundColor: [e3d2b4], baseColor: [d8b48c, c19a70, a37e58], hairColor: [5a3d28, 6b4f35, 7d6047], shirtColor: [8a6a48, 9c7c58], eyebrowsColor: [3f2d1e], eyesColor: [3f2d1e], mouthColor: [3f2d1e], facialHairColor: [3f2d1e], eyeShadowColor: [f0e2cc], glassesColor: [3f2d1e], earringColor: [8a6a48], mouthVariant: [frown, nervous, pucker, sad, smile, smirk], }); const svg avatar.toString();HTTP API同一组选项可以直接拼成查询参数数组用逗号分隔布尔值取 0/1详见 HTTP API 集成指南。例如 Sepia 预设对应的请求形如GET /7.x/micah/svg?seedFelixbackgroundColore3d2b4baseColord8b48c,c19a70,a37e58hairColor5a3d28,6b4f35,7d6047...值得注意预设的未覆盖选项仍随 seed 变化特性在 HTTP API 中同样成立——你只传预设列出的参数其余维度发型、眉形、鼻形等继续由seed决定。如何在 Playground 中使用预设在文档站的 Playground 中预设通过?preset查询参数直达。看 StylePresetDialog.vue 的源码即可确认const playgroundUrl computed(() props.preset ? /playground?style${kebabCase(props.styleName)}preset${encodeURIComponent( props.preset.id, )} : , );即打开/playground?stylemicahpresetsepia页面会直接载入该预设的完整选项集然后你可以继续在上面微调。预设id均使用 kebab-case如bare、pastel-wall、night-shift这也是 validate-presets.ts 强制校验的命名规范。预设页面是如何生成的文档站实现细节每个带预设的风格页下都有一个presets/index.md内容由 sync-preset-pages.ts 自动生成幂等可反复运行参数--check用于只校验不写盘。它读取.vitepress/theme/presets/*.json中所有风格为每个风格挂载SitePresetsPage styleName...组件并在风格主页的## Options之前插入Presets导读区块。SitePresetsPage.vue 负责画廊渲染页头展示 4 个精选预设均匀取点正文列出全部预设行每一行都用相同的 3 个 seed 渲染这样各预设之间可以直接横向对比同时每个 tile 仍标注该预设还剩多少种不同头像。预览种子来自 previewRowSeeds.tsMicah 风格使用的是一组人名种子如Duncan、Iona、Cecile、Ella等。校验脚本预设会悄悄腐烂所以必须渲染验证validate-presets.ts 是对预设数据质量的保障它做的事情包括校验每个预设必须有非空的id/name/summary/descriptionid必须 kebab-case 且不重复校验每个options键必须是该风格OptionsDescriptor中真实存在的字段枚举值必须仍存在于风格定义中对 6 个探针 seedFelix、Aneka、Milo、Luna、Dara、Erik逐一实际渲染——一个 seed 恰好抽到的变体合法、下一个 seed 却坏了正是预设最容易踩的坑渲染结果必须包含use引用否则说明某个概率/变体选项把所有部件都清空了会得到空头像对*ColorOrder之类 HTTP API 尚不支持的选项给出警告避免画廊展示的 HTTP-API 链接与库内渲染不一致。正如脚本注释所说Presets are frozen option sets, so they rot quietly: a renamed component leaves anameVariantoption that no longer matches anything, and the component simply stops appearing.预设是冻结的选项集会悄悄腐烂部件被重命名后旧的变体选项再也匹配不到任何东西部件就直接消失而文档构建本身不会察觉。这正是需要独立校验脚本的原因。变体计数预设还剩多少种头像怎么算出来的预设页面每个 tile 都标注还剩多少种不同头像其计算入口是 combinationCount.ts 中的computeCount()export function computeCount(definition: StyleDefinition): AvatarUniqueCount { const groups new GroupIndex(definition); const colorCounts new MapGroupMask, bigint(); let count 0n; for (const [mask, renderings] of componentOutcomes(definition, groups)) { let colors colorCounts.get(mask); if (colors undefined) { colors visibleColorCount(definition, groups, mask); colorCounts.set(mask, colors); } count renderings * colors; } count * initialsTextCardinality(initialsUsage(definition)); return { display: formatCount(count), log10: bigintLog10(count) }; }原理是遍历部件所有可见组合componentOutcomes对每组可见颜色约束visibleColorCount处理notEqualTo与contrastTo这类颜色必须互不相同/必须有对比度的规则乘以部件渲染组合数最后再乘以首字母文本基数。当预设冻结了部分颜色或变体选项时传入的 definition 已经被 narrowDefinition 收窄计数自然下降——这正是对话框里该预设 x 个选项、仍能产生多少变体的同一套数字与 Playground 报告的数一致。延伸阅读Micah 风格主页风格总览与全部可调选项说明预设数据源本文所有预设选项的权威出处预设加载配置预设如何在文档站按风格懒加载预设页面组件画廊的渲染逻辑预设对话框组件点开单个预设后的详情视图页面同步脚本预设页面的生成机制预设校验脚本预设质量的自动化保障Micah 的 12 组预设覆盖了从裸装融入到荧光撞色、从真灰阶到日出渐变的完整光谱且全部以普通 options 形式存在任何集成方式都可直接复用。最佳实践是先挑一组最贴近需求的预设复制进代码再到 Playground 里打开?preset链接微调最后用校验脚本的思想多个 seed 实际渲染确认没有因部件概率或枚举值导致空头像。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Personas 风格预置Presets详解12 套开箱即用的渲染选项组合DiceBear Personas 风格预置Presets详解12 套开箱即用的渲染选项组合 Personas 是 DiceBear 提供的扁平化半身人像UI组件后端DiceBear Toon Head 风格预设Presets完整指南12 套现成渲染选项与实战用法DiceBear Toon Head 风格预设Presets完整指南12 套现成渲染选项与实战用法 Toon Head 是 DiceBear 旗下以“自然UI组件后端DiceBear Bottts 风格预设Presets完整指南12 组现成渲染选项的配置、用法与源码解析DiceBear Bottts 风格预设Presets完整指南12 组现成渲染选项的配置、用法与源码解析 本文以 DiceBear 文档站中 BotttsUI组件后端上一篇【亲测免费】 探索Chrome管理的利器chrome-cli下一篇终极指南如何快速构建iOS Material Design应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 DiceBear Micah 风格预设（Presets）完整指南：12 组开箱即用的渲染选项与实战用法
UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载导读DiceBear 的 Micah 是一款扁平化半身人像风格干净的轮廓、简约的五官、大胆的发色与服装配色组合。本文围绕 Micah 预设页面 展开讲解什么是预设preset、Micah 风格现成的 12 组渲染选项组合各自的配色与用途以及如何在代码、HTTP API 与 Playground 中直接使用这些预设。读完本文你将能够把任意一组预设复制进自己的项目或打开 Playground 继续微调并理解预设背后未覆盖的选项仍随 seed 变化的变体计数机制。什么是预设普通渲染选项的打包按 Micah 预设页面与原文档的定义预设就是一组普通的渲染选项a preset is an ordinary set of render options。它不引入任何新的渲染机制只是把若干options字段预先填好例如指定背景色backgroundColor指定肤色/发色/衬衫色的候选色板指定某个部件的出现概率如earringsProbability调整画布缩放如scale选项组预设未触及的部分仍然会随 seed 变化——也就是说预设只是冻结了它列出的那些选项其余所有维度依然由 seed 驱动。这也是预设页面每一行都会标注该预设仍能产生多少种不同头像的原因。在实际使用中一个预设就是一段可以直接拼进createAvatar()调用或 HTTP API 查询串的 options 对象。预设数据以纯 JSON 形式存放在 apps/docs/.vitepress/theme/presets/micah.json不依赖任何核心库的特殊格式。正如 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.——它可以在每种语言的库里、以及 HTTP API 查询参数中直接工作七个核心实现根本不需要知道预设的存在。Micah 的 12 组预设全解析以下内容完整来自 micah.json每组预设都给出选项原文、设计意图与适用场景。1. Bare裸装{ backgroundColor: [], earringsProbability: 0, glassesProbability: 0, facialHairProbability: 0 }一句话无背景、无眼镜、无耳环、无胡茬。说明把风格剥到最简——不画背景让头像直接坐在你页面自己的底色上同时把只在约 1/3 的 seed 中出现的三个部件耳环、眼镜、面部毛发全部关掉。适用头像需要融入宿主页面背景、不想出现任何装饰性部件时。2. Sepia复古棕调{ backgroundColor: [e3d2b4], baseColor: [d8b48c, c19a70, a37e58], hairColor: [5a3d28, 6b4f35, 7d6047], shirtColor: [8a6a48, 9c7c58], eyebrowsColor: [3f2d1e], eyesColor: [3f2d1e], mouthColor: [3f2d1e], facialHairColor: [3f2d1e], eyeShadowColor: [f0e2cc], glassesColor: [3f2d1e], earringColor: [8a6a48], mouthVariant: [frown, nervous, pucker, sad, smile, smirk] }一句话肤色、发色、衬衫共用一套暖棕。说明这是真正的复古照片效果——肤色也跟着走棕。其他预设通常把肤色留给 seed但这个不行因为一张彩色人像照片不可能是棕色的。注意mouthVariant被限定为 6 个值Micah 的 8 种嘴型中有 2 种是固定粉色的不走 mouth 颜色组因此被剔除。适用怀旧风、复古 UI、摄影展板风格。3. Greyscale全灰阶{ backgroundColor: [ececee], baseColor: [dcdcde, b6b6b9, 8c8c90], hairColor: [343437, 5a5a5e, 828286], shirtColor: [6e6e72, 9a9a9e], eyebrowsColor: [232326], eyesColor: [232326], mouthColor: [232326], facialHairColor: [232326], eyeShadowColor: [f2f2f4], glassesColor: [232326], earringColor: [6e6e72], mouthVariant: [frown, nervous, pucker, sad, smile, smirk] }一句话任何地方都没有彩色包括皮肤。说明是真灰而不是彩脸配灰发。适用于打印样式表、禁用态或任何颜色会传递不该传递的含义的场合。同样剔除两个粉色嘴型。适用禁用态头像、灰度打印、严肃/极简场景。4. Duotone双色调{ backgroundColor: [dfe3f5], baseColor: [9aa2d2], hairColor: [3d4272], shirtColor: [6a71a8], eyebrowsColor: [23264a], eyesColor: [23264a], mouthColor: [23264a], facialHairColor: [23264a], eyeShadowColor: [e8eaf7], glassesColor: [23264a], earringColor: [6a71a8], mouthVariant: [frown, nervous, pucker, sad, smile, smirk] }一句话同一种靛蓝的四个明度台阶别无他物。说明背景、皮肤、头发、衬衫取同一色相、四个明度。因为风格要求这几组颜色彼此不同所以双色调在这里实际是一条四级明度阶梯。适用品牌统一色调、现代版式、海报化表达。5. Muted低饱和{ backgroundColor: [ece7de], hairColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58], shirtColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58], glassesColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58], earringColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58] }一句话灰扑扑的头发和衬衫肤色留给 seed。说明Micah 风格自带一套横跨头发、衬衫、眼镜、耳环的 13 色鲜艳调色板这个预设把它换成灰土色调避免一整页头像看起来像颜料盒。适用内容社区、评论列表、需要安静的界面。6. Electric电光色{ backgroundColor: [101216], hairColor: [ff2e88, 00e5ff, ffe600, 7cff00, ff6a00, b400ff], shirtColor: [ff2e88, 00e5ff, ffe600, 7cff00, ff6a00, b400ff] }一句话头发和衬衫满饱和、近黑背景。说明与 Muted 在同一个旋钮上反向拧到头——六种超越风格自带色域的荧光色配上深色背景让它们像发光一样。肤色仍来自 seed。适用游戏、音乐、娱乐、潮流向产品。7. Pastel Wall粉彩墙{ backgroundColor: [ffe3ea, e3edff, e2f5e9, fdf1d4, efe6ff] }一句话五种柔和背景其余原封不动。说明不改变人物本身只改变他们面前的墙。这是让一组头像看起来属于彼此最轻量的方式。适用女性向/儿童向产品、温和的社区氛围、粉色系品牌。8. Bold Pop高饱和撞色{ backgroundColor: [ff5d8f, ffb703, 43aa8b, 4d96ff, b57bff] }一句话饱和背景故意喧闹。说明Pastel Wall 的大声版。强度足以让头像在繁忙页面上站得住这也是唯一会跟彩色界面打架而不是安安静静待在里面的预设。适用活动页、营销位、需要抓眼球的展示场景。9. Sunrise日出渐变{ backgroundColor: [ffd9b0, ffa8bf], backgroundColorFill: linear, backgroundColorAngle: 135 }一句话暖色渐变背景其余原封不动。说明展示渐变背景选项的用法两个颜色、线性填充、固定角度。seed 仍然决定两个颜色谁在上谁在下。适用首页 Hero、欢迎页、温暖活泼的产品调性。10. Night Shift夜班模式{ backgroundColor: [16161c], hairColor: [f9c9b6, d2eff3, e0ddff, ffeba4, ffedef], shirtColor: [d2eff3, e0ddff, ffeba4, 6bd9e9] }一句话近黑背景、浅色头发和衬衫。说明为深色界面而设。头发和衬衫落到风格自带色域的浅端避免人物剪影消失进背景里。适用深色模式、夜间产品、Dashboard。11. Full Cast全员登场{ backgroundColor: [f4f1ea], earringsProbability: 60, glassesProbability: 55, facialHairProbability: 40 }一句话眼镜、耳环、胡茬全部拉高。说明Micah 的三个部件默认只有 10%~30% 概率小批量头像里很难见到它们。此预设把三者全部调高——适合展示风格多样性而不是填满用户列表。适用风格画廊、模板预览、演示页。12. Close Up近景特写{ backgroundColor: [f4f1ea], scale: 1.2 }一句话放大到脸部适合小尺寸头像。说明用缩放而不是颜色。在评论区的头像尺寸下默认构图大部分面积是肩膀裁进去能买回细节。适用评论区小头像、列表缩略图、消息气泡。如何在代码与 HTTP API 中使用预设预设就是 options 对象因此接入方式与普通选项完全一致JavaScript 库参考 JavaScript 集成指南把预设的 options 展开进createAvatar()import { createAvatar } from dicebear/core; import { style } from dicebear/collection; // 以 sepia 预设为例直接复制 micah.json 中的 options const avatar createAvatar(style, { seed: Felix, backgroundColor: [e3d2b4], baseColor: [d8b48c, c19a70, a37e58], hairColor: [5a3d28, 6b4f35, 7d6047], shirtColor: [8a6a48, 9c7c58], eyebrowsColor: [3f2d1e], eyesColor: [3f2d1e], mouthColor: [3f2d1e], facialHairColor: [3f2d1e], eyeShadowColor: [f0e2cc], glassesColor: [3f2d1e], earringColor: [8a6a48], mouthVariant: [frown, nervous, pucker, sad, smile, smirk], }); const svg avatar.toString();HTTP API同一组选项可以直接拼成查询参数数组用逗号分隔布尔值取 0/1详见 HTTP API 集成指南。例如 Sepia 预设对应的请求形如GET /7.x/micah/svg?seedFelixbackgroundColore3d2b4baseColord8b48c,c19a70,a37e58hairColor5a3d28,6b4f35,7d6047...值得注意预设的未覆盖选项仍随 seed 变化特性在 HTTP API 中同样成立——你只传预设列出的参数其余维度发型、眉形、鼻形等继续由seed决定。如何在 Playground 中使用预设在文档站的 Playground 中预设通过?preset查询参数直达。看 StylePresetDialog.vue 的源码即可确认const playgroundUrl computed(() props.preset ? /playground?style${kebabCase(props.styleName)}preset${encodeURIComponent( props.preset.id, )} : , );即打开/playground?stylemicahpresetsepia页面会直接载入该预设的完整选项集然后你可以继续在上面微调。预设id均使用 kebab-case如bare、pastel-wall、night-shift这也是 validate-presets.ts 强制校验的命名规范。预设页面是如何生成的文档站实现细节每个带预设的风格页下都有一个presets/index.md内容由 sync-preset-pages.ts 自动生成幂等可反复运行参数--check用于只校验不写盘。它读取.vitepress/theme/presets/*.json中所有风格为每个风格挂载SitePresetsPage styleName...组件并在风格主页的## Options之前插入Presets导读区块。SitePresetsPage.vue 负责画廊渲染页头展示 4 个精选预设均匀取点正文列出全部预设行每一行都用相同的 3 个 seed 渲染这样各预设之间可以直接横向对比同时每个 tile 仍标注该预设还剩多少种不同头像。预览种子来自 previewRowSeeds.tsMicah 风格使用的是一组人名种子如Duncan、Iona、Cecile、Ella等。校验脚本预设会悄悄腐烂所以必须渲染验证validate-presets.ts 是对预设数据质量的保障它做的事情包括校验每个预设必须有非空的id/name/summary/descriptionid必须 kebab-case 且不重复校验每个options键必须是该风格OptionsDescriptor中真实存在的字段枚举值必须仍存在于风格定义中对 6 个探针 seedFelix、Aneka、Milo、Luna、Dara、Erik逐一实际渲染——一个 seed 恰好抽到的变体合法、下一个 seed 却坏了正是预设最容易踩的坑渲染结果必须包含use引用否则说明某个概率/变体选项把所有部件都清空了会得到空头像对*ColorOrder之类 HTTP API 尚不支持的选项给出警告避免画廊展示的 HTTP-API 链接与库内渲染不一致。正如脚本注释所说Presets are frozen option sets, so they rot quietly: a renamed component leaves anameVariantoption that no longer matches anything, and the component simply stops appearing.预设是冻结的选项集会悄悄腐烂部件被重命名后旧的变体选项再也匹配不到任何东西部件就直接消失而文档构建本身不会察觉。这正是需要独立校验脚本的原因。变体计数预设还剩多少种头像怎么算出来的预设页面每个 tile 都标注还剩多少种不同头像其计算入口是 combinationCount.ts 中的computeCount()export function computeCount(definition: StyleDefinition): AvatarUniqueCount { const groups new GroupIndex(definition); const colorCounts new MapGroupMask, bigint(); let count 0n; for (const [mask, renderings] of componentOutcomes(definition, groups)) { let colors colorCounts.get(mask); if (colors undefined) { colors visibleColorCount(definition, groups, mask); colorCounts.set(mask, colors); } count renderings * colors; } count * initialsTextCardinality(initialsUsage(definition)); return { display: formatCount(count), log10: bigintLog10(count) }; }原理是遍历部件所有可见组合componentOutcomes对每组可见颜色约束visibleColorCount处理notEqualTo与contrastTo这类颜色必须互不相同/必须有对比度的规则乘以部件渲染组合数最后再乘以首字母文本基数。当预设冻结了部分颜色或变体选项时传入的 definition 已经被 narrowDefinition 收窄计数自然下降——这正是对话框里该预设 x 个选项、仍能产生多少变体的同一套数字与 Playground 报告的数一致。延伸阅读Micah 风格主页风格总览与全部可调选项说明预设数据源本文所有预设选项的权威出处预设加载配置预设如何在文档站按风格懒加载预设页面组件画廊的渲染逻辑预设对话框组件点开单个预设后的详情视图页面同步脚本预设页面的生成机制预设校验脚本预设质量的自动化保障Micah 的 12 组预设覆盖了从裸装融入到荧光撞色、从真灰阶到日出渐变的完整光谱且全部以普通 options 形式存在任何集成方式都可直接复用。最佳实践是先挑一组最贴近需求的预设复制进代码再到 Playground 里打开?preset链接微调最后用校验脚本的思想多个 seed 实际渲染确认没有因部件概率或枚举值导致空头像。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Personas 风格预置Presets详解12 套开箱即用的渲染选项组合DiceBear Personas 风格预置Presets详解12 套开箱即用的渲染选项组合 Personas 是 DiceBear 提供的扁平化半身人像UI组件后端DiceBear Toon Head 风格预设Presets完整指南12 套现成渲染选项与实战用法DiceBear Toon Head 风格预设Presets完整指南12 套现成渲染选项与实战用法 Toon Head 是 DiceBear 旗下以“自然UI组件后端DiceBear Bottts 风格预设Presets完整指南12 组现成渲染选项的配置、用法与源码解析DiceBear Bottts 风格预设Presets完整指南12 组现成渲染选项的配置、用法与源码解析 本文以 DiceBear 文档站中 BotttsUI组件后端上一篇【亲测免费】 探索Chrome管理的利器chrome-cli下一篇终极指南如何快速构建iOS Material Design应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考