طراحی و ساخت سایت با آنتیگراویتی: آموزش گامبهگام از صفر تا انتشار
تیم نوا · ۱۴۰۵/۰۵/۱۷ · ۱۱ دقیقه مطالعه
خلاصه کلیدی
- با آنتیگراویتی میتوان از ایده تا انتشار سایت را در یک جریان کاری پیش برد
- ایجنت مرورگر خودش خروجی را باز میکند و ایرادهای بصری را میبیند
- کیفیت خروجی مستقیماً به دقت توضیح اولیه و بازخوردهای مرحلهای بستگی دارد
طراحی و ساخت سایت با آنتیگراویتی: آموزش گامبهگام
یکی از کاربردیترین دلایلی که کاربران سراغ آنتیگراویتی میروند، ساخت سریع وبسایت و لندینگپیج است — از یک ایدهی ساده تا یک سایت واقعی که در مرورگر تست شده. در این راهنما مسیر کامل را قدمبهقدم توضیح میدهیم.
چرا آنتیگراویتی برای طراحی سایت مناسب است؟
بر خلاف بیشتر ابزارهای «vibe coding» که فقط کد تولید میکنند و تست را به شما میسپارند، آنتیگراویتی سه قابلیت را همزمان دارد که آن را برای طراحی سایت خیلی کاربردی میکند:
- دسترسی مستقیم به مرورگر: ایجنت خودش سایتی که ساخته را در Chrome باز میکند، روی دکمهها کلیک میکند، فرم پر میکند و باگهای بصری را پیدا میکند.
- تولید تصویر داخلی با Nano Banana Pro: بهجای رفتن به سایتهای استوک عکس یا گذاشتن جای خالی، ایجنت میتواند مستقیماً تصویر متناسب با طرح بسازد.
- گزارش شفاف کار (Artifacts): برای هر مرحله، لیست کارها، اسکرینشات و حتی ویدیوی تست را میبینید — یعنی مجبور نیستید کورکورانه به هوش مصنوعی اعتماد کنید.
مرحله ۱: نصب و راهاندازی
آنتیگراویتی برای Windows، macOS و Linux در دسترس است. پس از دانلود و نصب از سایت رسمی، باید یک ایجنت پیشفرض انتخاب کنید. اگر تازهکار هستید، همان گزینهی پیشنهادی گوگل (Agent-assisted development) را انتخاب کنید تا کنترل بیشتری روی مراحل داشته باشید.
مرحله ۲: تعریف پروژه با یک پرامپت خوب
کیفیت خروجی مستقیماً به کیفیت پرامپت اول شما بستگی دارد. یک پرامپت خوب برای ساخت سایت باید شامل این موارد باشد:
- نوع کسبوکار یا هدف سایت (مثلاً «سایت معرفی یک نانوایی محلی»)
- بخشهای مورد نیاز (هدر، هیرو، دربارهما، گالری، تماس با ما، فوتر)
- حالوهوای بصری (مینیمال، رنگارنگ، لوکس، گرم و صمیمی…)
- درخواست صریح برای تولید تصویر — مثلاً «برای بخش هیرو یک تصویر واقعی از نان تازه با نور صبحگاهی بساز»
- پشتهی فنی دلخواه (اگر React/Tailwind میخواهید، دقیقاً بگویید)
مثال یک پرامپت کامل:
«یک لندینگپیج برای نانوایی «نانبانه» بساز. بخشهای هدر، هیرو با تصویر واقعی از نان تازهی صبحگاهی، درباره ما، منوی محصولات با ۶ کارت، نظرات مشتریان و فرم تماس لازم است. حالوهوا گرم و روستایی باشد، فونتها خوانا و رنگبندی کرم و قهوهای. از React و Tailwind استفاده کن و در پایان در مرورگر تستش کن.»
مرحله ۳: مشاهدهی Planning Mode
پیش از شروع کدنویسی، آنتیگراویتی یک چکلیست از کارها نشان میدهد (مثلاً: ساخت کامپوننت هدر، تولید تصویر هیرو، پیادهسازی گرید محصولات…). این مرحله را حتماً بخوانید؛ اگر بخشی جا افتاده یا اشتباه برداشت شده، همینجا اصلاحش کنید تا وقت تلف نشود.
مرحله ۴: تولید تصویر با Nano Banana Pro
وقتی ایجنت به بخشی برسد که نیاز به تصویر دارد، خودش تصمیم میگیرد از Nano Banana Pro استفاده کند. میتوانید صریحاً هم بخواهید: «برای بخش گالری، ۴ تصویر مختلف از محصولات نانوایی بساز.» نتیجه معمولاً چند نسخه (variation) است که میتوانید بهترین را انتخاب یا دوباره با توضیحات جدید اصلاح کنید. جزئیات کامل این قابلیت را در مقالهی اختصاصی «ساخت تصویر با Nano Banana Pro» بخوانید.
مرحله ۵: بازبینی و اصلاح بصری
بعد از تولید نسخهی اول، بهجای توضیح متنیِ طولانی برای تغییرات جزئی، میتوانید مستقیماً روی پیشنمایش کلیک کنید و بازخورد بصری بدهید (مثلاً بزرگ کردن یک دکمه یا تغییر رنگ یک بخش) — این یکی از تفاوتهای کلیدی آنتیگراویتی نسبت به ابزارهای فقط-متنی است.
مرحله ۶: تست خودکار در مرورگر
ایجنت بهطور خودکار سایت را در یک نمونه از Chrome باز میکند، روی لینکها و دکمهها کلیک میکند، واکنشگرا بودن (Responsive) را بررسی میکند و در صورت پیدا کردن باگ، خودش تلاش میکند آن را رفع کند. از این فرایند یک ویدیوی ضبطشده هم دریافت میکنید تا بعداً مرور کنید.
مرحله ۷: انتشار
پس از تأیید نهایی، میتوانید پروژه را به یک مخزن Git متصل کنید یا از طریق ابزارهای دیپلوی متصل (مثل Netlify یا Vercel از طریق MCP) مستقیماً منتشر کنید.
اشتباهات رایج در طراحی سایت با آنتیگراویتی
- پرامپت خیلی کلی نوشتن: هرچه جزئیات بیشتری (رنگ، فونت، تعداد بخشها) بدهید، نتیجهی اول نزدیکتر به تصور شما خواهد بود.
- رد شدن سریع از Planning Mode: این مرحله رایگانترین فرصت برای اصلاح مسیر است، نادیده نگیرید.
- اعتماد کامل بدون بازبینی نهایی: حتی با تست خودکار مرورگر، یک بازبینی دستی نهایی (بهخصوص برای موبایل) همیشه توصیه میشود.
- فراموش کردن سهمیهی مصرف: پروژههای بزرگ ممکن است سریع به سقف مصرف پلن رایگان برسند؛ برای پروژههای جدی، پلن Pro را در نظر بگیرید.
سوالات متداول
آیا برای ساخت سایت با آنتیگراویتی باید کدنویسی بلد باشم؟
نه لزوماً. با Autopilot Mode میتوانید صرفاً با توضیح متنی یک سایت کامل بسازید، اما دانش پایهی HTML/CSS برای اصلاحات دقیقتر مفید است.
آیا میتوانم طرح آماده (Figma) را وارد آنتیگراویتی کنم؟
بله، میتوانید فایل طرح یا اسکرینشات را بهعنوان مرجع بدهید و از ایجنت بخواهید همان طراحی را پیادهسازی کند.
چند وقت طول میکشد یک لندینگپیج کامل ساخته شود؟
برای یک لندینگپیج معمولی با چند بخش، معمولاً بین چند دقیقه تا نیم ساعت، بسته به پیچیدگی و تعداد تصاویر تولیدی.
آیا سایت ساختهشده آمادهی SEO است؟
پایهای بله (تگهای عنوان، توضیحات متا)، اما برای بهینهسازی کامل بهتر است صریحاً از ایجنت بخواهید ساختار سئو (هدینگها، alt تصاویر، سرعت بارگذاری) را هم رعایت کند.
مقالات مرتبط
- آنتیگراویتی گوگل چیست؟ معرفی کامل
- ساخت تصویر با هوش مصنوعی در آنتیگراویتی (Nano Banana Pro)
- طراحی و ساخت وبسایت با Codex
- مقایسهی Codex، آنتیگراویتی، Cursor و Claude Code
سؤالات متداول
آیا برای ساخت سایت با آنتیگراویتی باید کدنویسی بلد باشم؟
نه لزوماً. با Autopilot Mode میتوانید صرفاً با توضیح متنی یک سایت کامل بسازید، اما دانش پایهی HTML/CSS برای اصلاحات دقیقتر مفید است.
آیا میتوانم طرح آماده (Figma) را وارد آنتیگراویتی کنم؟
بله، میتوانید فایل طرح یا اسکرینشات را بهعنوان مرجع بدهید و از ایجنت بخواهید همان طراحی را پیادهسازی کند.
چند وقت طول میکشد یک لندینگپیج کامل ساخته شود؟
برای یک لندینگپیج معمولی با چند بخش، معمولاً بین چند دقیقه تا نیم ساعت، بسته به پیچیدگی و تعداد تصاویر تولیدی.
آیا سایت ساختهشده آمادهی SEO است؟
پایهای بله (تگهای عنوان، توضیحات متا)، اما برای بهینهسازی کامل بهتر است صریحاً از ایجنت بخواهید ساختار سئو (هدینگها، alt تصاویر، سرعت بارگذاری) را هم رعایت کند.