اگر برای ساخت رابط فارسی با React از Cursor، Claude Code یا Codex استفاده می کنی، VibeFarsi UI مجموعه ای متن باز از کامپوننت ها، قالب ها، قوانین طراحی و ابزارهای مخصوص رابط فارسی است که مشکل خروجی های چپ چین هوش مصنوعی را هدف گرفته است. این پروژه کامپوننت های RTL، تایپوگرافی مناسب فارسی، اعداد فارسی، تومان، تقویم شمسی و فرم های متناسب با کاربران ایرانی را آماده می کند و در کنار کد، پرامپت و سرور MCP هم دارد تا ایجنت های کدنویسی بتوانند همان قواعد را مستقیم بخوانند. نسخه فعلی پروژه در مرحله پیش نمایش عمومی قرار دارد و رایگان و متن باز منتشر شده است.

وایب فارسی دقیقا چیست؟

وایب فارسی را بهتر است فقط یک UI Library معمولی ندانیم. ساختار پروژه بیشتر شبیه یک Registry فارسی برای React و Tailwind است. توسعه دهنده می تواند کامپوننت مورد نیاز را انتخاب کند و فایل TypeScript آن را مستقیم داخل پروژه خودش قرار دهد.
مستندات رسمی تاکید می کنند که پروژه یک پکیج npm سنتی از کامپوننت ها نیست. CLI فایل ها و وابستگی های لازم را وارد پروژه می کند و بعد از آن کد در اختیار خود توسعه دهنده است. سایت نیز برای هر مورد کد، پیش نمایش و پرامپت آماده ارائه می دهد.

چرا ساخت رابط فارسی با ابزارهای AI مشکل دارد؟

مدل های کدنویسی با حجم زیادی از رابط های انگلیسی آموزش دیده اند. به همین دلیل اگر فقط بنویسی «یک صفحه پرداخت بساز»، خروجی معمولا به سمت چیدمان LTR، فونت لاتین، اعداد انگلیسی و الگوهای رایج محصولات غربی می رود.
اضافه کردن dir="rtl" فقط بخشی از مشکل را حل می کند. محل آیکون ها، جهت فلش ها، فاصله ها، ورودی شماره موبایل، نمایش مبلغ، ترتیب مراحل و Pagination هم باید با فارسی هماهنگ شوند. پروژه برای همین موضوع از ویژگی های منطقی CSS مانند text-start به جای text-left استفاده می کند و کامپوننت ها را از ابتدا برای RTL طراحی کرده است.

چه کامپوننت‌هایی در پروژه وجود دارد؟

صفحه فعلی پروژه 69 کامپوننت را نمایش می دهد و در کنار آن بلاک ها، انیمیشن ها، پس زمینه ها، قالب های کامل و چند سیستم طراحی نیز وجود دارند.
مجموعه فقط شامل Button و Input نیست. تقویم شمسی، Date Picker، ورودی کد ملی، شماره کارت بانکی، شماره شبا، پلاک خودرو، قیمت با تومان، OTP، شماره موبایل، جدول داده و فرم نیز در Registry دیده می شوند. بعضی موارد اعتبارسنجی مرتبط با داده ایرانی را هم داخل خود دارند.

نصب در React، Next.js و Vite چگونه انجام می‌شود؟

مسیر پیشنهادی استفاده از CLI است. در یک پروژه React با Tailwind v4 ابتدا دستور npx vibefarsi@latest init اجرا می شود. بعد می توان با دستوری مثل npx vibefarsi add button calendar price کامپوننت های مورد نیاز را وارد کرد.
در Next.js، مرحله init مواردی مانند lang="fa" و dir="rtl" را روی HTML تنظیم می کند، فونت Vazirmatn و توکن های تم را اضافه می کند و فایل های کمکی مربوط به اعداد فارسی و تاریخ شمسی را می سازد. در Vite نیز تنظیمات معادل روی فایل های پروژه اعمال می شوند. نصب دستی هم ممکن است و می توان فایل هر کامپوننت را از سایت کپی کرد.

تفاوت با shadcn/ui در چیست؟

از نظر روش استفاده شباهتی وجود دارد، چون توسعه دهنده کد کامپوننت را داخل پروژه خودش دریافت می کند و می تواند آن را تغییر دهد. تفاوت اصلی وایب فارسی در تمرکز روی تجربه فارسی است.
طبق توضیح سازنده، کامپوننت ها از پایه راست چین طراحی شده اند و مواردی مثل اعداد فارسی، تومان، تاریخ شمسی، شبا و کد ملی را در نظر می گیرند. یک کتابخانه عمومی مثل shadcn/ui به صورت پیش فرض برای نیازهای خاص زبان و بازار ایران طراحی نشده است.

MCP چه نقشی در وایب کدینگ فارسی دارد؟

یکی از بخش های مهم پروژه سرور MCP است. توسعه دهنده می تواند آدرس MCP وایب فارسی را به Cursor، Claude Code یا Codex اضافه کند. بعد از آن Agent می تواند قوانین طراحی و Registry را ساختار یافته دریافت کند و لازم نیست کاربر در هر Prompt دوباره توضیح دهد که صفحه باید راست چین باشد یا مبلغ به تومان نمایش داده شود.
سرور پنج ابزار اصلی ارائه می دهد. get_design_rules قوانین RTL، فونت، اعداد و Token ها را می دهد. search_registry میان آیتم ها جستجو می کند. get_component کد و وابستگی های کامپوننت را برمی گرداند. get_theme توکن های تم را ارائه می کند و scaffold_page از توضیح کاربر یک ترکیب اولیه برای صفحه می سازد.
مثلا می توانی فقط درخواست کنی یک صفحه پرداخت با خلاصه سبد و فرم آدرس ساخته شود. Agent ابتدا قوانین فارسی را می خواند و بعد کامپوننت های مناسب را از Registry می گیرد.

Skills چه تفاوتی با MCP دارند؟

همه محیط های کدنویسی از MCP استفاده نمی کنند. برای همین پروژه مجموعه ای از Skill های فارسی هم ارائه می دهد. Skill یک فایل Markdown است که قوانین مشخصی را برای Agent توضیح می دهد.
برای نمونه Skill مربوط به persian-rtl-ui به Agent می گوید از CSS منطقی، فونت فارسی، اعداد فارسی، تومان، تاریخ شمسی و فرم های ایرانی استفاده کند. این فایل را می توان در مسیر مخصوص Claude Code، Cursor یا Codex قرار داد.
Skill های دیگری نیز برای فارسی محاوره ای، فارسی رسمی، متن رابط کاربری و تقویم شمسی وجود دارند. این روش برای پروژه ای که MCP ندارد، راه ساده تری برای انتقال قواعد به Agent است.

سیستم طراحی و تم‌ها چگونه مدیریت می‌شوند؟

پروژه رنگ ها را با Token مدیریت می کند. یعنی به جای اینکه هر کامپوننت رنگ مستقل داشته باشد، رنگ ها از متغیرهای CSS دریافت می شوند. در نتیجه تغییر Theme می تواند ظاهر چندین جزء را هماهنگ تغییر دهد.
مخزن رسمی چند سیستم طراحی از جمله گرافیت، فیروزه، زعفران، انار، لاجورد و کاغذ را فهرست کرده است. گرافیت تم پیش فرض است و کاغذ گزینه روشن محسوب می شود.
این رویکرد برای Agent هم مفید است، چون مدل به جای انتخاب رنگ های تصادفی از Token های تعریف شده پروژه استفاده می کند.

آیا فقط برای ساخت کامپوننت است؟

نه. سایت علاوه بر کامپوننت، Block و صفحه های کامل هم دارد. داشبورد فروشگاه، ورود و ثبت نام و لندینگ استارتاپ از نمونه هایی هستند که در صفحه اصلی نمایش داده می شوند. این قالب ها با همان کامپوننت ها و Token های سیستم طراحی ساخته شده اند.

آیا پروژه رایگان و متن باز است؟

بله. مخزن رسمی عمومی است و با مجوز MIT منتشر شده است. سازنده همچنین اعلام کرده پلن پولی وجود ندارد و کامپوننت ها قفل نیستند. سایت، Registry، CLI و سرور MCP نیز در همان مخزن نگهداری می شوند.
پروژه اکنون با عنوان v1 و Public Preview معرفی شده است. بنابراین برای یک محصول حساس بهتر است قبل از انتشار، کد کامپوننت ها، Accessibility، وابستگی ها و رفتار آن ها روی مرورگرهای هدف بررسی شوند.

این ابزار برای چه پروژه‌هایی مناسب است؟

اگر در حال ساخت پنل مدیریت، فروشگاه، SaaS، داشبورد یا سایت فارسی با React هستی، این مجموعه می تواند بخشی از آماده سازی اولیه UI را کم کند. ارزش آن برای تیم هایی بیشتر می شود که از AI Coding Agent استفاده می کنند و می خواهند خروجی از همان مرحله اول به استانداردهای فارسی نزدیک باشد.
برای پروژه های با طراحی اختصاصی نیز می توان فقط بعضی قسمت ها را برداشت و تغییر داد، چون فایل هر کامپوننت وارد خود پروژه می شود. در مقابل، اگر پروژه React یا Tailwind v4 نیست، مسیر آماده CLI به شکل مستقیم مناسب آن نخواهد بود و کدها به تطبیق بیشتری نیاز دارند.

جمع بندی

وایب فارسی تلاش می کند فاصله میان UI تولید شده توسط ابزارهای عمومی و چیزی که کاربر فارسی زبان انتظار دارد کمتر کند. RTL درست، تایپوگرافی فارسی، تاریخ شمسی، تومان، فرم های ایرانی و Token های طراحی از ابتدا وارد ساختار شده اند.
پرامپت آماده، Skill و MCP نیز باعث می شوند Agent های کدنویسی بتوانند قواعد را بخوانند و از Registry کد مناسب بگیرند. همین ترکیب، VibeFarsi UI را به ابزاری مرتبط با وایب کدینگ فارسی تبدیل می کند؛ جایی که هدف فقط سریع تر کد زدن نیست، بلکه گرفتن خروجی فارسی درست با رفت و برگشت کمتر است.