自己设计：设计器

侧边栏里的自己设计是一块画布，让你亲手做一款皮肤，简单到一种纯色，复杂到层层叠叠的设计都可以。它完全离线工作。你设计的作品和其他皮肤一样保存在我的皮肤里，保存并应用会直接把它用到你选中的文件夹上。

大家用它做什么

你想要	从这里开始	然后
一种颜色的文件夹，什么颜色都行	颜色或素色	点击文件夹，选择颜色。取色器支持任意颜色，还能调透明度
带文字标签的文件夹：“菜谱”“笔记 2026”	文字标签	输入文字，选择字体、字重和颜色。字越少，在小尺寸下越清楚
一眼就能看出里面装着什么的文件夹	表情	双击表情即可替换，或者在选择器里用英文关键词搜索（dog、plane、receipt）
页签上的文字	页签文字	“位置”里的页签按钮可以把任意图层放到页签上
前后两块面板颜色不同	双色	分界线藏在纸张后面
透明的文件夹	玻璃或有色玻璃	降低背景的不透明度，或者直接删掉背景，得到一个全透明的文件夹：只留下纸张和边缘
带花纹的文件夹	条纹、格纹、波点	花纹里还有十种，从条纹到彩纸屑和胶片颗粒
带说明文字的照片	照片	会先让你选一张图片，之后还可以拖入或粘贴更多
贴纸、徽章，任何不是文件夹形状的东西	贴纸	自由图标会让设计本身成为整个图标
你自己设计的驱动器：外置磁盘上写着“备份”，U 盘上放一张照片	从驱动器开始下的驱动器，或者带标签的驱动器、彩色驱动器、表情驱动器或照片驱动器	设计放在驱动器的正面。画布下方的菜单可以把它换到另一个驱动器上
配色由你决定的驱动器：红色的 U 盘、没有标签的磁盘	任意驱动器	点击驱动器的某个部件（外壳、接口、正面），给它换个颜色、隐藏它或者移除它
页签颜色不一样的文件夹，或者没有纸张的文件夹	任意文件夹	文件夹的页签、后面板、纸张和前面板都在图层列表里，排在设计自己的图层下面
旋转、移动或缩放过的文件夹或驱动器	任意文件夹或驱动器	拖动文件夹或驱动器即可移动，拖动一个角可以缩放，拖动上方的控制点可以旋转。设计会跟着一起动
在已有的皮肤上加点自己的创意	皮肤的 ⋯ 菜单 → 在设计器中再创作	这款皮肤会变成一个图片图层，供你在上面继续创作
修改以前设计的作品	它的 ⋯ 菜单 → 编辑设计	保存修改会原地更新，另存为新皮肤则会两个都保留

使用方法

开始：第一次打开以及点新建时，会显示各种起点模板。每一个都是普通的设计，上面没有任何东西是固定不变的。如果当前设计还有没保存的修改，选择新模板之前会先问你。从空白开始里，除了空白的起点，还有 Mac、Windows 和 Linux 各自的文件夹。从驱动器开始里有各系统显示的每一种驱动器，Mac、Windows 和 Linux 的各占一行，完整列表见 DRIVES.md（英文）。如果在文件夹面板里选中了驱动器，你选择的驱动器会排在最前面，并显示这个驱动器自己的名字。驱动器模板会从这个驱动器开始，或者从上一个设计所在的驱动器开始，再不然就从这个系统自己的外置磁盘开始。

添加：文件夹上方的工具栏可以添加文字、表情、形状（共十三种，从圆角矩形到对话气泡）、图片（一个文件、你的某款皮肤，或者直接拖入、粘贴到文件夹上的图片）、花纹和颜色（选中背景，没有背景时则添加一个）。

排列：点击一个图层即可选中它。选中的图层会着色高亮，四角和四边出现控制点，上方还有一个用来旋转的圆形控制点。

• 拖动即可移动。它会自动吸附到文件夹的中心、页签、文件夹边缘和其他图层上，按住 ⌘（Ctrl）可以自由放置。
• 拖动角或边可以调整大小。拖动图片的角会保持比例，拖动边则会裁切。文字和表情始终保持比例。
• 按住 ⇧ 可以按 15° 的步长旋转，或者保持形状的比例。按住 ⌥ 可以从中心调整大小。
• 双击文字可以编辑，双击表情可以替换。
• 点击文件夹本身可以选中它的背景。如果点在没有显示设计的地方，选中的就是你点到的那个文件夹或驱动器部件。

图层：右上角的列表显示图层的堆叠顺序，最上层排在最前面。拖动一行可以调整顺序，双击名称可以重命名，眼睛、锁和垃圾桶图标分别用来隐藏图层、锁定位置和删除图层。标题栏末尾的全部删除会清空设计，随后弹出的提示可以把它们全部恢复，和按 ⌘Z 的效果一样。和每一行一样，标题栏上的按钮也只在鼠标指向时才显示。

文件夹和驱动器的部件：在图层列表里，设计自己的图层下面，设计所在的文件夹或驱动器会单独列成一组。Mac 文件夹有前面板、纸张、后面板和页签，Windows 和 Linux 的文件夹没有纸张。驱动器则列出它的各个部件，比如 U 盘有正面、外壳、接口孔和接口。在列表里选中一个部件，或者在画布上点击它，它就会着色高亮：

• 颜色可以给它单独换一个颜色，同时保留它的明暗：不管换成什么颜色，受光的边缘都会比其他地方亮。原来的颜色让它恢复本来的颜色。在显示设计的部件上（文件夹的页签、后面板和前面板，驱动器的正面），这个颜色会代替设计在那里的背景颜色和花纹，文字、图片和图标仍然在上面。
• 调低不透明度，后面的东西就会透出来。关掉显示在图标上（也就是列表里的眼睛图标），就能隐藏它。
• 垃圾桶图标或 Delete 键会把它从图标和列表中移除。在这一组所在的那一行里，可以找回移除的部件，和按 ⌘Z 的效果一样。

驱动器的正面是一张印着设计的标签：隐藏它，设计仍然留在原处，印在驱动器的外壳上。文件夹的面板本身就印着设计：隐藏页签，页签上的设计也会跟着消失。

选中整个文件夹或驱动器时，它的周围会出现一个带自己控制点的框：在它上面任意位置拖动即可移动（靠近起始位置时会自动吸回原位），拖动一个角可以缩放，拖动上方的控制点可以旋转（按住 ⇧ 时每次转 15°）。设置里的整个驱动器或整个文件夹中有它的旋转和大小，还有回到原位和重置，用方向键也可以微移它。它上面的一切都会跟着一起动：设计的图层是放在文件夹或驱动器上的，而不是放在画布上。

图层和设置都可以通过各自的标题栏展开或收起，拖动它们之间的分隔条可以给图层区域多留或少留一些空间（双击分隔条可恢复原位，选中它时也可以用方向键移动）。它们最后的状态会记在这台电脑上。

设置：图层列表下方是所选图层的全部设置，标题栏上显示图层名称，还有调整顺序、创建副本和删除的按钮：

• 文字：字体、字重、对齐方式、斜体、大写、字号、字间距、行高和弯曲（拱形或微笑弧）。
• 颜色：纯色、线性渐变或径向渐变，最多四种颜色，支持透明度，还有现成的渐变预设。
• 形状：圆角、角数或边数，以及星形的凹陷深度或圆环的内孔大小。
• 图片：亮度、对比度、色彩、色相、模糊、黑白、怀旧、反相和圆角。
• 所有图层：不透明度，以及十六种混合模式之一。
• 可放置的图层还有阴影（点改为发光可以做出霓虹效果）和贴纸描边，也就是像模切贴纸那样沿着轮廓走的一圈边框。

没有选中任何图层时，设置里可以选择贴在文件夹上或自由图标。

在驱动器上：驱动器上的设计覆盖它的正面，也就是驱动器的前面、存储卡的标签，或者光盘从中心到边缘的部分。驱动器的其余部分（底座、接口、光盘中间的孔）会画在正面的周围和上面，设计里透明的地方会露出驱动器自己的正面。这时画布下方的开关会显示为驱动器骨架，旁边有一个列出所有驱动器的菜单，可以把设计换到另一个驱动器上，每个图层都会保持它在正面上的位置，并适应新的正面。新加的文字和形状会用在正面上看得清的颜色：浅色的正面用深色，彩色的正面用白色。文字也绝不会比正面宽，所以在 U 盘窄窄的标签上，文字一开始就比较小。驱动器没有页签，所以不能把图层放到页签上。保存之后，驱动器上的设计就是一款驱动器皮肤，选中驱动器时，皮肤库会把它排在最前面。

预览：画布下方的文件夹骨架开关可以让设计显示在文件夹上（带页签、纸张和边缘），或者平铺显示，并在上面叠画文件夹的边缘，让你看清哪些部分会被文件夹挡住。对于自由图标，它会在背后显示一个淡淡的文件夹，方便对照大小。旁边的四个圆点可以把设计放到窗口、浅色桌面、深色桌面或彩色壁纸上查看，这对任何透明的设计都很重要。右侧按真实尺寸（64、32 和 16 点）显示的图标，能让你看到它在 Finder 或文件资源管理器中的实际效果。

保存：右上角的名称就是皮肤的名称，留空时会用设计里的前几个词来命名。保存到我的皮肤会把它存进皮肤库，保存并应用还会同时把它用到选中的文件夹上。保存之后，设计仍然保持打开，可以继续修改：保存修改会原地更新同一款皮肤，另存为新皮肤则会再添加一款。还没保存的设计，在你切换到应用的其他地方时会一直保留，而且会存在这台电脑上，直到保存或被替换为止。

目标文件夹下方的包括里面的 N 个文件夹，就是文件夹面板里的包括子文件夹开关：在任意一处打开，两处都会同时打开。打开后，保存并应用会把设计用到这个文件夹及其中的所有文件夹上，超过十个时会先问你。按钮会显示处理进度，旁边有停止，结束时会弹出提示说明结果：中途停止的，可以点继续。有些文件夹没能修改的，可以点查看是哪些，打开文件夹面板的汇总。处理途中离开设计器也没关系，它会在后台继续，侧边栏底部会显示进度。

在文件夹面板里用选择挑过里面的文件夹后，只有挑中的会一起应用，开关上也会写明：包括里面 28 个中选的 22 个。

按键
⌘Z / ⇧⌘Z	撤销、重做
Delete	删除所选图层，或者移除所选的文件夹或驱动器部件
⌘D	创建它的副本
⌘C，然后 ⌘V	复制它，再粘贴一份。剪贴板里有图片时，⌘V 会添加这张图片
方向键、⇧ 加方向键	把所选图层微移 1 或 10。选中整个文件夹或驱动器，或者它的某个部件时，微移的是整个文件夹或驱动器
⌘] / ⌘[	上移一层、下移一层（加 ⌥：置于顶层、置于底层）
Esc	取消选择
在图层列表中	↑ ↓ 选择，⌥↑ ⌥↓ 调整顺序，F2 重命名

工作原理

设计直接画在图标空间里

一个设计就是一块边长 1024 单位的正方形画布，和测量文件夹模板所用的画布完全相同（crates/folderskin-core/src/geometry.rs）。你放在某个位置的东西，就出现在文件夹上的同一个位置。和从文件添加的图案不同，这里既没有铺满缩放，也没有裁切（见 SKINS.md）。设计文档就是 src/composer/doc.ts 中的普通数据，每次修改都会生成一份新文档，撤销就是沿着这些文档一步步往回走（src/composer/history.ts）。

仍然只有一条渲染路径

WebView 只绘制用户自己的内容：文字、表情、形状、图片和花纹（src/composer/render.ts）。外面的文件夹来自 Rust 模板。composer_template 会以 2048 px 的母版尺寸渲染一次模板，并拆分成把设计夹在中间的几个图层（compositor::template_layers）：

top      前面板的轮廓高光，以及沿底边的阴影
design   以 front 为遮罩：前面板覆盖的区域
middle   后面板的轮廓高光、纸张及其高光
design   以 back 为遮罩：后面板覆盖的区域，含页签

画布区域每一帧都会把这四层叠起来（src/composer/composite.ts），开销很低，拖动时也足够流畅。保存的图标由 compositor::render_master_placed 生成，它用同样的辅助函数绘制同一个模板，两块面板都填入放在原位的设计。测试 the_layers_stacked_around_a_design_are_the_saved_icon 保证两者每个通道的差异不超过 3 级，所以画布上看到的就是最终写入的图标。第五个图层 outline 是文件夹的可见边缘，平铺视图会给它着色，它永远不会成为图标的一部分。

拆成部件的文件夹和驱动器

同一个模板还可以拆成许多块，每一块是一个部件，处在堆叠中的一个位置，这样画布就能只改动一个部件，其余的保持不变（src/composer/base.ts，以及 composite.ts 中的 drawBase）。每一块都裁到有像素的范围，并标明自己是什么：

• surface：显示设计的地方，白色，以覆盖的区域作为 alpha（文件夹的页签、后面板和前面板，驱动器的正面）。
• paint：部件本身的颜色，给部件换颜色时改的就是它。
• light：部件上的明暗，不管部件是什么颜色，明暗本身的颜色都不变。

文件夹的块来自 compositor::template_pieces_in：后面板覆盖的区域沿着主体的顶边切开，分成页签和后面板，中间部分逐个部件绘制（draw_middle_of：后面板的明暗、前面板投下的阴影、纸张），最后是前面板覆盖的区域和它的明暗。驱动器会标明它画的每样东西属于哪个部件（drive/draw.rs 中的 Drawing::part），drive::pieces 再把每个部件单独画出来，正面下面的和上面的都是这样。一个部件的绘制中间绝不会夹着另一个部件的绘制，every_drive_comes_apart_into_parts_that_stack_back_into_it 会对全部 25 种驱动器检查这一点，并检查这些块夹着设计叠起来后，与保存的驱动器相差不超过 3 级，就像 the_pieces_stacked_around_a_design_are_the_saved_icon 对文件夹所做的那样。什么都没改时，画布上显示的就是一直以来保存的那个图标。

换了颜色的部件，是把它的 paint 块逐像素移到那个颜色上：每个像素与新颜色的距离，等于它原先与部件本来颜色平均值的距离（按亮度算），所以明暗得以保留。frame 以文件夹或驱动器的中心为基准，移动、旋转和缩放整个堆叠，画布区域再通过它把指针位置反算回去，所以设计的图层会留在文件夹或驱动器上原来的位置。

只要文件夹或驱动器有任何改动，就只有画布能画出这个图标：保存时会以 2048 px 画出整个图标，带上 composed: true 发送，composer_save 会把它当作成品文件夹或驱动器保存（画布下方的预览也是这样画的）。什么都没改时，保存和以前一样。

保存

保存时，会以 2048 px 再绘制一次设计，编码为 PNG，然后在一个小小的 JSON 头之后以原始字节发送给 composer_save（[u32 LE header length][header][PNG]，见 src/composer/body.ts）。剩下的工作由 Rust 端的 src-tauri/src/composer.rs 完成：

• 贴在文件夹上：根据设计渲染出文件夹。
• 自由图标：直接把设计原样作为图标。完全透明的设计会被拒绝。
• 存储形式：成品文件夹（kind: "folder"，source: "composer"），所以无论是用到文件夹上、生成缩略图还是分享，都和其他成品文件夹一样。
• 设计文档：以 <stem>.design.json 的形式保存在图片旁边，编辑设计就是靠它重新打开设计的。
• ID：由设计的 PNG、设计文档和形状共同算出的 SHA-256。同一个设计保存两次，仍然只是一款皮肤。
• 保存修改：在一次索引写入中替换旧皮肤，并保留它在皮肤库中的位置。收藏也会转到新 ID 上。

再创作时，会用 composer_skin_image 读取皮肤自身的图片：

• 图案会变成一张铺满文件夹的图片。
• 成品文件夹会变成一个自由图标，图片完整放在里面，和 FolderSkin 把它用到文件夹上时一模一样。

命令

命令	输入	输出
composer_template	–	{size, back, front, middle, top, outline, parts, pieces}：以 PNG data URL 表示的各个图层、文件夹各部分的位置（画布单位），以及拆成部件的文件夹，每一块是 {part, role, rect, src}，其中 rect 以模板的像素为单位
composer_save	原始请求体，头部为 {name, tags, shape, design, replaces, composed}	{skin, replaced}：保存的皮肤，以及被它替换的设计的 ID。composed：图片就是整个图标，文件夹或驱动器都包括在内
composer_preview	原始请求体，头部为 {shape, sizes, composed}	各个尺寸的图标（16 到 512，最多六个），以 data URL 表示
composer_image	path	{url, width, height, name, alpha}：一个图片文件，最大 2048 px，有透明度时为 PNG，没有则为 JPEG
composer_skin_image	skinId	同上，但针对已保存皮肤自身的图片
composer_design	skinId	设计文档，如果皮肤不是在这里做的则为 null
composer_drive_template	drive	某个驱动器的各个图层，格式和文件夹的相同，也就是 composer_template 发送的那种：back 为空，middle 是什么都没放的驱动器，front 是它正面覆盖的区域，top 是盖在正面上的部分，parts 则把正面当作前面板（光盘还有 anchor，即新图层放置的位置），pieces 是拆成部件的驱动器
shapes	size	设计或图片可以使用的每一种形状，见下文

设计文档

{ "version": 1, "shape": "folder", "layers": [ { "kind": "fill", "paint": { "type": "solid", "color": "#3a86ff" }, "opacity": 1, "blend": "normal", "id": "…" } ] }

图层按从第一个到最后一个的顺序依次绘制：

• 覆盖整个画布：fill（颜色或渐变）和 pattern。
• 可放置的：text、emoji、shape 和 image。每个都有以画布单位表示的中心点 x, y、以度为单位的 rotation、翻转，以及可选的 shadow 和可选的贴纸描边 edge。
• 所有图层：opacity、blend，以及可选的 name、hidden 和 locked。

颜色格式为 #rrggbb，带透明度时为 #rrggbbaa。图片以 data URL 的形式保存在文档内部。从磁盘读取的文档会先经过 parseDoc 处理：

• 未知的图层会被丢弃，超过 64 个图层时只保留 64 个。
• 数值会被限制在合理范围内，颜色会被转成规范写法。
• 不是 PNG、JPEG、WebP 或 GIF data URL 的图片会被丢弃。
• 来自更新版本的文档会被拒绝，以免读错。

对文件夹或驱动器做过的修改记在 base 里，什么都没改时就省略：按 id 记下的各部件的修改，以及 frame。

"base": { "parts": { "case": { "color": "#e53935" }, "face": { "hidden": true }, "paper": { "removed": true, "opacity": 0.5 } },
          "frame": { "x": 0, "y": -20, "rotation": 30, "scale": 0.9 } }

设计换到另一个文件夹或驱动器上时，只要那里也有这个部件（比如驱动器的外壳、文件夹的页签），部件的修改就会保留。支持部件之前的 FolderSkin 也能打开这个设计，只是不带这些修改。

驱动器上的设计会写明是哪个驱动器，比如 "drive": "mac-external"，并且是 "version": 2，所以支持驱动器之前的 FolderSkin 会说它来自更新的版本，而不会把它当作文件夹上的设计打开。文件夹上的设计和自由图标仍然是版本 1，和以前完全一样，支持驱动器之前保存的每份文档也都照原样打开。如果设计写的是 FolderSkin 不会画的驱动器，就当作文件夹的设计来读取。

所有形状都在一份列表里

shapes（src-tauri/src/bases.rs，基于 folderskin_core::base::BASES）列出图片可以使用的每一种形状：三种文件夹、每一种驱动器，最后是 free，即不放在任何文件夹或驱动器上。设计器从这些形状开始设计，AI 生成界面在这些形状上作画，在文件夹面板里选中的驱动器也是其中之一。每一项都是普通的数据，不会随版本改变：

{ "id": "mac-external", "label": "Mac external drive", "system": "mac", "family": "drive",
  "whole": true, "kind": "external", "thumbnail": "data:image/png;base64,…" }

对于文件夹，id 是 mac-folder、windows-folder 或 linux-folder，对于驱动器，是驱动器自己的 ID（比如 mac-external、linux-solid-state），此外还有 free。窗口会用当前显示的语言，按 common.shapes.<id> 给每一项命名，按 common.shapeNotes.<id> 加一行说明，驱动器还会在所属系统旁边显示 common.driveNames.<id> 里的简称。thumbnail 是按请求的尺寸（16 到 512 px，不指定时为 96）画出的空白形状：文件夹是它本来的颜色，驱动器的正面上什么都没有，free 则没有缩略图。在 Rust 中，Base::bare(size) 画出的也是这些。

值得了解的限制

• 表情来自系统的 emoji 字体。在 macOS 上，这种字体是位图，大约 160 px 以内都很清晰，所以特别大的表情在 Finder 最大的几种图标尺寸下会略显模糊，而在 Finder 平常显示的各种尺寸下都很锐利。
• 字体按风格提供，每种风格对应一组 macOS、Windows 或 Linux 自带的字体，按优先顺序排列（src/composer/fonts.ts）。FolderSkin 只内置了 Manrope。其他已安装字体可以按名称使用任何已安装的字体族。设计是以像素保存的，所以字体只需要装在制作它的那台电脑上。
• 图片调整直接在像素上完成（src/composer/imagefx.ts），因为 macOS 12 的 WebView 不支持 canvas 滤镜。模糊效果由三次盒式模糊叠加而成，接近高斯模糊。
• 草稿保存在 WebView 的存储中，包含几张大图的设计可能会超出存储上限。即便如此，这样的草稿也会一直保留到应用退出。

浏览器预览

在普通浏览器中运行 pnpm dev 也能看到设计器。文件夹图层是 docs/images/composer/ 中的 PNG（Windows 的在 windows/ 里，Linux 的在 linux/ 里），由 cargo run -p folderskin-tools -- composer-layers --out docs/images/composer 生成。同一条命令还会以一半的尺寸把每个驱动器的图层写进 drives/<id>/，在 drives/parts.json 中记下每个驱动器正面的位置，并把每种文件夹和驱动器的空白形状写进 bases/，这些图片都是无损 WebP。每个文件夹和驱动器的图层旁边，还有把各块从上到下依次排好的 pieces.webp，以及写明每一块属于哪个部件、该放在哪里的 pieces.json。folderskin-tools 中有一个测试会检查它们与合成器绘制的像素是否一致，所以它们不会过时。WebView 的测试中也有一个，会检查 src/composer/drives.ts 放置内容的位置，是否正是 Rust 绘制的每个驱动器正面所在的位置。

测试

folderskin-core 合成器	叠加的图层与保存的图标一致，设计会落在绘制时的位置，透明的设计只留下纸张和边缘，轮廓线贴合可见的边缘。每种文件夹拆成的块夹着设计叠起来后与保存的图标一致，而且页签整个位于主体上方
folderskin-core 驱动器	每个驱动器的部件绘制时中间都不夹着别的部件，它拆成的块夹着设计叠起来后与保存的驱动器一致
src-tauri 存储	设计文档保存在图标旁边，重启后仍在，删除时一并删除，崩溃后留下的孤立文档会被清理。覆盖保存设计时保留它的位置，并拒绝覆盖不是设计的皮肤
src-tauri 设计器	请求体的分帧、图片检查、预览、保存、命名、损坏的文档、各种图片编码，以及以原始字节经由 Tauri 自己的 IPC（它的 mock runtime）发送的设计能被正确预览和保存
前端（vitest）	设计文档的修改与读回（包括部件的修改和 frame）、撤销、移动、调整大小、旋转与吸附、部件的顺序和 frame 的旋转、文字排版与弯曲、形状、颜色、图片调整、模板、请求体的分帧
e2e（e2e/parts.spec.ts）	U 盘的部件会列出来，能在画布上选中、换颜色、隐藏、移除再找回，并且能保存。整个 U 盘可以旋转、撤销、拖动，再回到原位。文件夹去掉纸张、给页签换颜色后，只有页签变色