کامپوننت UI
shadcn/ui
کامپوننت‌های قابل کپی برای React با پایهٔ Radix و Tailwind.
- مناسب برای
- وقتی می‌خواهی کد و ظاهر کامپوننت را داخل پروژهٔ خودت نگه داری.
- نکتهٔ تصمیم
- به تنظیمات پروژه و تصمیم‌گیری دربارهٔ tokenهای طراحی نیاز دارد.
Product toolbox
جعبه‌ابزار ساخت محصول
کتابخانه، MCP، منبع طراحی و app builder را بر اساس کاری که می‌خواهی انجام بدهی پیدا کن.
13 ابزار از 13 مورد
برای مقایسه، حداکثر ۳ کارت را انتخاب کن.کامپوننت UI
Kibo UI
کامپوننت‌های پیچیده‌تر مثل جدول، Kanban و code block برای محصول‌های React.
- مناسب برای
- صفحه‌های محصولی که فقط به button و card ساده محدود نیستند.
- نکتهٔ تصمیم
- قبل از انتخاب، سازگاری نسخه‌ها و وابستگی‌های هر کامپوننت را بررسی کن.
کامپوننت UI
Magic UI
بلاک‌ها و interactionهای متحرک برای landing page و محصول‌های مدرن.
- مناسب برای
- وقتی landing به حرکت و نقطهٔ شروع بصری قوی نیاز دارد.
- نکتهٔ تصمیم
- animation را با بودجهٔ performance و دسترس‌پذیری محصول هماهنگ کن.
کامپوننت UI
HeroUI
کتابخانهٔ کامپوننت React برای شروع سریع یک رابط آماده.
- مناسب برای
- MVPهایی که می‌خواهند سریع به مجموعه‌ای از الگوهای رایج برسند.
- نکتهٔ تصمیم
- برای هویت بصری کاملاً اختصاصی، باید theme و component API را دقیق بررسی کنی.
پل MCP
shadcn MCP
مستندات و رجیستری shadcn را در جریان کاری agent قابل دسترس می‌کند.
- مناسب برای
- وقتی agent باید به مرجع component و registry مشخص وصل شود.
- نکتهٔ تصمیم
- اتصال MCP نیازمند بررسی مجوزها و مرز دسترسی محیط توسعه است.
پل MCP
Figma developer platform
مرجع رسمی توسعهٔ Figma برای اتصال طراحی، فایل و ابزارهای توسعه.
- مناسب برای
- تیمی که منبع اصلی تصمیم‌های طراحی‌اش Figma است.
- نکتهٔ تصمیم
- جزئیات دسترسی و قابلیت‌ها را باید در مستندات و حساب Figma خودت تأیید کنی.
DESIGN.md
Stitch
محیط آزمایشی برای تبدیل ایده و طراحی به رابط قابل توسعه.
- مناسب برای
- وقتی می‌خواهی قبل از کدنویسی چند مسیر رابط را سریع بررسی کنی.
- نکتهٔ تصمیم
- خروجی نهایی را با سیستم طراحی و نیازهای واقعی پروژه تطبیق بده.
DESIGN.md
DESIGN.md
یک قرارداد متنی برای ثبت tokenها، اجزا و قواعد بصری پروژه.
- مناسب برای
- وقتی می‌خواهی زبان بصری را برای انسان و agent قابل خواندن کنی.
- نکتهٔ تصمیم
- فایل فقط وقتی ارزش دارد که با کد، preview و تصمیم‌های واقعی به‌روز بماند.
تم و استایل
tweakcn
تنظیم بصری تم و متغیرهای shadcn با preview زنده.
- مناسب برای
- وقتی می‌خواهی قبل از commit کردن رنگ‌ها و tokenها را ببینی.
- نکتهٔ تصمیم
- خروجی را با tokenهای فعلی پروژه مقایسه کن تا style drift ایجاد نشود.
تم و استایل
Shadcn Studio
تم‌ها و بلاک‌های آماده برای شروع سریع یک سیستم رابط.
- مناسب برای
- نمونه‌سازی اولیه و پیدا کردن نقطهٔ شروع برای صفحات محصول.
- نکتهٔ تصمیم
- قبل از استفادهٔ تجاری، مجوز و شرایط هر asset را در سایت رسمی چک کن.
سازندهٔ اپ
v0
تبدیل توضیح متنی به نمونهٔ رابط React برای شروع prototype.
- مناسب برای
- وقتی می‌خواهی ایدهٔ صفحه را پیش از ساخت کامل ببینی.
- نکتهٔ تصمیم
- خروجی نمونه را با نیازهای امنیت، داده و معماری محصول یکی فرض نکن.
سازندهٔ اپ
Bolt.new
ساخت و اجرای نمونهٔ full-stack در مرورگر از روی توضیح پروژه.
- مناسب برای
- اعتبارسنجی سریع یک جریان محصولی با کمترین setup اولیه.
- نکتهٔ تصمیم
- هزینه، محدودیت محیط و مالکیت خروجی را پیش از وابستگی جدی بررسی کن.
سازندهٔ اپ
Lovable
محیط ساخت سریع برای تبدیل ایده به نسخهٔ قابل مشاهدهٔ محصول.
- مناسب برای
- تست یک ایدهٔ محصولی با جریان قابل کلیک و قابل ارائه.
- نکتهٔ تصمیم
- پیش از production، کد، auth، داده و هزینهٔ سرویس را جداگانه ارزیابی کن.