Lovable / V041

Lovable · 从 Slack 发起制作

在同一个聊天线程里呈现多人补充需求、助手交付结果、用户确认下一步。通过消息前后层次引导阅读，不把协作拆成互不相关的屏幕。

构图与编排可播放 · 可替换内容

整体编排规则示例

0.00 / 30.03 秒

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>You can now tag @Lovable in Slack.

In a thread or DM, ask Lovable to build a new app, ship a change, or get quick answe · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101013}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

画面元素聊天容器多方消息助手身份仪表盘确认回复

MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

消息是主角，窗口是容器

用温暖到冷色的渐变作为背景，白色消息卡始终保持高对比。发言者、头像和助手标记固定对应，不随卡片换位而改变身份。

消息正文用常规无衬线字，姓名略粗；长消息按自然语意分行。输入与结果卡要比旁侧装饰更醒目。

用深度表现会话焦点

新消息进入前景后，旧消息轻微后退、缩小并降低对比。每次只突出正在阅读的一条或一组补充消息，保留足够上下文让观众知道助手在回答谁。

多人意见齐全后再让助手回应。结果先出现，追问随后进入；涉及后续行动时，把用户确认保留为单独一拍。

会话节点	需要交代的信息
发起请求	要做什么
多人补充	补充哪些数据或条件
助手交付	已经产生什么成果
追问与确认	下一步由谁同意
行动反馈	确认后发生了什么