用 Kuikly AI 快速开发App指南

```
// ❌ 未加载 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 { ... }
            }
        }
    }
}
```

```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)) { ... }
}
```

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

```markdown
# 项目特定规则

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

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

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

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

```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")
```

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

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

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

```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
```

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

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

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

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

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

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

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

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

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