پروژه عملی: تبدیل طرح فیگما به کد | آموزش مرحله به مرحله با MCP Server و نرم‌افزار Cursor

Описание: گیت هاب Figma MCP Server
https://B2n.ir/bw9032

گیت هاب Figma MCP JSON Configuration
https://B2n.ir/yu2227

در این ویدئو، با یک پروژه عملی واقعی همراه شوید و یاد بگیرید چگونه با استفاده از MCP Server و نرم‌افزار Cursor، طراحی‌های فیگما را به یک وبسایت حرفه‌ای تبدیل کنید.

آنچه در این آموزش خواهید آموخت:
شروع پروژه: آماده‌سازی فایل‌ها و تنظیمات اولیه با نرم‌افزار Cursor
تبدیل طرح: گام به گام تبدیل طرح فیگما به کدهای HTML، CSS و JS
ترفندهای کاربردی: نکات و ترفندهای عملی برای بهبود پروژه
نمایش نتیجه: مشاهده وبسایت واقعی ساخته شده از طرح اولیه

این ویدئو مناسب برنامه‌نویسان مبتدی تا حرفه‌ای است که می‌خواهند تکنیک‌های عملی و به‌روز را در دنیای توسعه وب فرا بگیرند.

اگر از آموزش لذت بردید، لایک کنید و کانال را سابسکرایب کنید تا از ویدئوهای آموزشی بیشتر باخبر شوید.
بیایید با هم دنیای وب را به سطح بعدی ببریم



0:00 - شروع
2:17 - Figma MCP Server گیت هاب
3:00 - قدم اول
3:13 - ایجاد پروژه در کرسر
4:18 - قدم دوم ایجاد توکن در فیگما
5:08 - استفاده از توکن فیگما در کرسر
5:42 - قدم سوم تنظیمات MCP در کرسر
6:06 - گیت هاب Figma MCP JSON Configuration
6:17 - تنظیمات mcp.json در کرسر
6:45 - تست MCP Server ایجاد شده در کرسر
7:56 - ایجاد HTML
8:10 - شروع چت با هوش مصنوعی در کرسر
9:24 - کپی بخشی از طرح فیگما جهت معرفی به هوش مصنوعی در کرسر
9:54 - انتخاب Agent برای تبدیل طرح به HTML در cursor
10:35 - صحبت با هوش مصنوعی و ایجاد ساختار پروژه
12:40 - شروع عملیات تبدیل طرح با هوش مصنوعی
14:23 - ایجاد کدهای HTML توسط هوش مصنوعی
14:50 - ایجاد کدهای CSS توسط هوش مصنوعی
15:35 - مشاهده خروجی تبدیل شده در مرورگر
16:25 - بررسی واکنش گرایی
17:00 - تبدیل سکشن دوم طرح به HTML
19:48 - مشاهده خروجی سکشن دوم
20:20 - رفع مشکلی از سکشن دوم با هوش مصنوعی
22:48 - رفع مشکل سکشن دوم
23:32 - نکاتی درباره کدهای ایجاد شده
24:05 - ویژگی منحصر به فرد دسترسی به هوش مصنوعی
25:00 - تولید و ترجمه محتوا به فارسی در کرسر
26:38 - اضافه کردن فونت وزیر به HTML با هوش مصنوعی
27:52 - تبدیل سکشن سوم به HTML
30:48 - اضافه کردن کتابخانه flickity به پروژه با هوش مصنوعی
33:52 - نظر ایلان ماسک
34:02 - اضافه شدن کتابخانه flickity
35:38 - صحبت های پایانی