CodeGeeX可快速生成可运行前端页面，需安装插件、启用后新建HTML文件并用明确注释声明技术栈（如“Vue 3 + Tailwind CSS”），再触发生成，手动补全DOCTYPE、viewport及Tailwind CDN链接，最后用Live Server预览。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用CodeGeeX快速生成可运行的前端页面，无需从零写HTML/CSS/JS，适合原型验证或学习参考。
安装并启用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”。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
生成结果通常包含完整HTML结构，但默认无DOCTYPE声明、缺少meta viewport、CSS未内联或CDN链接缺失——这些会导致页面在手机上错位或样式不生效。
手动在<head>顶部补上：
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
并在<head>内插入Tailwind CDN链接（若未自动添加）：
<script src="https://cdn.tailwindcss.com"></script>
本地预览与调试
保存文件为 login.html → 右键文件 → 选择“Open with Live Server”。
浏览器自动打开 http://localhost:5500/login.html。若页面空白，检查控制台是否有“Failed to load resource”报错——大概率是CDN链接被拦截或网络异常，此时需替换为国内镜像：
<script src="https://unpkg.bytedance.com/tailwindcss@3.4.3/dist/tailwind.min.js"></script>
这一步操作起来很简单，直接把文件拖进去就行。
