用 Kuikly AI 快速开发App指南

技术风向解码者

354人浏览 · 2026-08-12 20:03:28

技术风向解码者 · 2026-08-12 20:03:28 发布

一、背景：为什么需要 Kuikly AI？

1.1 跨端开发的效率困境

传统三端开发模式下，实现一个中等复杂度的功能，iOS、Android、鸿蒙各派一人，设计只做一次但代码要写三遍——30 人天是常态。即便使用跨端框架减少重复代码，开发者仍需手动处理大量框架细节、API 调用和平台适配。

1.2 AI 编程的"理解鸿沟"

通用大模型（如 GPT-4、Claude）虽然能写代码，但在面对 Kuikly 这样的专有跨端框架时存在明显短板：

问题	表现
DSL 知识缺失	Kuikly DSL 是私有语法，训练语料中覆盖极少，AI 容易生成"野路子"代码
API 幻觉	凭记忆瞎猜不存在的 API，尤其在 SSE、原生桥接等接缝处频繁翻车
规范无法沉淀	每次会话都要重新描述项目规范，经验无法复用
Compose DSL 混淆	误用 androidx.compose.* 而非 com.tencent.kuikly.compose.*

1.3 Kuikly AI 的答案

Kuikly AI 不是简单地把 Copilot 挂到项目上，而是通过 Rules + Skills + MCP + 知识库 + 工具链五件套，把"资深 Kuikly 开发"的知识上下文固化下来，让 AI 在正确的知识边界内工作。

二、Kuikly 框架速览

2.1 什么是 Kuikly？

Kuikly 是腾讯基于 Kotlin Multiplatform (KMP) 构建的跨端开发框架，一套 Kotlin 代码可同时运行于：

平台	渲染方式	编译产物
Android	Android View	.aar
iOS	UIKit (UIView)	.framework
HarmonyOS	ArkUI	.so
Web (H5)	DOM	.js (Beta)
微信小程序	小程序 API	.js (Beta)
macOS	Native	支持中

已在 QQ、QQ 音乐、QQ 浏览器、搜狗输入法等 20+ 业务落地，日活覆盖超 5 亿用户。

2.2 核心技术特点

两棵树渲染：跨平台 DSL 树直接映射生成 Native 渲染树，无虚拟 DOM 开销
原生性能：Kotlin 编译为各平台原生二进制，性能与原生基本一致
声明式 + 响应式：自研 Kuikly DSL 和标准 Compose DSL 双支持
动态化：支持内置和动态化按需切换，页面级更新
Module 机制：通过 commonMain 接口定义 + 多端 native 实现，轻松扩展原生能力

三、Kuikly AI 能力全景

Kuikly AI 提供九大核心能力，覆盖开发全链路：

```
┌─────────────────────────────────────────────────┐
│              Kuikly AI 能力体系                    │
├─────────────┬─────────────────────────────────────┤
│  Rules      │ 规则文件 —— 给 AI "立规矩"            │
│  Skills     │ 技能包 —— 场景化专家                  │
│  MCP        │ 实时知识 —— 动态访问文档和组件库       │
│  知识库      │ 沉淀知识 —— 文档和 FAQ                │
│  视觉稿转码   │ Figma → Kuikly 代码                 │
│  预览 & Inspector│ 即时预览 + 可视化调试             │
│  转码 Agent   │ React/Vue/Hippy → Kuikly           │
│  AI Chat    │ 开箱即用的 AI 对话组件               │
│  开发 Agent   │ 端到端自动化开发流程                 │
└─────────────┴─────────────────────────────────────┘
```

本文重点讲解 Rules 和 Skills——它们是快速开发 App 的基础设施。

四、Kuikly Rules：给 AI "立规矩"

4.1 Rules 是什么？

Rules（规则文件）是一种用于定义 AI 编程助手行为准则和开发规范的文档。引入 Rules 后，AI 工具能准确理解项目的特定要求、技术标准和协作流程。

4.2 两套 Rules，对应两种 DSL

由于 Kuikly 同时支持 Kuikly DSL（私有语法）和 Compose DSL（类 Jetpack Compose），官方分别提供了对应的规则文件：

Kuikly DSL Rules (kuiklyDSL.mdc)

规则类别	内容
跨平台开发规范	KMP 源码集约定、commonMain 编写原则
架构原则	页面继承 Pager，实现 body(): ViewBuilder
状态管理	observable 绑定、remember 缓存
组件使用	正确的组件层级和属性写法
最佳实践	长列表用 LazyColumn、避免 render 中耗时操作

示例：

```kotlin
// ❌ 未加载 Rules — AI 完全不懂 Kuikly 页面结构
class HomeActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
    }
}

// ✅ 加载 kuiklyDSL.mdc — 正确生成 Kuikly 页面
class HomePager : Pager() {
    override fun body(): ViewBuilder {
        return {
            List {
                attr { flex(1f) }
                View { ... }
            }
        }
    }
}
```

Compose DSL Rules (kuiklyComposeDSL.mdc)

规则类别	内容
包名导入	必须用 com.tencent.kuikly.compose.，非 androidx.compose.
组件差异	与 Jetpack Compose 的 API 参数差异说明
常见陷阱	类型参数 16.dp vs 16f.dp 等
最佳实践	Compose DSL 下的跨端开发规范

示例：

```kotlin
// ❌ 未加载 Rules — import 错误
import androidx.compose.foundation.layout.*

@Composable
fun MyScreen() {
    Column(modifier = Modifier.padding(16.dp)) { ... }
}

// ✅ 加载 kuiklyComposeDSL.mdc — 正确
import com.tencent.kuikly.compose.foundation.layout.*

@Composable
fun MyScreen() {
    Column(modifier = Modifier.padding(16f.dp)) { ... }
}
```

4.3 安装 Rules

Rules 以 .mdc（Markdown + YAML front-matter）格式编写，支持 CodeBuddy、Cursor、Claude Code 等主流 AI 编程工具。

安装步骤：

```bash
# 在项目根目录创建规则文件结构
your-project/
└── .codebuddy/
    └── rules/
        ├── kuiklyDSL.mdc          # 使用 Kuikly DSL 时
        └── kuiklyComposeDSL.mdc   # 使用 Compose DSL 时
```

对于其他工具：

Cursor：放入 .cursor/rules/，原生支持 .mdc
Claude Code：内容追加到项目根目录 CLAUDE.md
其他工具：将规则内容粘贴到 Custom Instructions

4.4 自定义扩展

除了官方通用规则，团队可以补充自己的项目架构约定、目录规范和最佳实践。例如：

```markdown
# 项目特定规则

## 目录结构
- pages/ 下存放所有页面
- components/ 下存放可复用组件
- models/ 下存放数据模型

## 命名规范
- 页面类名以 Page 结尾
- 组件名使用 PascalCase
```

五、Kuikly Skills：场景化 AI 专家

5.1 Skills 是什么？

Skills 是面向特定开发场景的 AI 技能包，让 AI 像专家一样处理组件集成、编译排查、代码审查等复杂任务。目前覆盖 11 个技能，分为四大类别：

📦 框架集成

Skill	能力
kuikly-multi-module-config	子模块创建、多模块配置冲突解决

🎨 UI 构建

Skill	能力
kuikly-ui-framework	UI 框架开发指南——组件用法、页面结构
kuikly-reactive-observer	响应式状态管理——observable 指令系统
kuikly-animation	动画能力——过渡动画、属性动画

🔧 基础开发能力

Skill	能力
kuikly-visibility-exposure	可见性事件曝光上报、列表项统计
kuikly-network-and-json	网络请求、JSON 数据处理
kuikly-coroutines-threading	协程与 UI 线程约束
kuikly-assets-resource	资源文件管理
kuikly-compose-interop-dsl	Compose DSL 扩展 Kuikly DSL

⚡ 能力扩展

Skill	能力
kuikly-expand-api	自定义 Module、双向通信
kuikly-expand-view	自定义 View、五端渲染实现

5.2 安装 Skills

```bash
# 一键安装所有 Kuikly Skills
npx skills add Tencent-TDS/KuiklyUI-AI/skills

# 后续更新到最新版本
npx skills update Tencent-TDS/KuiklyUI-AI/skills
```

安装后，AI 会根据对话内容智能识别并自动启用相应技能，无需手动切换。多个 Skills 还可组合使用，协同解决复杂问题。

5.3 Skills 实战场景

场景一：扩展原生能力（自定义 Module）

需求：实现一个剪切板 Module，支持 copy/paste 跨端能力。

AI 调用 kuikly-expand-api 技能后，按规范执行：

```kotlin
// Step 1: commonMain 接口定义
interface ClipboardModule {
    fun copy(text: String)
    fun paste(): String?
}

// Step 2: 多端 native 实现
// Android
actual class ClipboardModuleImpl : ClipboardModule {
    actual fun copy(text: String) { /* ... */ }
    actual fun paste(): String? { /* ... */ }
}

// iOS
actual class ClipboardModuleImpl : ClipboardModule {
    actual fun copy(text: String) { /* ... */ }
    actual fun paste(): String? { /* ... */ }
}

// Step 3: 调用示例
ClipboardModule().copy("Hello")
```

场景二：UI 构建（商品列表页）

需求：用 Kuikly 做一个商品列表，支持下拉刷新。

AI 调用 kuikly-ui-framework + kuikly-reactive-observer 技能：

```kotlin
// 响应式状态
val products = observable(emptyList<Product>())

// UI 绑定
List {
    attr { flex(1f) }
    items(products.value) { product ->
        ItemView {
            Text(product.name)
            Image(product.imageUrl)
        }
    }
}

// 下拉刷新逻辑由技能提供完整模板
```

场景三：智能组件选择

在一次真实的三端聊天 App 开发中，AI 面临 Markdown 渲染的选择：

AI 原本计划引入 KuiklyMarkdown 组件，但通过调研发现 KuiklyChatUI 中的 AiMessageText 已覆盖该场景，最终决定不再单独引入，减少了不必要的依赖。

这正是 Skills 的第一个收益——AI 开始知道什么时候不该写。

六、从零到一：7.5 小时开发三端聊天 App 实战

下面通过一个真实案例，完整展示如何用 Rules + Skills 快速开发 App。

6.1 项目概述

目标：开发一个支持 Android、iOS、鸿蒙三端的 AI 多模态聊天 App。

核心功能：

发送文本/图片消息
拍照发图、相册选图
AI 流式回复（SSE 长连接）
Markdown 渲染、打开消息中的网址
本地会话管理、历史会话恢复

对比：

方式	耗时	人力
传统三端原生开发	~30 人天	3 人 × 10 天
Kuikly 手写	~7.5 人天	1 人 × 7.5 天
AI + Kuikly	~7.5 小时	1 人 × 1 天

6.2 完整开发流程

第一步：环境准备（10 分钟）

```bash
# 1. 创建 Kuikly 工程（默认 Compose DSL）
npx --yes @kuikly-ai/create-kuikly-app@latest --json create ChatApp --force

# 2. 安装 AI 开发环境
cd ChatApp
npx skills add Tencent-TDS/KuiklyUI-AI/skills
```

此时，Rules 和 Skills 全部就位，AI 正式获得"Kuikly 专业知识"。

第二步：需求分析与方案设计（70 分钟）

向 AI 发送完整的需求描述：

```
使用 Kuikly 实现一个多模态 AI 聊天 App，一码三端，
支持 Android、iOS、鸿蒙。核心能力包括：
- 发送文本/图片消息
- 拍照发图、相册选图
- AI 流式回复（SSE 长连接）
- Markdown 渲染、打开消息中的网址
- 本地会话管理、历史会话恢复
优先使用 Kuikly 官方和社区已有组件，不要重复造轮子。
```

AI 会：

调研组件：调用第三方组件查询技能，筛选匹配清单
评估方案：判断哪些用组件、哪些需自研 Module
输出 Plan：给出完整的开发计划和架构设计

最终组件选型：

功能	方案	来源
聊天主体	KuiklyChatUI	社区组件
Markdown 渲染	AiMessageText	复用 KuiklyChatUI
拍照	KuiklyCamera	社区组件
相册选图	KuiklyAlbum	社区组件
会话历史	KuiklySQLite	社区组件
外链打开	KuiklyWebview	社区组件
轻提示	KuiklyToast	社区组件
SSE 长连接	自研 SSEModule	kuikly-expand-api
图片压缩编码	自研 ImageModule	kuikly-expand-api

第三步：编码实现（50 分钟）

确认 Plan 后，AI 自主完成编码。关键技能调用路径：

```
补能力缺口（SSE + 图片压缩）
    → [skill: kuikly-expand-api]
      生成 commonMain 接口 → 三端 native 桥接实现

实现聊天主页面
    → [skill: kuikly-ui-framework]
      页面结构 + 组件用法 + 响应式状态绑定

实现响应式列表
    → [skill: kuikly-reactive-observer]
      observable 绑定数据与 UI，自动重渲染
```

结果：一次性编译成功，首次真机运行文字链路完全跑通。

第四步：集成自测与 Bug 修复（80 分钟）

遇到的问题：相册缩略图全部空白。

AI 自主排查：

添加日志 → logcat 抓日志 → adb 复现
定位根因：缩略图 URI 为 content:// 格式，而默认的 ImageAdapter 只处理 base64/http/assets/file
修改 ImageAdapter 加上对 content URI 的识别
重新运行，缩略图正常显示

第五步：迭代优化（210 分钟）

迭代项	处理方式
键盘遮挡输入框	AI 监听 keyboardHeight，用 paddingBottom 顶起输入区
鸿蒙新建会话不生效	定位到鸿蒙 RouterAdapter 边界场景
ActionSheet 改宫格按钮	整理键盘抬升与附件面板的互斥关系
各页面 UI 统一	AI 先归纳主页面设计规范，再套用到新页面

第六步：验收交付

最终 App 在三端真机上全部跑通，具备完整交互能力。总耗时约 7.5 小时。

6.3 关键成功因素

这次实践中，Rules 和 Skills 发挥了决定性作用：

知道什么该写：Rules 约束了代码规范，避免了"野路子"写法
知道什么不该写：Skills 让 AI 了解现有组件能力，避免重复造轮子
知道怎么写才对：kuikly-expand-api 提供了 Module 编写的明确范式
知道怎么查 Bug：知识库让 AI 省去了研究框架源码的时间
多技能协同：UI 构建 + 状态管理 + 能力扩展技能无缝衔接

七、快速开发 App 的标准流程

基于以上经验，总结出一套通用的 Kuikly AI 快速开发流程：

```
┌─────────────────────────────────────────────────┐
│              Kuikly AI 能力体系                    │
├─────────────┬─────────────────────────────────────┤
│  Rules      │ 规则文件 —— 给 AI "立规矩"            │
│  Skills     │ 技能包 —— 场景化专家                  │
│  MCP        │ 实时知识 —— 动态访问文档和组件库       │
│  知识库      │ 沉淀知识 —— 文档和 FAQ                │
│  视觉稿转码   │ Figma → Kuikly 代码                 │
│  预览 & Inspector│ 即时预览 + 可视化调试             │
│  转码 Agent   │ React/Vue/Hippy → Kuikly           │
│  AI Chat    │ 开箱即用的 AI 对话组件               │
│  开发 Agent   │ 端到端自动化开发流程                 │
└─────────────┴─────────────────────────────────────┘
```

八、进阶技巧与最佳实践

8.1 Prompt 编写技巧

明确跨端范围：始终强调"一码三端"，避免 AI 只写 Android
强调组件复用：加一句"优先使用已有组件"，AI 会自动调研并避免重复造轮子
分层描述需求：先整体架构，再细节交互，最后样式规范

8.2 自定义 Rules 建议

根据团队实际情况补充以下规则：

```markdown
# 项目架构决策记录

## 技术选型
- 使用 Compose DSL（理由：AI 友好度高）
- 状态管理采用 observable + ViewModel

## 目录规范
shared/src/
├── commonMain/kotlin/
│   ├── ui/          # 页面
│   ├── components/  # 可复用组件
│   ├── models/      # 数据模型
│   ├── modules/     # 自定义 Module
│   └── utils/       # 工具类
```

8.3 结合 MCP 获取实时知识

除了 Rules 和 Skills，Kuikly MCP 可提供实时知识查询：

MCP 工具	用途
kuikly_search_component	查询组件文档和示例
kuikly_list_component	获取所有可用组件列表
kuikly_third_party	查询第三方组件及使用方法
analyze_files	编译检查与错误定位
format_kotlin	代码格式化

8.4 利用开发 Agent 实现端到端自动化

Kuikly 最新的开发 Agent 串联了完整工作流：

```
需求规划 → 代码生成 → 多端预览 → 一键验证
```

未来随着更多能力的开放，开发者只需描述需求，其余全流程由 Agent 驱动完成。

九、总结与展望

9.1 核心结论

Rules 是基础：给 AI 注入框架知识，让生成的代码符合规范，错误率降低 3 倍以上
Skills 是关键：场景化的专家技能让 AI 在复杂任务中保持高质量输出
组合效应显著：Rules + Skills + MCP 的组合，让 AI 真正"懂 Kuikly"
效率提升巨大：从 7.5 人天压到 7.5 小时，效率提升约 10 倍

9.2 适用场景

场景	推荐度	说明
新项目快速原型	⭐⭐⭐⭐⭐	最适场景，几天内出可运行版本
存量页面迁移	⭐⭐⭐⭐	配合转码 Agent，效率提升 3 倍
已有功能迭代	⭐⭐⭐⭐	描述变更点，AI 精准修改
复杂 Native 扩展	⭐⭐⭐	用 kuikly-expand-api 辅助，仍需人工审核