做 SayCraft 这半年，踩过的坑比写过的代码还多。今天聊聊我们在产品理念和 UI 审美上的一些思考——不是什么方法论总结，就是真实的决策过程。

时效性是唯一重要的事

SayCraft 要解决的核心问题只有一个：你说话的同时，产品在变。不是"说完需求等三天"，不是"提交工单排期下个月"，是你正在说的这句话，屏幕上的东西就在动。

这件事听起来简单，做起来全是取舍。Live 会议里，组件一个个进场，你能看到产品被搭建的过程——这个过程本身就是体验的一部分。但归档回放呢？没人想再看一遍施工现场。所以回放直接展示最终成品，干干净净。

过程有戏，成品干净。这句话我们内部说了无数遍。

把技术藏起来

早期版本有个设置项叫"Claude Code 模型"。同事看了一眼就说：你这不就是告诉用户你套了个 Claude Code 吗？

改成了"编码模型"。

主页也是一样的问题。我们曾经把"声纹分人"写在首页——这功能压根不存在。还有一堆听起来很厉害但实际没做的东西，全编上去了。用户原话是这样的："我们主页现在很多内容都是编的，请你改成真实的并且隐藏技术方面的内容，用户不 care！"

说得对。用户不关心你底层跑的是什么模型，不关心你的架构多精妙。他们只关心：我说了一句话，东西变了没有？

审美是个持续挨骂的过程

UI 审美这件事，我被骂过很多次。

最狠的一句："你就看各家大厂样式虽然都不一样但没一家做成你这么丑的。"

后来我们定了几条原则。低饱和度，暖色调，克制。参照对象是 Claude 的界面风格——不扎眼，不抢注意力。紧凑组件，拒绝大面积留白的"高级感"面板。支付页面看了 Cursor、Lovable、Linear 的做法：一个 CTA 按钮，点击后弹出支付方式，不搞三列对比图让用户做阅读理解。

有一次支付页做了个推荐标签，用户选了最高档的方案，页面还在推荐中间档。被问了一句："你能不能有点审美产品意念？人家选了最高档还推荐中间档？"

这种错误现在想想很蠢，但当时确实没意识到。

工具行：从丑到能看

会议里 AI 执行操作时会显示工具调用信息。早期版本直接把原始 Bash 命令贴出来，文件路径写全路径，一行能拉出屏幕外。

改造方案参考了 Cursor、Manus、Kimi、Claude.ai、v0 的做法。Bash 命令用一句短描述替代原始命令，文件路径只显示文件名，不要前面一长串目录。视觉上分两层：叙事层保留两行说明，工具层压成一行。这样用户知道 AI 在干什么，但不会被技术细节淹没。

一个 favicon 的纠结

品牌图标这事折腾了好几轮。

最开始想把整个产品流程画进图标里——语音、代码、预览，全塞进去。结果缩到 16px 什么都看不清。后来看了一圈标杆，Claude 的 logo 给了我们启发：简单，一眼就知道干嘛的。

16px 的 favicon 是个残酷的测试场。能认出来的 favicon 全是单一大色块加强对比，没有例外。我们最后选了对话气泡加对称声波的组合，用暖陶土色。直接手写 SVG，没用 AI 生成栅格图再描线——favicon 本来就该是矢量的，绕一圈没意义。

输入框和动效：细节里全是争论

会议页的输入框最早是全宽的 AudioBar，同事试了一下说"非常反人类"，太长了，而且不支持打字输入。改成了悬浮的紧凑气泡框，语音和文字可以切换。

动效的偏好很明确：每个按钮、每个组件都独立闪进来，粒度到单个元素。但间隔时间反复调了七次——80ms 太快看不清，400ms 节奏还行但总觉得拖，1500ms 明显太慢，最后在 500ms 左右稳住。这种事没有公式，就是反复看反复调。

做产品就是不断被打脸

回头看这些决策，没有哪个是一步到位的。假功能写上主页、技术术语暴露给用户、支付逻辑自相矛盾、工具行丑到被点名——每一个都是真实犯过的错。

产品审美不是某个人天生的品味，是被用户、被同事、被自己反复否定之后慢慢磨出来的东西。唯一能做的就是：听批评，改快点，别在同一个地方摔两次。

SayCraft 还在迭代，欢迎来 saycraft.ai 看看现在长什么样。