18｜复杂前端交互：让 Claude Code 帮你搞定流式聊天界面
Robert
你好，我是 Robert。
17 讲做完了对话引擎的后端——六步链路跑通，curl 能看到 SSE 流式输出，上下文管理验证完毕。但用户和智能客服对话还得靠命令行。这一讲我们把它搬到浏览器里，做完 Hify 的整个前端：Provider 和 Agent 的管理页面，以及真正的聊天对话界面。
但在动手之前，有一件事要先想清楚：复杂页面和简单页面，给 Claude Code 的描述方式是不一样的。
复杂度分层：为什么不能一次性描述
把整个对话页面的需求一次性丢给 Claude Code，会发生什么？
先看一个典型的错误提示词：
帮我做一个 AI 对话页面，左边是会话列表，右边是聊天窗口，支持流式回复，用户消息靠右，AI 消息靠左，底部有输入框，按 Enter 发送，要有打字机效果，支持 Markdown 渲染，自动滚动到底部。
这条提示词列出了大量功能点，看起来很完整。实际生成的结果：布局大致对，但消息气泡样式随机，打字机效果是 setTimeout 模拟的假效果（内容一次性拿到再逐字显示），SSE 用了标准 EventSource 发 POST 请求，而标准 EventSource 只支持 GET，接口根本跑不通。调试两小时，问题出在描述方式上，不在代码上。
对比一个按层拆解之后、第二步才会写的提示词片段：
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Claude Code 企业级全链路开发实战》，新⼈⾸单¥59
《Claude Code 企业级全链路开发实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论