اگر هنوز برای تغییر ظاهر پروژههایتان از نوشتن پرامپتهای طولانی استفاده میکنید، احتمالاً نیمی از تواناییهای بصری مدلهای جدید را نادیده گرفتهاید. بن تاسل (Ben Tossell)، بنیانگذار Ben's Bites، در ۲۸ اوت ۲۰۲۶ نشان داد که چگونه میتوان با تبدیل عاملهای هوش مصنوعی به شرکای طراحی تکرارشونده، یک وبسایت را در یک شب بازسازی کرد. او فرآیند حذف یک رابط کاربری پیچیده و مبتنی بر هوش مصنوعی را به نفع یک سایت مینیمال و محتوا-محور مستند کرد. این سفر در یک تعطیلات آخر هفته طولانی در زادگاهش، شهر کاردیف آغاز شد؛ جایی که او زمان گذراندن با خانواده و بازی پادل — ورزشی که پیش از این به عنوان یک بازیکن تنیس معمولی آن را مسخره میکرد — را با بازسازی کامل حضور دیجیتالیاش ترکیب کرد.
بسیاری از توسعهدهندگان هنوز در تلهی «پرامپت بنویس و دعا کن» گرفتارند؛ یعنی متنی طولانی میفرستند و امیدوارند هوش مصنوعی قصد بصری آنها را بفهمد. رویکرد تاسل این شکاف را با یک حلقهی بازخورد تصویری پر میکند. او از ترکیبی از عامل (Agent) — شبیه به دستیاری که هم کد میزند و هم طراحی میکند — و ترسیم دستی استفاده میکند تا ایدهی ذهنیاش را به کد تبدیل کند.
حلقهی طراحی تکرارشونده
تاسل ابتدا با استفاده از Codex نمونهای از سایتی شبیه به یک اپلیکیشن عاملمحور ساخت. چشمانداز او این بود که هر «رشته» (Thread) شامل دستههای مختلفی از اطلاعات باشد، مانند صفحه «درباره من»، سرمایهگذاریها و محصولاتی که میپسندد. برای شروع، او تصویری از اپلیکیشن BB را به عنوان مرجع به Codex داد. اولین خروجی، طرحی را ایجاد کرد که در آن رشتهها در سمت چپ، یک رابط کاربری ساده برای چت در وسط، پرامپتهای پیشنهادی و یک نوار کناری دوم در سمت راست قرار داشت. اگرچه شکل کلی درست بود، اما طرح پر از ایرادات طراحی ریز بود.
برای مدیریت این خطاها، او از یک دستور خاص در فایل AGENTS.md استفاده میکند: «همیشه سه نسخه از طراحی را ایجاد کن تا بتوانم بین آنها جابهجا شوم». در این مورد خاص، این نسخهها به شکل «تمهای» مختلف ظاهر شدند. وقتی خروجی ایدهآل نبود، او بهجای نوشتن پرامپتهای بیشتر، اسکرینشاتی از بهترین گزینه گرفت، آن را به tldraw برد و تغییرات مورد نظرش را بهصورت دستی روی تصویر علامتگذاری کرد.
این تصویر علامتگذاریشده به همراه مسیر فایل اصلی، دوباره به عامل بازگردانده شد. این حلقهی «ببین، رسم کن، بفرست» به مکانیسم اصلی توسعه تبدیل شد. او اشاره کرد که مدلهای Claude معمولاً قصد طراحی را بهتر از مدلهای GPT درک میکنند و مدلهای اخیر OpenAI در برابر تغییرات جزئی، سختگیرتر و نیازمند بازخوردهای بسیار دقیقتر هستند.
ابزارها و زیرساخت فنی
تاسل برای بررسی طراحی از مهارت خاصی که توسط طراح Emil Kowalski ساخته شده بود استفاده کرد. او ترجیح میدهد کنترل دقیقی بر زمان فراخوانی توابع خارجی توسط عاملها داشته باشد، بنابراین قابلیت فراخوانی خودکار مهارتها توسط مدل را غیرفعال کرد. او برای اطمینان از این موضوع از دستور خاصی استفاده کرد: «مطمئن شو مهارتها توسط مدل فراخوانی نشوند و فقط توسط کاربر قابل اجرا باشند».
در بخش مدیریت محتوا و استقرار، از ابزارها و مکانیسمهای زیر استفاده شد:
مدیریت محتوا
- Markdown: تمام محتوای سایت در فایلهای متنی ساده Markdown (که در آن سرتیترها با # شروع میشوند) ذخیره شد. این فایلها در یک دایرکتوری محلی (
~/repos/bentossell) ذخیره شدند. این روش اجازه میدهد محتوا بدون نیاز به جستجو در کدهای اصلی سایت بهروزرسانی شود. این رویکرد ساختاریافته به ساخت عاملهای هوش مصنوعی شخصی با استفاده از پوشههای Markdown شباهت دارد که پیشتر توسط تاسل بررسی شده بود. - Localhost: سایت ابتدا در محیط محلی (Localhost) ساخته شد؛ به این معنی که فقط روی کامپیوتر تاسل در دسترس بود و برای عموم یا دستگاههای موبایل نامرئی بود.
- Static vs Dynamic: سایت بهصورت استاتیک طراحی شد؛ یعنی تمام اطلاعات نمایش داده شده در صفحه، در خود فایلها موجود است. این با سایتهای دینامیک که اطلاعات را از یک API یا دیتابیس میگیرند تا انتخابهای کاربر (مانند لایک کردن یک پست) را به خاطر بسپارند، متفاوت است.
استقرار و DNS
- here.now: برای استقرار سریع سایتهای استاتیک استفاده شد. تاسل در این شرکت سرمایهگذار است، هرچند اشاره کرد که این یک پروژه اسپانسر شده نبوده است. او از این ابزار برای هر پروژهای که اپلیکیشن بزرگ با دیتابیس یا جابهجایی پیچیده داده نباشد، استفاده میکند.
- Vercel: مدیریت رکوردهای DNS دامنه bentossell.com بر عهده این سرویس بود. عامل هوش مصنوعی از مرورگر کروم استفاده کرد تا دامنه را در here.now اضافه کرده و رکوردهای DNS را در Vercel بهروزرسانی کند.
- DNS Propagation: پس از اینکه عامل تنظیمات را انجام داد، حدود ۲۰ دقیقه طول کشید تا تغییرات دامنه تثبیت شود که برای اشارهگریهای جدید وبسایت استاندارد است.
- Git: در حالی که عامل فایلها را مستقیماً از پوشه محلی به here.now منتشر کرد و نیازی به GitHub نبود، تاسل همچنان از Git برای تاریخچه نسخهها و ثبت تغییرات (Commit) استفاده کرد. او اشاره کرد که اگرچه «پوش کردن» (Push) کامیتها به گیتهاب برای بکآپ مفید است، اما برای این استقرار خاص الزامی نبود.
بهبودهای بصری
- Rough Notation: کتابخانهای که برای ایجاد خطوط زیرین متحرک، باکسها، دایرهها، هایلایتها و براکتها استفاده شد. اینها توضیحاتی به سبک دستنویس ایجاد میکنند که همراه با محتوا حرکت میکنند.
چرخش از پیچیدگی به سادگی
تاسل در ابتدا سایت را به سمت «تورم محدوده» (Scope Creep) برد. او یک بررسی طراحی با تمرکز بر انیمیشن اجرا کرد و یک فایل To-do ایجاد کرد که بر اساس پیچیدگی دستهبندی شده بود. اصلاحات جزئی در مقابل تغییرات بزرگ پروژه متوازن شدند؛ تغییراتی مانند افزودن یک مدل واقعی هوش مصنوعی، اجازه ارسال پیام به بازدیدکنندگان، نمایش فراخوانیهای واقعی ابزارها و فرآیندهای تفکر مدل، و ایجاد پیشنمایشهای بوم (Canvas) یا آرتیفکتها در داخل سایت.
برای اجرای این تغییرات پیچیده در رابط کاربری، او از Codex خواست تا از عامل دیگری به نام Droid برای اجرای کارها با Grok استفاده کند، زیرا مدلهای GPT زیباییشناسی مورد نظر او را ارائه نمیدادند. او حتی شروع به ساخت نسخه متحرکی از سگش، نرو (Nero)، کرد که میشد او را در صفحه به اطراف کشید.
اما پس از یک شب تأمل، او تمام رابط کاربری عاملمحور را حذف کرد. او دریافت که تبدیل یک سایت شخصی به یک ابزار پیچیده، منجر به چرخه بیپایانی از افزودن قابلیتهای اضافی میشود — یک دکمه دیگر، یک تعامل جدید یا یک easter egg دیگر — که از هدف اصلی سایت فاصله میگیرد. او به این نتیجه رسید که اغلب تا زمانی که نسخهای از چیزی را نبیند و با آن کار نکند، نمیداند دقیقاً چه میخواهد؛ به همین دلیل است که برای هر طراحی سه نسخه درخواست میکند. او اشاره کرد که دیدن این تفاوتها، چه در جهت درست باشد و چه ثابت کند کل مسیر اشتباه است، به یک اندازه مفید است.
او به ساختاری شبیه به «بوم» (Canvas) تغییر مسیر داد که از Daniel White الهام گرفته بود؛ کسی که از ساختار درخت-فایل (File-tree) به عنوان یک خط زمانی برای نمایش کارهای فعلی و قبلی به صورت آیتمهای تودرتو استفاده میکرد. تاسل یک طرح اولیه با یادداشتهای دستنویس و پیشنمایشهای کوچک ساخت که در آن با نگه داشتن موس روی متن، یادداشتهای تکمیلی ظاهر میشدند.
پرداخت جزئیات نهایی
نسخه نهایی بر روی تعاملات کوچک اما با تأثیر بالا تمرکز داشت. تاسل یک نماد متحرک (Mascot) پیاده کرد که در بالای صفحه حرکت میکند و از سایت Noah الهام گرفته شده بود. اولین نسخه خام بود: چشمها جلوی صورت بودند، دستها ناپدید میشدند و تصویر در لبه صفحه به شکل عجیبی میچرخید. او این مورد را با درخواست از عامل اصلاح کرد تا کاراکتر مانند یک خرچنگ به صورت عرضی راه برود و اندازه، سایه و پاها را تنظیم کرد.
او کنترلهای کیبورد را به این کاراکتر اضافه کرد: فلش بالا باعث پرش میشود، در حالی که فلشهای چپ و راست سرعت آن را افزایش میدهند. او همچنین یک Tooltip هنگام هاور (Hover) اضافه کرد و مطمئن شد که کلیک روی کاراکتر یک عمل مفید را انجام میدهد. در نهایت، این کاراکتر به عنوان فاوآیکون (Favicon) سایت قرار گرفت.
برای صیقل دادن براکتهای Rough Notation، تاسل مجبور شد مشکلات طراحی واکنشگرا (Responsive Design) را حل کند. در ابتدا، باز شدن یک بخش سریعتر از انیمیشن براکت بود و برخی براکتها فراتر از عرض محتوا کشیده میشدند. او این جزئیات را علامتگذاری کرد تا مطمئن شود در نمایشگرهای کوچک، متن بهجای فشرده شدن در کنار محتوا، به زیر آن منتقل شود.
در لمسهای نهایی، او تمهای روشن و تاریک را اضافه کرد. پس از اینکه از خود پرسید آیا اصلاً دکمه تغییر تم لازم است یا خیر، کل سوئیچ را حذف کرد و سایت را طوری تنظیم کرد که بهطور خودکار از تنظیمات سیستم بازدیدکننده پیروی کند. سایت نهایی سادهتر است: محتوا در فایلهای قابل ویرایش قرار دارد، درخت محتوا باز میشود، یادداشتها با متن حرکت میکنند و نماد متحرک در بالا پرسه میزند.
این فرآیند ثابت میکند که مؤثرترین راه استفاده از هوش مصنوعی برای کارهای فرانتاند، نه پرامپتنویسی بهتر، بلکه ارتباط بصری دقیقتر است. با استفاده از اسکرینشات به عنوان «منبع حقیقت»، توسعهدهنده ابهامات طراحی که معمولاً منجر به خطاهای رایج مدلها میشود را به شدت کاهش میدهد.
برای خواننده، این بدان معناست که مانع ساخت یک سایت برند شخصی با کیفیت تغییر کرده است. مهارت دیگر دانستن ویژگیهای دقیق CSS نیست، بلکه دانستن نحوه نقد یک خروجی بصری و انتقال دقیق اصلاحات است. همانطور که تاسل میگوید، هدف این است که «در حین انجام کار، در آن کار ماهر شوید».
اگر در حال ساخت پروژه خود هستید، سعی کنید پرامپت توصیفی طولانی بعدی خود را با یک اسکرینشات و سه دایره قرمز که دقیقاً نقاط نیاز به تغییر را مشخص کردهاند، جایگزین کنید.
گفتگو