UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载本指南以 DiceBear 官方文档中 Pixel Art 风格的预设Preset页面为骨架围绕 apps/docs/pages/styles/pixel-art/presets/index.md 所承载的预设体系展开。你将学会预设到底是什么、如何把它复制进自己的代码或 Playground 中继续调优、Pixel Art 风格自带哪 10 套官方预设及每套预设的完整参数以及文档站背后的预设加载与校验机制。读完即可在 JavaScript、HTTP API 等任一集成方式中直接使用这些预设。Pixel Art 是 DiceBear 中一个以“半身像素精灵”为特色的头像风格复古发型、眼睛与彩色上衣组成的 8-bit 风格角色在 16×16 的网格上以高对比、高辨识度的方式呈现。为了让使用者不必从零摸索该风格的几十个选项文档站为它内置了一组预设Preset——也就是一组写好的、开箱即用的渲染选项既可以直接使用也可以作为调优的起点。预设是什么一组普通的渲染选项预设的官方定义非常朴素一个预设就是一组普通的渲染选项an ordinary set of render options。它不引入任何新的配置格式也不需要 DiceBear 的七个语言核心JS / PHP / Python / Rust / Go / Dart / C#知道“预设”的存在——预设只是恰好打包成 JSON 的选项对象最终都会被展开成普通的 seed options 渲染调用。这一设计在 apps/docs/.vitepress/theme/config/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 查询参数预设中的每个选项键值对都可以拼进https://api.dicebear.com/11.x/pixel-art/svg的 URL作为各语言库的 options 对象把预设的 options 原样传给对应语言的createAvatar/Avatar构造器即可。一个预设由五个字段组成定义在 presets.ts 中字段类型说明idstring稳定的 kebab-case 标识用于?presetPlayground 链接namestring预设名称展示在卡片上summarystring一句话摘要显示在头像旁descriptionstring较长的设计动机说明卡片展开时显示optionsRecordstring, unknown真正的渲染选项集合关键机制预设没有碰过的选项仍然随 seed 变化文档页面对预设最重要的说明是“Options a preset leaves alone keep varying with the seed, so each row lists how many distinct avatars it still gives you.”即预设是部分固定它只固定自己想控制的选项比如只固定衣服颜色其余未提及的选项继续随 seed 随机。因此同一个预设配不同 seed 依然能产出大量不同头像文档站每一行都会标注该预设“还能给出多少个不同头像”。这一数量在 StylePresetDialog.vue 中通过computeCount(narrowDefinition(definition, preset.options))实时计算与 Playground 中显示的“组合数”使用同一套算法保证“固定了颜色的预设显式地牺牲多少多样性”这一数字在文档与 Playground 中一致。源码注释也专门说明了这一点这正是把预览卡片行数限制在 3 个 seed、并在对话框里展示全部 seed 行的原因。如何拿到预设并使用三种途径按 presets/index.md 的指引使用预设可以走三条路直接复制代码在每个预设的详情对话框中StyleOptionsCodePanel会为你生成 9 种形态的代码标签页——HTTP API、JavaScript、PHP、Python、Rust、Go、Dart、C# 与 CLI分别对应 integrations/cli 等集成文档中的用法。直接把对应的代码片段粘进工程即可。在 Playground 中打开每个预设都带有一个 “Open in playground” 入口链接形如/playground?stylepixel-artpresetid见 StylePresetDialog.vue打开后可以继续调整其余选项直到得到满意的头像。阅读 JSON 源文件所有预设数据都是文档仓库中的纯 JSON位于apps/docs/.vitepress/theme/presets/目录下Pixel Art 对应 pixel-art.json。文档页末尾也明确提示“The files are plain JSON in the docs repository”意味着即使某个常用预设缺失你也可以照着 JSON 结构自行补充。预设如何嵌入 HTTP API预设的 options 与 HTTP API 的查询参数一一对应。以 “Sunrise” 预设为例它的 options 是backgroundColor: [ffd5a8,ff9db4]、backgroundColorFill: linear、backgroundColorAngle: 45对应到 HTTP API 就是https://api.dicebear.com/11.x/pixel-art/svg?backgroundColorffd5a8,ff9db4backgroundColorFilllinearbackgroundColorAngle45注意预设校验脚本会专门警告两类选项——backgroundColorFill这类文档站生成的 HTTP-API 链接可能不支持或行为不一致的选项。实际接入时请以当前部署的 API 版本为准详见 validate-presets.ts 中的HTTP_API_DROPS列表与ColorOrder警告。预设如何嵌入 JavaScript 库DiceBear 官方 JS 库dicebear/core的使用方式如下与 StylePresetDialog.vue 生成代码同构import { createAvatar } from dicebear/core; import { pixelArt } from dicebear/styles; const avatar createAvatar(pixelArt, { seed: Felix, // —— 以下是 “Sepia” 预设的 options —— backgroundColor: [e7d5b8], skinColor: [c9a678, b08d5f, 8f6d43, 6d5031], hairColor: [4a3018, 3a2916, 5c4223, 7d6038, a08256], clothingColor: [8a6a3c, 6d5031, a88b60, 5a4227], eyesColor: [4a3018], mouthColor: [9c7147], glassesColor: [3a2916], hatColor: [5c4223], accessoriesColor: [b0946a], }); console.log(avatar.toString()); // svg ...同一个 options 对象也可直接传给 PHP、Python、Rust、Go、Dart、C# 等任一语言核心因为预设只是普通选项与语言无关。Pixel Art 官方 10 套预设逐套解析以下内容全部来自 pixel-art.json并逐条给出完整 options。Pixel Art 风格默认“不绘制背景”头像直接落在容器背景上因此带背景色的预设同时决定了头像与底衬的观感。1. Bare素颜摘要No hat, glasses, beard or accessory.设计动机一次关掉四个可选组件。在 16×16 的网格上配饰会占用大量像素因此纯面孔在小尺寸下可读性更好。options{ hatProbability: 0, glassesProbability: 0, beardProbability: 0, accessoriesProbability: 0 }把四个概率选项全部压到0意味着每张头像都只保留发型、面孔与上衣这些核心部件去掉了帽子、眼镜、胡子与配饰四个随机维度。2. Sepia棕褐摘要Brown throughout, skin and clothes included.设计动机八个颜色组全部移动到同一条暖色渐变上。刻意保留肤色组是为了避免“单色头像中间嵌一张自然肤色面孔”这种比什么都不做更糟的效果。options{ backgroundColor: [e7d5b8], skinColor: [c9a678, b08d5f, 8f6d43, 6d5031], hairColor: [4a3018, 3a2916, 5c4223, 7d6038, a08256], clothingColor: [8a6a3c, 6d5031, a88b60, 5a4227], eyesColor: [4a3018], mouthColor: [9c7147], glassesColor: [3a2916], hatColor: [5c4223], accessoriesColor: [b0946a] }覆盖了全部九个颜色组背景、皮肤、头发、衣服、眼睛、嘴巴、眼镜、帽子与配饰全部取自深棕到浅麦色的暖色区间。3. Greyscale灰度摘要No hue on any of the eight groups.设计动机适用于打印样式表、禁用状态或任何“颜色本身承载语义”的场景。像素画在灰度下依然成立因为其辨识度来自形状而非调色板。options{ backgroundColor: [e4e4e7], skinColor: [d4d4d8, b4b4bb, 94949c, 6e6e76], hairColor: [18181b, 3f3f46, 71717a, a1a1aa], clothingColor: [52525b, 3f3f46, 71717a, 27272a], eyesColor: [27272a], mouthColor: [8a8a92], glassesColor: [18181b], hatColor: [3f3f46], accessoriesColor: [a1a1aa] }注意摘要写的是“八个颜色组”不含背景组即此预设同样控制了背景之外的八个组件组用不同灰度阶替换了全部彩色。4. Duotone双色摘要One blue, one cream, nothing else.设计动机整个头像只用两种颜色。一排这样的头像读起来像“同一套”只有发型和表情能区分彼此。options{ backgroundColor: [0f2d4a], skinColor: [9ec9e8], hairColor: [0f2d4a], clothingColor: [1c4f7c], eyesColor: [0f2d4a], mouthColor: [6ba5cc], glassesColor: [0f2d4a], hatColor: [1c4f7c], accessoriesColor: [9ec9e8] }深藏蓝0f2d4a与奶油蓝9ec9e8构成双色体系背景、头发、眼睛、眼镜为深蓝皮肤与配饰为浅蓝衣服与帽子取中间过渡的1c4f7c。5. Muted柔色调摘要Dusty clothes and hair, skin untouched.设计动机该风格默认会给所有人穿上 12 种饱和色衣服并在发型里包含青柠绿与邮筒红这类高饱和发色。此预设把衣服与头发全部移到安静的浊色适合“一屏同时展示 30 个头像”的表格场景皮肤则保留自己的调色板。options{ clothingColor: [6b705c, a5a58d, b98b73, 7c9082, 8e9aaf, 9c6b58, 8a7f6d], hairColor: [4a4238, 6b5a48, 8a7a64, a3937c, 5f6357, 7b6a58], mouthColor: [a8756b, 9c6f66, b08278] }这是“只动三组、其余放给 seed”的典型代表只固定衣服7 色、头发6 色与嘴巴3 色。6. Electric电光摘要Clothes past anything the style ships.设计动机只把“衣服”这一组推向极端。若衣服与头发同时高饱和会互相抵消因此头发保留原厂调色板不动。options{ clothingColor: [ff2e88, 00e5ff, 7cff00, ffe600, ff6a00, b400ff] }洋红、青、绿、黄、橙、紫六种满饱和色仅作用于衣服。与 “Muted” 形成同一组选项的“另一端”。7. Pastel Wall粉彩墙摘要A soft ground behind the sprite.设计动机该风格默认不画背景头像直接落在身后任意内容上。六个浅色让头像拥有自己的底衬瓦片又不会抢走面孔的注意力。options{ backgroundColor: [b6e3f4, c0aede, d1d4f9, ffd5dc, ffdfbf, d9f2d9] }天蓝、淡紫、淡蓝紫、淡粉、淡杏、淡绿六种柔和底色仅设置backgroundColor一个选项。8. Bold Pop高饱和底摘要Six backgrounds at full strength.设计动机像素精灵小巧且高对比在饱和底衬上依然立得住不会被吞没。options{ backgroundColor: [ff2e63, 00c2a8, ffb300, 3d5afe, 8e24aa, 00e676] }六个满饱和背景色与 “Pastel Wall” 构成背景强度的两级。9. Night Shift夜班摘要Near-black ground, pale hair and clothes.设计动机面向深色界面。头发与衣服移到浅色因为该风格默认的深棕与藏蓝在深色瓦片上会“消失”。options{ backgroundColor: [16161a], hairColor: [e4e4e7, cab188, a78961, 9fb8d9], clothingColor: [e2e8f0, cbd5e1, 94a3b8, a5b4fc] }近黑底色16161a配米白、浅棕、浅蓝灰的发色与灰蓝系衣服专为暗色主题设计。10. Sunrise日出摘要A warm gradient behind the sprite.设计动机演示渐变色背景选项两个色标、linear线性填充与固定角度。两个色标都保持浅色使精灵的深色轮廓保持锐利边缘。options{ backgroundColor: [ffd5a8, ff9db4], backgroundColorFill: linear, backgroundColorAngle: 45 }这是 Pixel Art 预设中唯一展示“渐变背景三件套”的预设backgroundColor提供两个色标backgroundColorFill指定填充方式为linearbackgroundColorAngle指定渐变角度为 45°。预设数据与渲染机制从 JSON 到画廊页面数据加载按风格的懒加载所有预设 JSON 位于apps/docs/.vitepress/theme/presets/*.json由 presets.ts 通过import.meta.glob一次性注册再按风格名懒加载for (const [path, load] of Object.entries( import.meta.globPresetFile(../presets/*.json, { import: default }), )) { loaders.set(path.slice(path.lastIndexOf(/) 1, -.json.length), load); } export async function loadStylePresets(styleName: string): PromiseStylePreset[] { const load loaders.get(styleName); return load ? (await load()).presets : []; }注释中解释了为什么刻意使用懒加载若把所有 55 个预设文件内联进一个 chunk会生成约 214 KB 的公共代码块每个风格页都会为了用其中一份数据而把它全部拉下来。改为按风格分包后Vite 为每个风格生成独立 chunk页面只取自己需要的那个。注意loadStylePresets对“没有预设的风格”返回空数组而不抛错——因为大多数风格目前还没有预设这是正常状态。页面渲染统一 seed 便于横向对比SitePresetsPage.vue 负责预设画廊页的渲染。关键设计有两点每一行复用相同的 3 个 seed取自getPreviewRowSeeds(slug).slice(0, 3)这样不同预设可以在同一批面孔上直接对比见 SitePresetsPage.vue页面标题会动态计算预设数量如 “Ten Pixel Art starting points”侧栏只展示 4 个精选预设在列表中按步长均匀取样featured保证颜色有变化每个预设行是一个SitePresetRow点击后弹出StylePresetDialog内含全 seed 行、设计动机、选项数量、剩余组合数与九种语言的代码面板。校验机制让“冻结”的预设不腐烂预设是冻结的选项集因此会静默“腐烂”风格改名或删除一个组件后预设里残留的nameVariant选项不再匹配任何组件而组件只是不再出现——文档构建本身不会察觉。为此仓库提供了 validate-presets.ts可用node scripts/validate-presets.ts运行其校验逻辑validatePreset包括字段完整性id/name/summary/description必须是非空字符串id必须是 kebab-case 且不得重复选项合法性每个选项键必须存在于该风格的OptionsDescriptor中枚举型选项如组件变体的值必须仍是该风格支持的取值真实渲染用PROBE_SEEDSFelix、Aneka、Milo、Luna、Dara、Erik对每个预设实际执行new Avatar(style, { seed, ...preset.options }).toString()——这与库运行时走的是同一条选项校验与解析管线因此“无法满足的颜色约束”或“超范围取值”会在文档构建期暴露而不是等到用户浏览器里才报错空头像检测渲染结果若不含use即概率或变体选项把所有组件都移除掉了会被判为“渲染出空头像”HTTP-API 一致性警告使用ColorOrder选项或idRandomization/fontFamily/fontWeight/title这类会被 HTTP API 静默丢弃的选项时给出警告。只有通过了上述全部校验预设才会出现在文档画廊中。常见应用场景建议小尺寸展示列表、表格、评论头像优先选 “Bare”——配件在 16×16 网格上消耗太多像素打印 / 禁用态 / 颜色已承载语义的界面选 “Greyscale”深色主题选 “Night Shift”把近黑默认发色换成浅色需要整组视觉统一如账号体系、机器占位选 “Duotone” 或 “Muted”想给头像一个自己的底选 “Pastel Wall” 或 “Bold Pop”需要渐变背景时参考 “Sunrise” 的backgroundColorFillbackgroundColorAngle组合。每个预设都是可继续调优的起点打开 Playground?stylepixel-artpresetid、查看九种语言的代码标签页或直接阅读 pixel-art.json 这个纯 JSON 数据源都是推荐的进阶路径。赞分享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组件后端终极Sunshine游戏串流指南5分钟打造跨平台私人游戏云终极Sunshine游戏串流指南5分钟打造跨平台私人游戏云 Sunshine是一款开源自托管的游戏串流服务器让你能将高性能电脑的游戏画面和操作实时传输到任何UI组件后端DiceBear Glass 风格预设Presets九套即用配色方案的完整解析与工程化机制DiceBear Glass 风格预设Presets九套即用配色方案的完整解析与工程化机制 Glass 是 DiceBear 中一种以平滑色彩渐变加柔和玻UI组件后端上一篇Logster多输出配置同时向Graphite、Ganglia、CloudWatch发送指标下一篇表单安全双保险jQuery Validation Plugin与移动端云安全集成方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
