Turn a design into Flutter code, and Jetpack Compose too

By Lyxvo · Published October 29, 2026 · 4 min read

Designers hand over screens; developers rebuild them widget by widget. A design-to-code export can save days of that work if it produces clean, structured code instead of one giant file. This guide shows what Lyxvo AI's Flutter and Jetpack Compose UI kits contain, how to run them, and how to build on them.

Why "design to code" usually disappoints

Many design-to-code tools convert a picture into absolute positions: every box at an exact x and y. It looks right on one screen size and breaks on every other. The code has no reusable parts, so changing a button means changing it in thirty places.

Useful generated code looks like code a developer would write:

• a theme with the colours, fonts, spacing and radius as named tokens;
• reusable components (buttons, cards, list rows, top bar, bottom navigation) with parameters;
• one file per screen, built from those components with real layout widgets;
• navigation between screens;
• a project you can open and run.

That is the structure of the UI kits Lyxvo AI exports.

Step 1: design the app screens

Start with the screens. Open Lyxvo Design, pick App design, choose iOS or Android, and describe the app. The agent writes a page plan, then designs every screen in one design system. Press Present to click through the flow and fix what you see before you export; changes in the design are cheaper than changes in code.

If you are new to this part, follow how to design a mobile app with AI first.

Step 2: export the Flutter UI kit

Press Export and choose Flutter UI kit. Lyxvo writes the theme and the components first, then every screen, and finishes with a code review pass over the files. When it is done, the agent log says how many files the kit has.

The project looks like this:

Step 3: run it

You need the Flutter SDK installed. In the unzipped folder:

1. flutter create . --platforms=android,ios adds the platform folders.
2. flutter pub get installs the packages.
3. flutter run starts the app on an emulator or a connected phone.

The app opens on the first screen of your design, and the buttons that were linked in the prototype navigate between screens.

The Kotlin option: Jetpack Compose UI kit

Building a native Android app? Choose Jetpack Compose UI kit instead. You get an Android Studio project:

• ui/theme/: Color.kt, Type.kt, Shape.kt and Theme.kt with a LyxvoTheme composable;
• ui/components/: the reusable Lx components;
• ui/screens/: one composable per screen;
• MainActivity.kt: a NavHost with a route for every screen;
• Gradle files (Kotlin DSL), with compileSdk 35 and minSdk 24.

Open the folder in Android Studio (Ladybug or newer) and run the app configuration.

What the kit gives you, and what it doesn't

The kit is the UI layer: theme, components, screens and navigation. It is a strong start, but it is not a finished app. You still need to add:

• State and logic: what happens when a button is pressed, form validation, loading and error states;
• Data: API calls, a database or a back end, replacing the sample content from the design;
• Authentication and payments, if your app has them;
• Tests and accessibility checks for your target devices.

A good way to work: keep the generated theme and components as your design system, and replace the static content in each screen with your real data and state management (Provider, Riverpod, Bloc, or ViewModels in Compose).

Other ways to hand off the design

Not every team uses Flutter or Compose. The same Export menu has:

• .zip (HTML + DESIGN.md): every screen as HTML plus the design system as Markdown, useful for web developers or as a reference;
• View code on a single screen (right-click), or Code to clipboard for all screens;
• Copy to Figma or Figma (SVG + tokens) for designers who keep working in Figma, with tokens.json for Tokens Studio;
• Project brief (DESIGN.md): colours, typography and screens as Markdown, a quick brief for any developer.

The Flutter and Compose kits are part of the paid plans; see the pricing page for which plan includes them.

Tips for cleaner generated code

• Finish the design first. Ask for changes in the studio, then export once.
• Keep one design system. If every screen shares colours and components, the kit's components are reused instead of duplicated.
• Name screens clearly. "Class detail" becomes class_detail_screen.dart; "Page 4" becomes a file nobody can find.
• Use real content. Real labels make the widgets' parameters meaningful.

Try it

Design the screens, press Export, run three commands. Start with AI app design, and when the app needs an icon, use the app icon sizes checklist.