ساخت و انتشار یه سایت با حالت Work مدل ChatGPT
فرانتاند
هوش مصنوعیخلاصهٔ کاملتر
به روایت نویسنده، حالت Work تو ChatGPT یعنی همون مجموعه قابلیتهای ایجنتی که مدل رو از تولید متن به انجام کار میرسونه: اجرای کد، مرور وب، ساخت فایل و انتشار محتوای وب. موقع ساخت سایت سه اتفاق پشت صحنه میافته — تولید کد کامل HTML و CSS و JavaScript، پیشنمایش زنده برای دیدن نتیجه، و در نهایت تبدیلش به یه آدرس واقعی. تفاوتش با «برام یه HTML بنویس» اینه که تولید و بازبینی و تکرار همه تو یه حلقه اتفاق میافته.
مهمترین بخش مقاله، همون روش ساندویچ context ـه. نویسنده میگه بیشتر آدمها مینویسن «برای استودیو یوگام یه سایت بساز» و بعد پنج دور صرف اصلاح چیزهایی میکنن که یه پرامپت بهتر از اول حلشون میکرد. ساختار پیشنهادی سه لایهست: لایهٔ بالا یعنی تو کی هستی، سایت برای چیه و کی ازش استفاده میکنه؛ میانه یعنی دقیقاً چی میخوای ساخته بشه؛ و لایهٔ پایین یعنی محدودیتها، لحن، سبک و چیزهایی که نباید انجام بشه.
نمونهای که میآره روشنه: «یه استودیو یوگای کوچیک تو پورتلند دارم و مشتریهام بیشتر شاغلهای دههٔ سی و چهل زندگیان؛ سایتی میخوام که آروم و لوکس حس بشه، نه کلینیکی» بهعنوان لایهٔ بالا؛ ساختار دقیق صفحه — هیرو با دکمهٔ برنامهٔ کلاسها، بخش دربارهٔ ما، سهستونی خدمات، نظرات و فرم تماس — بهعنوان میانه؛ و پالت رنگ سفید گرم و سبز مریمگلی، بدون عکس جایگزین و بدون پاپآپ بهعنوان لایهٔ پایین.
نویسنده معتقده لایهٔ پایین همون جاییه که بیشتر پرامپتها ناقص میمونن. مدل وقتی جای خالی ببینه، به رایجترین حالت پیشفرض میره: دکمهٔ آبی، فونت Inter و یه جاینگهدار عکس. چیزهایی که ارزش گفتن دارن هم مشخصن — پالت رنگ (کد هگز اگه داری)، نام فونت، چیزهایی که باید یا نباید باشن، حس متن، و محدودیتهای فنی مثل «فقط CSS خالص، بدون کتابخانهٔ بیرونی».
برای تکرار، توصیهش اینه که هیچوقت از اول شروع نکنی و بهجاش پرامپتهای هدفمند روی یه جزء بدی: «دکمهٔ فراخوان تو هیرو بزرگتر بشه و فونت تیترها Playfair Display»، یا «بخش نظرات تنگه، فاصله بیشتر شه». اگه مدل بین چند ویرایش گیج شد، ازش بخواه کل فایل بهروزشده رو یکجا بده. دو تا تکنیک دیگه هم اضافه میکنه: صریح درخواست کردن واکنشگرایی موبایل (چون خروجی پیشفرض معمولاً دسکتاپ-اوله)، و نگهداشتن یه «نسخهٔ طلایی» بعد از هر دور موفق تا اگه تغییر بعدی چیزی رو شکست، بتونی برگردی.
برای انتشار هم سه مسیر رایگان معرفی میشه: آپلود فایل تو یه مخزن GitHub و فعال کردن Pages، کشیدن و رها کردن فایل تو Netlify Drop که سریعترین راهه، یا Vercel. تو بخش پرسشها نویسنده روشن میکنه که خروجی بهطور پیشفرض بهینهٔ موتور جستجو نیست و اگه تگ عنوان، توضیح متا، تگهای Open Graph و HTML معنایی میخوای، باید صریح تو پرامپت بخوای.
اشتباهات رایجی که میشمره هم شنیدنیه: پرامپت مبهم و بعد ناامیدی؛ جا دادن شش تغییر تو یه پیام که معمولاً نتیجهٔ ناقص میده؛ تست نکردن روی عرض موبایل؛ فراموش کردن متن جایگزین تصاویر و دسترسپذیری؛ و برخورد یکباره با کاری که ذاتاً تکرارشوندهست. محدودیت واقعی هم همونیه که خودش میگه: یه فایل HTML ساکن نمیتونه فرم رو به CRM وصل کنه یا منطق سمت سرور اجرا کنه.
نکات کلیدی:
- ساندویچ context یعنی زمینه بالا، درخواست وسط، محدودیتها پایین
- لایهٔ پایین بیشترین تأثیر رو داره و همونجاست که اکثر پرامپتها ناقصن
- هر بار یه تغییر بده و بعد از هر نتیجهٔ خوب یه نسخهٔ طلایی نگه دار
- واکنشگرایی موبایل و نکات سئو رو باید صریح بخوای، پیشفرض نیستن
- انتشار روی GitHub Pages یا Netlify Drop چند دقیقه بیشتر طول نمیکشه
- هر چیزی که به منطق سمت سرور، احراز هویت یا پایگاه داده نیاز داره، از تیررس یه فایل ساکن بیرونه
