自己设计：设计器

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

大家用它做什么

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

使用方法

开始：第一次打开以及点新建时，会显示各种起点模板。每一个都是普通的设计，上面没有任何东西是固定不变的。如果当前设计还有没保存的修改，选择新模板之前会先问你。

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

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

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

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

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

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

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

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

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

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

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

按键
⌘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 是文件夹的可见边缘，平铺视图会给它着色，它永远不会成为图标的一部分。

保存

保存时，会以 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}：以 PNG data URL 表示的各个图层，以及文件夹各部分的位置（画布单位）
composer_save	原始请求体，头部为 {name, tags, shape, design, replaces}	{skin, replaced}：保存的皮肤，以及被它替换的设计的 ID
composer_preview	原始请求体，头部为 {shape, sizes}	各个尺寸的图标（16 到 512，最多六个），以 data URL 表示
composer_image	path	{url, width, height, name, alpha}：一个图片文件，最大 2048 px，有透明度时为 PNG，没有则为 JPEG
composer_skin_image	skinId	同上，但针对已保存皮肤自身的图片
composer_design	skinId	设计文档，如果皮肤不是在这里做的则为 null

设计文档

{ "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 的图片会被丢弃。
• 来自更新版本的文档会被拒绝，以免读错。

值得了解的限制

• 表情来自系统的 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，由 cargo run -p folderskin-tools -- composer-layers --out docs/images/composer 生成。folderskin-tools 中有一个测试会检查它们与合成器绘制的像素是否一致，所以它们不会过时。

测试

folderskin-core 合成器	叠加的图层与保存的图标一致，设计会落在绘制时的位置，透明的设计只留下纸张和边缘，轮廓线贴合可见的边缘
src-tauri 存储	设计文档保存在图标旁边，重启后仍在，删除时一并删除，崩溃后留下的孤立文档会被清理。覆盖保存设计时保留它的位置，并拒绝覆盖不是设计的皮肤
src-tauri 设计器	请求体的分帧、图片检查、预览、保存、命名、损坏的文档、各种图片编码，以及以原始字节经由 Tauri 自己的 IPC（它的 mock runtime）发送的设计能被正确预览和保存
前端（vitest）	设计文档的修改与读回、撤销、移动、调整大小、旋转与吸附、文字排版与弯曲、形状、颜色、图片调整、模板、请求体的分帧