从项目初始化、Craft 预览、Coding Agent 开发，到真机调试与提审上架，完整走一遍 AIUI 开发流程。做出来的是一个只记消费、看汇总、查趋势的小工具：不动隐私敏感权限，数据只存在设备本地。

一、项目简介

记账这件事，很多人都知道该做，但坚持不下来。原因很直接：掏出手机、打开 App、选分类、填金额，这几步一多，人就懒了。更常见的场景是，吃完饭走在路上、手里拿着东西，只想随口说一句「午饭 35」，最好能直接记上。

Rokid 的 AIUI 框架把语音唤醒、意图理解和卡片反馈串在一起，正好适合这种「手没空、嘴最快」的场景。戴在眼镜上，说一句就能记一笔，抬眼就能看到今天花了多少，比掏手机顺手得多。

所以这个智能体只做四件事：

• 自然语言记账：说「午饭花费35」「打车28」就直接记一笔；

• 今日消费概览：问「今天花了多少」，弹出今日汇总和分类占比；

• 趋势图表：问「近 7 天趋势」或「这周总共花了多少」，给出折线/柱状图卡片；

• 历史查询：问「昨天晚饭花了多少」「上周餐饮多少」，回溯具体记录。

二、场景与用户意图

用户不会对着眼镜念说明书，都是随口一句。下面是主场景里的典型说法和对应处理。

场景	用户随口说	意图	智能体反馈
记账	「午饭 35」	记录一笔消费	弹出「已记：餐饮 35 元」确认卡片
今日概览	「今天花了多少钱」	查今日汇总	弹出今日总金额 + 分类占比卡片
趋势查询	「这周总共花了多少」	查周期趋势	弹出本周消费趋势图卡片
历史查询	「昨天晚饭花了多少」	查具体记录	弹出匹配的历史记录列表卡片

实际用下来，语音记账是最高频的，所以第一版把验证重心放在「说一句就记上」这条链路；汇总、趋势、历史查询按同样的卡片模式扩展，后面会提到。

三、方案设计

3.1 智能体定义

在 AIUI Studio 里建智能体时，我填的内容大致是：

• 名称：消费记账

• 类别：生活

• 版本号：1.0.20

• 功能介绍：消费记账对话卡片，支持自然语言记账、今日消费概览、趋势图表和历史查询。

• 开场白：你好，我是消费记账助手。你可以直接说「记一笔午饭 35」，或者说「今天花了多少钱」查看今日汇总和趋势。也可以问我「这周总共花了多少」。

• 能力边界：只处理个人消费记录和查询；不连外部支付账户，不跨设备同步，听不懂的会反问。

具体配置见下方截图。

3.2 页面与卡片

记账页面是一张紧凑的确认卡片：顶部显示「已记：餐饮 35 元」，下面一行时间戳和备注入口，确认无误就过。

今日概览页是一张汇总卡片：大字显示今日总金额，下面用几个色块列出餐饮、交通、购物等分类占比。眼镜上字不能多，分类超过 4 个就合并为「其他」。

趋势页是一张迷你图表卡片：近 7 天或本周的每日金额用柱状或折线展示，底部标最高/最低的一天。

历史查询页是一张列表卡片：按时间倒序显示匹配的记录，最多展示最近 5 条，避免眼镜上一屏塞太多。

3.3 状态流转

语音唤醒
  → AIUI 识别意图（记账 / 今日 / 趋势 / 历史）
  → 解析金额、类别、时间范围
  → 写入或读取本地存储
  → 渲染对应 Ink 页面卡片
  → 用户抬眼看到结果

3.4 能力调用关系

• 语音唤醒 / 识别：眼镜端拾音，AIUI 把自然语言转成意图；

• 大模型意图理解：靠 `AGENTS.md` 里的系统指令，区分「记账 / 今日 / 趋势 / 历史」四类，并从话里抽出金额、类别、时间；

• 本地存储：消费记录写进本地，隐私不外流；

• 卡片渲染：结果用 Ink 页面画成眼镜能显示的卡片。

四、搭建流程（AIUI 实现）

4.1 初始化项目

在终端里用官方脚手架创建：

 
npm create @yodaos-pkg/aiui-agent@latest expense-tracker
 
cd expense-tracker
 

创建完得到 AIUI 工程的标准骨架（含 `app.json`、智能体描述文件和 `pages/` 目录）。我用一个 `.ink` 页面承载一类功能，一个文件管一页，比拆一堆散文件清爽。

4.2 用 Craft 导入项目

打开 Craft（AIUI Web IDE），用「本地文件夹 / 本地 .aix 文件 / GitHub 子目录」任一种方式把工程导进去。导入后左侧是文件树，右边能直接跑。

4.3 Craft Web 端调试

点「运行智能体」做 Web 端调试。Web IDE 能模拟「唤醒 → 语音识别 → 大模型 → 语音播报」的完整链路，右边还有模拟眼镜的返回、单击、前后滑动按钮，不用真机也能走通交互。本项目在 Craft 里的预览效果见第五章。

4.4 用 AIUI Coding Agent 开发记账页面

Craft 里默认带免费的 LLM（DeepSeek V4 Pro），可以下 Skill 辅助开发（下完记得点启用），也能换自己的模型。我让 Coding Agent 先生成页面骨架，再手动把解析、统计、语音播报逻辑补进独立的工具模块。

工程实际结构：

 
expense-tracker/
 
├── app.json
 
├── AGENTS.md
 
├── pages/
 
│   └── expense/
 
│       └── index.ink        # 对话卡片：脚本定义 + 逻辑 + 模板 + 样式
 
└── utils/
 
    └── expense.js           # 记账解析、本地存储、统计、语音播报
 

核心实现分三块。

（1）数据契约（index.ink 里的 <script def>）

卡片展示什么，由一份 schema 定义，大模型据此填字段。关键字段如下：

 
{
 
  "description": "消费记账对话卡片，支持自然语言记账、今日概览、趋势图表和历史查询",
 
  "schema": {
 
    "data": {
 
      "type": "object",
 
      "properties": {
 
        "mode":    { "type": "string", "enum": ["welcome","record","today","trend","history"] },
 
        "message": { "type": "string" },
 
        "record":  { "type": "object", "properties": { "amount": {}, "category": {}, "note": {} } },
 
        "todayTotal":   { "type": "string" },
 
        "categoryList": { "type": "array" },
 
        "chartData":    { "type": "array" },
 
        "showChart":    { "type": "boolean" },
 
        "tip":          { "type": "string" }
 
      },
 
      "required": ["mode", "message"]
 
    }
 
  }
 
}
 

（2）意图路由（index.ink 里的 handleInput）

用户一句话进来，按关键词优先级分流到记账 / 今日 / 趋势 / 历史。趋势查询即使带数字也优先匹配：

 
handleInput(text) {
 
  const trimmed = (text || '').trim();
 
  // 1. 趋势查询优先（含"趋势/近7天/近30天"）
 
  if (trimmed.includes('趋势') || trimmed.includes('近7天') || trimmed.includes('近30天')) {
 
    return this.handleTrend(trimmed.includes('30') ? 30 : 7);
 
  }
 
  // 2. 历史查询（昨天 / 上周 / 本月）
 
  if (trimmed.includes('昨天') || trimmed.includes('上周') || trimmed.includes('本月')) {
 
    let period = 'lastWeek';
 
    if (trimmed.includes('昨天')) period = 'yesterday';
 
    else if (trimmed.includes('本月')) period = 'thisMonth';
 
    return this.handleHistory(period);
 
  }
 
  // 3. 今日查询
 
  if (trimmed.includes('今天') || trimmed.includes('今日') || trimmed.includes('花了多少')) {
 
    return this.handleToday();
 
  }
 
  // 4. 记账指令（含数字）
 
  if (/\d+\.?\d*/.test(trimmed)) {
 
    return this.handleRecord(trimmed);
 
  }
 
  // 5. 默认欢迎
 
  this.showWelcome();
 
}
 

（3）记账解析与本地存储（utils/expense.js）

记一笔时，从自然语言里抽金额、认分类，再写本地存储；查汇总时从本地过滤统计：

 
// 抽金额 + 认分类 + 生成备注
 
export function parseExpenseCommand(text) {
 
  const amount = parseFloat((text.match(/(\d+\.?\d*)/) || [])[1]);
 
  if (!amount || amount <= 0) return null;
 
  const category = identifyCategory(text);          // 按关键词映射 餐饮/交通/购物…
 
  const note = text.replace(/[\d.]+/g, '').replace(/元/g, '').trim() || category;
 
  return { amount, category, note, timestamp: Date.now() };
 
}
 
// 本地存储，数据不外流
 
export function saveRecord(record) {
 
  const records = wx.getStorageSync('expenseRecords') || [];
 
  records.push(record);
 
  wx.setStorageSync('expenseRecords', records);
 
}
 
// 今日汇总
 
export function getTodayStats() {
 
  const records = wx.getStorageSync('expenseRecords') || [];
 
  const todayStart = new Date().setHours(0, 0, 0, 0);
 
  const today = records.filter(r => r.timestamp >= todayStart);
 
  const total = today.reduce((s, r) => s + r.amount, 0);
 
  const byCategory = {};
 
  today.forEach(r => byCategory[r.category] = (byCategory[r.category] || 0) + r.amount);
 
  return { total, byCategory, count: today.length };
 
}
 

趋势(getDailyStats）和历史(getHistoricalStats）走同样的本地统计逻辑，只是时间范围不同。卡片用 Ink 的条件渲染(ink:if / nk:for）按 mode 显示不同区块，趋势页额外渲染一个 <chart> 组件画折线。

4.5 打包上传到 AIUI Studio

1. 打开 AIUI Studio（中国站），创建一个 AIUI Agent；

2. ⚠️ 提审前必须换掉默认图标，不然过不了审；

3. 第一次建的 Agent 没绑项目会弹「加载失败」，关掉重新绑定就好；

4. 绑定方式二选一：关掉后直接上传工程，或在编辑器「设置 → 本地管理」里绑对应的 AIUI 智能体；

5. 把工程打包上传，按实际情况勾权限、填描述。

五、交互与体验

在 Craft 里实跑的预览效果如下（当前为消费记账主流程，测试用「中午吃饭花费了25元」）：

戴眼镜时的实际路径：

1. 说「中午吃饭花费了25元」；

2. 眼前弹出「已记：餐饮 25 元」确认卡片，不用掏手机。

想查汇总时，说「今天花了多少钱」，卡片直接给今日总金额和分类。整个过程就是「说一句、看一眼」，正好适配走路、手里拿东西的状态。

六、调试与验证

⚠️ 真机调试前，工程必须先绑 Agent 并打包上传到 AIUI Studio

眼镜端操作：设置 → 开发者 → AIUI → 更新眼镜资源包。下载时右下角有进度标，下完图标消失并弹 Toast。然后唤醒 AI 助手，说出「消费记账」就能调。

总结

做这个项目没什么高深算法，核心就是把「随口记账」这件事在眼镜上做顺。AIUI 的价值是缩短交互链路：说一句、看一眼，比掏手机快，也比传统记账 App 更容易坚持。