🍎 English → UI

Compile plain English UI descriptions into declarative, production-ready SwiftUI code for iOS, macOS, watchOS, and tvOS.

Three-Stage Pipeline

The engine operates as a three-stage compiler: (1) Intent Parsing via LLM to extract components and hierarchy, (2) IR Generation to produce a language-agnostic JSON blueprint, and (3) SwiftUI Code Generation that deterministically emits clean Swift from the IR.

Supported Layout Containers
English TermSwiftUI View
"vertical stack", "column"VStack
"horizontal stack", "row"HStack
"depth stack", "Z-stack"ZStack
"grid"LazyVGrid / Grid
"form"Form
"list"List
"scroll view"ScrollView
"tab view"TabView
Data Binding

The engine recognizes phrases like "bound to the 'username' state variable" and maps them to a binding key in the IR, which the code generator translates into a @State variable and a $ binding in the SwiftUI view.

Supported Modifiers

Font size/weight, foreground/background colors, corner radius, shadow, padding, frame dimensions, opacity, clip shapes (Circle, RoundedRectangle), and overlay/background gradients.

API Connections

The engine can generate @ObservableObject view models that call REST APIs using URLSession. Specify the endpoint in English and the generator produces the async/await networking code and binds the response to the view.

Examples
English Input
"Create a vertical stack with a large "Welcome!" title at the top and a blue "Get Started" button below it."
Data Columns
FieldTypeValue / DefaultModifier
titleText"Welcome!".font(.largeTitle)
buttonButton"Get Started".background(.blue)
layoutVStackcenterspacing: 20
Generated OutputSwift
import SwiftUI

struct WelcomeView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 20) {
            Text("Welcome!")
                .font(.largeTitle)
                .fontWeight(.bold)

            Button(action: { /* getStartedTapped */ }) {
                Text("Get Started")
                    .foregroundColor(.white)
                    .padding(.horizontal, 24)
                    .padding(.vertical, 12)
            }
            .background(Color.blue)
            .cornerRadius(10)
        }
        .padding()
    }
}