SkillNewofficial publisher

Ling UI Design (Ming-Image)

Skill : A reusable method: instructions, procedures, sometimes scripts or templates

An agent skill that generates a visual UI mockup, splits it into layers, then uses those layers to write UI code and visually verify the result.

An interesting approach for code agents that produce plain interfaces: they start from a generated mockup instead of improvising. Suited only to those who can run a code agent and a model service; where data goes depends on the service chosen.

Official site GitHub · 222 ★ Docs

Overall score

6.4 /10

Security: one caveat, see the card

Utility

6.0

Reliability

10.0

Security

One caveat

Ease

Technical · Technical

Security reflects where data goes, requested permissions and incidents on record at the verification date. It is not a guarantee of zero risk: check the deployment mode and the connections you enable.

What it does, concretely

Code agents often produce functional but visually plain interfaces because they generate code without any visual reference to start from. Ling UI Design addresses this by giving the agent a generated mockup before it writes a single line of code.

In practice, the skill relies on two open-source 6-billion-parameter models: Ming-Image-0.1-Design generates an image of the interface from a text description, then Ming-Image-0.1-Design-Layer decomposes that image into independent transparent layers. The agent then uses those layers as a reference to write the UI code, and visually checks that the rendered result matches the mockup.

This tool is aimed at developers and technical teams running code agents who want more polished interfaces without drawing a mockup by hand. It requires a compatible model service and a configured Python environment.

It is not suited to people looking for a ready-to-use graphic tool or who are unfamiliar with setting up inference pipelines. Getting started requires a machine with a GPU of at least 80 GiB of memory to run the models locally.

What it offers

·Generation of a visual UI, infographic, or poster mockup from a text description.
·Decomposition of a flattened design image into independent, editable transparent layers.
·Automatic rewriting of a short description into a structured Figma-style prompt (JSON with coordinates, hierarchy, colours) via a VLM.
·Generation of images with an alpha channel (transparent background) by adding a specific prefix to the prompt.
·Visual verification of the UI code render by the agent after generation, comparing it against the reference visual.
·Companion skill for converting an image into an editable PowerPoint presentation (text and simple shapes converted to native elements).
·Models available on Hugging Face and ModelScope, with an online demo for each model.

Our tips

For better image generation results, use a structured Figma-style prompt (JSON with layers, normalised coordinates, hex colours) rather than plain natural language.
To generate an image with a transparent background, place one of the designated prefixes (for example 'RGBA, 4-channel, transparent background') at the very start of the prompt, without combining multiple prefixes.
For layer decomposition, first pass your rough layer plan through a VLM (Ling-3.0-flash-VL or qwen3.8-27B) to obtain a precise specification before running inference.
Resolution 1024 is recommended for layer decomposition; resolution 512 is faster when precision is not critical.
Use the --validate-only option to check the configuration and checkpoint contract without loading model weights, avoiding time-consuming errors.

Watch out

Running the models locally requires a GPU with at least 80 GiB of memory: this is beyond the reach of most consumer workstations.
The number of layers must be explicitly stated in the decomposition prompt; if this parameter is poorly worded, the model cannot infer it automatically.

In practice

Price: Free
Commercial use: Commercial use: yes
Available on: GitHub
Licence: MIT
FR interface: No

Security and data

Rating: Security: one caveat, see the card
Your data: Local or cloud depending on use
Maintenance: Active

Links and repository checked on 25 October 2026 · added on 29 September 2026

How to install Ling UI Design (Ming-Image)

1. Check that Python 3.10 or newer is installed and that a CUDA-capable GPU is available. 2. Clone the GitHub repository inclusionAI/Ming-Image and navigate to the folder. 3. Create a clean virtual environment, then install dependencies: pip install -r requirements.txt 4. Download model weights from Hugging Face or ModelScope, or provide the Hub repository ID in the inference command. 5. Consult the Ling UI Design skill README (ling-cookbook) to configure the code agent and associated model service. 6. Caution: if you use a third-party model service, your prompts and images leave your machine; prefer a local deployment if your data is sensitive.

pip install -r requirements.txt

Official documentation ↗

In the same category

Whole category Design & slides →