CodeGeeX前端页面生成步骤

CodeGeeX 能够快速生成可直接运行的前端页面，无需手动编写 HTML、CSS 和 JavaScript。这一功能在原型验证或学习参考场景中非常实用。要生成完整页面，需按正确步骤操作：安装插件、启用、新建文件、使用明确注释声明技术栈、触发生成、手动补齐关键标签，最后通过 Live Server 预览效果。

以下详细说明如何使用 CodeGeeX 快速生成可运行的前端页面。

安装并启用 CodeGeeX 插件

在 VS Code 扩展市场中搜索“CodeGeeX”，点击安装，然后重启 VS Code。登录账号的步骤可以跳过，但部分模板生成会要求登录，届时按提示操作即可。

安装完成后，底部状态栏会显示“CG”图标，表示插件就绪。如果未出现该图标，说明插件未激活——必须点击右下角“Enable”按钮手动启用，否则后续命令无法触发。这一步容易遗漏，需特别注意。

新建空白文件并声明技术栈

按 Ctrl+N 新建文件，然后点击右下角语言模式，选择“HTML”。接着在第一行输入注释，例如：// 使用 Vue 3 + Tailwind CSS 实现响应式登录页。

这条注释是关键指令，CodeGeeX 依靠它识别框架和样式库。如果写成“// 用Vue做登录页”或“// tailwind 登录界面”，生成结果可能不兼容，需要手动调整。因此必须明确写出技术栈全称及用途，如“Vue 3 + Tailwind CSS”，以确保准确理解意图。

触发生成并修正结构

选中整段注释，然后按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Shift+I（Mac）调出 CodeGeeX 的生成面板，点击“Generate”。

生成结果通常包含完整的 HTML 结构，但默认缺少 DOCTYPE 声明、meta viewport，CSS 可能未内联，Tailwind 的 CDN 链接也可能未添加。这些缺失会导致页面在手机上显示错位或样式失效。

需要手动补充：在 顶部添加 </code> 和 ，然后在 中插入 Tailwind 的 CDN 链接（如果未自动添加）：

本地预览与调试

将文件保存为 login.html，然后右键文件，选择“Open with Live Server”。

浏览器会自动打开 http://localhost:5500/login.html。如果页面显示空白，可以打开控制台查看是否有“Failed to load resource”报错——通常是 CDN 链接被拦截或网络问题。此时可替换为国内镜像：

也可以直接将文件拖入浏览器窗口预览，但使用 Live Server 支持实时刷新，调试更为便捷。