必须走对三步：环境就绪、需求精准、分阶段生成——先确保VSCode安装通义灵码并登录阿里云账号，开启智能体模式；再用自然语言明确描述页面结构、颜色、布局、交互等细节；最后分步生成HTML骨架、AI自动匹配CSS、按需添加JS交互，并导出独立CSS文件。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
想用通义灵码在VS Code里直接生成一个能双击打开、带结构又带样式的前端页面，而不是零散代码片段或需要反复调试的半成品，必须走对三步：环境就绪、需求精准、分阶段生成——漏掉任意一环，AI可能把flex写成flxe，或把#1890ff蓝渲染成灰块。
确认环境与基础准备
先确保 VSCode 已安装通义灵码插件，并完成阿里云账号登录——没登录会导致生成代码时缺失上下文理解能力，AI可能把flex写成flxe这类低级拼写错误。
在VSCode 中按Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(Mac)打开命令面板，输入「Tongyi Lingma: Start Chat」并回车，唤出对话窗口。
点击右上角齿轮图标→勾选「智能体模式」。这个选项开启后，灵码会主动读取当前项目文件结构、已有 CSS 类名、甚至 HTML 中已存在的 ID，避免生成冲突样式或重复 ID。
立即学习“前端免费学习笔记（深入）”；
用自然语言精准描述页面需求
别写“做个网页”，要像给同事提需求一样具体：比如“做一个维修服务预约页，顶部是蓝色横幅导航栏（含首页、服务、联系我们），中间是三张响应式服务卡片（空调清洗、电路检修、水管疏通），每张卡带图标和两行文字介绍，底部是带姓名/电话/时间选择的表单，提交按钮为圆角橙色”。
关键细节必须写明：颜色（“#1890ff 蓝”比“蓝色”更准）、布局倾向（“横向排列，移动端堆叠”）、交互要求（“鼠标悬停卡片轻微上浮”）、字体大小（“标题 24px，正文 16px”）。AI 不会脑补你没说的约束条件。
如果页面含图片或图标，直接写“用 SVG 内联图标代替图片引用”或“占位图使用 placehold.co 的 300x200 蓝底白字”，避免生成无效的本地路径如./images/icon.png导致预览空白。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
分阶段生成结构、样式、交互
第一步：先让灵码生成干净的 HTML 骨架。在对话框中输入：“只生成 HTML 结构代码，不包含任何内联样式或 script 标签。使用语义化标签（header/nav/main/section/footer），所有 class 名用 BEM 规范，比如 service-card__title。”
第二步：等 HTML 返回后，选中全部代码 → 右键 →「Tongyi Lingma: Generate CSS for Selection」。此时 AI 会基于你刚生成的 class 名自动匹配样式，不会乱起名。
第三步：若需 JS 行为（如表单验证、折叠菜单），单独新起一行输入：“为 class=‘booking-form’ 的表单添加前端验证：电话字段必须为 11 位数字，姓名不能为空，提交时禁用按钮并显示加载态。”
优化与导出独立CSS文件
方法一：用注释引导结构。在已有HTML文件顶部添加注释，例如：<!-- 请将导航栏改为固定在顶部，背景色#1a73e8，文字白色 -->，然后选中整段代码 → 右键 → “使用通义灵码优化代码”。
方法二：局部替换。选中某一块DOM结构（如整个<header>标签），右键 → “使用通义灵码解释/改写” → 输入“改成带logo和右侧登录链接的响应式导航栏”，它会只替换选中区域。
方法三：补全CSS类名。如果你写了<div class="card">但没定义.card样式，把光标放在class属性值内部（即“card”两个字符之间）→按 Ctrl+Enter（Windows）或 Cmd+Enter（Mac）→ 它会自动在<style>块中追加对应CSS规则。
导出独立CSS文件并正确引用：第一步，将生成的HTML中<style>标签内的全部CSS代码复制出来；第二步，新建文件 → 命名为 style.css → 粘贴进去 → 保存；第三步，回到 index.html，删掉原来的<style>标签 → 在<head>中插入<link rel="stylesheet" href="style.css">。
