۱. مقدمه
در این آزمایشگاه کد، شما با پیوند دادن طراحی مبتنی بر هوش مصنوعی با یک محیط توسعه مبتنی بر عامل، یک وبسایت آماده برای تولید خواهید ساخت. شما از Google Stitch برای تولید یک رابط کاربری با کیفیت بالا استفاده خواهید کرد، سپس آن را از طریق پروتکل Model Context (MCP) به Antigravity IDE متصل خواهید کرد. در نهایت، از یک عامل مستقل برای دریافت "DNA طراحی" و پیادهسازی یک برنامه React با پیکسل بینقص استفاده خواهید کرد.
کاری که انجام خواهید داد
- ایجاد رابط کاربری در Stitch: از زبان طبیعی برای ایجاد یک طراحی وب کامل در Google Stitch استفاده کنید.
- پل ارتباطی با MCP: با استفاده از پروتکل Model Context، Antigravity را به پروژه Stitch خود متصل کنید.
- پیادهسازی خودکار: از «Agent Tab» آنتیگراویتی برای دریافت توکنهای طراحی و ایجاد یک پروژه React/Tailwind استفاده کنید.
- تأیید و اصلاح: از مرورگر یکپارچه برای «بررسی پویا»ی کد در مقایسه با طرح اصلی استفاده کنید.
آنچه یاد خواهید گرفت
- چگونه از Google Stitch برای نمونهسازی سریع طرحهای رابط کاربری با دقت بالا استفاده کنیم.
- نحوه پیکربندی سرورهای MCP در محیط توسعه یکپارچه آنتیگراویتی.
- نحوه استفاده از عاملهای خودمختار برای ترجمه فرادادههای طراحی بصری به کد ماژولار.
آنچه نیاز دارید
- مرورگر وب کروم
- یک IDE ضد جاذبه نصب شده است
- یک حساب کاربری گوگل استیچ
- یک کلید API برای دوخت
- Node.js (نسخه ۱۸ به بالا) به صورت محلی نصب شده باشد
قبل از اینکه شروع کنی
- در کنسول گوگل کلود ، در صفحه انتخاب پروژه، یک پروژه گوگل کلود را انتخاب یا ایجاد کنید.
- مطمئن شوید که صورتحساب برای پروژه ابری شما فعال است. یاد بگیرید که چگونه بررسی کنید که آیا صورتحساب در یک پروژه فعال است یا خیر .
برای اعتبارهای Google Cloud: برای کمک به شما در استفاده از Antigravity با پروژههای Google Cloud، اعتبارهای رایگان Google Cloud خود را با استفاده از این لینک استفاده کنید. میتوانید دستورالعملهای اینجا را برای فعال کردن اعتبار و ایجاد یک پروژه جدید دنبال کنید.
- به stitch.withgoogle.com بروید و مطمئن شوید که میتوانید وارد سیستم شوید.
- مطمئن شوید که Antigravity IDE را نصب کردهاید (که در antigravity.google موجود است).
۲. طرح را در Google Stitch ایجاد کنید
عامل برای دنبال کردن به یک «منبع حقیقت» بصری نیاز دارد. قبل از نوشتن کد، باید زیباییشناسی آن را تعریف کنیم.
- دسترسی به پلتفرم: به stitch.withgoogle.com بروید.
- نوع پروژه را انتخاب کنید: در داشبورد اصلی، گزینه « شروع یک طراحی جدید» را پیدا کنید. برای اطمینان از اینکه طرح شما برای طرحبندیهای مبتنی بر مرورگر بهینه شده است، روی «وب» کلیک کنید.
- مدل خود را انتخاب کنید: روی منوی کشویی مدل (که در حال حاضر نسخه ۳.۰ Flash را نشان میدهد) در داخل کادر اعلان کلیک کنید. مطمئن شوید که Gemini 3 برای پیشرفتهترین استدلال و تولید طرحبندی انتخاب شده است.
- چشمانداز خود را توصیف کنید: در قسمت متنی با عنوان «طراحی خود را توصیف کنید» ، عبارت مورد نظر خود را وارد کنید:
«یک صفحه فرود مدرن SaaS برای یک استارتاپ فناوری فضایی به نام LaunchPad طراحی کنید. از پالت آبی نیمهشب و بنفش نئونی استفاده کنید. یک بخش ویژه با دکمه «شروع کنید»، یک شبکه ویژگی سه ستونی و یک جدول قیمتگذاری glassmorphism اضافه کنید.» ۵. تولید: برای شروع فرآیند تولید، روی نماد فلش (کنار انتخابگر مدل) کلیک کنید. ۶. اصلاح و نامگذاری: پس از تولید رابط کاربری، در بالای صفحه نامی برای پروژه خود تعیین کنید. آن را LaunchPad بنامید. میتوانید قبل از انتقال به IDE، از نوار کناری چت برای اصلاح هر عنصر خاص استفاده کنید.
[!نکته] شما همچنین میتوانید از بین موارد زیر انتخاب کنید
«این دستورها را امتحان کنید»
اگر میخواهید سریع شروع کنید، به بخش ... مراجعه کنید.
۳. پیکربندی Antigravity MCP
برای اینکه به عامل ضد جاذبه اجازه دهید طرح شما را "بخواند"، باید یک کلید API امن ایجاد کنید و سرور Stitch MCP را اضافه کنید.
کلید API مربوط به Stitch را ایجاد کنید
- در گوگل استیچ، روی تصویر پروفایل خود در گوشه بالا سمت راست کلیک کنید.
- از منوی کشویی، تنظیمات دوخت (Stitch settings) را انتخاب کنید.
- به بخش کلید API بروید.
- روی دکمهی ایجاد کلید کلیک کنید.
- کلید را کپی کنید: کلید تولید شده را فوراً کپی کرده و آن را در جای امنی ذخیره کنید. برای مرحله بعدی به آن نیاز خواهید داشت.
پیکربندی Stitch MCP در Antigravity
- نرمافزار Antigravity IDE را باز کنید.
- مدیر عامل را باز کنید
در هر لحظه، میتوانید با فشردن کلیدهای CMD+E (مک) یا CTRL+E (ویندوز) یا از طریق دکمههای Open Editor و Open Agent Manager در سمت راست بالای نوار منو، بین Agent Manager و Editor جابهجا شوید.
- روی + باز کردن فضای کاری کلیک کنید.
برای شروع یک مکالمه جدید در یک فضای کاری، یا فضای کاری مورد نظر را از تب Start Conversation انتخاب کنید یا دکمه Plus کنار نام فضای کاری در نوار کناری را بزنید.
- روی Open New Workspace کلیک کنید و نام فضای کاری را
LaunchPad-Projectبگذارید و یک دایرکتوری محلی انتخاب کنید. این کار تضمین میکند که Agent یک پوشه ریشه خاص برای داربستبندی فایلها بدون ایجاد اختلال در پروژههای دیگر دارد.
پیکربندی Stitch MCP
- در فضای کاری جدید خود، به Agent Manager (CMD+E برای مک یا CTRL+E برای ویندوز) برگردید و MCP Servers را انتخاب کنید.
فروشگاه MCP را از طریق منوی کشویی "..." در بالای پنجرهی عامل ویرایشگر باز کنید.
آنتیگراویتی از پروتکل زمینه مدل (MCP) پشتیبانی میکند، استانداردی که به ویرایشگر اجازه میدهد تا به طور ایمن به ابزارهای محلی، پایگاههای داده و سرویسهای خارجی شما متصل شود. این ادغام، زمینهای بلادرنگ فراتر از فایلهای باز شده در ویرایشگر شما را برای هوش مصنوعی فراهم میکند.
MCP به عنوان پلی بین Antigravity و Google Stitch عمل میکند. به جای اینکه توکنهای طراحی را به صورت دستی صادر کنید یا کدهای هگز و فرادادههای طرحبندی را در ویرایشگر کپی کنید، MCP به Antigravity اجازه میدهد تا در صورت نیاز، DNA طراحی را مستقیماً از پروژه Stitch شما دریافت کند.
- عبارت «Stitch» را جستجو کنید و روی نصب کلیک کنید.
- وقتی از شما خواسته شد، کلید API مربوط به Stitch خود را در فیلد پیکربندی وارد کنید.
- تأیید: در چت نماینده، تایپ کنید:
List my Stitch projects.اگرLaunchPadبرگرداند، آماده هستید.
- تأیید: در چت نماینده، تایپ کنید:
List my Stitch projects.اگر نمایندهLaunchPadبرگرداند، پل با موفقیت پیکربندی شده است.
۴. زمینه طراحی را دریافت کنید
اکنون عامل برای اطمینان از صحت کد، نیاز به دریافت فرادادههای طراحی دارد.
- در چت Antigravity، تایپ کنید: «از Stitch MCP برای دریافت پروژه 'LaunchPad' استفاده کنید. پالت رنگ و تایپوگرافی را استخراج کنید، سپس یک فایل
DESIGN.mdدر دایرکتوری ریشه من ایجاد کنید.» - بررسی: فایل
DESIGN.mdکه به تازگی ایجاد شده است را باز کنید تا کدهای هگز و قوانین طرحبندی که عامل استخراج کرده است را مشاهده کنید.
۵. پیادهسازی (ساخت)
از عامل برای تبدیل طرح به یک برنامه React کارآمد استفاده کنید.
- دستور "ساخت" را بدهید:
«میخواهم همین الان این وبسایت کامل را بسازم. از React و Tailwind CSS استفاده کنید. مطمئن شوید که کامپوننتها ماژولار هستند. پس از اتمام، سرور توسعه را اجرا کنید و آن را در مرورگر یکپارچه به من نشان دهید.» ۲. عامل را مشاهده کنید: این عامل پروژه را در ترمینال چارچوببندی میکند، کامپوننتها را در ویرایشگر مینویسد و پیشنمایش را در مرورگر یکپارچه باز میکند.
۶. بررسی و اصلاح
خروجی را تأیید کنید و از عامل برای رفع هرگونه اختلاف بصری استفاده کنید.
- خروجی مرورگر یکپارچه را با طرح اولیه Stitch خود مقایسه کنید.
- اگر هر عنصری (مانند فاصله بین دکمهها یا وزن فونت) مطابقت نداشت، به اپراتور اطلاع دهید: «فاصله بین دکمههای 'شروع' کمی نامناسب است. به طراحی Stitch برگردید و کلاسهای Tailwind را بهروزرسانی کنید.»
- عامل، زمینه طراحی را دوباره واکشی کرده و اصلاحیه را فوراً اعمال میکند.
۷. خلاصه و مراحل بعدی
تبریک! شما با موفقیت شکاف بین یک طراحی با کیفیت بالا و یک کدبیس کاربردی را با استفاده از Antigravity و Stitch MCP پر کردهاید.
خلاصه کارهایی که انجام دادید:
- طراحی رابط کاربری در Stitch با استفاده از Gemini 3.
- یک کلید API امن ایجاد و Antigravity MCP را پیکربندی کردم.
- از یک عامل خودمختار برای ساخت و تأیید سایت React + Tailwind استفاده شد.