همه ما طراحان محصول با «سندرم صفحه سفید» (White Page Syndrome) آشنا هستیم؛ آن لحظه مبهمی که بریف پروژه، نتایج مصاحبهها یا یوزر استوریها جلوی ماست، اما نمیدانیم اولین مستطیل یا لایه را کجای فیگما بکشیم. از طرفی، چرخههای تکراریِ اتود زدن و ست کردن تکتک المانها با دیزاین سیستم، زمان و انرژی خلاقانه زیادی از ما میگیرد.
من برای حل این چالش، یک فریمورک اختصاصی توسعه دادهام. این روش کار به من کمک میکند تا فرآیند ایده تا وایرفریم نهاییِ متصل به دیزاینسیستم را با سرعت بالا طی کنم. در این مقاله، این فریمورک ۴ مرحلهای را همراه با چالشها و راهکارهای عملیاش با شما به اشتراک میگذارم.
هدف این فریمورک حذف کردن تفکر طراح نیست، بلکه شتابدهی به کارهای تکراری و مکانیکی است. با این روش، هوش مصنوعی نقش دستیار اول من در ایدهپردازی و فرمدهی اولیه را بازی میکند تا من بتوانم تمرکزم را روی تجربه کاربری (UX) اصلی، فلوهای پیچیده و اهداف بیزینس بگذارم.
این فریمورک از ۴ گام اصلی تشکیل شده است:
هیچ هوش مصنوعی نمیتواند بدون دیتای درست، خروجی درستی بدهد. فرآیند من همیشه از دیتای واقعی شروع میشود. در این مرحله تمام نیازمندیها را از طریق:
تفکیک User Storyها
نتایج مصاحبه با کارفرما و کاربران
بریف اولیه پروژه
دستهبندی و شفاف میکنم. خروجی این مرحله، بستر اصلی پرامپتهای من در گام بعدی خواهد بود.
در این مرحله، من دیتای خام گام اول را برمیدارم و به یک مدل زبانی بزرگ (مثل Gemini یا ChatGPT) میدهم. ترفند اصلی در این گام، نقشسپاری (Role Prompting) است.
من به AI یک هویت مشخص میدهم: «تو یک طراح محصول ارشد هستی...». سپس از او میخواهم سناریو را تحلیل کند و معماری اطلاعات (Information Architecture) و اجزای صفحه را به صورت متنی و با جزئیات کامل به من تحویل دهد.
نمونه پرامپت من:
«به عنوان یک طراح محصول ارشد، صفحه پروفایل راننده در یک سیستم لاجستیک با توجه به یوزر استوری که بهت دادم طراحی کن، مشخص کن چه فیلدها، دکمهها و پیامهایی باید قرار بگیرند و معماری اطلاعات صفحه را به صورت بخشبندی شده به من بده.»
حالا من ساختار متنی و مهندسیشدهای که در گام دوم از LLM گرفتم را برمیدارم و آن را به ابزارهای هوش مصنوعی تولیدکننده رابط کاربری (مثل Make Figma یا ابزارهای مشابه) وارد میکنم.
این ابزارها در چند ثانیه، یک ساختار بصری اولیه (Layout) و چیدمان کامپوننتها را درون فایل فیگما به من تحویل میدهند. این کار زحمتِ چیدن اولیه ساختار صفحه از صفر را کاملاً از بین میبرد.
این مهمترین گام فریمورک است؛ جایی که ارزش اصلی من به عنوان یک طراح محصول مشخص میشود. طرحی که AI در گام سوم داده، خام و بدون هویت است.
من این طرح را وارد محیط اصلی دیزاینم میکنم و با استفاده از قوانین دیزاین سیستم خودم (پالتهای رنگی، تایپوگرافی، پدینگها و کامپوننتهای استاندارد)، آن را کاملاً کاستومایز و بومیسازی میکنم.
اگر ادعا کنم این فریمورک از روز اول بینقص کار میکرد، واقعیت را نگفتهام. در مسیر اجرای این روش با دو چالش بزرگ مواجه شدم که برای هرکدام راهکاری پیدا کردم:
ابزارهای وایرفریمساز AI معمولاً تمایل دارند سادهترین و تکراریترین پترنهای وب را تحویل دهند.
راهکار من: در گام دوم، پرامپت متنی را بسیار دقیقتر میکنم. به جای درخواست کلی، از تکنیک Few-Shot Prompting استفاده میکنم؛ یعنی به AI پترنهای موفق (مثلاً ساختار سایدبار فلان محصول موفق) را ارجاع میدهم تا معماری متنیِ قویتری بسازد. وقتی ورودی متنیِ گام سوم قوی باشد، خروجی فیگما هم هوشمندانهتر میشود.
تغییر دادن تکتک استایلها و رنگهای طرحِ AI به صورت دستی، خودش یک پروژه زمانبر است!
راهکار من: بکامپوننتهای خام و کلیشهایِ هوش مصنوعی (مثل دکمهها و اینپوتها) را به سرعت با کامپوننتهای اصلی دیزاین سیستم خودم جایگزین میکنم. همچنین با متصل کردن Local Styles و Variables، رنگها و ساختار کلی در چند کلیک همراستا میشوند.
از وقتی این فریمورک ۴ مرحلهای را در پروژههایم پیادهسازی میکنم، زمانِ صرفشده برای کارهای تکراری و اتودهای اولیه بیش از ۶۰٪ کاهش یافته است.
این فریمورک به من اجازه میدهد تا به جای درگیر شدن با جزئیات تکراری لایهها در شروع پروژه، به عنوان یک طراح محصول واقعی فکر کنم و سریعتر به راهحلهای بهینه و کاربرپسند برسم. هوش مصنوعی رقیب ما نیست، بلکه کاتالیزوری است که اگر فریمورک درست برایش داشته باشیم، ما را به طراحان چابکتری تبدیل میکند.
نظر شما چیست؟ آیا شما هم از AI در فرآیند طراحی خود استفاده میکنید؟ خوشحال میشوم اگر فریمورک یا ابزارهای خودتان را در بخش نظرات با من به اشتراک بگذارید.
