81823650800wzy-sketch

Lvgl UI Designer — Design skill for Claude Code

Design community

LVGL UI Designer Skill for Claude Code - 设计单片机界面的 Claude Code 技能.

How to install Lvgl UI Designer

This entry records only its repository, not the path inside it, so there is no exact command to give. Open 81823650800wzy-sketch/lvgl-ui-designer and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Lvgl UI Designer does

LVGL UI Designer Skill for Claude Code - 设计单片机界面的 Claude Code 技能.

Alternatives in Design

Designer Skills — Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, i 2.3k ★
Canvas Designer — Use the @canvas-designer agent for UI/UX design and implementation: $ARGUMENTS 523 ★
Bmad Agent Bmm UX Designer — ux-designer agent 98 ★

README

LVGL UI Designer Skill

LVGL 单片机界面设计技能，用于生成嵌入式设备的 GUI 代码。

功能特性

🎨 多平台支持 - ESP32、STM32、Arduino、Raspberry Pi Pico
🖥️ 多显示屏 - ST7789、ILI9341、ILI9488、SSD1963 等
🎯 LVGL 8/9 - 支持新旧版本 API
🎨 预设主题 - Catppuccin、Dracula、Nord 等流行配色
📦 组件库 - 卡片、仪表盘、图表、状态指示器等可复用组件

使用方式

在 Claude Code 中使用

# 设计一个温度显示界面
lvgl-ui-designer design "温度显示界面，带仪表盘和数值显示" --platform esp32 --display 240x240

# 生成完整项目
lvgl-ui-designer template esp32-st7789 --output ~/projects/my-dashboard

# 创建自定义组件
lvgl-ui-designer widget "带图标的卡片组件" --style dark

命令参考

命令	说明	示例
`design`	根据描述生成 UI 代码	`design "设置菜单"`
`generate`	生成完整项目代码	`generate --platform esp32`
`template`	使用预设模板创建项目	`template esp32-st7789`
`widget`	创建可复用组件	`widget "进度条"`
`style`	生成样式代码	`style "暗色主题"`
`animation`	创建动画效果	`animation "滑入动画"`

参数选项

参数	说明	可选值
`--platform`	目标平台	`esp32`, `stm32`, `arduino`, `pico`
`--display`	显示屏分辨率	`240x240`, `320x240`, `480x320`, `800x480`
`--lvgl-version`	LVGL 版本	`8`, `9` (默认)
`--theme`	配色主题	`catppuccin`, `dracula`, `nord`, `default`
`--input`	输入方式	`touch`, `encoder`, `buttons`

文件结构

lvgl-ui-designer/
├── SKILL.md                      # 技能定义文件
├── README.md                     # 本文件
├── templates/
│   ├── esp32-st7789/            # ESP32 + ST7789 模板
│   │   ├── main.c
│   │   ├── CMakeLists.txt
│   │   └── main/
│   ├── stm32-spi/               # STM32 + SPI LCD 模板
│   │   ├── main.c
│   │   ├── ili9341.c
│   │   └── ili9341.h
│   └── components/              # 可复用组件
│       ├── dashboard-widgets.h
│       ├── dashboard-widgets.c
│       └── color-themes.h
└── scripts/
    └── generate-project.sh      # 项目生成脚本

代码示例

基本按钮

lv_obj_t *btn = lv_button_create(lv_screen_active());
lv_obj_set_size(btn, 120, 40);
lv_obj_center(btn);

lv_obj_t *label = lv_label_create(btn);
lv_label_set_text(label, "Cli