跳到主要内容

构建并预览网站

Open Terminal 最直观的一点是：AI 不只会写网页代码，它还能启动服务，并把结果直接显示在 OPL 数据空间的预览面板里。你继续在聊天里提修改意见，预览也会实时更新。

工作方式​

  1. 你让 AI 创建一个网站或 Web 应用
  2. AI 生成文件并启动 Web 服务器
  3. Open Terminal 自动检测新开放的端口
  4. OPL 数据空间弹出预览面板，直接显示页面
  5. 你继续要求修改，AI 编辑文件，预览即时刷新

AI creating a landing page with file browser showing the created files

“给我做一个 landing page”​

你： 给我的摄影工作室做一个 landing page，要有 gallery、about 和 contact form。

AI 会创建 HTML、CSS、JavaScript 文件，启动服务，并把预览自动显示出来。

File browser showing the created HTML files

“改颜色和布局”​

你： 把背景改成深色，整体色调暖一点，把 gallery 放到 about 上面。

AI 会修改 HTML / CSS，然后你会立即在预览中看到变化。

“做一个有交互的页面”​

Open Terminal 不只适合静态页，也能做交互式前端应用。

你： 给我做一个浏览器里运行的简单计算器。

AI creating and running code for interactive applications

“帮我修网站”​

如果你已有一个网站，也可以把文件上传后让 AI 帮你定位问题。

你： 上传现有 HTML/CSS，然后问：contact form 不提交，帮我修一下。

AI 会读取代码、定位问题、修复，并让你在预览面板里即时验证。

AI identifying and fixing code errors

端口检测机制​

你不需要手动配置预览。内部流程大致如下：

  1. AI 启动一个 Web 服务器，例如 python -m http.server 3000
  2. Open Terminal 监听新端口
  3. 检测到服务运行后，把端口信息回报给 OPL 数据空间
  4. OPL 数据空间通过代理把页面显示到预览面板中

这意味着通常不需要额外开端口或改防火墙。

多个预览

如果 AI 启动了多个服务，例如前端在 3000、后端 API 在 5000，你可以在 ports 区域之间切换。

下一步可以试试​