跳到主要内容
特性
安全
皮肤开发
下载
下载
皮肤开发

会写网页,就会做皮肤

不需要学新框架。HTML + CSS + JS,加一个 skin.json,就是一款能跑在 Windows 桌面上的皮肤。

my-skin/
my-skin/
├─ skin.json # 皮肤清单
├─ index.html # 你的网页
└─ assets/ # 随便放
VIBE CODING

你出想法,AI 写皮肤

Vibe coding 时代,人人都是创作者。不用先学会写代码——把想法说清楚,AI 就能替你写出一款能跑在桌面上的皮肤。

第一步 · 先发开发文档

让 AI 先认识 Driftlet

先让 AI 了解 Driftlet 的皮肤格式——把仓库里的《皮肤开发指南》发过去当上下文:skin.json 字段、权限声明、自适应要求都在里面。之后再聊想法,生成的皮肤一次到位。

在 GitHub 查看指南

第二步 · 复制一条提示词,接着聊

半透明时钟

做一个圆形时钟皮肤:深海蓝渐变表盘、白色指针,带一根细秒针;数字用等宽字体,整点刻度加粗;整体 80% 不透明度,带毛玻璃质感。

天气卡片

做一个天气卡片皮肤:圆角毛玻璃卡片,海洋配色;左边大号温度,右边天气图标和城市名,底部一行小字显示湿度和风速;城市名可以自定义。

桌面待办

做一个桌面待办皮肤:极简纯白卡片,任务前是圆形勾选框,勾选后文字变灰加删除线并自动沉到底部;顶部输入框回车添加任务;数据存本地,重开不丢。

从一句话到桌面皮肤

01

描述想法

文档打底之后,把想要的样子、颜色、功能讲给 AI 听,上面任何一条提示词都能直接用。

02

存成皮肤文件夹

把 AI 给的 skin.json 和 index.html 放进一个文件夹——或让 AI 直接帮你改文件。

03

边存边看

开发模式下保存即重载,哪里不满意就把截图和想法丢回给 AI 继续调。

04

打包分享

pack-skin.exe 一键产出 .dskin,发给朋友双击即装。

皮肤结构

一款皮肤的全部

skin.json

声明名称、版本、入口、权限与设置项——一份文件说清皮肤是什么、需要什么。

index.html

普通的网页,随意用你爱的框架或原生 JS。桌面就是它的浏览器。

window.__DESK_PP__ _

Driftlet 注入的桥对象,皮肤通过它安全地调用已授权的系统能力。

配置清单

一个 skin.json,讲清所有事

skin.json
{
"name": "海上时钟",
"version": "1.0.0",
"author": "you",
"entry": "index.html",
"window": { "width": 320, "height": 180, "transparent": true }
}
基础 权限 设置

这一页讲了什么

名称、入口、窗口尺寸——皮肤的骨架。

只声明你真正需要的权限,用户安装时会逐条看到。

19 种控件类型可选,Driftlet 自动生成配置面板并实时推送值。

系统桥接

一座桥,连通网页与系统

皮肤里调用 window.__DESK_PP__,即可使用已获授权的系统能力——剪贴板、文件沙箱、Shell……所有调用都受权限模型约束。

权限如何声明?看看安全模型
bridge.js
// 读取剪贴板
const text = await window.__DESK_PP__.clipboard.readText();
// 写入沙箱文件
await window.__DESK_PP__.file.write("cache.json", data);
开发流程

从文件夹到分享,只要四步

1

建文件夹

skin.json + index.html,就够了。

2

保存即重载

文件保存后皮肤自动重载(300ms 防抖),所见即所得。

3

pack-skin.exe 打包

免安装的独立小工具,一键产出 .dskin。

4

分享出去

拿到 .dskin 的人双击即装,后续更新也不会丢他们的设置。

你的第一个皮肤,十分钟就好

克隆仓库,跟着 README 跑起来。