zhoushoujianwork

Lvgl Preview Skill — Design skill for Claude Code

Design community

Claude Code skill: design embedded LVGL (MicroPython) UIs with a headless render→PNG feedback loop.

How to install Lvgl Preview Skill

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

What Lvgl Preview Skill does

Claude Code skill: design embedded LVGL (MicroPython) UIs with a headless render→PNG feedback loop. Auto-adapts LVGL 8.x/9.x. Validated on K230 CanMV.

Alternatives in Design

Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Design Dna — Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visu 624 ★

README

lvgl-preview

A **Claude Code skill** for designing embedded **LVGL** (MicroPython) UIs with a tight visual feedback loop: write a `build(scr)` function, render it headless to a PNG on your computer, and have the agent *read the image* to confirm the result — no device, no browser, no flashing. Edit, render, look, iterate in seconds.

Auto-adapts to **LVGL 8.x and 9.x** (fonts / `line` / `qrcode` / display binding branch on version), so the same `build(scr)` runs on a v8 desktop preview *and* a v9 device like the **K230 CanMV**.

![K230 access-control UI, 7 screens rendered on real hardware](examples/k230-access-control-7screens.png)

The gallery above is the K230 vision-gate access-control UI (standby / detecting / extracting / success / failure / binding / sleep) — designed entirely through this skill's desktop preview, then deployed pixel-faithfully to the real ST7701 panel.

Why

Iterating on an embedded LCD UI normally means flash → look at the panel → repeat, which is slow and invisible to an AI agent. This skill renders the **LVGL widget tree** through a headless `lv_micropython` (SDL unix port) straight to a PNG, so:

Edit → render → read PNG → iterate in seconds, no hardware in the loop.
An AI agent can see its own UI and self-correct.
The exact same UI code ships to the device (only display init changes).

Install

Clone once, then `install.sh` **symlinks** the repo into your Claude Code skills dir — so you develop in this one repo and every project picks up edits live (no copy, no re-sync):

git clone https://github.com/zhoushoujianwork/lvgl-preview-skill.git
cd lvgl-preview-skill
./install.sh                      # -> ~/.claude/skills/lvgl-preview (all projects)
./install.sh --project /path/app  # -> /.claude/skills/lvgl-preview (one project)
./install.sh --uninstall          # remove the link

The skill triggers on phrases like "lvgl preview", "渲染 LVGL", "embedded UI preview".