/ 08
产品 VI · 操作面板
主页是品牌的脸；操作面板是产品的身体。这里把工坊里所有微观规范集中说清楚 —— 栏宽、栏高、消息、状态、命令栏、滚动条。
① 主网格 · 三栏 + 双横条
TOP · 52PX · brand · project · status · actions
SIDE · 240PX
file tree
CHAT · 380PX
messages + composer
PREVIEW · 1FR
iframe + chrome
BOTTOM · 36PX · build status · agent · url
topbar顶部操作栏
高 52px · 含品牌、项目路径、分支标签、状态、操作按钮。bg-soft 背景，底部 1px line 分隔。
52px · bg-soft · 1px line
side文件树 / 组件
固定 240px。包含文件 / 组件 / 历史 三个 tab，bg-soft 区分主区。≤880px 折叠为抽屉。
240px · bg-soft
chat对话区
固定 380px。上部为消息列表，下部为 composer。bg 主背景。≤1180px 时与 preview 切换显示。
380px · bg
preview实时预览
1fr 自适应。顶部 chrome（48px）含 tabs / url / device 切换，主区是浮起的预览框。
1fr · bg · grid bg
bottom状态条
高 36px · 显示构建状态、文件统计、当前模型、预览 URL。永远在最底部，永不滚动。
36px · bg-soft
② 状态系统 · 4 态
live
实时
主色脉动。构建成功 / 预览运行中 / 实时同步。每 2 秒呼吸一次。
building
构建中
主色快速闪烁。正在生成 / 编译 / 部署。1.4 秒一次缩放。
idle
待命
muted 静态。无活动 / 空闲项目。不动。
error
失败
红色静态。构建失败 / 运行报错。配 toast 不配脉动 —— 不应「持续刺激」用户。
③ 消息系统 · 3 类
你 · 14:32
用户消息 · 文本灰度降低 · 突出 AI 回应
zao · 14:32 · 已用 8 秒
AI 消息 · 文本满色 · 带耗时副标
✓
创建pages/index.html
正在编译预览…
you用户消息
meta 行 = 「你 · HH:MM」faint，body = muted 灰度。无气泡，无头像 —— 安静地存在。
muted text · faint meta
ai系统消息
meta 行 = 「zao · HH:MM · 已用 N 秒」zao 字主色，body = text 满色。可挂动作清单。
text body · accent brand
actions动作清单
左侧 1px 竖线 + 14px 内缩，每行 = 圆形 ✓/dash + 动词 + 文件名。文件名走 mono + accent。
1px rule · circle marker
④ 命令栏 · composer
shell容器
圆角 10px · 1px line 描边 · 聚焦时 border 变 accent · 内层 textarea 透明
10px · focus-within accent
chips动作 chip
左下 chip 行 = 命令类型（/ 编辑 / 解释）。激活的 chip = accent 背景 + 深色文字。
pill · 10.5px mono
send发送按钮
30×30 圆 · accent 实心 · 鼠标悬停旋转 -10° + 1.05× 缩放 —— 唯一允许的「调皮」动效。
30×30 · rotate hover
hint键盘提示
composer 下方一行 mono 小字：⏎ 发送 · ⌘K 命令 · ⌘/ 切换面板。faint 灰度。可选。
10px · faint
⑤ 文件树 · 极简层级
group分组标签
PAGES · 页面
10px · 0.18em · faint
folder文件夹
📁 pages
12px · muted · accent icon
file普通文件
└ about.html
32px indent · muted
active当前打开
└ index.html ●
accent bg 12% · 2px left
dirty未保存圆点
6px accent 圆点贴在右侧 —— 表示文件有未提交修改。
6px dot · accent
⑥ 微观细节
焦点环
所有可聚焦元素：border-color 切换为 accent，无外发光。无 outline。tab 顺序严格按视觉顺序。
滚动条
6px 宽，thumb = line × 1.5，hover 时 = text × 0.4。永远不抢镜。
hover
文字行 hover = 加 hairline 背景；按钮 hover = border 变 text。无下划线、无放大。
选中
文件 / tab / chip：accent 12% 半透明背景 + 2px accent 左边线 / 实心 accent 背景。不要勾选标记。
分隔线
主线 = --line（12% / 14%），微线 = --hairline（6% / 7%）。任何视觉切分都从这两档选。
快捷键
⌘K 命令栏 · ⌘/ 切换侧栏 · ⌘↩ 部署 · ⌘P 切预览 · Esc 关闭浮层。永远写在 hint 行。
LIVE · 真实样板
所有这些规范，在 workspace.html 已经落地
打开操作面板 →
/ 10
AI 协作微交互
vibe coding 真正区别于普通 web app 的部分 —— 这些交互是 AI 在场的痕迹。每一处都要让人感觉「合作者」而不是「黑盒」。
A · 聊天内的代码块
css
styles.css · L 124-138
.hero {
min-height: auto;
padding: 96px var(--pad) 56px;
}
结构
头条 = 语言 chip + 文件路径(可点跳转) + 复制 + 应用。永远右上角放 apply，不要藏到二级菜单。
应用反馈
点击 apply 后：按钮替换为 ✓ 已应用 · 1.5s 后退场 · 同时高亮文件树中对应文件 · 预览自动刷新。
自动诊断
若代码块涉及 diff，自动展示 +N −N 计数；超过 30 行折叠默认收起，给「展开全部」按钮。
B · @ 引用 · / 命令
@ mention
把它和 @Hero 的样式统一…
文件
📄Hero.jsxcomponents
📄HeroCompact.jsxcomponents
组件
◇Hero · 着陆页templates
/ command
/undo
动作
↩/undo撤回上次
⟳/regenerate重新生成
⇩/explain解释代码
📸/screenshot附图
触发
输入 @ 弹文件 + 组件；输入 / 弹动作。下拉就在光标位置浮起，跟随输入实时过滤。
键盘
↑↓ 选择 · ↹ / ↩ 确认插入 · ESC 关闭
插入样式
@ 引用插入为 chip（accent 浅底 + 文件名）· / 命令插入为彩色文本，提交后变为系统消息。
C · 元素选择器 · inspect mode
preview · ⌘ 点击任意元素
borderless ambition_
点击元素的同时 AI 已经在思考可以修改的方向。
h2 · hero-title · 36px
进入
预览面板顶栏点 ⊙ 进入选择态 · 或按 ⌘. 进入。鼠标 hover 任意元素显示虚线 ghost + 标签。
选中
点击元素 → 元素信息（tag · className · 尺寸）自动写入聊天框作为 @ 引用 → 你只需描述要改成什么。
可视
ghost = 1.5px dashed accent + accent 10% 透明背景 · label = accent 实心 + 黑文字 · 紧贴 ghost 顶部
D · 生成中可控
进行中
AI 正在生成时，发送按钮替换为这组控制。暂停 = 保留已生成；停止 = 全部丢弃。
已完成
hover AI 消息时悬浮 · 重生 / 继续 / 反馈 三类。反馈匿名收集用于改进模型。
E · 配额 · 成本可见
本月用量
2.4M / 5M tokens
✦ 还可造 ~62 个中型项目
本月用量
4.6M / 5M tokens
⚠ 接近配额 · 升级或月底重置
原则
把数字换成「人话」 —— 不说「4.6M tokens」，要说「还可造约 X 个项目」。让用户对成本有体感。
预估
发送前显示「本次预估 ~2.3k tokens」 · 大消息（>10k）必须二次确认 · 用户永远知道下一步要花多少。
F · 版本时间线
当前
把品牌改为造物编程，文案改为中文
14:42
应用
加深色 / 浅色切换 · 重写移动端断点
14:36 · 4 文件
应用
电影感深色 · 暖光氛围 · hero + stats + 用例结构
14:32 · 12 文件
起点
项目创建
14:31
结构
纵向时间线 · 当前节点脉动 + accent · 已应用 = accent 实心 · 起点 = muted。每一行可点回到该版本预览。
分支
任意节点 → 新分支：保留原线，开新版尝试。不会「改坏」，永远可回。
G · 设备预览切换
1440 × 900
四档
桌面 1440 · 平板 768 · 手机 390 · 自由 = 拖拽 resize。切换时预览容器以 0.4s cubic 过渡，看着尺寸「长」出来。
尺寸读数
切换或拖动时实时显示当前像素（W × H）。永远精确到 1px，永远 mono 字体。
H · 快捷键总览 (按 ?)
打开命令栏⌘K
部署⌘↩
切换侧栏⌘/
新建项目⌘N
检视元素⌘.
撤回上次⌘Z
切换主题⌘⇧L
切换语言⌘⇧P
本快捷键面板?
呼出
任意位置按 ? 弹出（输入框内除外）· 居中 overlay + backdrop · 按 ESC 或再按 ? 关闭。
搜索
顶部搜索框过滤快捷键。中文 / 英文 / 键位都能搜（「撤回」「undo」「⌘Z」都命中同一条）。
I · 多文件上传进度
PNG
hero-reference.png
2.4 MB·✓ 已读取
✕
PDF
design-spec-v3-final.pdf
1.8 / 4.2 MB·42%
✕
一行一文件
左侧 36×36 类型 chip（PNG / PDF / SVG / TS）· 中间 名称 + 大小 + 状态 + 细进度条 · 右侧 ✕。
状态色
上传中 = accent · 完成 = #6ba87a + ✓ · 失败 = #d96b5a + 重试链接 · 排队 = muted
J · 危险动作确认
⚠
删除项目 aurora-landing
该项目的所有版本、对话历史、部署 URL 都将被释放。30 天内可在归档中恢复。
阈值
仅当不可秒回的操作启用：项目删除、配额扣减、域名释放、订阅取消。普通「删除一行」不要弹。
键入确认
必须输入完整项目名才解锁红色按钮。让「无心点错」几乎不可能发生。
K · 错误恢复
✕
构建失败
styles.css:47 · 未闭合的 { · 第 124 行附近
✕
第一行动作
错误的「第一行动作」永远是「让 zao 修」 · 不是「查日志」。让用户在 1 秒内有出路。
细节折叠
只展示文件名 + 行号 + 错误类别。完整堆栈藏在「查看日志」中，对小白透明。
L · 连接 · 引导 · 抽屉
连接状态
已连接 · zao.app
同步中 · 3 个变更
离线 · 仅本地
新手
02
试试 @ 引用文件
在对话框输入 @ 弹出文件 / 组件列表。zao 会带着具体上下文回答你。
主区 · 文件树 + 对话 + 预览
连接
3 态：online（绿 + 脉动）/ sync（accent + 旋转）/ offline（muted）。永远放在底栏左侧固定位置，第一眼就能看到。
引导
新用户首 3 天每次发现新能力时浮出一张卡。永远 1 个动作，永远可关，永远不打断当前任务。
抽屉
设置 / 资产 / 历史 从右侧滑入，0.35s cubic-bezier(.2,.7,0,1)。点外部或 ESC 关闭。永不喧宾夺主。
SUMMARY · 12 个 AI 协作专属模式
A 代码块 · B @ / 引用 · C 元素选择器 · D 生成控制 · E 配额 · F 时间线 · G 设备切换 · H 快捷键 · I 上传 · J 危险确认 · K 错误恢复 · L 连接 / 引导 / 抽屉
/ 11
vibe coding 微交互
vibe coding 产品的「质感」藏在这些细节里 —— 流式输出、思考反馈、骨架屏、diff 高亮、命令栏、拖放。这一章是所有动效的中心。
A · 生成态
思考中
zao
正在分析需求…
3 个点弹跳 · 1.2s 循环 · 仅 AI 消息使用，不放在按钮里
流式输出
已读取参考。结构使用 hero + 数据 + 用例
字符按 token 渐入 · 末尾闪烁竖光标 · 1s 闪 2 次
骨架屏
预览框 / 卡片首次加载时使用 · 1.6s 一道光
B · 进度与流程
进度条
确定百分比的任务 · 暖色渐变 + 高光扫过
不定时
时长未知的任务 · 1.6s 循环 · 永不超过 12 秒不给反馈
部署流程
多步任务 · done = accent 实心 · now = 脉动 · todo = faint
C · 代码变更 diff
styles.css · +4 −1
.hero {
min-height: 100vh;
min-height: auto;
padding: 96px var(--pad) 56px;
}
@media (max-width: 720px) {
.hero { padding-top: 80px; }
}
add新增行
left + 标记 + accent 绿底 14% · 文字 #a5d4b0
+ #6ba87a · bg 14%
del删除行
left − 标记 + 暖红 14% · 文字 #e8a59a
− #d96b5a · bg 14%
context上下文
muted 文本 · 无背景 · 保留两行上下文给阅读
muted text
D · 命令栏 ⌘K
⌕
ESC
动作 · 你最常用
▶
部署到 zao.app
⌘↩
↩
撤销上一次对话
⌘Z
↗
在新窗口打开预览
⇧↗
跳转
📁
pages/index.html
⌘P
呼出
⌘K（mac）/ Ctrl+K（win）随时呼出。仅一个 palette 全局可用，不与浏览器搜索冲突。
呈现
居中、半透明 + 20px backdrop blur · 圆角 12px · 阴影 0 30px 80px · 入场 0.2s 上浮 8px
分组
动作 · 跳转 · 项目 · AI 模式 四类。每类带 mono uppercase 小标题。
键盘
↑↓ 选择 · ↩ 执行 · ESC 关闭 · ⌘ 开关
E · toast 通知
已部署到 zao.app/cafe-coral
✕
位置
右下角堆叠 · 距底 24px · 距右 24px · 最多同时显示 3 个
时长
成功 4s · 信息 6s · 错误 不自动消失 · 入场 0.4s slide-up
组成
左侧 mark (mono · 类型色) · 中间正文 · 右侧 ✕ · 可挂二级链接
F · 拖放上传
↑
把参考图拖到这里
或 ⌘ V 粘贴 · 或点击选择 · 支持 png · jpg · svg · pdf · max 8MB
G · 协作存在感
头像组
林
陆
许
+3
-8px overlap · 2px bg 边框 · 右下角绿点 = 在线 · +N 表示溢出
数字
1,247 件作品
data-counter 自动从 0 缓动 · 1.4s · ease-out cubic · 数字进入视口时触发一次
H · 空状态
✦
还没有项目
把你脑里的 idea 用一句话说出来 —— zao 会接着干。
⌕
没找到「咖啡店」
试试更宽的关键词，或者直接让 zao 帮你造一个。
结构
圆形 icon · h4 标题 · 一句话说明 · 一个下一步动作。永远要给出下一步，不要只显示「空」。
语气
平静、有出路。不用「Oh no!」「找不到了」「请重试」。
I · hover & 工具提示
tooltip
项目设置 · ⌘,
hover 150ms 后浮现 · 上 8px · mono · 永远带快捷键
光晕跟随
鼠标移到这里 →
大型可点元素（案例卡 / CTA）可启用 · radial gradient 跟随鼠标 18% 暖光
键盘提示
⌘ K 呼出命令栏 · ⌘ ↩ 部署 · G P 跳转项目
J · 动效原则
/ 01
慢比快好
入场 600-900ms · 离场 200-300ms · 永不超过 1.2s · 让用户感觉是「长出来的」而不是「弹出来的」
/ 02
同一缓动曲线
cubic-bezier(.2,.7,0,1) 入场 · 全局唯一一条曲线 · 不要让不同元素跑出不同节奏
/ 03
动作要有理由
只有「状态变化」才动 —— 数据进入视口、内容生成完成、新通知到达。不要为了动而动。
/ 04
尊重 reduce-motion
所有 @keyframes 都通过 prefers-reduced-motion 短路成 0s · 用户不该被你的「质感」折磨。