VibeForge — Web 界面原型设计
对话式 Web 应用工厂的用户界面设计规范
设计原则
-
●
对话优先：对话是核心交互，终端反馈次之，预览第三，文件浏览最次
-
●
简洁直觉：业务人员无需学习，打开就能用
-
●
深色主题：开发工具风格，专业但不压迫
-
●
响应式：优先桌面端，移动端能查看项目列表和对话
-
●
Tailwind 实现：所有样式用 Tailwind 原子类
页面清单
| 页面 | 路由 | 说明 |
|---|---|---|
| 登录页 | /login |
手机号 + 图形验证码 + 短信验证码登录 |
| 项目列表 | /projects |
项目卡片网格，显示空间使用和部署状态 |
| 项目工作台 | /projects/[slug] |
核心页面，对话为主的两栏布局 |
首页 / 未登录跳转 /login，已登录跳转 /projects。
1. 登录页 /login
布局预览
⚒
VibeForge
聊着聊着就锻造好了
+86
A7xK
元素说明
| 元素 | 样式/行为 |
|---|---|
| 背景 | 渐变深色 bg-gradient-to-br from-slate-900 to-slate-800，居中卡片 |
| Logo | 产品名 "VibeForge"，大字加粗，白色 |
| 副标题 | "聊着聊着就锻造好了"，text-slate-400 |
| 手机号输入 | 带 +86 前缀标识，11 位数字 |
| 图形验证码 | 右侧显示验证码图片，点击可刷新 |
| 发送短信按钮 | 需先通过图形验证码，点击后倒计时 60s |
| 短信验证码 | 6 位数字 |
| 登录按钮 | bg-indigo-600 hover:bg-indigo-500，宽度撑满 |
| 错误提示 | 输入框下方红色文字 |
交互流程
- 输入手机号
- 输入图形验证码 → "发送验证码"按钮激活
- 点击发送 → 校验图形验证码 → 成功则发送短信，按钮变为倒计时 "59s"
- 输入短信验证码 → "登录"按钮激活
- 点击登录 → 按钮 loading 态 → 成功跳转 /projects
- 失败 → 输入框下方显示错误信息
2. 项目列表页 /projects
布局预览
⚒
VibeForge
138****5678
我的项目
开发中
256MB / 1GB
公司官网
vf-b8m2p
创建于 3天前
已下线
64MB / 1GB
测试项目
vf-c9n4q
创建于 1周前
元素说明
| 元素 | 样式/行为 |
|---|---|
| 顶部导航 | 固定高度 h-14，深色 bg-slate-900 |
| 用户信息 | 手机号脱敏显示 138****5678 |
| 项目卡片 | grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 |
| 状态标识 | 🟢 已部署 / 🟡 开发中 / ⬚ 已下线 |
| 空间使用 | 右上角显示 已用 / 1GB，接近限制时变红 |
| 部署操作行 | 已部署：显示域名 + 下线按钮；开发中：显示「部署上线」；已下线：显示「重新上线」 |
| 空状态 | "还没有项目，点击「新建项目」开始创建" |
新建项目弹窗
新建项目
每个项目限制 1GB 存储空间
3. 项目工作台 /projects/[slug]
这是核心页面。用户需要同时看到终端反馈和预览效果，对话输入精简为底部输入条。
布局设计理念
- • 左侧 — 标签切换「📟 终端」和「📁 文件」，默认显示终端
- • 右侧 — 预览面板，默认网页预览；选中文件时自动切换为文件内容
- • 底部 — 精简输入条，「历史」按钮可复用之前的消息
整体布局预览（终端模式）
⚒
VibeForge
我的博客 (vf-a3x7k)
128MB / 1GB
$ claude
正在创建登录页面...
创建 src/routes/login/
+page.svelte
+page.svelte
添加了手机号输入框、验证码输入框和登录按钮。
正在修改输入框样式...
编辑 src/routes/login/+page.svelte
已将输入框改为圆角样式。
❯ _
🌐 网页预览
🌐
iframe 预览区域
就绪
整体布局预览（文件模式）
切换到「📁 文件」标签后，左侧显示文件树，选中文件后右侧自动切换为文件内容预览：
⚒
VibeForge
我的博客 (vf-a3x7k)
▼ src/
▼ routes/
▼ login/
+page.svelte
+page.svelte
+layout.svelte
▶ lib/
▶ static/
package.json
svelte.config.js
src/routes/login/+page.svelte
📄 +page.svelte
<script>
let phone = '';
let code = '';
</script>
<div class="login-form">
<input
type="tel"
bind:value={phone}
placeholder="手机号"
class="rounded-lg"
/>
<a href="/forgot">忘记密码?</a>
</div>
就绪
布局参数
- • 顶部导航栏：固定
h-14，包含部署、下载按钮 - • 左侧主区域：标签切换「📟 终端」/「📁 文件」，自适应宽度
- • 右侧预览面板：默认
w-[380px]，显示网页预览或文件内容 - • 底部输入区：固定高度，「历史」按钮 + 状态指示器 + 输入框
- • 终端显示最近 200 行，「完整会话」按钮弹出全屏查看
3.2 左侧主区域：终端 / 文件切换
左侧通过标签切换「📟 终端」和「📁 文件」两个视图。
终端视图（默认）
| 元素 | 说明 |
|---|---|
| 背景 | 黑色背景 bg-black，等宽字体 font-mono |
| ANSI 渲染 | 保留 Claude Code 的颜色输出 |
| 显示行数 | 默认显示最近 200 行 |
| 自动滚动 | 新输出时自动滚到底部，手动上滚时暂停 |
| 完整会话按钮 | 右下角，点击弹出全屏模态显示完整终端历史 |
文件视图
| 元素 | 说明 |
|---|---|
| 文件树 | 展开/折叠目录，缩进层级显示 |
| 文件图标 | .svelte 橙色，.ts 蓝色，.css 紫色 |
| 选中状态 | 选中文件高亮显示，带 ring-1 ring-indigo-500 |
| 点击文件 | 右侧预览面板自动切换为文件内容视图 |
| 底部路径 | 显示当前选中文件的完整路径 |
| 下载按钮 | 下载当前选中的文件 |
底部输入条
| 元素 | 说明 |
|---|---|
| 历史按钮 | 左侧 📋 按钮，点击弹出历史消息列表，可点击复用 |
| 状态指示器 | 🟢 就绪 / 🟡 工作中 / 🔴 断开 |
| 输入框 | 单行输入，Enter 发送，Shift+Enter 换行 |
| 发送按钮 | ➤ 箭头图标，bg-indigo-600 |
对话历史弹窗
点击「历史」按钮弹出，显示之前发送的消息，点击可快速复制到输入框：
最近消息
帮我创建一个登录页面
把输入框改成圆角的
添加一个忘记密码链接
状态指示器
就绪
AI 正在工作...
连接断开
3.3 右侧：预览面板
右侧面板根据左侧操作自动切换：默认显示网页预览，左侧选中文件时自动切换为文件内容。
| 元素 | 说明 |
|---|---|
| 网页预览（默认） | iframe 指向 ${DOMAIN}/preview/${slug} |
| 文件内容 | 左侧选中文件时自动切换，显示代码内容带语法高亮 |
| 返回按钮 | 文件视图时显示「← 返回网页预览」 |
| 刷新按钮 | 🔄 重新加载网页预览 |
| 最大化按钮 | ⤢ 展开为全屏模态 |
| 文件名 | 文件视图时显示当前文件名 |
3.4 交互流程说明
查看终端输出
- 默认显示「📟 终端」标签
- 实时查看 AI 工作输出
- 点击「完整会话」查看完整历史
浏览和预览文件
- 点击「📁 文件」标签切换到文件视图
- 展开目录，点击选中文件
- 右侧自动切换为文件内容预览
- 可点击「← 返回网页预览」切回网页
发送消息
- 在底部输入框输入需求
- 按 Enter 或点击 ➤ 发送
- 点击「📋 历史」可复用之前的消息
4. 全局组件
4.1 部署确认弹窗
部署到生产环境
确定要部署项目「我的博客」吗？
部署后可通过以下域名访问：
vf-a3x7k.vibeforge.app
4.2 确认删除弹窗
确认删除
确定要删除项目「我的博客」吗？
此操作不可恢复，项目代码将被永久删除。
4.3 Toast 通知
✅ 部署成功
✅ 项目创建成功
❌ 部署失败，请重试
⚠️ 空间使用已超过 90%
ℹ️ 正在部署中...
5. 颜色系统
基于 Tailwind slate 色系的深色主题：
页面背景slate-950
面板背景slate-900
卡片背景slate-800
主色indigo-600
部署色green-600
危险色red-600
警告色yellow-500
终端背景black
6. 响应式策略
| 断点 | 行为 |
|---|---|
>= 1280px (xl) | 对话 + 预览两栏布局 |
1024px - 1279px (lg) | 预览可折叠，点击图标展开 |
768px - 1023px (md) | 隐藏预览面板，底部标签切换 |
< 768px (sm) | 单栏布局，底部标签在 对话/终端/预览 间切换 |
移动端底部标签
(当前选中面板内容)
7. 键盘快捷键
| 快捷键 | 功能 |
|---|---|
| Enter | 发送消息 |
| Shift + Enter | 输入框内换行 |
| Ctrl + 1 | 切换到对话视图 |
| Ctrl + 2 | 切换到终端视图 |
| Ctrl + B | 切换文件面板显示/隐藏 |
| Ctrl + D | 一键部署 |
| Escape | 关闭弹窗/对话框 |
8. 加载与空状态
项目列表空状态
📂
还没有项目
点击右上角「新建项目」开始创建
项目工作台初始态
⚒
VibeForge
项目已准备就绪！
告诉我你想创建什么样的网站，比如：
- • "帮我创建一个个人博客"
- • "做一个公司官网首页"
- • "创建一个待办事项应用"
部署中状态
正在部署到生产环境...
通常需要 10-30 秒
预览加载态
预览服务正在启动...
9. 动画与过渡
| 场景 | 动画 |
|---|---|
| 页面切换 | Svelte fly 过渡，200ms |
| 弹窗出现 | fade + scale，150ms |
| 文件面板滑出 | 从右侧 fly 滑入，200ms |
| 状态指示器切换 | fade，200ms |
| thinking 状态 | 黄色圆点脉冲动画 animate-pulse |
| 部署中状态 | 绿色圆点脉冲动画 |
| 文件树展开/折叠 | slide，150ms |
| Toast 出现 | 从右侧滑入，3 秒后滑出 |
| 分隔线拖拽 | 实时跟随鼠标，无延迟 |
10. 错误处理 UI
| 场景 | 展示方式 |
|---|---|
| WebSocket 断开 | 状态栏显示 🔴，自动重连，重连成功恢复 🟢 |
| 发送消息失败 | 消息气泡显示重试按钮 |
| 文件加载失败 | 文件面板显示 "加载失败，点击重试" |
| 预览加载失败 | 预览区域显示 "预览服务异常" + 刷新按钮 |
| 部署失败 | Toast 显示错误信息 + 弹窗详细错误 |
| 空间超限 | 顶栏空间显示变红，操作时弹窗提示 |
| 创建项目失败 | 弹窗内显示错误信息，可重试 |
| 图形验证码错误 | 输入框下方红字提示，刷新验证码图片 |
| Session 过期 | 全局弹窗 "登录已过期，请重新登录" |