企业官网建设流程全解析

• UI组件
• 后端

导读：Patchwork 是 DiceBear 10.5.0 起新增的抽象图案风格，把传统拼布艺术（quilt）中的风车（pinwheel）、飞鹅（flying geese）、栅栏（rail fence）等经典块型搬进头像生成器。本文以仓库中的 Patchwork 风格文档 与 预设数据 为主线，讲清楚它的生成原理、HTTP API 与 JavaScript 两种接入方式、核心渲染选项、三个专有色组，以及 8 个官方预设的完整配置。读完后你可以直接用一行 URL 或几行 JS 代码生成 Patchwork 头像，并基于预设继续调出自己的配色。

Patchwork 是什么：一张可编程的拼布被

DiceBear 官方对 Patchwork 风格的定义只有一句话，却点出了它最核心的三个特征：

A quilt laid from traditional blocks such as pinwheel, flying geese and rail fence. Each avatar repeats two of the eighteen blocks as diagonal twins, so every quilt comes out point symmetric.

拆开来看：

• 传统块型（traditional blocks）：图案由拼布界经典块型拼成，文档明确点名的有pinwheel（风车）、flying geese（飞鹅）、rail fence（栅栏）三种。
• 十八个块（eighteen blocks）：整个风格的可选块共有 18 个，上述三个只是其中被点名举例的代表。
• 对角线孪生（diagonal twins）：每一张头像不是随机堆满 18 个块，而是从 18 个块中选取 2 个，沿对角线成对重复排列。
• 点对称（point symmetric）：由于两个块沿对角线互为镜像/配对，最终生成的 quilt 呈现中心对称（点对称）的几何美感——这正是 Patchwork 与 DiceBear 其他抽象风格（如 Shapes、Triangles）在视觉上的最大差异：每个头像都自带对称秩序。

这一设计也解释了为什么 Patchwork 在官方描述中被定位为 "free quilt pattern avatar generator"：它不需要手绘角色、不需要五官，只靠拼布块的排列与配色就产出风格统一又变化无穷的图案。官方文档同时明确，Patchwork 头像可以通过DiceBear 的 HTTP API或JavaScript 库两种方式创建。

快速上手：两种官方接入方式

官方在文档配置 usageSnippets.ts 中为每个风格统一生成了 HTTP API 与各语言 SDK 的示例代码，Patchwork 也不例外。

方式一：HTTP API（零安装）

Patchwork 风格的 HTTP API 端点为（URL 中的10.x即当前主版本线，见 HTTP API 集成文档）：

https://api.dicebear.com/10.x/patchwork/svg?seed=patchwork-demo

• 10.x：DiceBear 当前 major 版本占位符，请求时替换为具体版本；
• patchwork：风格名，kebab-case 写法；
• ?seed=patchwork-demo：种子字符串，决定本次生成的具体图案。同一个 seed 永远生成同一张头像，这是 DiceBear 所有风格的确定性（deterministic）基础；
• 返回image/svg+xml。如需 PNG/JPEG，可搭配官方转换服务（参见 Converter 相关说明）。

其余所有渲染选项都可以继续以 query 参数追加在 URL 后面（下文会讲选项清单），例如把背景钉成米色：&backgroundColor=e3d2b4。

方式二：JavaScript 库

先安装核心库与样式包（安装命令同样来自 usageSnippets.ts）：

npm install @dicebear/core @dicebear/styles --save

然后生成 Patchwork 头像：

import { Style, Avatar } from '@dicebear/core'; import definition from '@dicebear/styles/patchwork.json' with { type: 'json' }; const style = new Style(definition); const avatar = new Avatar(style, { seed: 'patchwork-demo', // ... 更多选项见下文 }); const svg = avatar.toString();

关键点说明：

• @dicebear/styles/patchwork.json是 Patchwork 风格的定义文件，遵循 定义 schema 参考 中描述的结构（meta、canvas、components、colors等顶层字段），核心渲染逻辑全部由@dicebear/core承担；
• new Avatar(style, options)的第二个参数就是全部渲染选项；avatar.toString()输出 SVG 字符串，可继续交给转换器处理；
• 除了 JavaScript，仓库还提供 PHP、Python、Rust、Go、Dart、C# 的 core 移植（见 src 目录），选项语义完全一致，只是语法不同。

方式三：Playground / 预设微调

Patchwork 预设页 明确给出了预设的定位："A preset is an ordinary set of render options. Pick one, read its code or open it in the Playground and keep tuning."即预设只是普通渲染选项集合，你可以直接复制预设的 options 到代码里，或者在 Playground 中打开预设后继续拖拽调整。

核心渲染选项：控制构图与画布

Patchwork 同样支持 DiceBear 全风格共用的核心选项，完整规范见 核心选项参考。对拼布图案风格而言，最常用的是以下几类：

从源码侧印证，scale的取值区间定义在 OptionsDescriptor.ts 中：

scale: { type: 'range', min: 0, max: 10 }, borderRadius: { type: 'range', min: 0, max: 50 },

range类型意味着既可以传单个固定值，也可以传[min, max]二元组——此时 PRNG 在区间内采样，让每次生成的头像在同一条"允许范围"内仍保持变化。核心实现见 Options.ts 的scale()等访问器。

三个专有色组：fabricA / fabricB / fabricC

Patchwork 最特别的地方在于它的专有颜色组。官方预设数据 patchwork.json 显示，每个预设都会设置四个键：

• backgroundColor：画布背景色；
• fabricAColor：织物 A 的颜色；
• fabricBColor：织物 B 的颜色；
• fabricCColor：织物 C 的颜色。

也就是说，Patchwork 的拼布画面由三种"面料"色 + 背景色构成。这三个fabric*Color属于 DiceBear 的动态颜色选项模式（核心选项参考 中定义的{color}Color系列）：每个颜色组既可以传单个 hex，也可以传 hex 数组（如"fabricAColor": ["ff2e88", "ff6a00"]），渲染时从数组中随机抽取。

针对颜色组还衍生出一组高级选项，同样对 Patchwork 生效：

例如想要面料 A 走垂直渐变，只需传fabricAColorFill: 'linear'、fabricAColorAngle: 90。背景色同样有backgroundColorFill、backgroundColorFillStops、backgroundColorAngle、backgroundColorOrder四个配套选项。

内置预设全解析：8 套开箱配色

预设数据文件 patchwork.json 完整收录了 8 个官方预设。每个预设都带id、name、summary、description和options五个字段，下面把每个预设的 options 原样展开并给出解读。

Sepia（怀旧棕）

Three browns for the quilt.

{ "backgroundColor": ["e3d2b4"], "fabricAColor": ["8a6a48"], "fabricBColor": ["6b4f35"], "fabricCColor": ["a3855f"] }

三种面料取一条暖色阶梯，背景纸色偏棕黄。官方描述说它"读起来像几十年前拍摄的旧照片"（reads like a quilt photographed decades ago），适合复古、年代感主题。

Greyscale（灰阶）

Three greys, no hue at all.

{ "backgroundColor": ["ececee"], "fabricAColor": ["5e5e62"], "fabricBColor": ["343437"], "fabricCColor": ["8c8c90"] }

三种灰、零色调。官方点评：块几何本身足够承载画面，使 Patchwork 成为少数几个"灰阶化几乎不损失效果"的风格——这正是它点对称排列的构图优势。

Duotone（同色相三阶蓝）

Three steps of one indigo.

{ "backgroundColor": ["dfe3f5"], "fabricAColor": ["9aa2d2"], "fabricBColor": ["3d4272"], "fabricCColor": ["6a71a8"] }

背景与三种面料使用同一种靛蓝色相、不同明度，形成典型的 duotone 双色/单色系视觉，非常适合需要克制、统一调性的产品界面。

Muted（哑光亚麻）

Dusty fabrics on unbleached cloth.

{ "backgroundColor": ["e8e4dc"], "fabricAColor": ["9c6b58", "b98b73"], "fabricBColor": ["6b705c", "7c9082"], "fabricCColor": ["a5a58d", "8e9aaf"] }

官方说明风格默认自带"浓烈的红、绿、金"，而 Muted 用灰哑色调替换它们，把 quilt 从民间艺术推向亚麻织物质感。注意这里每个色组都是双色数组，渲染时会随机二选一，进一步放大变化。

Electric（酸性霓虹）

Acid fabrics on near black.

{ "backgroundColor": ["101216"], "fabricAColor": ["ff2e88", "ff6a00"], "fabricBColor": ["00e5ff", "7cff00"], "fabricCColor": ["ffe600", "b400ff"] }

与 Muted 恰好相反：把色彩推到风格默认调色板之外的酸性霓虹，配近黑背景，让 quilt 像被点亮一样（reads as lit）。适合潮酷、游戏、夜店风场景。

Pastel Wall（粉彩墙）

Soft fabrics throughout.

{ "backgroundColor": ["fdf6ec"], "fabricAColor": ["ffc9d6", "ffd9b0"], "fabricBColor": ["bfe3d0", "b8d8f0"], "fabricCColor": ["ffeaa8", "e0d4f5"] }

整体降至粉彩，官方点名适合育婴室或引导页（onboarding screen）——比默认的民间配色更温和。

Bold Pop（大胆纯色）

Primary colors, no shading.

{ "backgroundColor": ["fdf6ec"], "fabricAColor": ["e63946"], "fabricBColor": ["1d3557"], "fabricCColor": ["f4a261"] }

三个纯原色、没有任何中间色。官方评价：块几何足够强，撑得起这种直白的调色板（The block geometry is strong enough to carry a palette this blunt）。

Close Up（特写缩放）

Scaled in on a couple of blocks.

{ "scale": 1.6 }

唯一一个不动颜色的预设——只把scale设为1.6。官方解释：两个大块在头像尺寸下比一整块小方块拼布更易读。它是"用构图而非配色做文章"的典型示范，也验证了scale选项（0～10，默认 1）的实际效果。

预设机制：没被钉死的选项交给 seed

预设文档特别强调了一点："Options a preset leaves alone keep varying with the seed"——预设没有设置的选项会继续随 seed 变化。这带来两个实际含义：

1. 上述预设只钉住了颜色和（可选地）缩放，块型选择（18 个块中选哪 2 个、如何作为对角线孪生排列）完全留给 seed 决定；
2. 因此官方预设页会在每行标注"这个预设还能生成多少个不同头像"（distinct avatars）——把 seed 可贡献的剩余变化量量化出来。具体数值由 render-presets.ts 与 sync-preset-pages.ts 等脚本在文档构建期渲染校验得出，仓库内不做硬编码。

从数据结构看，预设就是"选项子集 + 元信息"：id作为唯一标识、name用于展示、summary/description用于文档文案、options直接就是可以原样喂给Avatar或 HTTP API 的渲染选项。因此把预设搬进自己的代码，本质上就是复制这几个键值对：

const avatar = new Avatar(style, { seed: 'my-quilt', backgroundColor: ['e3d2b4'], fabricAColor: ['8a6a48'], fabricBColor: ['6b4f35'], fabricCColor: ['a3855f'], });

版本与源码佐证

• 引入版本：根据 CHANGELOG.md，patchwork与cutouts、line-face一同在@dicebear/styles10.5.0发布中新增，将风格总数从 52 提升到 55；
• 风格注册：所有风格都通过@dicebear/styles/{style}.json定义文件暴露（JavaScript 核心的加载方式见 usageSnippets.ts），编辑器同样以new Style(definition)的方式加载定义（见 apps/editor/src/config/styles.ts 的createStyle辅助函数）；
• 选项约束：scale、rotate、borderRadius等数值选项的合法区间与range语义定义在 OptionsDescriptor.ts，取值访问器在 Options.ts，渲染时由核心渲染器统一处理（Renderer.ts）。

小结

Patchwork 是 DiceBear 里"以几何秩序换通用性"的代表风格：18 个传统拼布块、两两对角配对、点对称构图，让每张头像既有拼布手作的温度，又保持像素级的秩序感。上手路径极短——HTTP API 一条 URL，或@dicebear/core+@dicebear/styles几行代码；想快速出效果，直接复用仓库中 8 个官方预设 的 options，再通过scale、三个fabric*Color色组和背景选项继续微调，就能在几分钟内得到一批风格统一、细节各异的拼布头像。

• UI组件
• 后端