用cursor快速生成电商商品详情页需先整理商品核心字段（标题、主图、价格、促销信息、参数表、图文详情、售后保障），再通过ai指令生成含内联样式的html代码，手动补全懒加载和购买逻辑，最后用live server本地预览并微调样式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor快速生成电商商品详情页，需结合AI指令精准描述需求、结构化输出HTML代码，并在本地预览验证效果。直接复制生成的代码到项目中可能因CSS缺失导致样式错乱，必须同步补全基础样式或引入CDN。
明确商品信息与页面结构
先整理好商品核心字段：标题、主图、价格、促销信息、参数表、图文详情、售后保障。这些字段将作为AI提示词的骨架，缺一不可——漏掉“参数表”会导致生成内容缺少规格对比模块，影响买家决策。
打开Cursor新建空白文件，命名为product-detail.html，保存在项目/src/pages目录下（若无该路径请先创建）。
输入AI指令生成HTML框架
在Cursor编辑器中，选中全部空白内容 → 按Cmd+K（Mac）或Ctrl+K（Win）唤出AI命令栏 → 输入以下指令：
“生成一个响应式商品详情页HTML，包含：顶部通栏主图（宽100%，高400px）、商品标题（h1，字号28px）、价格区块（原价划线+现价加粗）、‘立即购买’按钮、三段式图文详情（每段含小标题和2行描述）、规格参数表格（表头：属性/参数值）、底部售后图标栏（退换货/包邮/发票）。使用内联style，不依赖外部CSS。”
按回车执行。AI会在当前文件中覆盖生成完整HTML代码，包含语义化标签和基础内联样式。
手动补全关键交互逻辑
方法一：添加图片懒加载
找到所有标签，在其内部插入loading="lazy"属性。例如：
。这能提升首屏加载速度，尤其对手机端至关重要。
Agents 正在你的整个代码库中处理越来越复杂、运行时间更长的任务。本次版本引入了新的 agent 框架改进，以实现更好的上下文管理，并在编辑器和 CLI 中带来了许多提升使用体验的修复。
方法二：绑定购买按钮行为
定位到“立即购买”按钮代码（通常是或），在其标签内添加onclick="addToCart()"。然后在HTML底部<script></script>块中补充函数：
<script>function addToCart(){alert('已加入购物车');}</script>
【务必检查onclick函数名与下方定义是否完全一致，大小写敏感，拼错将导致点击无反应】
本地预览并微调样式
第一步：右键点击product-detail.html文件 → 选择“Open with Live Server”（需提前安装Live Server插件）。
第二步：浏览器自动打开http://127.0.0.1:5500/src/pages/product-detail.html，观察布局是否错位。
第三步：若发现价格文字过小，回到HTML中搜索class="price"（或类似class名），将对应font-size值从16px改为20px；若主图高度被压缩，找到其height声明，确认单位是px而非em——后者会随父元素字号缩放，造成高度不稳定。
第四步：关闭Live Server窗口，保存所有修改。
