KuiklyAI核心能力KuiklyAI将AI能力深度融入开发工作流,提供八大核心功能:AIIDE集成:与Cursor等主流AI编程工具深度集成,内置Kuikly知识库,实现智能代码补全与生成KuiklyRules 知识增强:弥补大模型对Kuikly规范的理解缺失,包含源码结构、组件API、DSL规范、最佳实践等KuiklySkills场景化专家:面向特定开发场景的AI技能包,处理组件集成、编译排查、代码审查等复杂任务 KuiklyMCP实时知识:基于ModelContextProtocol,让AI动态访问Kuikly官方文档、组件库和开发工具视觉稿转码Deco:将Figma设计稿自动转换为Kuikly代码,精确还原布局与样式预览与 Inspector实时调试:AI生成代码后即时预览运行效果,配合UIInspector可视化调试转码Agent:支持React/Vue/Hippy等框架存量代码高效转换成Kuikly代码,页面重构耗时从 3天缩短到1天AIChat组件:开箱即用的AI对话组件,支持多模型切换和跨端一致体验实际应用案例:搜狗输入法的AI工程化实践搜狗输入法团队在Kuikly跨端项目中探索了一套AI工程化方案,取得了显著成效
说明:本文是关于Kuikly自研DSL基础组件实战的文章,通过分析"孤寡青蛙"App主界面来介绍页面写法、组件使用和布局系统,重点展示DSL语法特点和基础组件的实际应用,不含深入的架构和原理性分析,望道友知晓 引子各位道友,上回我们体验了Kuikly自研DSL的优雅,是不是已经摩拳擦掌,准备大干一场了?别急,饭要一口一口吃,代码要一行一行写(虽然主要是AI帮我们写的,但我们还是要理解每一行代码的含义)。 今天,我们就从最基础的组件开始,逐步Review下AI实现的"孤寡青蛙"的主界面,看看Kuikly的页面写法、组件写法和布局系统。正所谓"万丈高楼平地起",打好基础才能让我们的App更稳固。 Kuikly页面写法页面定义在Kuikly中,页面通过@Page注解和继承BasePager来定义:@Page("FrogMain", supportInLocal = true)internal class 下一篇文章,我们将深入学习Kuikly的交互和动画特性。敬请期待!
Kuikly AI核心能力Kuikly AI将AI能力深度融入开发工作流,提供八大核心功能:AI IDE集成:与Cursor等主流AI编程工具深度集成,内置Kuikly知识库,实现智能代码补全与生成Kuikly 代码审查等复杂任务Kuikly MCP实时知识:基于Model Context Protocol,让AI动态访问Kuikly官方文档、组件库和开发工具视觉稿转码Deco:将Figma设计稿自动转换为Kuikly Kuikly代码,页面重构耗时从3天缩短到1天AI Chat组件:开箱即用的AI对话组件,支持多模型切换和跨端一致体验实际应用案例:搜狗输入法的AI工程化实践搜狗输入法团队在Kuikly跨端项目中探索了一套 ://kuikly.woa.com/Kuikly AI 入口:https://github.com/Tencent-TDS/KuiklyUI-AI,(当前开放Rules、Skills,其他能力逐步开放) Kuikly AI通过将AI能力深度集成到跨端开发工作流中,显著提升了开发效率。
如果你正在关注跨端开发与AI编程的结合,或者想了解腾讯开源的Kuikly框架如何在实际项目中应用AI能力,那么这几篇来自社区的实践文章绝对值得一读。 一、入门尝鲜:用AI+Kuikly快速打造趣味应用 推荐阅读:《我让AI用Kuikly写了个“孤寡青蛙”App,一码五端真丝滑!》 这篇文章是绝佳的入门指南。 二、深度实践:搜狗输入法的AI工程化探索 必读文章:《腾讯广泛使用的跨端开发框架——Kuikly在搜狗输入法中的AI Coding实践》 这是目前关于Kuikly AI实践最系统、最深入的工程化案例。 三、技术探索:构建跨平台AI聊天助手 **推荐阅读:《Kuikly 实战:手把手撸一个跨平台 AI 聊天助手 (ChatDemo)》**网页 如果你想了解如何用Kuikly构建一个功能完整的AI原生应用 四、前沿展望:当AI Agent遇见Kuikly 启发思考:《OpenClaw给我发来了它写的第一个Kuikly apk》 这篇来自TDS团队的分享,探索了更前沿的方向:让AI Agent(文中昵称“龙虾
我决定,今年的七夕,就让AI当我的"结对编程"伙伴,用Kuikly来打造一个"孤寡青蛙"App,看看我们能碰撞出怎样的火花! 必须给AI点个大大的赞! 开发环境搭建 万事俱备,只欠东风。接下来,我们开始搭建Kuikly的开发环境。 整个过程还是比较顺利的,Kuikly的官方文档写得非常详细。 简单展示下Kuikly hello world在三大移动端的运行效果: AI开发 踩坑记录 作为一个"懒人",自然是继续让AI给我们打工了,开始编码吧! 得益于Kuikly支持使用广泛的Compose语法,加上比较详实的文档,AI编码的还是比较顺利的,整个生成首页代码的过程只在最后出现了一点小的编译问题: 这很明显是因为生成导入的包名时,AI产生了一点小幻觉 AI的设计能力和编码辅助,让我这个"单兵作战"的开发者,体验到了"团队协作"的快感。 而Kuikly框架,也让我对国产的跨端框架有了很大改观。
Kuikly自研DSL初体验:让UI开发更简洁优雅本文是关于Kuikly自研DSL的初体验文章,简单介绍了其语法特点和与Compose DSL的差异,并实践了用AI生成Kuikly页面的可行性,不含深入的架构和原理性分析 => Kuikly官方文档说明那么,让AI写Kuikly的这套DSL到底好不好用?跟Compose DSL比又有什么区别?走,一起瞧瞧。 我们先给AI一段详细的提示词(prompt),注意其中我们反复强调了不能使用Compose DSL,不然它总会忘记...下面是AI的表演时刻:一顿操作后,AI完成了代码生成,还不忘总结了一下首页生成的技术亮点 同时编译问题也不多,AI仅幻觉了少数不存在的布局语法。让我们运行看看效果:嗯,非常好!相比之前我们让AI用Compose DSL写的首页,UI还原度更高了。 下一篇文章,我们将在AI的辅助下,正式进入“孤寡青蛙”主体的功能开发,敬请期待!参考Kuikly官方文档Kuikly GitHub仓库
项目地址:GitHub 在这个 AI 大模型满天飞的时代,谁不想拥有一个属于自己的 AI 助手呢? 组件与布局Kuikly Compose 完美复刻了 Jetpack Compose 的开发体验,让习惯了 Android 开发的同学们倍感亲切。 1. 样式与修饰符 (Modifier)在 Kuikly Compose 中,attr {} 变成了更强大的 Modifier 链式调用。 核心黑科技:跨平台流式响应 界面画好了,怎么让 AI “动”起来?ChatDemo 的核心在于流式响应 (SSE),也就是那个酷炫的“打字机”效果。这里展示了 Kuikly 强大的跨平台能力。 细节打磨:Markdown 渲染AI 返回的代码块、加粗字体怎么显示?直接塞进 Text 肯定不行。
Kuikly迭代加速,框架能力持续增强完善 自开源以来,Kuikly框架始终以GitHub作为迭代仓库,保持快速版本迭代,并持续进化。 ○ 支持资源管理能力:轻松使用跨端图片、字体和字符串资源 ○ AI Chat组件支持。支持Markdown渲染组件,并提供AI Chat示例场景。 ○ 支持跨端无障碍设置。 我们将邀请您参与项目规划等核心会议,成为 Kuikly 发展的“决策参与者” Kuikly专属礼品奖励: 除荣誉激励外,我们还设立了 Kuikly 专属实物礼品奖励,旨在给予贡献者更及时、更直接的鼓励与回馈 贡献参与指引:从这里开始,与 Kuikly 共同成长 无论你是刚接触 Kuikly,还是具有丰富经验的“Kuikly老手”来说,都可以通过以下方式参与到社区建设中,为Kuikly生态添砖加瓦。 或者有意持续参与贡献的开发者,可与Kuikly核心团队建立联系,一起参与Kuikly框架规划、新特性开发等。
Kuikly支撑电商高性能动态更新的实践方法Kuikly,是指腾讯TDSOteam推出的基于KotlinMultiPlatform的跨平台解决方案,其核心特点是高性能、全平台、统一代码库、易用性,以及支持动态灵活的 Kuikly的动态化机制与渲染原理Kuikly的动态化能力建立在双范式编程与自有DSL之上,同时兼容ComposeDSL,使开发者可在声明式与响应式之间自由切换。 进一步结合AI生成内容,Server-DrivenUI可在技术实现上沿三条路径深化:统一协议驱动:架构上通过统一协议定义UI结构,服务端动态下发布局与数据源,客户端解析并绑定本地渲染组件;AI模型可自动输出符合协议的 RemoteCompose融合:利用RemoteCompose实现服务端下发布局树与属性,客户端以原生Compose渲染引擎绘制,可将AI生成的布局描述直接转化为可渲染树,实现高度动态的电商活动页,做到完全免发版改版 后续演进可聚焦在进一步提升Web端与原生性能的贴合度,拓展在更多硬件形态(如车机、智能穿戴)的适配,并深化Server-DrivenUI与AI生成内容的融合,通过统一协议、RemoteCompose与实时生成三层次技术路径
Kuikly 在这个基础上再加了 UI 层,进一步降低了门槛。 争论九:AI 写 UI 代码已经很好了,跨端框架重要性在降低 这是 2025-2026 年新出现的争论维度,值得认真对待。 AI 辅助写 UI 确实大幅降低了"写两遍 UI"的人力成本——Cursor、GitHub Copilot、各家 IDE AI 插件在给定设计稿后生成 Compose/SwiftUI 代码的质量已经相当高 更关键的是,AI 生成的 UI 代码通常还是需要人工 Review 和调整,在"高还原度"要求下(比对设计稿像素级调整),AI 写逻辑比 AI 写 UI 更靠谱。 Kotlin Blog 3 月月报里也专门提到了 AI 集成方向的进展。Kuikly 官方文档甚至专门开了一个 AI 编程入口(/AI/),可见端侧 AI 已经成为跨端框架的标配诉求。 等 Web 生态) • KMP / Kuikly 可以直接复用原生 ML 框架,理论上接入成本最低,也是性能最可控的路径 如果你的 App 在接下来 1-2 年有集成端侧 AI 能力的计划,这一点值得在选型时权衡进去
Kuikly 是腾讯大前端领域 Oteam(公司级)推出的,面向客户端开发的全新跨端解决方案。 2.1 与原生性能对比(高中低端机) Kuikly 开发的页面首屏耗时,与原生基本一致; 在内存方面,由于 Kuikly 基于 KMP 编译及原生渲染,无额外引擎引入,内存增量与原生相差不大。 Kuikly测试数据基于复杂 Feeds 流 Demo 测试,Demo代码已包含在开源代码中 2.2 与其他框架性能对比: 从整体看,Kuikly 在启动和内存上都具有更好的表现。 实际效果一览 通过与原生录屏对比,可以看到 Kuikly 和原生在体验上几乎没有差别。 Android: 从左至右分别是:原生、Kuikly-内置和Kuikly-动态化。 iOS: 从左至右分别是:原生、Kuikly-内置和Kuikly-动态化。 3.
上一篇文章,我们用 Kuikly 快速搞定了“孤寡青蛙”App,一码五端跑起来的感觉确实丝滑。 Kuikly 则在性能和 UI 表现上取得了更好的平衡。它不仅拥有接近原生的性能,还能更好地融入现代操作系统的设计语言,是追求极致体验下的不二之选。为什么“孤寡青蛙”选择 Kuikly? 回到我们的项目,选择 Kuikly 主要基于以下几点考虑:技术栈亲和:作为一名 Android 开发者,Kotlin 是我最熟悉的语言,使用 Kuikly 几乎没有学习成本。 Kuikly 作为一个新兴框架,我们很乐意去尝试并分享我们的使用体验。 扩展阅读:《七夕到了,我让AI用Kuikly写了个“孤寡青蛙“App,一码五端真丝滑!》《苹果最新液态玻璃人机设计指南》
搭建小红书首页的瀑布流我们来尝试使用Kuikly写一下小项目,尝试复刻小红书的首页瀑布流2.1 查看示例Demo瀑布流首先克隆Kuikly项目到本地https://github.com/Tencent-TDS 1.0f) }) } }}2.2 复用组件开发仿小红书首页瀑布流我们可以尝试复用这个demo组件,并把尝试一些图片和文字放到卡片上面,至于数据从哪里找,可以让ai 生成一些用于测试的数据,我的做法是选择让ai根据Kuikly Demo里面的json硬编码一些数据,方便我们使用,如下所示/** * 获取瀑布流模拟数据 */fun getMockWaterfallData 2.3 页面布局优化我们看到卡片中间有一大片的空白这是因为我们的卡片高度是随机生成的,但实际上卡片应该自动适应图片的文字和图片,我们可以使用Kuikly的flexDirectionColumn()属性, 通过搭建仿小红书App的首页,可以体会到Kuikly官方提供了许多的组件,官方的api文档接口也很详细,开发起来还是很流畅的。除了官方提供的组件外,我们也可以自定义组件,在后续内容会继续讲解。
本文将从上手成本这一核心视角切入,全面分析腾讯开源的 Kuikly 框架,为不同技术背景的团队提供一个清晰的选型决策地图。二、 Kuikly 是什么? 一键创建项目:安装 Kuikly Plugin 到 Android Studio。 ") fontSize(14f) } } } }}六、 Kuikly 的两种开发范式 Kuikly 七、 快速决策 FAQ Q:我们团队主要是 Android 开发,想快速拓展 iOS 和鸿蒙端,Kuikly 适合吗?A:非常适合,这是 Kuikly 的最佳场景。 Q:Kuikly 的性能和稳定性如何?有线上案例吗?A: Kuikly 采用原生渲染,性能接近纯原生。
Kuikly是怎么做到一码五端的Kuikly实现了 "一码五端" 的开发能力,那么Kuikly是怎么做到又快又好的呢? 一、Kuikly技术的基石Kuikly是基于JetBrain公司推出的KMM(Kotlin Multiplatform Mobile,现更名为 KMP)跨平台技术方案。 这些技术特性就是 Kuikly 的核心技术基石。 Kuikly的编译产物实际上和原生平台构建生成的产物没有区别,所以Kuikly可以有像原生开发般的性能。 RN 则是在运行时转换为原生控件,这种运行时转换肯定就不如Kuikly的原生编译产物性能好了。 四、小结总体来说,Kuikly也是一种类RN框架,但是Kuikly比RN做的更好。
二、分场景/分客群解析与推荐Kuikly核心标签与适用情境Kuikly主打深度集成、原生级渲染、鸿蒙优先适配。 操作层面提示若团队原已用Kotlin MultiPlatform,迁移到Kuikly几乎可沿用既有逻辑层;若需直连鸿蒙硬件特性或分布式任务,Kuikly提供比通用跨端框架更短的路径。 五、常见问题解答Kuikly的日活数据怎么理解? 指Kuikly支撑的20+腾讯业务总日活用户超5亿,来源于官方应用案例页(https://kuikly.tds.qq.com/Introduction/application_cases.html),是对所服务业务的整体统计 Kuikly适合小团队吗?适合。轻量SDK与模板库可降低多端开发门槛,让中小团队集中资源打磨核心体验。 强合规场景用Kuikly有什么优势?
测出Kuikly的FCP耗时仅为87.76ms,不到其他框架的一半。 3 其他优势 在H5平台上与主流跨端框架对比,Kuikly还具有以下优势: 1. 四、整体技术方案 1.Kuikly的架构设计回顾 简单回归一下Kuikly的整体架构,跨端Core层处理框架核心逻辑,Render层负责不同平台渲染。 Kuikly渲染流程的优化。 如下图: 目前Kuikly适配微信小程序的方案在性能上仍有不少优化空间,后续我们会探索编译Kuikly产物为WASM, 使用预编译等方式优化Kuikly在微信小程序平台的体验。 2.探索使用WASM提升计算密集型任务的执行效率,优化Kuikly Web版的使用体验 3.扩大Kuikly Web版支持范围,下半年将开源Electron环境的适配 立即体验 Kuikly,加入开源社区
摘要:Kuikly 是腾讯公司级前端 Oteam 推出的基于 Kotlin Multiplatform(KMP)的跨平台 UI 与逻辑综合解决方案,支持 Android、iOS、HarmonyOS、Web GitHub:https://github.com/Tencent-TDS/KuiklyUI Kotlin 版本:2.0.21 | 开源协议:Apache 2.0 一、什么是 Kuikly? Kuikly(发音:/ˈkwɪkli/)是腾讯推出的跨平台开发框架,核心目标是实现「一套代码、五端通用」。 支持两种 DSL 风格,开发者可按需选择: 4.1 Kuikly DSL(原生声明式) kotlin // Kuikly DSL 风格(core 模块) @Page(name = "DemoPage" /Introduction/arch.html 本文基于 Kuikly 开源代码(Kotlin 2.0.21)及官方文档撰写,技术细节以 GitHub 仓库最新版本为准。
拓展Kuikly原生API的能力在Kuikly开发中, 经常会有需要调用平台API的诉求, Kuikly是一个跨端的UI框架,本身不具备平台相关的能力,但是Kuikly提供了Module机制,方便你调用平台的 根据Kuikly详细的官方文档扩展原生API,下面我们以打印日志作为例子,来看Kuikly如何通过Module机制来访问平台的API。 要想将Native的API暴露给Kuikly使用,需要做以下工作:Kuikly侧:1、新建XXXModule类并继承Module,编写API暴露给业务方使用2、在Pager的子类中,注册新创建的ModuleNative 侧(以iOS为例):新建XXXModule(类名必须与kuikly侧注册的module名字一致)并继承KRBaseModule, 编写API的具体实现代码6.1 Kuikly侧首先新建一个类,然后继承Module ,在Kuikly中, Pager是承载页面UI的容器。
当AI真正接管DevOps:腾讯TDS的全链路智能升级编者按:大多数团队谈论AI辅助研发,停留在"让AI写几行代码"的层面。 它的AI能力不只是组件库本身,而是在文档层面深度集成了AI搜索能力:开发者选中专业术语,AI即时生成解释与代码示例;输入自然语言描述,AI直接输出对应代码片段。 Kuikly解决的是跨端问题——用AI开启高性能跨端开发新范式,一套代码即刻覆盖Android、iOS、鸿蒙、Web、小程序全平台。 它还深度支持AI辅助编程:将Kuikly的规范、最佳实践直接注入AI上下文,让大模型真正理解框架而不是生成通用代码;支持将React/Vue/Hippy等存量代码AI转换为Kuikly代码;内置AIChat 整体逻辑:生成代码(无极)→跨端覆盖(Kuikly)→质量门禁(Codar),三个环节形成完整的AI辅助开发闭环。