رویه نان بالا می‌آید. ترشی‌ها نمایان می‌شوند. یک ورقه پنیر دیگر اضافه کنید و همزمان هم برگر تغییر میکند و هم فاکتور.در جای دیگری، مشتری تصویری را روی هودی رها میکند، کمی بالاتر می‌برد و بعد محصول را می‌چرخاند تا حسش را بسنجد. پشت آن تعامل ساده، فروشنده پیش از این تعیین کرده کجا و به چه اندازه‌ای می‌توان طرح را قرار داد.این‌ها دو تجربه خرید بسیار متفاوت‌اند. اما یک ایده مشترک دارند: فروشگاه میتواند حول چیزی که می‌فروشید شکل بگیرد، تا حتی نحوه انتخاب مشتری.هر دو نقطهٔ شروع را در Modern Shop collection on GitHub قرار داده‌ایم: , یک ویترین فستفود سهبعدی، و , یک طراح محصول برای کالاهای سفارشی. کد منبع تحت مجوز MIT در دسترس است، پس میتوانید آن را بررسی، سازگار و توسعه دهید.ایده‌تان، برند خودتان و یک ابزار کدنویسی هوش مصنوعی مانند Codex یا Claude Code را بیاورید. همین الان هم چیز جالبی برای کار کردن وجود دارد.
An original editorial illustration of the two Modern Shop ideas. Interface shown is conceptual; actual demo screens follow.
Jelly Bites: اجازه دهید مشتریان نهارشان را بسازند
با دموی زندهٔ Jelly Bites شروع کنید. یک برگر انتخاب کنید، آن را بگردانید و یکی از مواد را عوض کنید. غذا با یک تکان نرم واکنش نشان میدهد. یک لایه را برجسته کنید تا پشته باز شود و ببینید داخل چه چیزی است.این تجربه بازیگوشانه است، اما تعامل هدف عملی‌ای دارد. مشتریان می‌توانند ببینند چه انتخاب‌هایی انجام می‌دهند. ترشی‌ها، سس، پنیر و تاپینگ‌ها دیگر رشته‌ای از گزینه‌های انتزاعی نیستند که مشتری مجبور باشد تصور کند؛ آنها به بخش‌های قابل‌مشاهدهٔ سفارش تبدیل می‌شوند.سازندهٔ پیتزا همین ایده را در جهت دیگری می‌برد: اندازه، خمیر، سس و تاپینگ‌ها را انتخاب کنید و سپس ببینید پیتزا چگونه شکل می‌گیرد. یک رسید زنده نتایج این تصمیم‌ها را نمایان میکند. دموی نمونه همچنین تحویل یا حضوری گرفتن، کدهای تبلیغاتی، تسویه و صفحهٔ پیگیری سفارش را بررسی میکند.
Actual Jelly Bites demo capture from the Modern Shop repository. Menu values and checkout behavior are sample data.
یک جزئیات کوچک اینجا مهم است وقتی مردم نظرشان را عوض میکنند. آیتم روی صحنهٔ ساخت در حالت پیش‌نویس است تا زمانی که مشتری گزینهٔ را انتخاب کند. سپس یک مورد کارت میتواند دوباره وارد سازندهٔ 3D شود و ویرایش گردد. این نوع تعاملی است که یک رستوران میتواند به شیوهٔ خود پیاده کند.کد منبع ویترین فستفود سهبعدی با Vue، TypeScript و Three.js ساخته شده است. لازم نیست برای امتحان دمو این نام‌ها را بدانید. برای یک توسعه‌دهنده یا عامل کدنویسی، این‌ها پروژه‌ای آشنا در مرورگر را نشان می‌دهند که می‌توان آن را بررسی و توسعه داد. اشکال غذایی در کد تولید می‌شوند که نقطهٔ شروع مشخصی برای تغییر ظاهر و رفتارشان به شما میدهد.یک فستفود ممکن است منو را با دستورپخت‌ها و بسته‌بندی‌های خود سازگار کند. یک برند پیتزا ممکن است ترکیب‌های ویژهٔ خودش را در اولویت قرار دهد. میتوانید رنگ‌ها، زبان، متن‌ها، گزینه‌های مواد و جریان سفارش را مطابق کسبوکار تغییر دهید. نمونه شامل چیدمان‌های انگلیسی و فارسی است.یکی از مرزها ارزش درک دارد پیش از اینکه از آن برای سفارش‌های واقعی استفاده کنید: دموی فعلی از دادهٔ نمونهٔ کاتالوگ، سفارش‌های ذخیره‌شده در مرورگر و تسویه و پیگیری شبیه‌سازی‌شده استفاده میکند. اتصال به Selldone هنوز نیاز به پیاده‌سازی دارد. تجربهٔ بصری برای کاوش آماده است؛ اما بررسی‌های نهایی کاتالوگ و قیمت‌گذاری روی سرور، پرداخت و انجام سفارش نیاز به یک یکپارچگی تجارت واقعی دارد. تجربهٔ 3D به مرورگری با پشتیبانی WebGL 2 نیاز دارد، پس یک سازگاری را روی گوشی‌ها و مرورگرهایی که مشتریانتان استفاده میکنند تست کنید.
Mockup Studio: یک تجربه برای فروشنده، دیگری برای خریدار
فروشگاه تیشرت سفارشی مسئلهٔ متفاوتی دارد. مشتری می‌خواهد آزادانه آزمایش کند. چاپخانه به طرحی نیاز دارد که با محدودهٔ واقعی چاپ تناسب داشته باشد.Mockup Studio به هر دو طرف این مسئله می‌پردازد. دموی طراح محصول زنده را باز کنید و دو حالت به‌وضوح مشخص‌شده می‌بینید: برای مدیران فروشگاه و برای خریداران.
فروشنده قوانین را یک‌بار تعیین میکند
در سازندهٔ قالب، فروشنده محصول را انتخاب میکند، نماهای محصول را اضافه میکند و ناحیهٔ قابل چاپ را تعریف میکند. آن ابعاد به میلی‌متر ذخیره می‌شوند، همراه با تنظیماتی برای رزولوشن و bleed، یعنی آثار اضافی پیرامون لبهٔ برش.سپس فروشنده تعیین میکند مشتری چه چیزهایی را میتواند تغییر دهد: حرکت، تغییر اندازه یا چرخش اثر هنری، برای مثال. چاپ روی سینه میتواند محدودهٔ خود را داشته باشد، در حالی که آستین از ناحیهٔ دیگری استفاده میکند. قالب میتواند قبل از تحویل به برنامهٔ میزبان از دید خریدار آزمایش شود.
Actual Mockup Studio seller editor. The merchant defines product views, physical print areas, and customer permissions in this local demo.
این جداسازی ایده را فراتر از یک تیشرت واحد مفید می‌سازد. گالری نمونه شامل تیشرت، هودی، سوئیشرت، کلاه، لیوان، کوسن و برچسب آویز است. دارایی‌های سهبعدی آماده نیز می‌توانند در قالب مدل‌های پشتیبانی‌شده استفاده شوند. برای شکل محصولی متفاوت، باید مدل و نگاشت ناحیهٔ چاپ آن را آماده کنید.استودیو میتواند عکس‌های اولیهٔ محصول را نیز از یک مدل سهبعدی پیکربندی‌شده ایجاد کند. این به فروشنده راه دیگری میدهد تا نماهایی برای ویرایشگر در حین توسعهٔ تجربهٔ محصول آماده کند.
مشتری جا برای بازی دارد
ویرایشگر خریدار متمرکزتر است. یک تصویر آپلود کنید، آن را قرار دهید، اندازه‌اش را تنظیم کنید و پیش‌نمایش روی محصول را ببینید. قوانین فروشنده در جای خود باقی می‌مانند در حالی که مشتری آزمایش میکند.نماهای دو‌بعدی مبتنی‌بر عکس وجود دارد و یک نمای سهبعدی اختیاری که می‌توان چرخاند. تغییرات اثر هنری روی مدل ظاهر می‌شوند. روی محصولات پارچه‌ای پشتیبانی‌شده یک ابزار کشش حتی اجازه میدهد پارچه را بالا بکشید و ببینید چگونه دوباره آرام می‌گیرد. این یک افکت پیش‌نمایش است؛ اثر هنری ارسال‌شده برای چاپ کشیده نمی‌شود.
Actual Mockup Studio shopper editor, showing uploaded artwork on a rotatable 3D hoodie. Orders and fulfillment still require host integration.
یک تمایز روشن در پروژه جاری است: یکی به مشتری نشان میدهد کالا ممکن است چگونه به‌نظر برسد. دیگری یک PNG شفاف برای سطح چاپ است که از ابعاد فیزیکی و رزولوشن پیکربندی‌شده استفاده میکند. یک نشانگر کیفیت چاپ کمک میکند تا توضیح داده شود پیکسل‌های تصویر منبع چگونه با اندازهٔ انتخابی‌اش مرتبط‌اند.برای جریان تولید واقعی، چاپخانه هنوز باید ابعاد، رنگ‌ها و نیازمندی‌های فایل را تایید کند. خروجی فعلی PNG با رندر مرورگر در فضای RGB است، بدون تبدیل مخصوص چاپخانه به CMYK یا پروفایل رنگی. اشکال تولیدشدهٔ محصول تصویرسازی‌اند، نه نسخه‌های اندازه‌گیری‌شدهٔ دقیق از هر پوشاکی که ممکن است بفروشید.دمو همچنین قالب‌ها و طرحها را محلی نگه می‌دارد. ذخیرهٔ آنها در یک کسبوکار، الصاق طرح دقیق به یک سفارش، دریافت پرداخت و ارسال کار به تولید مراحل یکپارچه‌سازی برای فروشگاه نهایی هستند. ابزارهای متن/فونت، واریانت‌های محصول و کشیدن مستقیم اثر هنری روی سطح 3D از جمله قابلیت‌هایی‌اند که هنوز در نقشهٔ راه پروژه قرار دارند.
یک نقطهٔ شروع، گفتگو با AI را تغییر میدهد
«برایم یک فروشگاه بساز» چیزهای زیادی برای حدس زدن به یک دستیار AI می‌گذارد. «این ویرایشگر محصول را بردار، از برند ما استفاده کن و جریان مشتری را برای چاپخانهٔ ما مناسب کن» به آن چیزی ملموس میدهد.به همین دلیل است که کد منبع را به اشتراک می‌گذاریم. میتوانید تعامل را ببینید، آن را امتحان کنید و به قسمت‌هایی اشاره کنید که می‌خواهید تغییر کنند. یک اسکرین‌شات تبدیل به بحث می‌شود. یک دمو تبدیل به مرجع کاری می‌شود. کد به توسعه‌دهنده یا عامل کدنویسی شما جایی برای شروع میدهد.از ChatGPT برای کار کردن روی ایدهٔ کسبوکار استفاده کنید: چه کسانی خرید میکنند؟ کدام گزینه‌ها اهمیت دارند؟ مشتریان کجا تردید میکنند؟ چه اطلاعاتی باید به آشپزخانه یا تیم چاپ برسد؟ سپس آن خلاصه را به Codex، Claude Code یا هر محیط توسعهٔ هوش مصنوعی دیگری که میتواند پروژه را بررسی و ویرایش کند بیاورید.ابزارهای AI می‌توانند به تطبیق مؤلفه‌ها، بازنگری طراحی، اتصال سرویس‌ها، نوشتن تست‌ها و توضیح کدهای ناآشنا کمک کنند. نتیجهٔ قوی هنوز وابسته به یک خلاصهٔ شفاف و بررسی تجربهٔ واقعی است. به دستیار یک هدف مفید در هر گام بدهید و از او بخواهید نشان دهد چه چیزی کار میکند.
Original editorial illustration of personalized merchandise. Product styling and tablet interfaces are conceptual, not screenshots of Mockup Studio.
Selldone MCP کجا قرار می‌گیرد
جلوی یک فروشگاه همان بخشی است که مشتریان با آن سروکار دارند. پشت آن محصولات، موجودی، پرداختها، حمل‌ونقل و سفارش‌هایی است که باید انجام شوند.Selldone MCP به یک دستیار AI متصل دسترسی ساخت‌یافته به یک فروشگاه مجاز Selldone میدهد. در طول ساخت، این میتواند به عامل کمک کند با کاتالوگ فروشگاه، محتوا و تنظیمات پشتیبانی‌شده کار کند به‌جای اینکه روی مجموعهٔ جداگانهای از دادههای نمایشی حدس بزند. دسترسی در محدودهٔ فروشگاه و مجوزهایی که شما انتخاب می‌کنید باقی می‌ماند.فروشگاه منتشرشده سپس به API یا یکپارچگی سرویس Selldone پیاده‌شدهٔ خودش نیاز دارد. MCP به دستیار در انجام توسعه و کارهای تاییدشدهٔ فروشگاه کمک میکند؛ این به‌طور خودکار دکمهٔ تسویهٔ دمو را به جریان پرداخت زنده تبدیل نمی‌کند.برای Jelly Bites، این یعنی اتصال منو و جریان سفارش به سرویسهای تجارت واقعی. برای Mockup Studio، یعنی ذخیرهٔ قالب فروشنده و طرح انتخابی مشتری به‌صورت قابل‌اعتماد و سپس حفظ آن طرح همراه با محصول و سفارش درست. تجربهٔ مشتری‌محور میتواند متمایز بماند در حالی که Selldone پایهٔ تجارت را فراهم میکند.راه‌های مختلفی برای ساخت روی آن پایه وجود دارد. یک فروشگاه کامل میتواند از طریق گردش کار Selldone Layout سفارشی شود، در حالی که یک برنامهٔ سفارشی‌تر میتواند از یک فرانت‌اند جداگانه استفاده کند. بررسی Selldone Genesis آن مسیرها را توضیح میدهد. انتخاب درست به میزان حفظ فروشگاه موجود و میزان غیرمعمول بودن سفر مشتری بستگی دارد.
به AI خود یک خلاصهٔ بهتر بدهید
میتوانید با درخواست زیر در یک محیط کدنویسی شروع کنید. قسمت‌های داخل براکت را با جزئیات کسبوکار خودتان جایگزین کنید.
Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [my business]. Read its documentation, then clone the chosen project into a new folder. Show which features work today and which need integration. Adapt the customer journey to [my brand, products, and requirements], keeping it usable on mobile.
بعد از اینکه جهت را انتخاب کردید، برای گام بعدی این را بخواهید:
Connect the intended Selldone shop through MCP with the permissions this task needs. Plan and implement the real catalog, design-storage where relevant, cart, checkout, and order integration using supported Selldone services. Replace demo assumptions with actual shop data. Test the complete flow and show a preview for review before deployment.
آنها آغاز یک گفتگوی ساخت هستند. یک عامل خوب پروژه را بررسی میکند، قطعات گمشده را شناسایی میکند و با شما آنها را پیگیری میکند.برای اولین نقطهٔ عطف یک رستوران، ممکن است بخواهید یک سفارش کامل را درخواست کنید: یک آیتم را سفارشی کنید، قیمت درست را ببینید، در جریان تست پشتیبانی‌شده پرداخت کنید و تایید دریافت سفارش توسط کسبوکار را بررسی کنید. برای یک چاپخانه، یک طرح را از آپلود تا پیش‌نمایش تا اثر هنری ذخیره‌شدهٔ دقیق الصاق‌شده به سفارش دنبال کنید.اینجا همچنین جایی است که یک فروشگاه سفارشی میتواند به پروژه‌ای اقتصادی‌تر تبدیل شود. کد تعامل موجود و یک پلتفرم تجارت میتواند مقدار کاری که باید از صفر بسازید را کاهش دهد. هزینهٔ نهایی هنوز به طراحی، یکپارچگیها، دارایی‌ها، میزبانی و تست‌هایی که کسبوکار شما نیاز دارد بستگی دارد. مجوز MIT کد نمونه را قابل استفاده مجدد میکند؛ اما آن سرویس‌ها را به‌صورت رایگان شامل نمی‌شود.
خودتان بسازید یا ایده را به تیم ما بسپارید
ما نمونههای Modern Shop را به‌روزرسانی و مجموعه را توسعه خواهیم داد. میتوانید از نسخه‌هایی که همین‌الان در دسترس‌اند شروع کنید، کل تجربه را تطبیق دهید یا بخشی را که مشکل خاص شما را حل میکند قرض بگیرید.اگر ترجیح می‌دهید متخصصان نتیجه را حول برند شما شکل دهند، میتوانید از تیم رسمی راهاندازی و طراحی Selldone درخواست برآورد سفارشی فروشگاه کنید. دمویی که می‌پسندید، محصولاتتان و تجربه‌ای که می‌خواهید مشتریان داشته باشند را بیاورید. ما می‌توانیم طراحی و پیاده‌سازی را پیش از شروع پروژه با شما مشخص کنیم.شاید فروشگاه شما با برگری شروع شود که روی صفحه از هم جدا می‌شود. شاید با یک تصویر کوچک روی لیوان شروع شود. دموها را باز کنید، چیزی را تغییر دهید و ببینید کدام ایده شبیه کسبوکار شما به‌نظر می‌رسد.Modern Shop را در GitHub کاوش کنید · سازندهٔ غذای سهبعدی را امتحان کنید · Mockup Studio را امتحان کنید
سوالات متداول
Modern Shop چیست؟
Modern Shop مجموعهای از ویترینهای مفهومی منبعباز ساختهشده برای Selldone است. دو نمونهٔ فعلی Jelly Bites، یک ویترین فستفود سهبعدی، و Mockup Studio، ابزاری برای سفارشیسازی محصول برای فروشنده و خریدار هستند.
آیا نمونههای Modern Shop رایگان برای سفارشیسازی هستند؟
هر دو پروژه کد منبع خود را تحت مجوز MIT منتشر میکنند. میتوانید کد را مطابق آن مجوز استفاده و تطبیق دهید، از جمله رعایت اعلانهای مربوطه. کار طراحی، استفاده از AI، سرویسهای تجارت، میزبانی و یکپارچگیهای تولید ممکن است هزینههای جداگانهای داشته باشند.
آیا میتوانم از ChatGPT یا Codex برای تطبیق این ویترینها استفاده کنم؟
بله. ChatGPT میتواند در تدوین خلاصهٔ کاری کمک کند و یک محیط کدنویسی مانند Codex میتواند مخزن را بررسی، پروژه را ویرایش و در یکپارچگیها کمک کند. به عامل مشخصات روشن بدهید و نتیجه را پیش از انتشار بازبینی کنید.
آیا دموها همین الان به تسویهٔ زندهٔ Selldone متصلاند؟
خیر. Jelly Bites از دادههای نمایشی تجارت استفاده میکند و Mockup Studio جریانهای محلی قالب و طرح را نشان میدهد. یک فروشگاه عملی نیاز به یکپارچگی Selldone مناسب برای محصولات واقعی، سبد خرید، پرداختها، سفارشها و ذخیرهٔ دائم طرحها دارد.
مشتریان در Mockup Studio چه چیزهایی را می‌توانند شخصی‌سازی کنند؟
نمونه از آپلود اثر روی محصولاتی مانند تیشرت، هودی، کلاه و لیوان پشتیبانی میکند، در محدوده‌های چاپی که فروشنده پیکربندی کرده است. مشتریان می‌توانند جایگذاری را تنظیم و پیش‌نمایش دو‌بعدی یا سهبعدی (در صورت پشتیبانی) را ببینند. برخی قابلیت‌های ویرایشی پیشرفته هنوز در نقشهٔ راه پروژه قرار دارند.
آیا تیم Selldone میتواند یک فروشگاه سفارشی برای کسبوکار من طراحی کند؟
بله. میتوانید از طریق سرویس رسمی راهاندازی Selldone درخواست برآورد سفارشی کنید. تیم طراحی موارد مورد نظر شما از جمله طراحی، عملکرد، دامنه و شرایط تحویل را پیش از سفارش بررسی میکند.
نظرات خود را با ما به اشتراک بگذارید