STM32 UI Designer：一个开源的嵌入式 LCD 界面可视化设计工具（自动生成 C 代码）

在电脑上拖拖拽拽设计界面，一键生成可直接编译进 STM32 工程的 C 代码与字库文件------告别手敲坐标的日子。

一、为什么需要这个工具？

做过 STM32 + LCD 项目的同学应该都经历过这样的痛苦：

界面布局全靠手写坐标，改一个字号，后面所有元素的位置都要重新算
汉字字库要自己取模，换一句话就得重新生成一大堆数组
想画个虚线分割线、放个电池图标，都得手写位图数据
界面效果要烧录到板子上才能看到，调试效率极低

STM32 UI Designer 就是为了解决这些问题而生的：它是一个基于 Electron 的可视化界面设计工具，你在电脑上所见即所得地设计 UI，点击"生成代码"，就能得到可以直接加入 Keil/CubeIDE 工程的 .c/.h 文件。

GitHub 地址：GitHub - shuaishuaichennick/stm32-ui-designer: STM32/嵌入式LCD UI 布局设计工具 (Electron) · GitHub

二、工具概览

表格

项目	说明
类型	桌面应用
技术栈	Electron + 原生 Canvas 渲染（无第三方 UI 库）
平台	主要在 Windows 上开发测试，macOS 理论可自行编译
代码生成	纯函数生成 C 代码，无运行时依赖
开源协议	见仓库

下载方式

从 GitHub 右侧 Releases 页面下载：

STM32 UI Designer 1.0.0.exe ------ 便携版，免安装，双击即用
STM32 UI Designer Setup 1.0.0.exe ------ 安装版（NSIS 安装程序，可选安装目录、创建桌面快捷方式）

不想下载源码直接用的，选便携版最省事。

三、核心功能

1. 多屏幕设计

屏幕 1 / 2 / 3... 同时并排预览，每个屏幕可以有独立的尺寸、背景色、色彩模式。做多个页面的 UI（比如主界面 + 设置页 + 菜单页）时特别方便。

2. 丰富的元素类型

文本：支持汉字 + ASCII，内置 10 种字号（8 / 12 / 16 / 24 / 28 / 32 / 40 / 48 / 60 / 72）
图标：内置 30+ 个常用图标------电池、WiFi、USB、蓝牙、信号、喇叭、设置......状态栏元素一步到位
矩形：填充 / 边框两种模式
线条：实线 / 虚线 / 点线 / 点划线 / 分割线，支持任意角度
图片：导入 PNG / JPG / BMP / GIF，可选单色或 RGB565 输出，可锁定比例缩放

3. 色彩模式

支持 RGB565 / RGB888 两种色彩模式，RGB565 是绝大多数 TFT LCD（如 ST7789、ILI9341）的标准格式。

4. 对齐与分布 + 图层管理

左/中/右、上/中/下对齐，水平/垂直均匀分布
图层可拖拽排序、可隐藏
设计器该有的体验都有

5. 其他实用功能

取色工具：全屏取色（自动隐藏窗口截屏取色）或调用系统吸色器
撤销 / 重做 ：Ctrl+Z / Ctrl+Y

四、生成的代码

点击"生成代码"，输出 4 类文件，直接加入 STM32 工程即可编译：

表格

文件	内容
`font_ui.h`	全部字库（ASCII 95 字、汉字 UTF-8 索引位图）与图标数据，均为 `static const`
`ui_lcd.c`	LCD 绘制函数实现：`LCD_ShowChar` / `LCD_ShowString` / `LCD_ShowChinese{字号}` / `LCD_ShowLine` / `LCD_ShowPicture` / `LCD_ShowRectangles`
`ui_screen1.c` ...	每个屏幕的布局代码（`ui_draw_screen()`）

对接你的 BSP

工具生成的代码只依赖两个底层函数（由你的 BSP/驱动层提供）：

复制代码

uint16_t LCD_DrawPoint(uint16_t x, uint16_t y, uint16_t color);
void LCD_Fill(uint16_t xsta, uint16_t ysta, uint16_t xend, uint16_t yend, uint16_t color);

也就是说，无论你用的是 ST7789、ILI9341 还是其他屏幕，只要实现了画点和填充，就能直接使用生成的代码。

中文字库的巧妙处理

汉字索引直接使用 UTF-8 编码 （Index[4]），只要源码文件以 UTF-8 保存，就能正确匹配显示中文，不需要 GB2312 转码的额外处理。

五、快速开始

直接使用

下载 Release 中的 exe，双击运行即可。

从源码运行 / 自行编译

需要 Node.js 环境：

复制代码

git clone https://github.com/shuaishuaichennick/stm32-ui-designer.git
cd stm32-ui-designer
npm install
npm start        # 开发运行
npm run dist     # 打包便携版 + 安装版，输出到 release/
npm run pack     # 仅生成免安装解压目录 release/win-unpacked/

打包产物：

release/STM32 UI Designer 1.0.0.exe（便携版）
release/STM32 UI Designer Setup 1.0.0.exe（安装版）
release/win-unpacked/（绿色解压版）

六、典型工作流

在工具中新建屏幕，设置分辨率（如 240×320）和色彩模式（RGB565）
拖放文本、图标、线条、矩形等元素，利用对齐工具排版
用取色器从设计稿中吸取颜色
点击"生成代码"，得到 font_ui.h、ui_lcd.c、ui_screenN.c
将文件复制进 STM32 工程，确保 BSP 提供 LCD_DrawPoint 和 LCD_Fill
在主循环或任务中调用 ui_draw_screen() 即可渲染界面

七、总结

STM32 UI Designer 的定位非常清晰：它不是 LVGL 那样的大型 GUI 框架，而是面向裸机/简单固件 + 直接操作 LCD 的项目的轻量级布局工具。核心价值在于：

✅ 可视化设计，所见即所得
✅ 字库自动生成，汉字用 UTF-8 索引
✅ 生成纯 C 代码，只依赖两个底层函数，移植性极强
✅ 便携版免安装，开箱即用

如果你的项目正在用 ST7789 / ILI9341 这类屏幕手写界面代码，强烈建议试一试，能省下大量调坐标、做字库的时间。

实际效果：【UI设计软件-哔哩哔哩】 https://b23.tv/X8lYxrY

觉得有用的话，去 GitHub 给个 ⭐ Star 支持一下作者吧：

GitHub - shuaishuaichennick/stm32-ui-designer: STM32/嵌入式LCD UI 布局设计工具 (Electron) · GitHub

如果你在使用中遇到问题，或者有功能建议，欢迎在仓库提 Issue。