提示词中文站 prompts.chat 中文镜像
首页 全部提示词 Web Development

电商网站

E COMMERCE WEBSITE

文本 @kundankumar13 1,658 字符 在 prompts.chat 查看 译文有问题？

中文译文

你可以把下面这段可直接复制粘贴的提示词用在 ChatGPT、Claude、Gemini 或 AI 建站工具上：

扮演一位资深全栈 Web 开发者和 UI/UX 设计师。

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

目标

创建一个干净且有吸引力的在线购物网站，适合真实企业使用。网站应在手机、平板和桌面上都能流畅运行。

技术

使用：

  • HTML5
  • CSS3
  • JavaScript
  • 使用单个 HTML 文件，并将 CSS 和 JavaScript 包含在其中。
  • 除非绝对必要，否则不要使用后端。
  • 使用干净、组织良好、对初学者友好的代码。

网站功能

  1. 页眉/导航栏

    • 专业的 logo/店铺名称
    • 首页
    • 商店
    • 分类
    • 关于
    • 联系
    • 搜索图标/搜索栏
    • 带商品数量的购物车图标
    • 登录/注册按钮

  2. 主视觉区域

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

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

    • 电子产品
    • 时尚
    • 鞋类
    • 配饰
    • 美妆
    • 家居生活

  4. 商品区域 展示多个商品卡片，包含：

    • 商品图片
    • 商品名称
    • 评分
    • 原价
    • 折扣价
    • 折扣百分比
    • “加入购物车”按钮
    • “立即购买”按钮
    • 心愿单/爱心按钮

  5. 商品搜索与筛选 添加可用的 JavaScript 功能，用于：

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

  6. 购物车 创建一个可用的购物车，让用户可以：

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

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

    • 客户姓名
    • 电子邮箱
    • 电话
    • 地址
    • 城市
    • 州
    • 邮政编码
    • 支付方式
    • 订单摘要
    • 下单按钮

  8. 特殊板块 添加：

    • 限时抢购
    • 热销商品
    • 新品上架
    • 客户评价
    • 新闻订阅

  9. 页脚 包含：

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

设计要求

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

JavaScript 要求

让以下功能真正可用：

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

使用示例商品和来自公开可访问图片 URL 的真实商品图片。

重要

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

将完整代码放在一个 HTML 文件中返回，我可以将其保存为 index.html 并直接在浏览器中打开。

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

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

English original

Here’s a strong copy-paste prompt you can use with ChatGPT, Claude, Gemini, or an AI website builder:

Act as a senior full-stack web developer and UI/UX designer.

I want you to build a modern, professional, fully responsive e-commerce website from scratch.

Goal

Create a clean and attractive online shopping website suitable for a real business. The website should work smoothly on mobile, tablet, and desktop.

Technology

Use:

  • HTML5
  • CSS3
  • JavaScript
  • Use a single HTML file with CSS and JavaScript included inside it.
  • Do not use a backend unless absolutely necessary.
  • Use clean, well-organized, beginner-friendly code.

Website Features

  1. Header/Navbar

    • Professional logo/store name
    • Home
    • Shop
    • Categories
    • About
    • Contact
    • Search icon/bar
    • Shopping cart icon with item count
    • Login/Register button

  2. Hero Section

    • Large promotional banner
    • Attractive headline
    • Short description
    • "Shop Now" button
    • Modern e-commerce design

  3. Categories Create attractive category cards such as:

    • Electronics
    • Fashion
    • Shoes
    • Accessories
    • Beauty
    • Home & Living

  4. Product Section Display multiple product cards containing:

    • Product image
    • Product name
    • Rating
    • Original price
    • Discounted price
    • Discount percentage
    • "Add to Cart" button
    • "Buy Now" button
    • Wishlist/heart button

  5. Product Search & Filter Add working JavaScript functionality for:

    • Product search
    • Category filtering
    • Price sorting
    • Rating sorting

  6. Shopping Cart Create a functional cart where users can:

    • Add products
    • Remove products
    • Increase/decrease quantity
    • See subtotal
    • See total price
    • Clear cart

  7. Checkout Create a professional checkout page/section with:

    • Customer name
    • Email
    • Phone
    • Address
    • City
    • State
    • PIN code
    • Payment method
    • Order summary
    • Place Order button

  8. Special Sections Add:

    • Flash Sale
    • Best Sellers
    • New Arrivals
    • Customer Reviews
    • Newsletter subscription

  9. Footer Include:

    • About the store
    • Quick links
    • Customer support
    • Privacy Policy
    • Terms & Conditions
    • Social media icons
    • Copyright

Design Requirements

  • Premium and modern UI
  • Clean typography
  • Attractive product cards
  • Smooth hover animations
  • Responsive layout
  • Mobile-friendly hamburger menu
  • Good spacing and alignment
  • Professional color scheme
  • Smooth scrolling
  • Accessible buttons and forms
  • Add subtle animations without making the website slow

JavaScript Requirements

Make the following features actually work:

  • Search
  • Category filtering
  • Sorting
  • Add to cart
  • Remove from cart
  • Quantity controls
  • Cart total calculation
  • Wishlist button
  • Mobile navigation
  • Checkout form validation
  • Order confirmation message

Use sample products and realistic product images from publicly accessible image URLs.

Important

Do not give me only an explanation. Build the complete working website code.

Return the complete code in one HTML file that I can save as index.html and open directly in a browser.

Make the final result look like a professional real-world e-commerce website rather than a basic demo.

I can also create a complete working e-commerce website from this prompt and give you the HTML/CSS/JavaScript code.

同类提示词

更多「Web Development」→