在电脑上拖拖拽拽设计界面，一键生成可直接编译进 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。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/weixin_66724961/article/details/164333211
