[Tool] AI Skill That Generates Complete SquareLine Studio Projects to export as LVGL Widget Trees

My projects
1

Hi everyone,

I’ve been working on a skill for Claude Code / Antigravity or Cursor etc which can generate entire SquareLine Studio project files (.spj) — from the AI console where you just describe the UI you want to sketch out.

I’ve tried to keep it simple, instead of manually configuring every widget’s properties, layout, and event bindings, you describe the interface you need and the tool constructs the correct LVGL widget hierarchy with all the right property values, style nodes, and event templates to open in SLS and then refine. The output is a standard SLS project folder that you open in the desktop IDE to refine and export C or MicroPython code.

What it generates

The tool understands the LVGL widget model and generates correct SLS property trees for 20+ widget types:

  • Container widgets: Panel/Container, Screen, TabView, TabPage, Tile, TileView
  • Display widgets: Label, Arc, Bar, Spinner, Image, LED, Line, Chart
  • Input widgets: Slider, Dropdown, Roller, Switch, Checkbox, Spinbox, Colorwheel (v8)
  • Interactive widgets: Button, Textarea, Keyboard, Calendar, List

Each widget includes its required Style_* part nodes (Main, Scrollbar, Indicator, Knob, etc.), correct nid tracking, and unique GUIDs. Missing style nodes cause NullReferenceException in SLS — the builder handles this automatically.

Layout support

Flex and Grid layouts are fully supported:

  • LayoutType: 1 (FLEX) with flow direction, wrap, main/cross/track alignment
  • LayoutType: 2 (GRID) with column/row definitions
  • Per-widget sizing flags (flags: 17 for fixed, flags: 51 for content-fit)

One of the non-obvious format details: the OBJECT/Layout_type strval is always "No_layout" even when FLEX is active — the actual layout type lives in the numeric LayoutType field. The tool handles these quirks so the generated output is identical to what SLS would produce.

LVGL v8 and v9

Both major versions are supported:

  • v8.3.x — including COLORWHEEL (removed in v9)
  • v9.x — 9.1, 9.2, 9.3, 9.5
  • CONTAINER is the v9 name for PANEL (both work in SLS)
  • Board-specific LVGL version is indexed from .slb board packs

The tool indexes board definitions directly from the user’s local SLS installation to match the correct supported_lvgl_version, so the generated code export always targets the right LVGL API.

Events and navigation

Screen transitions, button callbacks, and value-changed handlers are generated with the correct dual-template format that SLS uses:

  • Call — MicroPython template with <{Screen_to}> placeholders
  • CallC — C template with matching placeholders

This ensures the exported code works correctly in both C and MicroPython output modes.

How it works

It’s a “skill” (structured instruction set) for AI coding agents — works with Claude Code, Google Antigravity, Cursor, or any AI coding harness that supports skills. The skill includes:

  • 54K format specification documenting the .spj JSON schema
  • Per-widget property catalogues
  • A Python widget builder API (handles GUID generation, nid tracking, style part nodes)
  • A project validator (GUID uniqueness, nidcnt consistency, structural checks)
  • Board search script that indexes installed .slb files in-place

Hardware

Works with any SLS-supported board — CrowPanel, MaTouch, M5Stack Dial/Core2/Tab5, Arduino TFT_eSPI, ESP32-S3 dev kits, NXP i.MX, and the SDL desktop simulator.

Issues / Feedback

The skill knows how to raise issues on the skill repo so just tell the skill what you think the problem is and your agent should be able to file the issue directly for me to take a look at.

Links

I’d love to get any feedback from anyone who’s worked AI coding tools and Squareline studio to generate LVGL widget trees. The format has some interesting quirks (gradient colours use [R, G, B] with no alpha while backgrounds use [R, G, B, A], TABPAGE uses its own property prefix instead of OBJECT/, etc.) and I’m sure there are edge cases I haven’t hit yet.

Anyone else doing programmatic LVGL UI generation? I’ve seen discussions about feeding wireframes to Claude/ChatGPT for initial code generation, and I’ve been using this skill alongside the new Claude Design tools. This takes it a step further by generating the structured SLS project file rather than just the raw C code.

Matt

2

Hey,

Thanks for sharing! Right now I’m working on a SquareLine to LVGL XML converter. It’s almost pixel perfect now.

Why don’t you generate XML instead for LVGL Pro? It’s so much easier to write and now it has a free community licence too.

3

Hi, @kisvegabor ! Are you saying the XML generator is free for open source projects? Where is the documentation on the free part of this tool? Thanks in advance.

4

So there are 2 licences to consider:

  • Licence of the XML format: the current wording really doesn’t cover this use case. Our intention was to prevent XML based editors to be created, but as long as your generated XML is loaded into LVGL Pro, it should be all good, and we are very happy about it. I’l discuss it internally.
  • Editor licence: now it’s free for community/open-source projects
5

Thanks for replying, @kisvegabor . I appreciate the active communication you guys dump into this project.

Obviously I don’t understand the licensing as I’m surprised that you’re encouraging an open source tool for XML generation outside LVGL Pro.

Now I’m confused on what the license really means, and how your suggestion avoids violating the license.

6

Hi Kis,

Very interesting to see what you are doing with the XML format. I ended up building a new skill from scratch after researching the XML format in depth. It fills broadly the same space as the skill mentioned above but targets LVGL Pro as output. I haven’t had time to test it as much, so offer it here as is.

It can certainly create a working design as a starting point from free text descriptions or even a current code base or design document, using your AI agent, that can be loaded into LVGL Pro and edited and refined to then export the full design.

I also documented all my findings of the xml document format that you could check over gained from the public documentation and samples.

Let me know how you find it, and file issues on the repo if you have suggestions or bugs.

Hope that’s useful!

Matt

7

Very good! So happy to see it!

A few comments that might help:

  1. I published the schema of the widgets HERE. Looking into these Agents will know exactly which properties exist
  2. We are thinking about making the CLI tool available in the Community tier too. It’d mean that agents can not only validate, but also screenshot screens, and iterate on them. See here
  3. I’ve added an AGENTS.md file to all new project templates, so Agents have basic idea what this XML format it.
  4. We have an MCP server for our docs. It’s for human but on all our docs pages there is an Ask AI button which seems to work very well.

On the licencing: It’s not forgotten. We are thinking about the best approach to make LVGL Pro as accessible for the community as possible.