企业官网建设流程全解析

SUSI Skypebot 是 Fossasia 开源 AI 助手 SUSI 的 Skype 聊天机器人。它通过 botbuilder 框架中的 HeroCard（英雄卡片）和 ThumbnailCard（缩略卡片），把枯燥的纯文本对话变成可点击、可浏览的富媒体聊天体验，让新手用户也能在 Skype 里轻松使用 AI 问答。

为什么聊天机器人需要交互卡片？

纯文本机器人最大的痛点是：用户不知道能问什么，答案也无法结构化呈现。

SUSI Skypebot 的解法是"卡片三件套"：

💡 核心思路：用卡片承载信息，用按钮承载交互。

HeroCard 实战：一句话完成品牌自我介绍

当用户发送get started时，机器人不会回一长段文字，而是推送一张 HeroCard——包含标题、副标题、正文和跳转按钮，一眼看清"我是谁"。相关逻辑见 app.js：

• 标题：SUSI AI
• 副标题：Open Source personal assistant
• 按钮：跳转官方代码库

设计秘诀：HeroCard 只放"一句话价值主张 + 一个行动按钮"，信息密度低，用户零压力。

ThumbnailCard 实战：3 个按钮解决"不知道问什么"

新手用户打开聊天窗口最常卡住的环节是"第一句该说什么"。机器人对start chatting的回应是一张 ThumbnailCard，内置 3 个示例问题按钮（What is FOSSASIA?、Who is Einstein? 等），点击后通过imBack直接把问题回传给机器人，实现"点一下就能开始对话"。这段代码位于 app.js。

🎯最佳实践：按钮文案直接用用户想问的原话，而不是"点击这里"之类的空话。

动态卡片轮播：表格与 RSS 数据这样呈现

普通问答走 SUSI 官方 API（http://api.susi.ai/susi/chat.json，见 app.js），但表格类和 RSS 类答案会被转换成多条 HeroCard 轮播：

• 表格答案：按行生成卡片，第一列作标题、其余列作正文，横向滑动浏览（app.js）
• RSS 答案：第一条直接文本回复，后续条目转成卡片轮播（app.js）

轮播布局通过builder.AttachmentLayout.carousel一行开启，让多条内容"横向滑动"而不是刷屏，这是保持聊天界面整洁的关键技巧。

提升聊天体验的 4 个隐藏细节

1. 输入中指示：每次回复前调用session.sendTyping()（app.js），让用户知道机器人"正在思考"
2. 兜底话术：解析失败时回复 "Oops looks like SUSI is taking a break try again later."，永远不让用户面对空窗（app.js）
3. 加好友欢迎语：contactRelationUpdate事件里按用户姓名打招呼，建立第一印象（app.js）
4. 文本 + 卡片搭配：先session.say给一句导语，再推卡片，信息层次更清晰

快速搭建你的 SUSI Skypebot

整个项目核心仅 app.js 一个入口，依赖 botbuilder、restify 等（见 package.json），启动方式简单：

npm install && npm start

完整部署流程在 README.md 中有图文说明：注册 Microsoft Bot 框架账号创建 Bot、获取 App ID、部署到云端服务、回填 messaging endpoint 即可。Bot 资料配置页如下：

项目还支持 Kubernetes 部署，YAML 清单位于 kubernetes/yamls/application/deployment.yaml 与 kubernetes/yamls/application/service.yaml，容器化配置见 Dockerfile 及 docs/installations/gce-kubernetes.md。

小结

SUSI Skypebot 用最轻量的代码演示了交互卡片设计的完整范式：

• HeroCard→ 重点内容与品牌展示
• ThumbnailCard + imBack 按钮→ 引导新用户开口
• Carousel 轮播→ 多条数据不刷屏

掌握这套"卡片三件套"，你的聊天机器人也能从"能用"升级到"好用"。