Convert full-screen or multi-section SVG design files into Jetpack Compose UI code. Use when a user wants an SVG mockup, artboard, landing page, mobile screen, dashboard, or exported design screen turned into Compose layout code with inferred structure such as Box/Row/Column, spacing, typography, cards, buttons, and vector/image fallbacks for purely decorative regions.
Turn a whole SVG design into Compose UI, not just vector paths. Infer semantic layout where possible, preserve visual hierarchy, and use vector or image fallback only for parts that are too decorative or too ambiguous to represent cleanly as normal Compose layout.
Produce screen-level Compose code that a developer can continue editing. Prefer maintainable UI structure over blindly translating every SVG node into an unreadable wall of drawing instructions.
Do not translate the whole screen into one giant custom drawing unless the user explicitly wants a pure visual clone. Default to editable Compose UI.
Try to infer these from geometry, grouping, repeated styles, alignment, spacing, and text placement:
Use normal Compose layout first:
Box for overlapping layersColumn for vertically stacked groupsRow for horizontal groupsLazyColumn / LazyRow when the design clearly represents repeated scrollable itemsText, Button, Icon, Image, Card, Divider, SpacerTreat elements as belonging together when they have combinations of:
When 3 or more sibling regions share nearly identical geometry and structure, prefer a reusable item composable rather than duplicating code.
Example output direction:
DashboardCard(...)MenuRow(...)FeatureItem(...)For such regions, say clearly that the output uses a fallback asset and identify where the fallback belongs in the Compose hierarchy.
Always return:
When exact semantic reconstruction is weak, use this descending preference order:
Assume the SVG is a fixed design reference, then map it into a Compose layout that can still stretch reasonably.
BoxUse this structure:
Summarize the screen in plain language.
Return the main screen composable and extracted children.
List any pieces that should stay vector/image based.
List limitations and likely manual fixes.
If the user says:
Convert this exported mobile screen SVG into Compose UIThen try to infer:
Return a full screen composable with extracted reusable child composables.
If the user says:
Turn this dashboard artboard into Jetpack ComposeThen identify:
If the chart is just decorative SVG, keep it as an asset placeholder and reconstruct the surrounding dashboard layout in Compose.
If the user says:
Convert this landing page SVG to ComposeReconstruct the broad layout and call-to-action sections semantically, but preserve complex hero illustrations as vector/image fallback where necessary.
references/inference-guide.md for heuristics on turning SVG geometry into Compose layout.references/screen-structure-schema.md for the normalized JSON intermediate representation.scripts/analyze_svg_screen.py for a quick structural summary of an SVG file before generating code.scripts/export_screen_structure.py to export a normalized screen-structure JSON file.scripts/generate_compose_screen.py to produce starter screen-level Compose code directly from simpler exported SVG layouts.scripts/generate_compose_from_structure.py to generate Compose from the normalized JSON structure.svg-to-compose skill is a good companion.When asked to convert a screen SVG, prefer this sequence:
scripts/analyze_svg_screen.py on the SVG.scripts/export_screen_structure.py to produce a normalized JSON intermediate file whenever the task is more than trivial.scripts/generate_compose_screen.py for direct SVG-to-starter-code generation, orscripts/generate_compose_from_structure.py for the cleaner JSON-to-Compose path.svg-to-compose skill for those pieces.Use this when the user wants a reusable machine-readable structure for the screen.
Example:
python3 scripts/export_screen_structure.py screen.svg --out screen-structure.json
The JSON should be treated as an intermediate representation for inspection, debugging, and downstream Compose generation.
Generate Compose from that JSON with:
python3 scripts/generate_compose_from_structure.py screen-structure.json --out GeneratedScreen.kt
scripts/generate_compose_screen.py is intentionally a starter generator, not a full fidelity compiler. It currently works best when the SVG is an exported screen with clear:
It is weaker when the SVG is heavily flattened, outline-based, or illustration-dominant. In those cases, use mixed reconstruction: semantic Compose for the obvious parts and vector/image fallback for the rest.