E COMMERCE WEBSITE
این پرامپت به هوش مصنوعی نقش «senior full-stack web developer and UI/UX designer» را میدهد و برای ساخت پیام تبلیغاتی که واقعاً فروش میآورد به کار میآید. جمله آغازین آن: «Here’s a strong **copy-paste prompt** you can use with ChatGPT, Claude, Gemini, or an AI website builder:»
متن پرامپت
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.
چطور از این پرامپت استفاده کنم؟
این یک پرامپت در سطح «پیشرفته» از دسته مارکتینگ و فروش است. برای اینکه بهترین نتیجه را بگیری، این مسیر را دنبال کن:
۱) کپی کن. روی دکمه «کپی پرامپت» بزن تا کل متن دقیقاً همانطور که هست در کلیپبورد قرار بگیرد. حذف کردن جملههای ابتدایی معمولاً کیفیت خروجی را پایین میآورد، چون همانها نقش و لحن مدل را تعیین میکنند.
۲) در یک گفتگوی تازه بچسبان. این پرامپت را به عنوان اولین پیام یک چت جدید بفرست. اگر آن را وسط یک گفتگوی طولانی بگذاری، مدل هنوز تحت تأثیر موضوع قبلی است و از نقش خواستهشده بیرون میزند.
۳) بلافاصله بعد از آن، موضوع خودت را بنویس. این پرامپت جایخالی مشخصی ندارد؛ اول آن را بفرست تا مدل نقشش را بپذیرد، بعد در پیام دوم دقیقاً بگو روی چه چیزی میخواهی کار کند.
۴) به مدل زمینه بده. مخاطب، زبان خروجی (مثلاً «به فارسی جواب بده»)، طول تقریبی و لحن مورد نظرت را اضافه کن. بیشتر جوابهای ضعیف نتیجه نبودِ همین سه خط اضافهاند، نه ضعف خودِ پرامپت.
۵) یک بار اصلاح کن. جواب اول را نهایی فرض نکن. بنویس «این بخش را کوتاهتر کن»، «مثال واقعی اضافه کن» یا «سه نسخه متفاوت بده». دور دوم تقریباً همیشه بهتر از دور اول است.
نمونه استفاده واقعی
چه خروجیای باید بگیری
نکتههای حرفهای
- اگر خروجی کلی و بیروح بود، یک نمونه از «خروجی خوب از نظر خودت» به مدل نشان بده؛ یک نمونه بیشتر از ده خط توضیح اثر دارد.
- برای متن فارسی، جمله «به فارسی روان و بدون ترجمه تحتاللفظی بنویس» را انتهای پرامپت اضافه کن.
- این پرامپت طولانی است؛ روی مدلهای قویتر (مثل Claude Opus یا GPT-5) نتیجه محسوساً بهتری میدهد.
- مخاطب هدف را با جزئیات بنویس؛ «زن ۳۰ تا ۴۰ ساله علاقهمند به دکور دستساز» خیلی بهتر از «مشتری عادی» جواب میدهد.