Can AI Really Streamline Client Development? Inside Kuikly’s Harness Engineering

Problem: AI‑generated code in client development

Inconsistent quality – LLMs can produce large code volumes quickly, but the output often follows a “wild‑road” style: runnable yet non‑standard, with wrong dependencies, missing APIs, chaotic structure, and violations of framework conventions.

Intrinsic complexity of client scenarios – Multi‑platform targets, legacy debt, diverse tech stacks, and long visual‑design verification loops make it hard for AI to intervene without slowing development.

Harness Engineering: a five‑layer control system

System prompts & context injection – inject proprietary knowledge (framework APIs, coding standards, best‑practice guidelines) that generic models lack.

Tools & execution environment – expose the exact toolchain (build tools, component indexes, documentation) required for each task.

Control & orchestration – define the correct workflow order for complex client pipelines (design → code → preview → verification).

Persistence & memory – retain architecture decisions, component dependencies, and historical context across sessions.

Observe & verify – provide machine‑readable previews and visual debugging so the model can “see” its own results.

Kuikly AI: end‑to‑end engineering capabilities

Kuikly integrates the five layers into a unified AI‑enabled workflow for its cross‑platform UI framework. The system injects framework knowledge, component standards, best‑practice guidelines, and tool‑chain APIs into the LLM’s reasoning process, allowing developers to focus on business logic while receiving high‑quality, standards‑compliant code.

AI Q&A Agent – a knowledge‑base + code RAG system that answers detailed questions, lowering the learning curve.

Kuikly Rules – DSL‑level constraints that guide the model on package imports, component APIs, and parameter definitions, preventing generation of unusable Jetpack‑Compose‑like code.

Kuikly Skills – specialized skill packs for 11 common development scenarios (layout generation, animation addition, component usage, etc.), enabling the AI to act like an expert on each task.

Kuikly MCP – Model Context Protocol that lets the AI dynamically fetch up‑to‑date documentation, component indexes, and tooling information.

Visual‑Design Decoder (Deco) – converts Figma designs into Kuikly code, preserving intent and reducing manual layout work.

Preview & UI Inspector – real‑time rendering of generated code with a visual component tree, closing the observation loop.

Transcode Agent – migrates existing React/Vue/Hippy codebases to Kuikly by analyzing structure and mapping APIs.

AI Chat Component – out‑of‑the‑box chat UI that supports multi‑model switching, cross‑platform consistency, and deep customization.

// Install
npx skills add Tencent-TDS/KuiklyUI-AI/skills

// Update
npx skills update Tencent-TDS/KuiklyUI-AI/skills

Rules and Skills

KuiklyDSL is a private DSL for the framework. Without explicit constraints, LLMs frequently generate code that misuses package imports, component APIs, or parameter definitions. Kuikly provides two sets of Rules targeting the high‑frequency issues of the DSL, and developers can extend them with project‑specific architecture conventions, directory standards, and best practices.

Kuikly Skills are AI skill packs for CodeBuddy, Cursor, Claude, etc. They encode expert knowledge for 11 typical development scenarios, covering framework integration, UI construction, basic development capabilities, and extensibility. By loading the full Rules & Skills set, early adopters report that AI‑generated code becomes noticeably more standard and usable, requiring only minor style or interaction tweaks.

Usage examples

"Create a Todo list page with Kuikly"
"Add an entrance animation to view xx"

Open‑source repositories

Rules & Skills: https://github.com/Tencent-TDS/KuiklyUI-AI

Main framework: https://github.com/Tencent-TDS/KuiklyUI

Architecture diagram