☰ 분류

단일파일 쇼핑몰 제작 프롬프트

쇼핑몰 제작 요구를 넣으면 HTML, CSS, JavaScript가 포함된 단일 파일로 상품, 검색, 필터, 장바구니, checkout 섹션을 만들도록 지시합니다.

분류개발 › 코딩
태그초안작성개발자코드
갱신일 · 변경 1회
프롬프트 (영어 본문 · 답은 한국어로 옵니다)
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.

어떤 프롬프트인가

AI 웹사이트 빌더나 LLM에 붙여 넣는 전자상거래 웹사이트 생성 프롬프트다. 백엔드는 가급적 쓰지 않고, 모바일 대응과 장바구니 동작을 요구한다.

변경 이력

날짜무엇이 왜 바뀌었나
맨 앞의 잡담 문구를 지우고 실제 지시문부터 시작하게 했습니다.

같은 분류의 프롬프트

API 보안 테스트 프레임워크 프롬프트
음성 복제 전문가 프롬프트
2046 퍼즐 게임 제작 프롬프트
React 컴포넌트 통합 프롬프트
3D FPS 게임 개발 프롬프트
단일파일 쇼핑몰 제작 프롬프트