تو یک تیم حرفه‌ای متشکل از Senior Product Designer، UI/UX De...

Prompt

تو یک تیم حرفه‌ای متشکل از Senior Product Designer، UI/UX Designer، Frontend Engineer، UX Researcher و E-commerce Specialist هستی. هدف تو طراحی و پیاده‌سازی یک فروشگاه اینترنتی کاملاً حرفه‌ای و Production-Ready است؛ به‌گونه‌ای که خروجی نهایی اصلاً شبیه پروژه تمرینی، قالب آماده یا سایت خام نباشد و از نظر طراحی، تجربه کاربری، ساختار صفحات، جزئیات بصری، تعاملات و کیفیت کدنویسی در سطح یک فروشگاه اینترنتی بزرگ و مدرن باشد. نام برند: [نام برند] حوزه فعالیت: [مثلاً فروش لوازم دیجیتال] زبان سایت: فارسی جهت سایت: RTL واحد پول: تومان 1. اصول طراحی طراحی باید: - مدرن، مینیمال و حرفه‌ای باشد. - ظاهر تجاری و قابل اعتماد داشته باشد. - از شلوغی غیرضروری جلوگیری کند. - فاصله‌گذاری، تایپوگرافی، سلسله‌مراتب بصری و Grid کاملاً اصولی باشد. - در نگاه اول حس یک محصول واقعی و تجاری را منتقل کند. - از طراحی Generic و Template-like خودداری شود. - تمام اجزای رابط کاربری دارای سیستم طراحی یکپارچه باشند. - از رنگ‌ها، سایه‌ها، Border Radius و Typography به‌صورت کنترل‌شده استفاده شود. - UI باید برای کاربران فارسی‌زبان و RTL بهینه باشد. از طراحی فروشگاه‌های بزرگ و حرفه‌ای الهام بگیر، اما هیچ برند یا سایت مشخصی را کپی نکن. 2. صفحه اصلی صفحه Home باید شامل این بخش‌ها باشد: 1. Header حرفه‌ای - لوگو - نوار جستجوی بزرگ - ورود / ثبت‌نام - علاقه‌مندی‌ها - سبد خرید - نمایش تعداد کالاهای سبد - منوی دسته‌بندی‌ها 2. Navigation - دسته‌بندی‌ها - پیشنهادهای ویژه - پرفروش‌ها - جدیدترین محصولات - تخفیف‌ها - راهنمای خرید 3. Hero Section - تصویر یا Visual جذاب - تیتر قدرتمند - توضیح کوتاه - CTA واضح - پیشنهاد ویژه - طراحی کاملاً Responsive 4. دسته‌بندی‌های محبوب برای هر دسته یک Card جذاب طراحی کن. 5. محصولات ویژه Product Card حرفه‌ای شامل: - تصویر - نام محصول - امتیاز - تعداد نظرات - قیمت - قیمت قبلی - درصد تخفیف - وضعیت موجودی - ارسال سریع - دکمه افزودن به سبد - دکمه علاقه‌مندی 6. بخش پیشنهادهای ویژه 7. بخش پرفروش‌ترین محصولات 8. بخش جدیدترین محصولات 9. Bannerهای تبلیغاتی 10. مزیت‌های فروشگاه مانند: - ضمانت اصالت - ارسال سریع - پرداخت امن - امکان بازگشت کالا - پشتیبانی 11. Newsletter / عضویت 12. Footer حرفه‌ای 3. صفحه لیست محصولات یک صفحه Category / Product Listing حرفه‌ای بساز. امکانات: - Sidebar فیلتر - فیلتر قیمت - برند - امتیاز - موجودی - تخفیف - دسته‌بندی - مرتب‌سازی - نمایش تعداد نتایج - Grid محصولات - Pagination یا Infinite Scroll - حالت Loading - حالت Empty State در موبایل Sidebar باید به یک Filter Drawer تبدیل شود. 4. صفحه جزئیات محصول صفحه Product Detail باید کاملاً حرفه‌ای باشد. شامل: - Gallery تصاویر - تصویر اصلی بزرگ - تصاویر کوچک - Zoom - نام محصول - امتیاز - نظرات - قیمت - تخفیف - انتخاب رنگ - انتخاب مدل - موجودی - زمان ارسال - گارانتی - افزودن به سبد - خرید سریع - افزودن به علاقه‌مندی - مقایسه محصول - توضیحات محصول - مشخصات فنی - نظرات کاربران - سوالات متداول - محصولات مشابه - محصولات مرتبط 5. سبد خرید سبد خرید باید کاملاً تعاملی باشد. امکانات: - تصویر محصول - نام - قیمت - تعداد - افزایش / کاهش تعداد - حذف محصول - ذخیره برای بعد - محاسبه Subtotal - تخفیف - هزینه ارسال - مبلغ نهایی - دکمه ادامه خرید - دکمه ادامه پرداخت 6. Checkout یک Checkout چندمرحله‌ای حرفه‌ای طراحی کن: مرحله اول: اطلاعات کاربر مرحله دوم: آدرس ارسال مرحله سوم: روش ارسال مرحله چهارم: روش پرداخت مرحله پنجم: تأیید سفارش در پایان صفحه موفقیت سفارش نمایش داده شود. 7. حساب کاربری Dashboard کاربر شامل: - اطلاعات شخصی - سفارش‌ها - سفارش‌های در حال ارسال - سفارش‌های تکمیل‌شده - علاقه‌مندی‌ها - آدرس‌ها - کیف پول - اعلان‌ها - تنظیمات حساب 8. UX برای تمام تعاملات UX حرفه‌ای طراحی کن. شامل: - Hover State - Active State - Focus State - Loading State - Skeleton Loading - Empty State - Error State - Success State - Toast Notification - Modal - Drawer - Confirmation Dialog هیچ دکمه‌ای نباید صرفاً ظاهری باشد؛ اگر قابلیت آن در Frontend قابل پیاده‌سازی است، آن را واقعاً Interactive کن. 9. Responsive Design سایت باید کاملاً Responsive باشد. Breakpoints مناسب برای: - Desktop - Laptop - Tablet - Mobile در موبایل: - Navigation ساده شود. - Bottom Navigation حرفه‌ای اضافه شود. - کارت‌ها متناسب شوند. - فیلترها به Drawer تبدیل شوند. - سبد خرید و Modalها مناسب صفحه کوچک باشند. 10. طراحی سیستم یک Design System منظم ایجاد کن. شامل: - Color Tokens - Typography - Spacing - Border Radius - Shadows - Buttons - Inputs - Cards - Badges - Modals - Dropdowns همه صفحات باید از همین Design System استفاده کنند. 11. تکنولوژی اگر محیط امکان انتخاب تکنولوژی دارد، از این Stack استفاده کن: Frontend: React + TypeScript Styling: Tailwind CSS Icons: Lucide Icons State Management: Zustand یا Context API Routing: React Router برای داده‌های نمونه از Mock Data ساختاریافته استفاده کن. کد باید: - Component-based - قابل توسعه - تمیز - خوانا - Modular - Responsive - قابل نگهداری باشد. 12. کیفیت کد از: - کد تکراری - Componentهای بیش از حد بزرگ - Inline Styleهای غیرضروری - نام‌گذاری ضعیف - ساختار نامنظم - وابستگی‌های غیرضروری خودداری کن. Componentها را منطقی تقسیم کن. 13. Performance به Performance توجه ویژه داشته باش. - Lazy Loading - Image Optimization - جلوگیری از Render اضافی - استفاده مناسب از Memoization - کاهش JavaScript غیرضروری - Loading مناسب - مدیریت State بهینه 14. Accessibility سایت باید تا حد امکان Accessible باشد. شامل: - Semantic HTML - Keyboard Navigation - Focus State - ARIA Labels - Contrast مناسب - Alt Text تصاویر 15. SEO برای صفحات اصلی: - Title - Meta Description - Heading hierarchy - Semantic HTML - Open Graph - ساختار مناسب URL در نظر گرفته شود. 16. داده‌های نمونه حداقل ۲۰ محصول نمونه ایجاد کن. هر محصول: - id - name - slug - category - brand - price - oldPrice - discount - rating - reviewCount - stock - colors - images - description - specifications - deliveryInfo داشته باشد. 17. نکته بسیار مهم درباره ظاهر من یک سایت «قابل قبول» نمی‌خواهم. خروجی باید در نگاه اول شبیه یک پروژه واقعی باشد که توسط یک تیم حرفه‌ای طراحی و توسعه داده شده است. به جزئیات کوچک توجه کن: - فاصله‌ها - Alignment - Typography - Micro-interactions - Hover effects - Loading - Empty states - Animationهای ظریف - Card hierarchy - Visual hierarchy - Mobile UX از Gradientهای بیش از حد، سایه‌های سنگین، انیمیشن‌های نمایشی و عناصر تزئینی بی‌دلیل استفاده نکن. 18. قبل از تحویل قبل از ارائه خروجی، خودت پروژه را مثل یک Senior Engineer و UX Designer بررسی کن و مشکلات زیر را پیدا و اصلاح کن: - Broken layout - Overflow - مشکلات RTL - مشکلات موبایل - دکمه‌های بدون عملکرد - صفحات ناقص - فاصله‌گذاری نامناسب - Typography ضعیف - Componentهای ناسازگار - Stateهای فراموش‌شده - Empty/Error/Loading stateهای ناقص در نهایت یک فروشگاه اینترنتی کامل، منسجم، زیبا، سریع، Responsive و قابل توسعه تحویل بده؛ نه یک Demo ساده. اگر Backend در محیط فعلی قابل پیاده‌سازی نیست، Frontend را کاملاً آماده اتصال به API طراحی کن و Mock API/Data Layer مناسب ایجاد کن.تو یک تیم حرفه‌ای متشکل از Senior Product Designer، UI/UX Designer، Frontend Engineer، UX Researcher و E-commerce Specialist هستی. هدف تو طراحی و پیاده‌سازی یک فروشگاه اینترنتی کاملاً حرفه‌ای و Production-Ready است؛ به‌گونه‌ای که خروجی نهایی اصلاً شبیه پروژه تمرینی، قالب آماده یا سایت خام نباشد و از نظر طراحی، تجربه کاربری، ساختار صفحات، جزئیات بصری، تعاملات و کیفیت کدنویسی در سطح یک فروشگاه اینترنتی بزرگ و مدرن باشد. نام برند: [نام برند] حوزه فعالیت: [مثلاً فروش لوازم دیجیتال] زبان سایت: فارسی جهت سایت: RTL واحد پول: تومان 1. اصول طراحی طراحی باید: - مدرن، مینیمال و حرفه‌ای باشد. - ظاهر تجاری و قابل اعتماد داشته باشد. - از شلوغی غیرضروری جلوگیری کند. - فاصله‌گذاری، تایپوگرافی، سلسله‌مراتب بصری و Grid کاملاً اصولی باشد. - در نگاه اول حس یک محصول واقعی و تجاری را منتقل کند. - از طراحی Generic و Template-like خودداری شود. - تمام اجزای رابط کاربری دارای سیستم طراحی یکپارچه باشند. - از رنگ‌ها، سایه‌ها، Border Radius و Typography به‌صورت کنترل‌شده استفاده شود. - UI باید برای کاربران فارسی‌زبان و RTL بهینه باشد. از طراحی فروشگاه‌های بزرگ و حرفه‌ای الهام بگیر، اما هیچ برند یا سایت مشخصی را کپی نکن. 2. صفحه اصلی صفحه Home باید شامل این بخش‌ها باشد: 1. Header حرفه‌ای - لوگو - نوار جستجوی بزرگ - ورود / ثبت‌نام - علاقه‌مندی‌ها - سبد خرید - نمایش تعداد کالاهای سبد - منوی دسته‌بندی‌ها 2. Navigation - دسته‌بندی‌ها - پیشنهادهای ویژه - پرفروش‌ها - جدیدترین محصولات - تخفیف‌ها - راهنمای خرید 3. Hero Section - تصویر یا Visual جذاب - تیتر قدرتمند - توضیح کوتاه - CTA واضح - پیشنهاد ویژه - طراحی کاملاً Responsive 4. دسته‌بندی‌های محبوب برای هر دسته یک Card جذاب طراحی کن. 5. محصولات ویژه Product Card حرفه‌ای شامل: - تصویر - نام محصول - امتیاز - تعداد نظرات - قیمت - قیمت قبلی - درصد تخفیف - وضعیت موجودی - ارسال سریع - دکمه افزودن به سبد - دکمه علاقه‌مندی 6. بخش پیشنهادهای ویژه 7. بخش پرفروش‌ترین محصولات 8. بخش جدیدترین محصولات 9. Bannerهای تبلیغاتی 10. مزیت‌های فروشگاه مانند: - ضمانت اصالت - ارسال سریع - پرداخت امن - امکان بازگشت کالا - پشتیبانی 11. Newsletter / عضویت 12. Footer حرفه‌ای 3. صفحه لیست محصولات یک صفحه Category / Product Listing حرفه‌ای بساز. امکانات: - Sidebar فیلتر - فیلتر قیمت - برند - امتیاز - موجودی - تخفیف - دسته‌بندی - مرتب‌سازی - نمایش تعداد نتایج - Grid محصولات - Pagination یا Infinite Scroll - حالت Loading - حالت Empty State در موبایل Sidebar باید به یک Filter Drawer تبدیل شود. 4. صفحه جزئیات محصول صفحه Product Detail باید کاملاً حرفه‌ای باشد. شامل: - Gallery تصاویر - تصویر اصلی بزرگ - تصاویر کوچک - Zoom - نام محصول - امتیاز - نظرات - قیمت - تخفیف - انتخاب رنگ - انتخاب مدل - موجودی - زمان ارسال - گارانتی - افزودن به سبد - خرید سریع - افزودن به علاقه‌مندی - مقایسه محصول - توضیحات محصول - مشخصات فنی - نظرات کاربران - سوالات متداول - محصولات مشابه - محصولات مرتبط 5. سبد خرید سبد خرید باید کاملاً تعاملی باشد. امکانات: - تصویر محصول - نام - قیمت - تعداد - افزایش / کاهش تعداد - حذف محصول - ذخیره برای بعد - محاسبه Subtotal - تخفیف - هزینه ارسال - مبلغ نهایی - دکمه ادامه خرید - دکمه ادامه پرداخت 6. Checkout یک Checkout چندمرحله‌ای حرفه‌ای طراحی کن: مرحله اول: اطلاعات کاربر مرحله دوم: آدرس ارسال مرحله سوم: روش ارسال مرحله چهارم: روش پرداخت مرحله پنجم: تأیید سفارش در پایان صفحه موفقیت سفارش نمایش داده شود. 7. حساب کاربری Dashboard کاربر شامل: - اطلاعات شخصی - سفارش‌ها - سفارش‌های در حال ارسال - سفارش‌های تکمیل‌شده - علاقه‌مندی‌ها - آدرس‌ها - کیف پول - اعلان‌ها - تنظیمات حساب 8. UX برای تمام تعاملات UX حرفه‌ای طراحی کن. شامل: - Hover State - Active State - Focus State - Loading State - Skeleton Loading - Empty State - Error State - Success State - Toast Notification - Modal - Drawer - Confirmation Dialog هیچ دکمه‌ای نباید صرفاً ظاهری باشد؛ اگر قابلیت آن در Frontend قابل پیاده‌سازی است، آن را واقعاً Interactive کن. 9. Responsive Design سایت باید کاملاً Responsive باشد. Breakpoints مناسب برای: - Desktop - Laptop - Tablet - Mobile در موبایل: - Navigation ساده شود. - Bottom Navigation حرفه‌ای اضافه شود. - کارت‌ها متناسب شوند. - فیلترها به Drawer تبدیل شوند. - سبد خرید و Modalها مناسب صفحه کوچک باشند. 10. طراحی سیستم یک Design System منظم ایجاد کن. شامل: - Color Tokens - Typography - Spacing - Border Radius - Shadows - Buttons - Inputs - Cards - Badges - Modals - Dropdowns همه صفحات باید از همین Design System استفاده کنند. 11. تکنولوژی اگر محیط امکان انتخاب تکنولوژی دارد، از این Stack استفاده کن: Frontend: React + TypeScript Styling: Tailwind CSS Icons: Lucide Icons State Management: Zustand یا Context API Routing: React Router برای داده‌های نمونه از Mock Data ساختاریافته استفاده کن. کد باید: - Component-based - قابل توسعه - تمیز - خوانا - Modular - Responsive - قابل نگهداری باشد. 12. کیفیت کد از: - کد تکراری - Componentهای بیش از حد بزرگ - Inline Styleهای غیرضروری - نام‌گذاری ضعیف - ساختار نامنظم - وابستگی‌های غیرضروری خودداری کن. Componentها را منطقی تقسیم کن. 13. Performance به Performance توجه ویژه داشته باش. - Lazy Loading - Image Optimization - جلوگیری از Render اضافی - استفاده مناسب از Memoization - کاهش JavaScript غیرضروری - Loading مناسب - مدیریت State بهینه 14. Accessibility سایت باید تا حد امکان Accessible باشد. شامل: - Semantic HTML - Keyboard Navigation - Focus State - ARIA Labels - Contrast مناسب - Alt Text تصاویر 15. SEO برای صفحات اصلی: - Title - Meta Description - Heading hierarchy - Semantic HTML - Open Graph - ساختار مناسب URL در نظر گرفته شود. 16. داده‌های نمونه حداقل ۲۰ محصول نمونه ایجاد کن. هر محصول: - id - name - slug - category - brand - price - oldPrice - discount - rating - reviewCount - stock - colors - images - description - specifications - deliveryInfo داشته باشد. 17. نکته بسیار مهم درباره ظاهر من یک سایت «قابل قبول» نمی‌خواهم. خروجی باید در نگاه اول شبیه یک پروژه واقعی باشد که توسط یک تیم حرفه‌ای طراحی و توسعه داده شده است. به جزئیات کوچک توجه کن: - فاصله‌ها - Alignment - Typography - Micro-interactions - Hover effects - Loading - Empty states - Animationهای ظریف - Card hierarchy - Visual hierarchy - Mobile UX از Gradientهای بیش از حد، سایه‌های سنگین، انیمیشن‌های نمایشی و عناصر تزئینی بی‌دلیل استفاده نکن. 18. قبل از تحویل قبل از ارائه خروجی، خودت پروژه را مثل یک Senior Engineer و UX Designer بررسی کن و مشکلات زیر را پیدا و اصلاح کن: - Broken layout - Overflow - مشکلات RTL - مشکلات موبایل - دکمه‌های بدون عملکرد - صفحات ناقص - فاصله‌گذاری نامناسب - Typography ضعیف - Componentهای ناسازگار - Stateهای فراموش‌شده - Empty/Error/Loading stateهای ناقص در نهایت یک فروشگاه اینترنتی کامل، منسجم، زیبا، سریع، Responsive و قابل توسعه تحویل بده؛ نه یک Demo ساده. اگر Backend در محیط فعلی قابل پیاده‌سازی نیست، Frontend را کاملاً آماده اتصال به API طراحی کن و Mock API/Data Layer مناسب ایجاد کن. این هارو برام به یه سایت تبدیل کن

A system prompt was added to support web rendering