必须走对三步：环境就绪、需求精准、分阶段生成；先确认VSCode安装通义灵码并登录阿里云账号，启用智能体模式；再用自然语言明确描述页面结构、颜色、布局、交互等细节；最后分三步生成HTML骨架、CSS样式、JS交互逻辑。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想在VS Code里用通义灵码直接生成一个双击就能打开、结构清晰、带样式、能跑起来的前端页面，而不是一堆零散代码或需要反复调试的半成品——这必须走对三步：环境就绪、需求精准、分阶段生成。
确认环境与基础准备
先确保 VSCode 已安装通义灵码插件，并完成阿里云账号登录——没登录会导致生成代码时缺失上下文理解能力，AI可能把flex写成flxe这类低级拼写错误。
在VSCode中按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板，输入「Tongyi Lingma: Start Chat」并回车，唤出对话窗口。
点击右上角齿轮图标→勾选「智能体模式」。这个选项开启后，灵码会主动读取当前项目文件结构、已有 CSS 类名、甚至 HTML 中已存在的 ID，避免生成冲突样式或重复 ID。【未启用状态下输入任何提示词都无响应】
立即学习“前端免费学习笔记（深入）”；
用自然语言精准描述页面需求
别写“做个网页”，要像给同事提需求一样具体：比如“做一个维修服务预约页，顶部是蓝色横幅导航栏（含首页、服务、联系我们），中间是三张响应式服务卡片（空调清洗、电路检修、水管疏通），每张卡带图标和两行文字介绍，底部是带姓名/电话/时间选择的表单，提交按钮为圆角橙色”。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
关键细节必须写明：颜色（“#1890ff 蓝”比“蓝色”更准）、布局倾向（“横向排列，移动端堆叠”）、交互要求（“鼠标悬停卡片轻微上浮”）、字体大小（“标题 24px，正文 16px”）。AI 不会脑补你没说的约束条件。
如果页面含图片或图标，直接写“用 SVG 内联图标代替图片引用”或“占位图使用 placehold.co 的 300x200 蓝底白字”，避免生成无效的本地路径如 ./images/icon.png 导致预览空白。
分阶段生成结构、样式、交互
第一步：先让灵码生成干净的 HTML 骨架。在对话框中输入：“只生成 HTML 结构代码，不包含任何内联样式或 script 标签。使用语义化标签（header/nav/main/section/footer），所有 class 名用 BEM 规范，比如 service-card__title。”
第二步：确认 HTML 插入后，在同一文件中光标定位到 </head> 区域末尾 → 按 Ctrl+Enter（Windows）或 Cmd+Enter（Mac）→ 输入“为 service-card 添加 hover 上浮动画，transition 0.2s，背景色 #f8f9fa，边框圆角 8px，阴影 0 2px 6px rgba(0,0,0,0.08)”。
第三步：光标移至 </body> 前 → 按 Ctrl+Enter → 输入“添加表单提交逻辑：阻止默认行为，收集姓名/电话/时间字段值，弹出 alert 显示‘预约成功’”。
