https://virgool.ir/feed/@omid.zaferiمعمار نرم‌افزار و سیستم‌های هوشمند | توسعه عامل‌های خودکار (AI Agents) و پروتکل MCPfa2026-11-10 20:37:06https://files.virgool.ir/upload/users/4925189/avatar/Jdp7Xt.jpghttps://virgool.ir/@omid.zaferihttps://virgool.ir/@omid.zaferi/چرا-هوش-مصنوعی-وب-سایت-های-زشت-و-تکراری-می-سازد-معرفی-vibe-ui-suite-owedbu1kb3wgاگر در ماه‌های اخیر از ابزارهای کدنویسی هوش مصنوعی مثل Cursor، Claude Code، Windsurf یا حتی ChatGPT برای ساخت فرانت‌اند یا لندینگ‌پیج استفاده کرده باشید، احتمالاً با پدیده‌ای ناامیدکننده مواجه شده‌اید: طراحی‌های شبیه به هم، بوردرهای خاکستری مات، گرادیان‌های بنفش کلیشه‌ای، کنتراست‌های ضعیف و دکمه‌های شلخته.این پدیده در جامعه جهانی مهندسی نرم‌افزار به اصطلاح «AI Design Slop» نامیده می‌شود. هوش مصنوعی بدون هدایت دقیق معماری، همیشه به سمت «میانگین داده‌های آموزشی اینترنت» همگرا می‌شود؛ یعنی قالب‌های آماده و دست‌چندم Bootstrap و طرح‌های تکراری!برای حل بنیادین این مشکل، در چند هفته گذشته پروژه متن‌باز Vibe UI Suite را توسعه دادم؛ یک اکوسیستم استانداردسازی طراحی رابط کاربری که دستیارهای هوش مصنوعی را از یک تولیدکننده کدهای کلیشه‌ای، به یک معمار ارشد فرانت‌اند تبدیل می‌کند.چرا پرامپت‌های طولانی مشکل را حل نمی‌کنند؟بسیاری از برنامه‌نویسان سعی می‌کنند با پرامپت‌های چندصفحه‌ای به هوش مصنوعی بگویند: «لطفاً مدرن طراحی کن، از رنگ بنفش استفاده نکن، فاصله‌ها را رعایت کن». اما این روش همیشه شکست می‌خورد، زیرا:۱. هوش مصنوعی درک ادراکی از فرمول‌های نوری و فیزیک کنتراست ندارد.۲. با طولانی شدن پرامپت، مدل‌ها دچار فراموشی کانتکست (Context Drift) می‌شوند.۳. المان‌های لمسی و دسترسی‌پذیری (مانند حداقل اندازه دکمه ۴۸ پیکسل برای موبایل یا کنتراست حداقل ۴.۵ به ۱ استاندارد WCAG) با کلمات توصیفی به دست نمی‌آیند، بلکه نیازمند محاسبه ریاضی و قراردادهای قطعی ماشین‌خوان هستند.راهکار Vibe UI Suite چیست؟پروژه Vibe UI Suite بر پایه ۳ رکن اساسی طراحی شده است:۱. کاتالوگ ۲۶ خانواده سبک ارتوگونال (26 Orthogonal Style Families)به جای طرح‌های مبهم، سیستم به ۲۶ زبان بصری مستقل مجهز است که هرکدام دارای ژنوم فضایی، متریال، تایپوگرافی و رفتار حرکتی مشخص هستند:از سبک‌های تکنیکال مانند ترمینال‌های داده‌محور مونو اسپیس و هاد فین‌تک و رمزارز،تا سبک‌های هنری و آوانگارد نظیر نئوبروتالیسم پرانرژی با سایه‌های سخت و باهاوس هندسی،و سبک‌های تجاری لوکس مانند مجلل آرام (Quiet Luxury)، ادیتوریال سوئیسی، و زیست‌محور (Biophilic).۲. ارزیابی فیزیکی با موتور کرومیوم بدون‌سر (Headless Chromium Evaluation)برخلاف ابزارهای معمولی که فقط کد تولید می‌کنند، Vibe UI شامل یک پایپ‌لاین آزمون با Playwright است که صفحه تولیدشده را در اندازه‌های واقعی موبایل (۳۷۵ و ۳۲۰ پیکسل) باز کرده، سرریز افقی، کنتراست ریاضیاتی رنگ‌ها در مدل OKLCH و مساحت قابل کلیک دکمه‌ها را اعتبارسنجی می‌کند.۳. سازگاری بومی با نسل جدید Tailwind CSS v4بدون نیاز به فایل‌های پیچیده کانفیگ، فقط با ایمپورت توکن‌های رسمی (@omid-io/tokens/v4.css)، دستیار هوش مصنوعی شما از تمام متغیرهای رنگی ادراکی و تایپوگرافی استاندارد بهره‌مند می‌شود.چگونه در ۳۰ ثانیه از آن در ادیتور خود استفاده کنید؟برای استفاده از این سیستم هیچ نیازی به پیکربندی پیچیده ندارید. دو راهکار پیش روی شماست:روش اول (برای همه بدون نصب — فقط ۱ پرامپت):کافیست در ادیتور هوش مصنوعی خود (Cursor، Claude Code، Windsurf، Copilot) پرامپت زیر را ارسال کنید:Please inspect and adopt the design contracts and visual standards from https://github.com/omid-io/vibe-ui-suite for this project. Follow strict WCAG AA contrast and avoid generic AI design patterns.روش دوم (نصب پکیج رسمی با خط فرمان):در ترمینال پروژه خود دستور زیر را اجرا کنید تا توکن‌ها و کانفیگ‌های Cursor و Claude به طور خودکار تزریق شوند:npx @omid-io/tokens initاستودیوی زنده و بدون سرور (Interactive Compiler Studio)برای اینکه هر برنامه‌نویس یا طراح بتواند خروجی این ۲۶ سبک را به صورت زنده ببیند و کدهای آماده Tailwind آن را کپی کند، یک استودیوی آنلاین روی گیت‌هاب پیجز راه‌اندازی کردم:🔗 استودیوی تعاملی Vibe UI Suite:https://omid-io.github.io/vibe-ui-suite/در این استودیو می‌توانید هر ایده‌ای را به فارسی یا انگلیسی تایپ کنید؛ دایرکتور داخلی در کمتر از ۵ میلی‌ثانیه دامین را تشخیص داده، کارت رابط کاربری را کامپایل کرده و کدهای آماده آن را به شما تحویل می‌دهد.سخن پایانی و مشارکت در پروژهاین پروژه به صورت کاملاً متن‌باز (Open Source) روی گیت‌هاب منتشر شده و پکیج‌های آن روی رجیستری جهانی NPM و Open-VSX فعال است.اگر شما هم از دیدن وب‌سایت‌های کلیشه‌ای تولیدشده توسط هوش مصنوعی خسته شده‌اید، خوشحال می‌شوم این پروژه را در کارهای روزمره خود تست کنید، نظرات و تجربیاتتان را در کامنت‌ها بنویسید، و با دادن یک ستاره (Star) در گیت‌هاب از توسعه آن حمایت کنید:⭐ مخزن رسمی در گیت‌هاب:https://github.com/omid-io/vibe-ui-suiteOmid ZaferiOmid ZaferiFri, 04 Sep 2026 05:21:38 +0330https://virgool.ir/@omid.zaferi/چگونه-تبلیغات-و-کالاهای-اسپانسری-را-از-سرچ-دیجی-کالا-حذف-کنیم-vxodabl4kdqmاگر اهل خرید آنلاین از وب‌سایت دیجی‌کالا باشید، احتمالاً بارها با این تجربه آزاردهنده روبرو شده‌اید: دسته‌بندی خاصی از کالاها را باز می‌کنید و فیلتر مرتب‌سازی را روی «پرفروش‌ترین»، «ارزان‌ترین» یا «محبوب‌ترین» قرار می‌دهید تا بهترین گزینه‌های بازار را پیدا کنید؛ اما در ردیف‌های اول، با کالاهایی روبرو می‌شوید که نه پرفروش هستند و نه ارزان!علت این اتفاق چیست؟ سیستم تبلیغات کلیکی و پروموشن دیجی‌کالا (Digikala Ads). در این سیستم، فروشندگان با پرداخت هزینه، محصولات خود را با برچسب‌های کم‌رنگی مثل «سفارشی» یا «آگهی» در بالاترین جایگاه‌های جستجو تزریق می‌کنند. این کار باعث خطای دید خریدار و خرید کالاهای نامناسب می‌شود.برای حل این چالش و بازگرداندن رتبه‌بندی واقعی، ابزار متن‌باز دیجی‌کالا سرچ خالص (Digikala Pure Search) را توسعه دادم که در ادامه سازوکار و نحوه استفاده از آن را بررسی می‌کنیم.🎯 مشکل کجاست و چرا رتبه‌بندی دستکاری می‌شود؟هنگامی که خریدار به دنبال کالایی با بالاترین نرخ رضایت است، الگوریتم طبیعی باید کالاهایی را نشان دهد که بر اساس حجم سفارش‌های موفق و امتیازهای واقعی کاربران چیده شده‌اند. اما در حالت عادی:کالاهای اسپانسری (Sponsored): فروشندگانی که فروش پایینی دارند، با پرداخت هزینه در صدر قرار می‌گیرند.برچسب‌های گمراه‌کننده: نشان‌های «سفارشی» با فونت بسیار ریز و رنگ خاکستری طراحی شده‌اند تا به سادگی از دید کاربر پنهان بمانند.به هم خوردن فیلتر ارزان‌ترین: هنگام جستجوی ارزان‌ترین کالا، محصولات گران‌قیمت اسپانسر شده در صفحه اول ظاهر می‌شوند.⚡ ابزار Digikala Pure Search چطور کار می‌کند؟این ابزار یک توسعه متن‌باز و سبک (UserScript و اکستنشن مرورگر) است که بدون ایجاد هیچ‌گونه کندی، در دو سطح عمل می‌کند:۱. رهگیری در سطح شبکه (Network Interceptor): بسته‌های داده دریافتی از API دیجی‌کالا را قبل از رندر شدن پالایش کرده و آیتم‌های دارای فلگ تبلیغاتی را فیلتر می‌کند.۲. پایش تغییرات ساختار صفحه (MutationObserver): به محض اسکرول کردن صفحه یا لود شدن صفحات بعدی، برچسب‌های سفارشی و بنرهای نامرتبط را به صورت نامرئی و با پرش تصویر صفر (Zero-Flicker) حذف می‌نماید.🛡️ نکته کلیدی: کالاهایی که واقعاً پرفروش هستند و تخفیف شگفت‌انگیز خورده‌اند دست‌نخورده باقی می‌مانند؛ این ابزار صرفاً کالاهای پولی را حذف می‌کند.🚀 روش‌های استفاده و فعال‌سازیاستفاده از این ابزار کاملاً رایگان و امن است و می‌توانید از یکی از دو روش زیر استفاده کنید:روش اول: استفاده با افزونه تمپرمانکی (سریع‌ترین روش)۱. ابتدا افزونه رایگان Tampermonkey را روی مرورگر خود (گوگل کروم، فایرفاکس، مایکروسافت اج یا بریو) نصب کنید.۲. اسکریپت digikala-pure-search.user.js را از مخزن گیت‌هاب پروژه دریافت کرده و دکمه Install را بزنید:👉 مشاهده و دریافت اسکریپت از گیت‌هاب (digikala-pure-search)۳. از این پس با ورود به دیجی‌کالا، تمام فیلترها به صورت ۱۰۰٪ ارگانیک و تمیز نمایش داده می‌شوند.روش دوم: نصب مستقیم به عنوان افزونه کروم (Extension)اگر تمایلی به استفاده از افزونه‌های مدیریت اسکریپت ندارید، می‌توانید سورس اکستنشن را از مخزن گیت‌هاب دانلود کرده و در حالت Developer Mode مرورگر کروم به صورت مستقیم بارگذاری (Load Unpacked) کنید.💡 لینک پروژه و دستاورد متن‌بازتوسعه ابزارهای پالایش وب نشان می‌دهد که چگونه می‌توان با چند خط کد هوشمند جاوااسکریپت، تجربه کاربری میلیون‌ها کاربر را بهبود بخشید و شفافیت داده‌ها را در خرید آنلاین تضمین کرد. سورس‌کد کامل این پروژه تحت لایسنس MIT به صورت عمومی در دسترس است:🔗 آدرس مخزن در گیت‌هاب: https://github.com/omid-io/digikala-pure-search👤 امید ظفریمعمار نرم‌افزار و سیستم‌های هوشمند | پروژه‌های متن‌باز و ابزارهای کاربردی وبOmid ZaferiOmid ZaferiMon, 31 Aug 2026 04:38:20 +0330https://virgool.ir/@omid.zaferi/پروتکل-mcp-چیست-و-چرا-هوش-مصنوعی-بدون-آن-فقط-یک-چت-بات-ساده-است-lzbwqkj9wtuaاگر در سال ۲۰۲۶ هنوز از مدل‌های زبانی هوش مصنوعی صرفاً در قالب یک پنجره چت و برای گفتگوهای متنی استفاده می‌کنید، بخش بزرگی از پتانسیل دنیای کدنویسی را از دست داده‌اید.دنیای توسعه نرم‌افزار وارد عصری شده که در آن چت‌بات‌های متنی جای خود را به عامل‌های خودکار و تحلیل‌گر (AI Agents) داده‌اند. سوال مهم این است: چگونه می‌توان یک مدل هوش مصنوعی را به ابزاری تبدیل کرد که به پایگاه داده متصل شود، فایل‌های پروژه را بخواند، دستورات ترمینال را اجرا کند و عملکرد کدها را بیازماید؟پاسخ این تحول در یک استاندارد نوین متن‌باز نهفته است: پروتکل ارتباطی مدل (Model Context Protocol یا MCP).⚡ پروتکل MCP چیست و چرا ایجاد شد؟پروتکل MCP یک استاندارد باز است که نقشی مشابه درگاه USB-C را برای هوش مصنوعی ایفا می‌کند.پیش از معرفی این استاندارد، برای اتصال یک مدل زبانی به ابزارهای خارجی (مانند دیتابیس، مخازن کد یا سیستم‌عامل)، نیاز به نگارش کدهای واسط پیچیده و اختصاصی بود که نگهداری ساختار برنامه را دشوار می‌کرد.پروتکل MCP یک زبان مشترک و ساختارمند بر بستر JSON-RPC 2.0 ایجاد می‌کند که سه بخش کلیدی دارد:منابع داده (Resources): محتوای متنی، پرونده‌ها و مستندات سیستمی را با امنیت بالا در دسترس مدل قرار می‌دهد.ابزارها (Tools): توابع محاسباتی و اجرایی را با پارامترهای مشخص برای مدل تعریف می‌کند.دستورالعمل‌ها (Prompts): الگوهای استاندارد برای جهت‌دهی به استدلال مدل ارائه می‌دهد.🧠 تفاوت چت‌بات ساده با سیستم مبتنی بر MCPدسترسی به داده‌ها: چت‌بات متنی تنها به ورودی تایپ‌شده دسترسی دارد؛ سیستم MCP مستقیماً با فایل‌های پروژه و پایگاه داده در ارتباط است.اجرای تسک‌ها: چت‌بات سنتی قابلیت اجرای عملیات ندارد؛ سیستم MCP دستورات آزمایشی را در محیط کدنویسی اجرا می‌کند.امنیت و تفکیک: در استاندارد MCP دسترسی‌ها و توابع در یک چارچوب ایزوله و مشخص مدیریت می‌شوند.💡 یک نمونه عملی از کاربرد MCP در عیب‌یابی دیتابیسفرض کنید قصد دارید یک کوئری با زمان اجرای بالا در یک جدول بزرگ را بهینه‌سازی کنید:روش سنتی: کپی ساختار جدول و انتقال دستی آن به چت‌بات برای دریافت پیشنهاد اولیه.روش مدرن با ابزار MCP: مدل هوش مصنوعی با فراخوانی امن ابزار سرور، پلن اجرای کوئری (EXPLAIN) را تحلیل کرده، شاخص‌های جدول را بررسی می‌کند و راهکار بهینه را ارائه می‌دهد.این رویکرد مدرن در توسعه نرم‌افزار، به مهندسان امکان می‌دهد زمان خود را به جای کارهای تکراری، بر روی طراحی معماری و تصمیم‌گیری‌های کلان مهندسی متمرکز کنند.🚀 نحوه آغاز کار با اکوسیستم MCPاستاندارد MCP به صورت متن‌باز منتشر شده و توسط ابزارهای مدرن توسعه پشتیبانی می‌شود. توسعه‌دهندگان می‌توانند با زبان‌هایی نظیر پایتون یا تایپ‌اسکریپت، سرورهای سبک و امن متناسب با نیازهای مهندسی خود ایجاد نمایند.👤 امید ظفرییادداشت‌های مهندسی نرم‌افزار و معماری سیستم‌های هوشمندOmid ZaferiOmid ZaferiMon, 31 Aug 2026 03:23:37 +0330