هوش مصنوعی در طراحی سایت

هوش مصنوعی امروز در طراحی سایت دقیقا چه کاری می کند؟

پنج کار، و هیچ کدامشان «سایت را می سازد» نیست. از روی یک توصیف، پیش نویس اول یک چیدمان را می دهد. کد تکراری را می نویسد: فرم، جدول، گرید، حالت های hover. متن اولیه را پیشنهاد می دهد. تصویر و آیکن تولید می کند. و کدی را که کس دیگری نوشته توضیح می دهد، که کم اهمیت ترین به نظر می رسد و در عمل بیشترین وقت را برمی گرداند.

چیزی که نمی کند و در تبلیغ ابزارها هم لای جمله ها گم می شود: تصمیم نمی گیرد. اینکه این صفحه به چه کسی چه چیزی باید بگوید، کدام حرف اول بیاید، چه چیزی حذف شود و کدام ادعا اصلا راست است، هیچ کدام از دل یک پرامپت بیرون نمی آید. آن تصمیم ها همان چیزی هستند که طراحی را از رنگ کردن جدا می کنند.

پس تقسیم کار واقعی این است: مدل سرعت تایپ کردن را می دهد و شما جهت را. شکل بالای صفحه همین را دو ستونی گذاشته و عمدا هیچ ستونی علامت رد نخورده؛ هر دو ستون کار لازم اند و مسئله این است که کدام کار مال کیست.

چهار خانواده ابزار، و هر کدام کجا به درد می خورند

خانواده اول، ابزارهایی که از یک جمله یک رابط کاربری می سازند. شناخته شده ترینشان v0 است و مستندات خودش می گوید خروجی اش کامپوننت های ری اکت و همچنین HTML و CSS برای پیش نمونه و صفحه فرود است؛ Lovable هم در همین دسته می نشیند. جای درست استفاده شان پیش نمونه است: وقتی می خواهید یک ایده را ببینید تا درباره اش حرف بزنید. جایی که دردسر می شوند وقتی است که همان خروجی مستقیم به سایت اصلی می رود، چون شما یک پروژه با ساختار و وابستگی هایی تحویل گرفته اید که خودتان انتخابشان نکرده اید.

خانواده دوم، قابلیت های هوش مصنوعی داخل ابزارهای طراحی مثل فیگما. اینها به کار کسی می آیند که همین حالا در آن ابزار کار می کند و چیزی را عوض نمی کنند جز سرعت مراحل تکراری.

خانواده سوم، پنل های هوش مصنوعی داخل سایت سازها. هر سایت سازی حالا یکی دارد و منطقشان هم روشن است: کاربری که نمی خواهد طراحی یاد بگیرد. این موضوع خودش یک بحث جداست و ما در نوشته سایت سازهای هوش مصنوعی جدا به آن پرداخته ایم؛ اینجا فقط این را بگوییم که خروجی شان از قالب خود آن سایت ساز جدا نیست و محدودیت هایش را هم به ارث می برد.

خانواده چهارم و آنی که ما بیشتر از همه استفاده می کنیم: دستیارهای کد که در ویرایشگر و ترمینال خودتان کار می کنند و فایل های واقعی پروژه را می بینند. فرقشان با پنجره چت همین است. وقتی مدل می تواند فایل CSS شما را بخواند، جوابش درباره همان کد است و نه درباره یک کد فرضی.

درباره دسترسی از ایران هم صادق باشیم: هیچ کدام از دو ابزار دسته اول در مرجع هوش مصنوعی ما صفحه ندارند، چون فکت های سنجیده شده ای درباره شان نداریم. شرایط استفاده Vercel که v0 زیر آن است، از کاربر می خواهد هدف تحریم های آمریکا و چند نهاد دیگر نباشد، و صفحه های Lovable از این سرور اصلا باز نمی شوند تا بخوانیمشان. پس درباره باز شدن یا پرداخت آنها ادعایی نمی کنیم.

چرا خروجی مدل را از چند متر آن طرف تر می شود شناخت؟

چون از روی چیزی یاد گرفته که همه جا هست، پس چیزی می سازد که همه جا هست. نشانه ها هم مشخص اند و بعد از یک بار دیدن دیگر نمی توانید نبینیدشان:

• نوار رنگی باریک در یک لبه کارت، معمولا سه یا چهار پیکسل، با رنگی که از جای آن کارت در فهرست می آید.
• کپسول کاملا گرد برای هر چیپ و برچسب و دکمه، یعنی همان شعاع نود و نه پیکسلی که در هر قالب تولید شده ای هست.
• سه ستون ویژگی با آیکن های گرد و سه جمله دقیقا هم اندازه، حتی وقتی موضوع واقعا سه تا نیست.
• گرادیان بنفش به آبی پشت هدر و یک لکه نورانی محو در گوشه.
• در متن: خط تیره بلند وسط جمله، ساختار «نه تنها این بلکه آن»، و پاراگراف پایانی که چیزی جز خلاصه همان بالا نیست.

هیچ کدام اینها زشت نیستند و مشکلشان زیبایی شناسی نیست. مشکلشان این است که قابل تشخیص اند. خواننده ای که در یک ماه گذشته سی صفحه دیده که این نشانه ها را داشته اند، لازم نیست فکر کند؛ صفحه شما را در همان دسته می گذارد و بعد به همان اندازه به حرفتان اعتماد می کند.

ما این را روی سایت خودمان به یک قانون نوشته تبدیل کرده ایم. بند دهم فایل قواعد محتوایی rgb.ir نوار رنگی روی لبه یک بلاک را ممنوع می کند، با همین عنوان که یک واترمارک ماشینی است، و بند دوم همان فایل خط تیره بلند و چند نویسه دیگر را در متن ممنوع کرده. قانون طراحی یک تست مکانیکی هم دارد: یک جستجوی متنی در کل قالب و افزونه ها که دنبال حاشیه دو پیکسل به بالا روی یک لبه می گردد و حاشیه خنثای خود سایت را کنار می گذارد. امروز که این درس نوشته شد، آن جستجو دقیقا چهارده خط برمی گرداند و هر چهارده خط مجازند: دوازده خط برای دو سر پیکان که هر کدام از دو حاشیه چرخیده ساخته می شوند، یک مثلث باز و بسته شدن، و یک خط که داخل کامنتی نشسته که همین قاعده را توضیح می دهد. خط پانزدهم یعنی کسی یک نوار اضافه کرده.

و یک هشدار درباره خود همین فهرست: نشانه ها عوض می شوند. آنچه امروز لو می دهد، سال دیگر شاید معمولی باشد و چیز دیگری جایش را بگیرد. چیزی که عوض نمی شود سوال است، نه فهرست: این تصمیم را من گرفتم، یا خودش آمد؟

به کدی که مدل می نویسد چقدر می شود اعتماد کرد؟

به اندازه ای که خودتان بتوانید بخوانیدش. این تنها معیار عملی است و بقیه بحث ها فرع بر آن اند، چون کدی که روی سرور شما اجرا می شود و در مرورگر بازدیدکننده شما می نشیند، از لحظه انتشار مال شماست و باگ هایش هم.

چهار جای مشخص که خروجی مدل معمولا کوتاه می آید و هر چهار تا در سایت فارسی بیشتر پیدا می شوند:

• راست به چپ. پیش فرض مدل انگلیسی و چپ به راست است، پس margin-left و text-align: left می نویسد و خروجی در انگلیسی درست و در فارسی وارونه می افتد. درس CSS ویژگی های منطقی را نشان می دهد که این را حل می کنند.
• دسترس پذیری. دیو با onclick، دکمه بدون نام و حلقه focus حذف شده، هر سه در خروجی ها رایج اند. درس دسترس پذیری تست پنج دقیقه ای اش را دارد.
• وابستگی ها. مدل راحت یک کتابخانه اضافه می کند، چون هزینه اش را نمی پردازد. هر کتابخانه یک به روزرسانی آینده است و یک آسیب پذیری احتمالی آینده؛ در دنیای وردپرس همین جمع شدن افزونه ها بیشترین دردسر امنیت سایت را می سازد.
• بودجه سرعت. کد کار می کند و سنگین است. کسی که کد را نمی خواند، وزنش را هم نمی بیند.

و یک مورد که ربطی به کیفیت کد ندارد و جدی تر است: هر چیزی که در پنجره چت می گذارید از دستگاه شما بیرون رفته. کلید API، رمز پایگاه داده، فایل پیکربندی و اطلاعات مشتری، هیچ کدام جایشان آنجا نیست. این حرف درباره خوب یا بد بودن آن سرویس نیست؛ درباره این است که یک کپی از آن متن حالا جای دیگری هم هست.

پس کجا واقعا وقت صرفه جویی می شود؟

در کارهای مکانیکی که حجم دارند و تصمیم ندارند. فهرست واقعی ما، از کارهایی که خودمان می سپاریم:

• تبدیل یک فهرست توکن طراحی به متغیرهای CSS، با اسم گذاری یکدست.
• نوشتن چهل متن جایگزین وقتی خودتان گفته اید هر تصویر در صفحه چه کاری می کند.
• پیش نویس اول یک کامپوننت که می دانید بازنویسی اش می کنید.
• خواندن و توضیح دادن CSS ای که یک نفر دیگر سه سال پیش نوشته.
• ترجمه متن های رابط کاربری به چند زبان، وقتی واژه نامه اصطلاح ها را خودتان داده اید.
• یکی کردن استایل های تکراری در یک فایل بزرگ.

جمع این ها روی یک پروژه واقعی چند ساعت تایپ کردن است، نه چند روز تصمیم گرفتن، و همین تفاوت را باید صادقانه گفت. کسی که وعده می دهد سایت شرکتی کامل در ده دقیقه، یا دارد پیش نمونه را سایت جا می زند، یا از سایتی حرف می زند که هیچ کس بعدا نگهش نمی دارد.

و یک صرفه جویی که کمتر گفته می شود و شاید از همه بزرگ تر باشد: یاد گرفتن. وقتی خروجی را می گیرید و از مدل می خواهید خط به خط توضیح بدهد چه کار کرده و چرا، هزینه همان چند دقیقه است و چیزی که به دست می آورید دفعه بعد لازمش ندارید.

پیش نویس با مدل، انتشار با قضاوت: عملا یعنی چه؟

یعنی بین گرفتن خروجی و بالا رفتن صفحه، چهار بار خودتان از رویش رد شوید و هر بار دنبال یک چیز بگردید.

بار اول راست به چپ: هر جا left و right دیدید به ویژگی منطقی تبدیل کنید و صفحه را در هر دو جهت نگاه کنید. بار دوم صفحه کلید: از بالا تا پایین Tab بزنید و ببینید کجا هستید و کجا گیر می کنید. بار سوم وزن: چه چیزی به صفحه اضافه شده که خودتان نخواسته بودید، از فونت گرفته تا کتابخانه. بار چهارم نشانه ها: همان فهرست بخش سوم را روی خروجی ببرید و هر چه از آن سری بود عوض کنید.

این چهار بار روی هم شاید بیست دقیقه باشند و تفاوتشان با نبودنشان این است که در حالت اول یک صفحه دارید و در حالت دوم صفحه ای که مال شماست.

و یک حرف بی تعارف برای بستن این درس: اگر هدفتان یاد گرفتن طراحی نیست و فقط می خواهید کسب و کارتان یک سایت داشته باشد، مدل کوتاه ترین راه نیست. کوتاه ترین راه یا یک سایت ساز است، که در نوشته جداگانه ای سنجیده ایمش، یا سپردن کار به کسی که این چهار بار را بلد است.