ابزار Design Words شکاف بین سلیقه بصری و پرامپت‌های هوش مصنوعی را پر کرد

تصور کنید می‌خواهید وب‌سایتی با استایل «بروتالیست» بسازید، اما هوش مصنوعی مدام خروجی‌های خسته‌کننده و مشابه تمام سایت‌های دیگر را به شما می‌دهد. این دقیقاً همان جایی است که Design Words وارد می‌شود تا زبان بصری انسان را به دستورات قابل‌فهم برای ماشین تبدیل کند.

Ben's Bites در ۱۱ سپتامبر ۲۰۲۶ این ابزار را منتشر کرد تا چرخه تولید طرح‌های کلیشه‌ای (Boilerplate) را که اکثر وب‌سایت‌های تولیدشده توسط عامل (Agent) — شبیه دستیاری است که دستورات شما را می‌گیرد و اجرا می‌کند — دچار آن هستند، متوقف کند. در واقع، این ابزار توسط یک مؤسس غیرفنی ساخته شده است که توانست «شکاف زبان طراحی» را با ایجاد یک انتخاب‌گر استایل بصری حل کند؛ ابزاری که زیبایی‌شناسی را به پرامپت‌های ماشین‌خوان ترجمه می‌کند.

بسیاری از کاربران در توصیف استایل‌های طراحی مانند «سوئیس» یا «بروتالیست» برای هوش مصنوعی ناتوان‌اند و نتیجه معمولاً یک ظاهر پیش‌فرض و بی‌روح است. این ابزار به کاربران اجازه می‌دهد تم‌ها را مرور کنند، جزئیاتی مثل شعاع گوشه‌ها یا سایه‌ها را تغییر دهند و سپس یک پرامپت متنی دقیق را کپی کنند تا عامل هوش مصنوعی دقیقاً همان هویت بصری را بازتولید کند. این رویکرد یادآور راهکاری است که در طراحی داخلی هوشمند برای جایگزینی پرامپت‌های متنی با قالب‌های ساختاریافته به کار گرفته شد تا دقت خروجی‌های بصری افزایش یابد.

مشکل: شکاف طراحی در هوش مصنوعی

توضیح استایل‌ها، چیدمان‌ها و اجزای بصری برای افراد غیرطراح یک کابوس است، زیرا طراحان و عامل‌های AI زبان‌های تخصصی و متفاوتی دارند. طبق گزارش Ben's Bites، وقتی یک فرد غیرفنی بدون دستورات دقیق از یک عامل برای ساخت سایت استفاده می‌کند، مدل به طور پیش‌فرض به سراغ قالب‌های تکراری و کلیشه‌ای می‌رود که روی آن‌ها آموزش دیده است. این موضوع باعث می‌شود تغییر استایل یا تکرار (Iterate) روی یک طرح پس از تولید اولین صفحه، بسیار دشوار و طاقت‌فرسا باشد.

در این راستا، Ben's Bites نیاز به یک «انتخاب‌گر سیستم طراحی» را شناسایی کرد؛ مکانیزی که در آن کاربر بتواند یک ظاهر و حس (Look and Feel) را به صورت بصری انتخاب کند و در مقابل، متن دقیق برای پرامپت دادن به عامل خود دریافت کند. هدف این بود که ابزاری ساخته شود که کاربر احساس کند می‌تواند برای همیشه در آن بماند، ایده‌های تصادفی از ترکیب استایل‌ها و اجزا خلق کند و در عین حال، در سریع‌ترین زمان ممکن به یک طراحی نهایی و رضایت‌بخش برسد. این تلاش برای کاهش اصطکاک کاربر، مشابه استراتژی پلتفرم PetMorph در جایگزینی پرامپت‌ها با «موردهای کاربردی» است تا تجربه کاربری ساده‌تر شود.

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

زمینه: چشم‌انداز و سازوکار ابزار

این پروژه با ایده‌ای ساده شروع شد: کاربر از طریق انتخاب‌گرهایی در سمت چپ صفحه، تم‌ها و استایل‌های UI را مرور کند. جریان کاری (Workflow) مورد نظر این بود که کاربر وارد سایت شود، ظاهری که دوست دارد را انتخاب کند — مثلاً شعاع خاصی برای گوشه‌ها یا وجود سایه‌های افتاده (Drop Shadows) — و سپس یک پرامپت متنی قابل کپی برای عامل خود دریافت کند.

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

معماری چندمدلی (Multi-Model)

ساخت این ابزار نیازمند هماهنگی پیچیده‌ای بین مدل‌های مختلف برای ایده‌پردازی، کدنویسی و نقد بود. این فرآیند طی دو روز کار متناوب، ۳۸ جلسه کاری و ۱۱۶ پرامپت در مجموع انجام شد.

Ben's Bites از یک استراتژی مدل‌های لایه‌ای برای بهینه‌سازی خلاقیت و مصرف توکن (Token) — تکه‌های کوچکی از متن، شبیه برش‌های یک کیک که مدل تکه‌تکه می‌خورد — استفاده کرد:

• Fable 5.1: برای ایده‌پردازی اولیه، تفکر سطح بالای UX و مدیریت سایر مدل‌ها. این مدل نقش ارکستراتور (هماهنگ‌کننده) را داشت؛ برای برنامه‌ریزی، نوشتن بریف‌ها برای زیر-عامل‌ها و ارائه جزئیات طراحی و مراحل تأیید استفاده شد. Fable به طور خاص برای بازسازی‌های بزرگ طراحی و تفکر درباره ساختار، تجربه کاربری و مخاطبان هدف به کار رفت و همچنین ارکستراتور مدل Luna بود.
• Droid (Factory): برای مرحله ساخت واقعی به دلیل توانایی در تغییر سریع مدل‌ها. از Droid برای تنظیم فایل design.md و ساخت پروتوتایپ‌های نهایی استفاده شد.
• GLM 5.3 (از طریق Droid Core): برای اصلاحات سریع و جابه‌جایی المان‌ها جهت کاهش هزینه‌های توکن. مدل‌های متن‌باز Droid Core توکن‌های بسیار بیشتری نسبت به Fable یا Astra ارائه می‌دادند.
• Luna (از طریق Fable): به دلیل قابلیت‌های استفاده از کامپیوتر (Computer-use) برای راه‌اندازی سایت و انجام تست‌های سریع. Fable به عنوان ارکستراتور، Luna را هدایت می‌کرد تا حجم زیادی از موارد را به سرعت تست کند.
• Deepseek v4 Flash: به عنوان مدل اصلی و روزمره برای کارهای توسعه عمومی.

نمونه‌سازی تکرار شونده و نقد

این پروژه در ۱۱ نسخه مختلف تکامل یافت. سازنده از «زیر-عامل‌ها» (Subagents) — یعنی محیط‌های تازه با کانتکست مجزا — برای نقد طراحی استفاده کرد تا از این اتفاق جلوگیری کند که مدل صرفاً برای خوشامد کاربر با نظرات او موافقت کند و نقد واقعی ارائه ندهد.

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

جزئیات عمیق طراحی

برای عبور از ظاهر تکراری AI، ابزار بر واژگان تخصصی طراحی و کنترل‌های دانه‌بندی شده (Granular) تمرکز کرد. توسعه‌دهنده لیستی جامع از کلمات طراحی را بررسی کرد تا به کاربران کمک کند بفهمند یک انتخاب‌گر استایل باید دقیقاً چه ویژگی‌هایی داشته باشد.

واژگان طراحی و دسته‌بندی‌ها:

• استایل‌های زیبایی‌شناختی: ابزار زبان‌های طراحی خاصی را در بر می‌گیرد، از جمله:
  • ادیتوریال (Editorial)
  • ژئو-تون (Geo tone)
  • بروتالیست (Brutalist)
  • سوئیس (Swiss)
• دسته‌بندی‌های چیدمان: سیستم چیدمان‌های عملکردی مختلفی را در نظر می‌گیرد، مانند:
  • چیدمان‌های ابزار-محور (Tool-based)
  • نمایش داده‌ها (Data displays)
  • ساختارهای مبتنی بر گرید (Grid-based)
• تنظیمات جزئی المان‌ها: کاربران می‌توانند نشانگرهای بصری خاصی را برای اصلاح پرامپت تغییر دهند:
  • شعاع گوشه‌ها (Corner Radius): انتخاب بین گوشه‌های گرد یا بدون شعاع (تیز).
  • سایه‌ها (Shadows): جابه‌جایی بین سایه‌های افتاده و طراحی‌های تخت (Flat).
  • رنگ‌های تاکیدی (Accents): سفارشی‌سازی تاکیدهای منو و پالت‌های رنگی.
  • تایپوگرافی: تنظیم فونت‌ها و وزن فونت در سراسر سایت.

فرآیند نقد و بهینه‌سازی

توسعه این ابزار شامل چرخه‌های سخت‌گیرانه پرامپت‌های «۱۰ برابر» و «۱۰۰۰ برابر» بود. در ابتدا، سازنده احساس کرد ابزار بیش از حد «تخت» است و تنوع ندارد. او یک زیر-عامل Opus 5 ایجاد کرد تا نقدی تند وارد کند؛ این مدل اشاره کرد که کنترل‌های موجود برای ایجاد تفاوت بصری واقعی کافی نیستند.

بعد از آن، مکانیزم «Shuffle and Preview» به دلیل عدم تولید چیدمان‌های واقعاً متفاوت، «افتضاح» توصیف شد. سازنده متوجه شد که قابلیت Shuffle به طور موثر استایل‌ها و المان‌های مختلف را با هم ترکیب نمی‌کند تا چیزی ارزشمند برای کپی کردن پیدا شود. او مدل را تحت فشار گذاشت تا تجربه را «هزار برابر بهتر» کند، که در نهایت منجر به پروتوتایپ‌هایی شد که ترکیبی واقعی از استایل‌ها بودند.

این پروتوتایپ‌ها می‌توانند برای طیف وسیعی از ساخت‌ها استفاده شوند، از جمله:

• پروژه‌های داده‌محور
• وب‌سایت‌های شخصی
• فیدهای خبری
• سایر قالب‌های تک‌صفحه‌ای «عجیب و شگفت‌انگیز»

پیاده‌سازی فنی و استقرار

برای حفظ محیط توسعه تمیز، پروتوتایپ پیشرو به یک پوشه اختصاصی به نام style-picker منتقل شد و یک فایل design.md ایجاد گردید. این فایل به عنوان «منبع حقیقت» (Source of Truth) برای سیستم طراحی عمل کرد تا عامل‌ها توسط داده‌های حجیم و کانتکست‌های آشفته ناشی از پروتوتایپ‌های شکست‌خورده قبلی گمراه نشوند.

در مورد استقرار، در حالی که سایت اصلی روی Cloudflare است، Design Words از طریق here.now مستقر شد. این ابزار به دلیل سادگی، محدودیت‌های بسیار بالا و سهولت استفاده برای عامل‌های AI انتخاب شد. سازنده از یک پروکسی Cloudflare Worker استفاده کرد تا آدرس bensbites.com/design-words را به استقرار خارجی متصل کند. این ترفند اجازه داد سایت به «Design Words» تغییر نام دهد و روی دامنه اصلی فعال شود، بدون اینکه توسعه‌دهنده نیاز داشته باشد وارد پیچیدگی‌های داشبورد Cloudflare برای استقرار شود.

مصرف منابع

مقیاس این ساخت در میزان مصرف توکن‌ها در فازهای مختلف مشهود است که نشان‌دهنده افزایش شدید مصرف با تبدیل ایده به محصول نهایی است:

• فاز ایده: ۱۵۰ هزار توکن
• فاز پروتوتایپ: ۲۷.۴ میلیون توکن
• فاز ساخت: ۳۵۳.۵ میلیون توکن

اصلاح تجربه کاربری

نسخه‌های اولیه به دلیل «تخت بودن» و داشتن متن‌های زیاد نقد شدند؛ مشکلی که بازتاب‌دهنده تمایل معمول AI به اولویت دادن عملکرد نسبت به فرم است و باعث می‌شد ناوبری در سایت دشوار باشد. در نسخه‌های نهایی بر موارد زیر تمرکز شد:

• خلاصه‌سازی UI: پنهان کردن متن‌های غیرضروری برای کاهش شلوغی و افزایش کاربردپذیری.
• شفافیت بصری: افزودن پیش‌نمایش‌های بزرگ‌تر تا کاربران استایل‌ها را واضح‌تر ببینند.
• کاربردپذیری: تغییر تمرکز به گونه‌ای که بخش بصری جذابیت اصلی باشد و دکمه «کپی پرامپت» به عنوان ابزار کاربردی اول عمل کند.

این فرآیند نشان‌دهنده تغییری در توسعه AI است: حرکت از یک رشته چت واحد به سمت یک اکوسیستم چندعاملی که در آن مدل‌های مختلف نقش معمار، کدنویس و منتقد را ایفا می‌کنند. با موازی‌سازی وظایف توسط ۲۰ زیر-عامل هم‌زمان، توسعه‌دهنده توانست به سرعت از نسخه ۱ به نسخه ۸ و فراتر از آن برسد. او به طور خاص از زیر-عامل‌هایی با کانتکست تازه استفاده کرد تا دیدگاه‌های جدیدی درباره اهداف پروژه به دست آورد. این رویکرد در توسعه مهندسی‌شده، جایگزینی مناسبی برای مدل‌های بازارمحور در برابر مهندسی دستی پرامپت برای توسعه عامل‌های هوشمند است تا کنترل بیشتری بر کیفیت خروجی حاصل شود.

برای کاربر نهایی، این یعنی مانع ساخت وب‌سایت‌های حرفه‌ای دیگر دانستن واژگان طراحی نیست، بلکه صرفاً داشتن «سلیقه» برای تشخیص یک استایل خوب هنگام دیدن آن است.

گام بعدی شما

• اگر با عامل‌های AI سایت می‌سازید، یک فایل design.md یا system.md ایجاد کنید تا ثبات بصری پروژه را در جلسات مختلف حفظ کنید.
• از مدل‌های مختلف (مثلاً یکی برای معماری و یکی برای نقد) به صورت موازی استفاده کنید تا از تله «تأیید متقابل» مدل‌ها رها شوید.
• برای خروج از کلیشه‌های بصری AI، از مکانیزم‌های تصادفی (Shuffle) در پرامپت‌های خود استفاده کنید.

اما داستان سخت‌افزاری این تحول حتی شگفت‌انگیزتر است — به تحلیل ما درباره‌ی تراشه‌های Blackwell مراجعه کنید.