이커머스 웹사이트의 프로토타입이나 프론트엔드 시연용 코드를 빠르게 제작할 때 유용합니다.
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.
출처 · prompts.chat · E COMMERCE WEBSITE — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
외부 이미지 및 가짜 실적 수치 없이 SVG 그래픽과 순수 프런트엔드 기술로 완성한 TPI 스토어의 전자상거래 웹 애플리케이션입니다. 상단 네비게이션, 카테고리 필터링, 검색, 장바구니 Drawer, 결제 모달, 모바일 메뉴 및 실시간 고객 리뷰 등록까지 화면의 모든 요소가 실제로 동작하도록 구현되었습니다.
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 for **TPI 스토어**. ### Goal Create a clean and attractive online shopping website suitable for TPI 스토어. 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: TPI 스토어 * 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 me attractive category cards such as: * Electronics * Fashion * Shoes * Accessories * Beauty * Home & Living 4. **Product Section** Display multiple product cards containing: * Product image (built with SVG/Canvas) * Product name * 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 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 * Modern SVG product graphics without external images * 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 Return the complete code in one HTML file that can be opened directly in a browser.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
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 for **TPI 스토어**. ### Goal Create a clean and attractive online shopping website suitable for TPI 스토어. 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: TPI 스토어 * 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 me attractive category cards such as: * Electronics * Fashion * Shoes * Accessories * Beauty * Home & Living 4. **Product Section** Display multiple product cards containing: * Product image (built with SVG/Canvas) * Product name * 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 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 * Modern SVG product graphics without external images * 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 Return the complete code in one HTML file that can be opened directly in a browser.
외부 이미지 및 가짜 실적 수치 없이 SVG 그래픽과 순수 프런트엔드 기술로 완성한 TPI 스토어의 전자상거래 웹 애플리케이션입니다.
상단 네비게이션, 카테고리 필터링, 검색, 장바구니 Drawer, 결제 모달, 모바일 메뉴 및 실시간 고객 리뷰 등록까지 화면의 모든 요소가 실제로 동작하도록 구현되었습니다.
원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.
Act as a Senior Full-Stack Web Developer and UI/UX Designer. Build a production-ready, fully responsive single-page e-commerce web application for [Store Name / Product Niche, e.g., Minimalist Tech Store]. ### Goal & Technical Constraints - Output a single, standalone `index.html` file with fully embedded `<style>` and `<script>` blocks. - Use vanilla HTML5, CSS3 (Flexbox/Grid, CSS variables), and ES6+ JavaScript. Do not rely on external CSS/JS frameworks. - Use high-quality, publicly accessible image URLs (e.g., Unsplash) for realistic sample products. ### Design System & Theme - **Color Scheme**: [Primary Color, e.g., #0F172A] with [Accent Color, e.g., #2563EB]. - **UI/UX Requirements**: Modern layout, subtle hover animations, clear typography, dynamic cart badges, accessible forms, smooth scrolling, and mobile-friendly hamburger menu. ### Core Features & Functionality 1. **Header & Navigation**: Store logo, navbar, live search bar, interactive cart icon with item counter. 2. **Hero Section**: High-impact promo banner, headline, subtitle, and primary CTA button. 3. **Product Catalog**: Dynamic display with functional Category Filtering ([Categories, e.g., Electronics, Fashion]), Keyword Search, and Price/Rating Sorting. 4. **Product Cards**: Display image, title, rating, original/discount price, discount tag, wishlist toggle, and 'Add to Cart' button. 5. **Shopping Cart Drawer/Modal**: Add/remove items, adjust quantity, live subtotal and total calculation, and clear cart feature. 6. **Checkout Modal/Section**: Form with client-side validation (Name, Email, Address, Payment Method) and order summary popup. 7. **Promotional Sections**: Flash sale items, customer reviews, and working newsletter subscription. ### Development & Self-Validation Steps 1. Define structure and CSS design tokens. 2. Create dynamic JS product dataset with sample data. 3. Implement DOM manipulation logic for state management (Search, Filter, Cart, Wishlist). 4. Validate output: Ensure no truncation, fully executable code, and responsive layout across desktop/mobile views. ### Output Format Return ONLY the complete, un-truncated, ready-to-run HTML code inside a single code block. Do not add introductory or concluding explanation text.