Search for a command to run...
تصویر /uploads/chgvnh cursor ra bh figm c473cb4ab0d7be477632.png چه چیزهایی نیاز دارید؟ برای شروع به موارد زیر نیاز دارید: Cursor با فعال بودن پلاگین Figma یا س…
Skill چیست؟ Skill یک راهنمای Markdown است که Agent میتواند آن را پیدا کرده و در صورت نیاز اجرا کند. Skillها کاربردهای مختلفی دارند، از جمله: Workflowهای پروژه:…
برای شروع به موارد زیر نیاز دارید:
node-id باشد.ابتدا باید اتصال Figma را در Cursor برقرار کنید.
Cursor را باز کنید و مطمئن شوید Figma MCP Server در دسترس است.
اگر ابزارها با خطای احراز هویت مواجه شدند، فرایند Authentication مربوط به Figma را که نمایش داده میشود تکمیل کنید.
دسترسی را با یک بررسی ساده تأیید کنید؛ برای مثال از Cursor بخواهید حساب Figma متصلشده را بررسی و تأیید کند.
بدون انجام احراز هویت، حتی اگر Promptهای شما کاملاً صحیح باشند، عملیات خواندن یا نوشتن اطلاعات طراحی با خطا مواجه خواهد شد.
بهطور کلی دو گردشکار مهم وجود دارد:
در بیشتر پروژههای طراحی وب، معمولاً کار را با مسیر Design → Code شروع میکنید.
زمانی که URL مربوط به یک فایل Figma را در Cursor قرار میدهید، باید اطلاعات زیر را از آن استخراج کنید:
fileKey از بخش /design/:fileKey/...nodeId از پارامتر node-id=1-2در node-id باید خط تیره (-) را به دونقطه (:) تبدیل کنید؛ بنابراین:
به:
تبدیل میشود.
سپس میتوانید از Cursor بخواهید همان Node را در پروژه پیادهسازی کند.
یک Prompt مناسب میتواند چیزی شبیه این باشد:
در پشت صحنه، Cursor باید ابتدا Skill مربوط به Design-to-Code را بارگذاری کند و سپس ابزارهای دریافت Design Context را برای Node موردنظر اجرا کند.
نکته مهم این است که Markup و کدی که از طراحی دریافت میکنید را بهعنوان Reference در نظر بگیرید، نه کدی که بدون بررسی مستقیماً وارد Production کنید.
اگر وبسایت یا اپلیکیشن شما از قبل دارای موارد زیر است:
به Cursor بگویید استایلهای Figma را با همین Primitiveهای موجود در پروژه تطبیق دهد.
این کار اهمیت زیادی دارد؛ چون از ایجاد یک Design System جداگانه و یکبارمصرف توسط AI جلوگیری میکند؛ سیستمی که بعداً ممکن است با ساختار اصلی Theme یا پروژه شما تداخل داشته باشد.
بهتر است از Cursor نخواهید کل یک وبسایت مارکتینگ را در یک مرحله پیادهسازی کند.
بهجای آن، پروژه را به بخشهای کوچکتر تقسیم کنید:
Hero
Feature Grid
Pricing
Footer
بعد از پیادهسازی هر بخش، موارد زیر را بررسی کنید:
این روش باعث میشود کنترل بیشتری روی خروجی AI داشته باشید و پیدا کردن مشکلات نیز بسیار سادهتر شود.
گاهی اوقات اعضای تیم یا Stakeholderها ترجیح میدهند طراحی را بهجای محیط Staging، مستقیماً در Figma بررسی کنند.
در چنین شرایطی میتوانید از Cursor بخواهید:
این روش بهخصوص قبل از یک Redesign بزرگ یا هنگام آمادهسازی برای تحویل پروژه به تیم طراحی بسیار کاربردی است.
برای اینکه اتصال Cursor و Figma بهترین نتیجه را داشته باشد، این نکات را رعایت کنید:
node-id ارائه کنید.ممکن است Figma به Cursor متصل شده باشد، اما تا زمانی که احراز هویت انجام نشود، ابزارهای MCP نمیتوانند اطلاعات طراحی را بهدرستی دریافت کنند.
اگر فقط به پیادهسازی Hero Section نیاز دارید، بهتر است Node مربوط به همان بخش را در اختیار Cursor قرار دهید، نه کل صفحه.
اگر پروژه شما از قبل رنگها، Typography، Buttonها و Componentهای مشخصی دارد، اجازه ندهید Cursor برای هر صفحه یک سیستم طراحی جدید ایجاد کند.
Prototypeهای Figma همیشه قرار نیست دقیقاً همانطور که طراحی شدهاند در CSS پیادهسازی شوند.
گاهی یک تعامل پیچیده در Prototype را میتوان با یک ساختار سادهتر و استاندارد HTML/CSS/JavaScript پیادهسازی کرد.
فقط شبیه بودن خروجی به Figma کافی نیست.
مواردی مانند:
هم باید بررسی شوند.
برای گرفتن بهترین نتیجه:
یکبار احراز هویت کنید، فریمهای مشخص را از Figma دریافت کنید، آنها را با Design System واقعی پروژه تطبیق دهید و رابط کاربری را بخشبهبخش پیادهسازی کنید.
این روش باعث میشود استفاده از AI در فرآیند Design-to-Code بهجای ایجاد کدهای شلوغ و غیرقابلکنترل، واقعاً به توسعه سریعتر و باکیفیتتر کمک کند.
مقالات بیشتری درباره توسعه وب، هوش مصنوعی، WordPress و فناوریهای مدرن را در وبلاگ بخوانید.
مرور مقالات
Laravel محیط بسیار مناسبی برای پیادهسازی قابلیتهای هوش مصنوعی است؛ از تولید پیشنویس و خلاصهسازی تیکتها گرفته تا دستهبندی پیامهای پشتیبانی یا ساخت یک دستی…
تصویر /uploads/laravel jobs queue guide 3db1f2053bb1d3e90ed1.png در خیلی از اپلیکیشنهای Laravel، بخشی از کارها نباید همزمان با پاسخ HTTP انجام شوند؛ مثل ارسال…