前端标签页能做什么
围绕页面开发提供文件树、Monaco 编辑器、预览面板、终端与下载能力，适合持续迭代 UI 与交互。
文件树
Monaco 编辑
实时预览
多设备视图
代码
浏览项目文件结构，打开页面、组件、样式和静态资源文件进行编辑。
预览
在预览面板查看页面效果，并支持多预览标签与刷新操作，方便同时比对多个入口页面。
多端
支持桌面、平板、手机等视图尺寸，适合联动检查响应式布局与视觉稳定性。
核心能力
文件树与标签页
支持浏览文件夹、打开多个文件标签页，并在 AI 流式写入文件时自动同步当前工作区状态。
在线代码编辑
使用 Monaco 编辑器维护组件、页面与样式文件，适合对生成结果做局部精修和结构化改动。
预览与刷新
可直接查看前端页面渲染效果，支持自定义预览地址、手动刷新与多预览窗口并行检查。
终端与代码下载
支持使用前端终端、执行本地调试命令，并可将前端上下文打包下载到本地做交付或者继续开发。
云端模式与本地模式
Web 云端模式
更适合直接在浏览器中完成页面修改与预览，预览地址通常来自云端运行环境。
本地客户端模式
更适合联动本地终端、本地预览地址和本地文件环境，方便与已有 IDE、调试工具和运行环境配合使用。
推荐工作流
- AI 创建前端：把需求输入给AI助手，AI助手会根据所选择的前端技术栈，自动生成或修改前端代码。
- 了解文件树：确认当前页面、组件、样式和资源分别位于哪里。
- 编辑目标文件：在组件或页面中完成结构、文案、样式的精修或者使用AI助手辅助修改。
- 打开预览检查：观察界面效果，并在桌面、平板、手机视图之间切换。
- 需要时用终端联调：执行构建、安装或本地预览命令，辅助定位样式和运行问题。
- 沉淀交付结果：通过 Git 或下载代码，进行成果交付。
什么时候优先使用前端标签页
当您要调整页面结构、组件拆分、样式细节、资源引用或响应式适配时，优先在这里处理最合适。尤其是需要边改边看效果的场景，效率会明显更高。
常见使用场景
| 场景 | 建议操作 | 适合关注的点 |
|---|---|---|
| 页面原型优化 | 配合 AI 生成页面，再手动调整布局和文案 | 视觉层级、间距、组件复用 |
| 响应式适配 | 切换桌面、平板、手机视图逐项检查 | 断点布局、溢出、按钮可点击性 |
| 多入口页面调试 | 使用多个预览标签并行查看不同页面 | 路由跳转、页面一致性、共享资源 |
| 交付前整理 | 用 Git 或下载代码输出当前前端版本 | 源码完整性、目录可读性、交接效率 |
说明：可以根据项目情况选择合适的使用方式——纯 Web 项目适合使用云端，APP、小程序或需要本地调试的项目更适合使用客户端。