# 给你的产品嵌入一个「会操作界面的 AI 助手」

给你的产品嵌入一个「会操作界面的 AI 助手」：用户说一句话，助手替他把活儿做完

用户不会用你的系统，不是因为系统难------是因为没有人陪着他操作。

先说一个场景

你做了一个商户管理后台，功能很完整，但用户每次遇到「创建订单」「修改门店配置」这类操作，要么反复看文档，要么找客服。

如果后台里有个助手，用户直接说：「帮我创建一笔订单」------

助手就真的在页面上操作起来：

自动导航到订单管理页
点开新建订单的弹窗
帮用户填好表单字段
最后提交

整个过程，每一步都有蓝色高亮框标注正在操作的元素，虚拟光标移动到对应位置，用户能清清楚楚看到助手在做什么------不是黑盒，是有反馈的引导。

这就是 InterfaceMode 想做的事。

它解决什么问题

传统助手：只会说，不会做

大多数产品内嵌的 AI 助手是这样工作的：

用户：怎么创建订单？助手：请点击左侧菜单的「订单管理」，然后点击右上角的「新建订单」按钮......

用户还是得自己照着描述一步步操作，遇到界面不一样或者找不到按钮，照样卡住。

InterfaceMode：说完就帮你做完

用户输入意图，助手直接在界面上完成操作，并且每一步都有实时视觉反馈------高亮当前操作的元素，模拟光标移动------让用户知道「助手正在帮我操作第几步」。

操作结束后，助手用自然语言告诉用户结果，像一个真人陪着操作一样。

演示一下

在线体验 ：2019-02-18.github.io/interface-m...

这是一个模拟的商户后台，右下角有助手悬浮按钮。配置好 AI 接口后，对助手说：

「创建一笔订单」

你会看到：

助手在聊天框说「正在导航到订单管理页」------页面真的跳过去了
「点击新建订单按钮」------按钮出现高亮蓝框，光标移过去，弹窗打开
「正在填写客户名称」------输入框高亮，文字自动填入
「提交订单」------提交按钮高亮，点击，完成

用户全程只说了一句话，其余的助手替他做好了，并且每一步都看得见。

为什么视觉反馈很重要

这是 InterfaceMode 和「后台静默脚本」的本质区别。

用户看见助手在帮他操作，才会信任这个助手。看见高亮框停在「客户名称」输入框上，才知道助手没填错地方。看见光标移向「提交」按钮，才放心地等待结果。

这种设计更接近一个有经验的同事坐在旁边陪你操作，而不是一个你看不懂的黑盒在后台跑。

安全边界是内置的

并不是所有操作都适合助手代劳。框架内置了两级策略：

直接拦截：比如「注销账号」这类高危操作，站点配置里写明禁止，助手即使收到指令也不会执行，会告诉用户「这个操作需要您亲自完成，我帮您定位到按钮位置」。

二次确认：批量删除、大额操作等，助手会先展示即将做什么，用户确认后再执行。

这样既保留了助手的便利性，也把关键权限留在用户手里。

开发者视角：怎么把它接入你的产品

InterfaceMode 是一个开源框架，框架本身不绑定任何业务逻辑。接入一个新网站，只需要写一份 SitePack（站点包），告诉助手这个网站能做什么。

SitePack 是什么

一个 TypeScript 对象，声明四件事：

typescript 复制代码

export const sitePack: SitePack = {
  siteId: 'my-admin',
  name: '我的管理后台',
  skillsMarkdown: runtimeGuide,  // 给 AI 看的操作手册

  // 1. 预定义操作路径（用户说「创建订单」时走哪几步）
  playbooks: [
    {
      id: 'create_order',
      triggers: ['创建订单', '新建订单', '下单'],
      steps: [
        { tool: 'click', find: { textContains: '订单管理' }, explanation: '进入订单管理页' },
        { tool: 'click', find: { textContains: '新建订单' }, explanation: '打开新建弹窗' },
        { tool: 'input', find: { textContains: '客户名称' }, inputValue: '{{name}}', explanation: '填写客户名' },
        { tool: 'click', find: { textContains: '提交' }, explanation: '提交订单' },
      ],
    },
  ],

  // 2. 直接调用的业务接口（查数据不扒 DOM，更准确）
  apis: {
    getRevenue: async () => {
      const data = await window.myApp.getRevenue();
      return { success: true, message: `今日营收：¥${data.total}` };
    },
  },

  // 3. 禁止助手自动执行的高危操作
  blockedActions: [
    {
      id: 'block-logout',
      reason: '注销账号需您亲自确认，已为您定位到按钮',
      when: { action: 'click', textContains: '注销账号' },
    },
  ],
};

初始化只需一行

typescript 复制代码

import { InterfaceModeRuntime } from './framework/runtime';
import { sitePack } from './site-packs/my-admin';

new InterfaceModeRuntime({ sitePack });
// 悬浮助手窗口自动挂载到页面，不需要改任何 HTML

不需要给页面加任何标记

框架通过页面上的可见文字、aria 语义、label 关联 定位元素，不依赖 data-testid 或特殊属性。你现有的页面不需要做任何改造。

支持国内主流大模型

助手的第一次使用需要在设置里配置 AI 接口：

提供商	推荐模型	说明
DeepSeek	`deepseek-chat`	推理能力强，适合多步骤任务规划
通义千问（Qwen）	`qwen-max`	国内直连稳定
OpenAI 兼容接口	任意	本地部署的模型也支持

配置信息只存在用户浏览器的 localStorage 里，不经过任何第三方服务器。

这个框架适合谁用

做 ToB 产品的团队：帮企业用户快速上手复杂系统，减少培训和客服成本
内部工具开发者：给公司内部系统加一个会操作的助手，降低员工学习成本
想研究 AI Agent 落地的开发者：一个完整的、可运行的参考实现，包含快照、执行、视觉反馈、多轮规划的完整链路

项目信息

GitHub ：github.com/2019-02-18/...
在线演示 ：2019-02-18.github.io/interface-m...
许可协议：Apache 2.0（自由使用和修改，包括商业用途）

目前是可用的开源参考实现。如果你在做类似的事，或者对「让 AI 助手真正融入产品界面」这个方向感兴趣，欢迎交流。