Can AI Build a Cross‑Platform “Lonely Frog” App in One Day with Kuikly?

Introduction

During the Qixi festival, the author felt lonely and decided to build a "Lonely Frog" app to keep company, using AI as a co‑programmer.

Kuikly Framework Overview

Kuikly is Tencent’s open‑source cross‑platform framework built on Kotlin Multiplatform (KMP). It enables a single Kotlin codebase to run on Android, iOS, HarmonyOS, Web, and mini‑programs.

Official resources:

Github repository: https://github.com/Tencent-TDS/KuiklyUI

Documentation: https://kuikly.tds.qq.com/Introduction/arch.html

Why choose Kuikly?

Kotlin language advantage: Low learning curve for Android developers.

Near‑native performance: Compiles to native code on each platform.

Strong cross‑platform capability: One codebase, five platforms.

Easy integration: Works with Tencent’s Shiply and Bugly toolchains.

Guiding AI to Generate Design Mockups

The author asked AI to produce a complete UI prototype for the app with a simple click‑to‑play‑sound and counter feature.

"You are a full‑stack engineer proficient in product planning and UI design. Generate a minimal app prototype where users tap a frog image to play a sound and increment a counter."

The AI produced high‑quality mockups, which the author slightly refined.

Development Environment Setup

The author installed Android Studio, added the Kuikly plugin, created a new project from the Kuikly template, and installed Xcode, HarmonyOS DevEco‑Studio, and mini‑program toolchains.

Install Android Studio.

Install Kuikly plugin from the Android Studio marketplace.

Create a new Kuikly project using the provided template.

Install Xcode, HarmonyOS DevEco‑Studio, and mini‑program environments.

Running the Kuikly "Hello World" example showed successful execution on Android, iOS, and HarmonyOS.

AI‑Assisted Development Pitfalls

When generating code, the AI occasionally produced incorrect import statements or platform‑specific errors. The author fed the error messages back to the AI, which quickly identified and fixed the issues.

Core Click‑Counter Code Example

The following Kuikly Compose snippet implements the click counter with animation and sound feedback.

@Composable
internal fun FrogMainPageContent() {
    // State management
    var clickCount by remember { mutableStateOf(0) }
    var isAnimating by remember { mutableStateOf(false) }

    // Animation state
    val frogScale by animateFloatAsState(
        targetValue = if (isAnimating) 1.2f else 1.0f,
        animationSpec = tween(durationMillis = 200),
        finishedListener = { isAnimating = false }
    )

    // Frog click handling
    Box(
        modifier = Modifier
            .size(160.dp)
            .scale(frogScale)
            .background(
                brush = Brush.horizontalGradient(
                    colors = listOf(Color(0xFF4CAF50), Color(0xFF388E3C))
                ),
                shape = CircleShape
            )
            .clickable {
                clickCount += 1
                isAnimating = true
                // Play sound hint
                Utils.currentBridgeModule().toast("孤寡~ 🐸")
            },
        contentAlignment = Alignment.Center
    ) {
        Text(text = "🐸", fontSize = 80.sp)
    }
}

This code demonstrates state management with mutableStateOf, animation via animateFloatAsState, and UI composition using Box and Text.

State management: mutableStateOf tracks click count.

Animation: animateFloatAsState creates a scaling effect.

UI components: Compose‑style Box and Text are used.

Kuikly Runtime Results

The app’s home page runs on all five platforms, though UI fidelity varies.

The author praises Kuikly’s ability to deliver consistent UI across platforms with minimal effort.

Conclusion

The one‑day development experience was impressive: AI handled design and coding, while Kuikly provided a smooth cross‑platform experience with virtually no major obstacles. The author plans to further compare Kuikly with Flutter and React Native in future posts.