TokenToSea提示词广场
English 控制台

响应式电商网站生成

编程开发·任务模板

在聊天中使用

让 AI 用单个 HTML 文件和内嵌 CSS、JavaScript 构建响应式电商网站，含导航、商品、购物车等模块。

以下是你可以与 ChatGPT、Claude、Gemini 或 AI 网站构建工具一起使用的强大 **复制粘贴提示词**：

充当一名资深全栈网页开发者和 UI/UX 设计师。

我要求你从零开始构建一个现代、专业、完全响应式的 **电子商务网站**。

### 目标

创建一个干净且吸引人的在线购物网站，适用于真实业务。该网站应在手机、平板和桌面设备上流畅运行。

### 技术

使用：

* HTML5
* CSS3
* JavaScript
* 使用单个 HTML 文件，其中包含内嵌的 CSS 和 JavaScript。
* 除非绝对必要，否则不要使用后端。
* 使用简洁、组织良好、适合初学者的代码。

### 网站功能

1. **头部/导航栏**

   * 专业标志/商店名称
   * 首页
   * 商店
   * 分类
   * 关于我们
   * 联系方式
   * 搜索图标/搜索框
   * 购物车图标并显示商品数量
   * 登录/注册按钮

2. **主视觉区域（Hero Section）**

   * 大型促销横幅
   * 吸引人的标题
   * 简短描述
   * “立即购买”按钮
   * 现代化电商设计

3. **分类**
   创建具有吸引力的分类卡片，例如：

   * 电子产品
   * 时尚服饰
   * 鞋子
   * 配饰
   * 美妆
   * 家居与生活

4. **商品展示区**
   展示多个商品卡片，包含以下内容：

   * 商品图片
   * 商品名称
   * 评分
   * 原价
   * 折扣价
   * 折扣百分比
   * “加入购物车”按钮
   * “立即购买”按钮
   * 收藏/心形按钮

5. **商品搜索与筛选**
   添加可工作的 JavaScript 功能，包括：

   * 商品搜索
   * 分类筛选
   * 价格排序
   * 评分排序

6. **购物车**
   创建一个功能完整的购物车，用户可以：

   * 添加商品
   * 删除商品
   * 增加/减少数量
   * 查看小计
   * 查看总价
   * 清空购物车

7. **结账**
   创建一个专业的结账页面/区域，包含：

   * 客户姓名
   * 邮箱
   * 电话
   * 地址
   * 城市
   * 州/省
   * 邮政编码
   * 支付方式
   * 订单摘要
   * 提交订单按钮

8. **特色专区**
   添加：

   * 限时抢购
   * 畅销商品
   * 新品上市
   * 客户评价
   * 电子报订阅

9. **页脚**
   包含：

   * 关于本店
   * 快捷链接
   * 客户支持
   * 隐私政策
   * 条款与条件
   * 社交媒体图标
   * 版权信息

### 设计要求

* 高端现代的用户界面
* 简洁的排版
* 吸引人的商品卡片
* 流畅的悬停动画
* 响应式布局
* 移动端友好的汉堡菜单
* 良好的间距与对齐
* 专业的配色方案
* 平滑滚动
* 可访问的按钮和表单
* 添加微妙动画，但不得导致网站变慢

### JavaScript 要求

确保以下功能实际可用：

* 搜索
* 分类筛选
* 排序
* 加入购物车
* 从购物车移除
* 数量控制
* 购物车总额计算
* 收藏夹按钮
* 移动端导航
* 结账表单验证
* 订单确认消息

使用样本商品数据和来自公开可访问图像 URL 的真实商品图片。

### 重要

不要只给我解释。**构建出完整可运行的网站代码。**

返回一个完整的代码文件，将其保存为 `index.html` 后可直接在浏览器中打开。

最终效果应看起来像一个专业的现实世界电商网站，而不是基础演示。

我也可以根据此提示词创建一个 **完整可运行的电子商务网站**，并向你提供 HTML/CSS/JavaScript 代码。

相关推荐

更多