MIT开源项目 · 在 GitHub 查看

在浏览器里
设计一整套键帽

选配列、调配色、放贴图,实时 3D 预览,一键导出 PNG、SVG、JSON 与生产治具。无需注册,设计只保存在你的浏览器里。

设计器需要在桌面浏览器中使用

EscF1F2F3F4F5F6F7F8F9F10F11F12Delete~`!1@2#3$4%5^6&7*8(9)0_-+=BackspaceHomeTabQWERTYUIOP{[}]|\PgUpCapsASDFGHJKL:;"'EnterPgDnShiftZXCVBNM<,>.?/Shift↑CtrlWinAltSpaceAltFn←↓→

按下你的键盘试试

种固定配列
9
种导出格式
5
实时预览
3D
账号与后端依赖
0

工作流程

从空白配列到生产文件,只需四步

所有操作都在浏览器本地完成,不需要安装软件,也不需要上传设计。

  1. 选择配列

    从 60% 到带增补区的 144 键,9 种 ANSI 固定配列开箱即用。

    ansi-60 … ansi-108-kit

  2. 设计键帽

    逐颗或批量设置颜色、文字和字体,把图片拖进画板做整板贴图。

    颜色 · 字体 · 贴图 · 图层

  3. 3D 预览

    在 3D 键盘上检查效果,旋转、缩放,调节材质与灯光。

    旋转 · 缩放 · 材质 · 灯光

  4. 导出文件

    导出 PNG、SVG、设计 JSON 与治具 SVG,交给厂商或留作备份。

    PNG · SVG · JSON · JIG

功能

做一套键帽需要的,都在这里

从单颗键帽的字重,到整板贴图和生产治具,编辑器覆盖了客制化键帽设计的完整流程。

实时 3D 预览

每一次改色、换字、贴图都会同步到 3D 键盘。旋转、缩放、切换材质与灯光,满意后直接导出效果图。

3D 键盘预览界面

一键导出

PNG、SVG(文字转曲)、设计 JSON、3D 效果图和生产治具,全部在浏览器本地生成。

逐颗定制

文字、字体、字重、纯色或渐变、边框、内边距与对齐,每一颗键帽都能单独设置。

框选批量编辑

框选或多选一组按键,一次统一修改样式,整套配色几分钟就能铺好。

内置与本地字体

内置十余款字体,也能临时加载本地 TTF / OTF。字体只存在内存中,不会上传。

完整撤销历史

当前会话里的每一步都能撤销和重做,放心尝试。

画布贴图与图层

把图片拖进画板,自由缩放和旋转,跨越多颗键帽。图片与键帽分层管理,随时调整层级和可见性。

带整板贴图的键盘设计

配列

9 种配列,开箱即用

每种配列都由仓库里的 JSON 定义,下面的键盘就是直接用这些数据渲染的。

打开设计器挑选配列
EscF1F2F3F4F5F6F7F8F9F10F11F12Delete~`!1@2#3$4%5^6&7*8(9)0_-+=BackspaceHomeTabQWERTYUIOP{[}]|\PgUpCapsASDFGHJKL:;"'EnterPgDnShiftZXCVBNM<,>.?/Shift↑CtrlWinAltSpaceAltFn←↓→

开源

代码、模型和数据,全部公开

键盘设计器以 MIT 许可证开源。编辑器源码、键帽与外壳 3D 模型、配列数据和治具模板都在仓库里,可以自由研究、修改和部署。

MIT 许可证

可以自由使用、修改和再分发。第三方字体与模型以各自的许可为准。

纯前端,没有后端

没有账号、数据库或云存储,导出也在浏览器本地完成。

  • Next.js 16
  • React 19
  • Tailwind CSS 4
  • Three.js
  • Zustand
  • opentype.js

可下载的资产

标准键帽与外壳 GLB、Blender 源文件、配列 JSON、治具模板和内置字体。

参与贡献

发现问题或有新想法?欢迎提交 Issue 或 Pull Request。

FAQ

常见问题

没找到答案?可以在 GitHub 上提交 Issue。

需要付费或注册吗?

不需要。键盘设计器完全免费,并以 MIT 许可证开源。没有账号系统,打开网页即可使用全部功能。

支持哪些键盘配列?

目前内置 9 种 ANSI 固定配列:60%(61 键)、65%(68 键)、75%(80 键)、75% 加长(84 键)、TKL(87 键)、1800(99 键)、104 键、108 键,以及带增补键帽区的 108(144 键)。暂不支持自由编辑配列。

可以导出哪些文件?

2D 画板可以导出 PNG、SVG(文字已转曲)和设计 JSON,3D 预览可以导出效果图 PNG,另外还能导出生产用的治具 SVG。暂不提供 STEP、STL、GLB 等 3D / CAD 文件。

设计保存在哪里?

只保存在当前浏览器标签页里,不会上传到任何服务器。刷新或关闭页面会丢失未导出的修改,请及时导出 JSON,之后可以重新导入继续编辑。

导出的文件能直接用于生产吗?

治具 SVG 是面向生产的文件,每颗键帽都已按治具位置排好;PNG 和 SVG 更适合作为设计稿和效果参考。下单前请与厂商确认色彩、尺寸和文件规范。

3D 预览能做什么?

实时查看键帽和外壳的整体效果,支持旋转、缩放和平移,可以调节材质与灯光,并导出 3D 效果图。

可以在手机上使用吗?

首页可以浏览,但设计器是为桌面端设计的,需要 768px 以上的屏幕,建议使用电脑浏览器。

可以下载项目用到的模型等资产吗?

可以。项目资产页列出了仓库里的 3D 模型、Blender 源文件、配列、治具、字体、纹理和媒体素材,并提供对应的 GitHub 下载入口。

开始设计

现在就设计你的第一套键帽

打开即用,不需要注册,也不需要安装任何软件。

打开设计器需要桌面浏览器(768px 以上)