适用AI工具：Cursor / DevEco Code
前置博客：第04篇
预计阅读时间：20分钟

一、声明式范式：先改变"写 UI"的心智

命令式 UI 是"找到控件 → 设置属性"；ArkUI 声明式范式是"描述 UI = 状态的函数"——状态变了，框架自动增量更新视图。对从 Android/前端转过来的开发者，这个心智转换是第一道坎；而 AI 恰恰擅长把命令式习惯翻译成声明式写法，本文第一部分就从这个最常见的痛点切入。

ArkUI 差异化更新的前提是最小化状态关联：@State 变化只触发依赖它的 UI 局部重渲染。 AI 生成代码时如果乱用状态装饰器，会把"局部更新"退化成"整页刷新"。所以本文的 AI 用法核心是：让 AI 生成 + 用规则约束装饰器选型（规则文件见第 03 篇 arkui-ui.mdc）。

二、AI 辅助的组件化拆分

2.1 拆分流程

拿到一个 500 行的页面文件，推荐让 AI 按"数据流"而非"视觉块"来拆组件：

2.2 拆分实战：视频卡片

给 AI 的指令与产出关键部分：

将 VideoPage 拆为 VideoCard 组件。状态归属原则：只影响单个卡片的数据留在卡片内部，跨卡片共享的留在父组件。

// 父组件：只持有列表级状态
@Entry
@Component
struct VideoPage {
  @State list: VideoItem[] = [];
  @State activeId: string = '';      // 跨卡片共享：当前播放项

  build() {
    List() {
      LazyForEach(this.dataSource, (item: VideoItem) => {
        VideoCard({
          item: item,
          isActive: this.activeId === item.id,
          onPlay: (id: string) => { this.activeId = id; }
        })
      }, (item: VideoItem) => item.id)
    }
  }
}

// 子组件：@Prop 单向同步 + 回调上行，不反向污染父状态
@Component
struct VideoCard {
  @Prop item: VideoItem;
  @Prop isActive: boolean;
  onPlay: (id: string) => void = (id: string) => {};
}

AI 的价值点在于装饰器选型的理由：item 用 @Prop（父到子单向）而不是 @Link（双向绑定会让子组件意外改父状态）；播放事件用回调上行而不是共享状态。让它输出"状态归属表"再动手，避免拆完才发现数据流向不对。

三、响应式布局：一次开发适配多尺寸

3.1 三层断点策略

响应式布局的标准做法是 MediaQuery 或 GridRow 断点系统。推荐用 GridRow/GridCol 栅格做骨架（声明式、免监听）：

GridRow({ columns: { sm: 4, md: 8, lg: 12 }, gutter: 12 }) {
  GridCol({ span: { sm: 4, md: 4, lg: 3 } }) {
    VideoCard({ item: this.item })   // 手机1列/平板2列/PC4列
  }
}

3.2 AI 生成断点适配代码

把设计稿的尺寸标注交给 AI，让它反推栅格配置：

设计稿：手机端单列卡片，平板双列，折叠屏展开三列。
生成 GridRow/GridCol 配置，断点用鸿蒙标准（sm<600vp，md 600-840vp，lg>840vp）。

AI 会同时给出延伸场景：横屏时侧边栏固定、内容区自适应；折叠屏悬停态上半屏预览下半屏操作。这些"设备形态意识"是通用 AI 工具缺省缺失、需要规则或提示词补齐的典型能力。

四、Figma 设计稿转 ArkTS 工作流

这是 2026 年 UI 开发提效最明显的环节。工作流分四步：

1. 导出：Figma 安装"设计稿转代码"插件，导出组件树 JSON（含层级、样式、资源引用）
2. 转换：把 JSON 喂给 AI，配合规则文件要求"输出 ArkTS + 资源引用走 $r()"
3. 校准：AI 产出的布局与设计稿逐项比对，字号/间距偏差回填修正
4. 资源化：让 AI 把颜色、字号、间距抽取到 resources/base/element 的 JSON 中，组件里只留引用

实测一个 20 节点左右的卡片，从设计稿到可编译代码约 5 分钟，人工校准约 10 分钟——比手写快 3 倍以上，且资源天然集中管理。

关键提示词片段（可存为 Cursor Snippet）：

按 ArkUI 声明式规范将以下 Figma JSON 转为 ArkTS 组件：

• 颜色/字号/圆角引用 $r()，不要硬编码
• 固定标注值转为 vp，字体用 fp
• 图片统一 Image + objectFit(cover)
• 输出单个 .ets 文件，@Builder 拆分重复结构

五、避坑清单

• @State 包对象：改对象内部属性不会触发刷新，必须整对象替换或用 @Observed/@ObjectLink。让 AI 在生成时默认遵守"@State 只装原始类型或整对象替换"。
• builder 里不能用 this：全局 @Builder 中 this 指向 undefined，需要传参。AI 偶尔会踩，编译器会报，回贴报错即可修复。
• LazyForEach 的键值生成器：键值不稳定会导致复用错乱。规则文件中已约定"用业务唯一 id 作键值"，不要用 index。
• 转场动画：页面转场用 Navigation 自定义转场，不要用 visibility + 定时器土法实现。AI 对 Navigation 转场 API 掌握较好，主动要求即可。

六、下一步

UI 骨架成型后，下一篇进入鸿蒙特色能力：用 Agent Framework Kit 让应用拥有智能体能力。