همه چیز درباره هوش مصنوعی استیچ (Stitch) گوگل و نحوه کار با آن

گوگل در کنفرانس توسعه‌دهندگان که در تاریخ ۲۰ و ۲۱ ماه مه ۲۰۲۵ مصادف با ۳۰ و ۳۱ اردیبهشت ماه ۱۴۰۴ برگزار شد، ابزار جدید مبتنی بر هوش مصنوعی خود به نام استیچ (Stitch) را معرفی کرد. این ابزار آزمایشی هوش مصنوعی گوگل که تحت Google Labs توسعه یافته است، با هدف ساده سازی طراحی رابط کاربری (UI) و تولید کد فرانت‌اند برای برنامه‌های وب و موبایل طراحی شده است. هوش مصنوعی استیچ با استفاده از مدل‌های پیشرفته جمینای 2.5 پرو و جمینای 2.5 فلش گوگل، به کاربران امکان می‌دهد تا با استفاده از دستورات متنی ساده یا تصاویر نمونه، رابط‌های کاربری (UI) باکیفیت و کدهای مربوط به آن را ایجاد کنند. در ادامه به نحوه کار با برنامه هوش مصنوعی استیچ گوگل و بررسی ویژگی‌های کلیدی آن می‌پردازیم.

فهرست محتوا

نحوه کار با هوش مصنوعی استیچ گوگل
ویژگی‌های کلیدی هوش مصنوعی استیچ
نقاط قوت هوش مصنوعی استیچ
محدودیت‌های هوش مصنوعی استیچ

نحوه کار با هوش مصنوعی استیچ (Stitch) گوگل

در ابتدا به آدرس stitch.withgoogle.com بروید.

همانند تصویر می‌توانید از همان ابتدا آنچه در ذهن دارید را در باکس مشخص شده بنویسید تا فرآیند طراحی آغاز شود، یا اینکه می‌توانید از گزینه Try Now سمت راست بالا وارد محیط طراحی شوید.

همچنین می‌توانید کاربری طراحی که برای صفحات وب یا موبایل است را از کادر Mobile/Web انتخاب کنید.

پس از فشردن دکمه Generate Design وارد محیط کاری استیچ خواهید شد.

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

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

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

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

نتیجه کار را در تصویر زیر می‌بینید. گوگل استیچ تغییراتی را با توجه به رنگ سبز و افزایش تصاویر اعمال کرد.

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

همچنین می‌توانید مانند تصویر زیر کد آن را ببینید.

در این مرحله معمولا استیچ برای دیزاین شما دکمه‌های قابل کلیک تعریف نمی‌کند. برای چک کردن این نکته می‌توانید کد را کپی کرده و به سایت OneCompiler بروید.

در این سایت به بخش HTML رفته و کد کپی شده را پیست کنید. در اینجا می‌توانید کد را ران کرده و ویژگی‌های آن را ببینید. همچنین از پنجره سمت چپ می‌توانید کد را ادیت کنید.

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

در این قسمت می‌توانید فونت و رنگ را عوض کرده یا حالت کلی طراحی را بین حالت تیره یا Dark Mode و حالت روشن یا Light Mode تغییر دهید.

همان‌طور که در تصویر زیر می‌بینید شما می‌توانید از قسمت مشخص شده روی Figma کلیک کرده و در ادامه فیگما را به صورت آنلاین باز کنید و کپی را آنجا پیست کنید. کافی است به آدرس figma.com رفته و با اکانت گوگل خود وارد شوید.

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

همچنین شما در فیگما می‌توانید صفحات دیزاین شده را به هم ارتباط داده و کار طراحی UI یا همان رابط کاربری را به راحتی به پایان برسانید. برای این کار کافی است مانند تصویر زیر، گزینه Prototype را انتخاب کنید.

در این جا به راحتی می‌توانید با کلیک بر روی هر جز آن حرکت یا اکشنی که انتظار دارید با کلیک اتفاق بیفتد را رقم بزنید. روی جز مورد نظر کلیک کنید، برای مثال در اینجا روی دکمه پروفایل Profile کلیک شده و به صفحه پروفایل متصل شده است.

همچنین با زدن روی دکمه پلی Play به راحتی می‌توانید نتیجه کلیک کردن خود را آزمایش کرده و ببینید.

ویژگی‌های کلیدی هوش مصنوعی استیچ

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

تولید رابط کاربری مبتنی بر متن و تصویر

کاربران می‌توانند دستورات را با زبان طبیعی خود -که شامل زبان فارسی هم می‌شود- متنی بنویسند یا تصاویری مانند طرح‌های اولیه، وایرفریم‌ها یا اسکرین‌شات‌ها را وارد کنند تا استیچ رابط‌ کاربری را برایشان تولید کند. استیچ این ورودی‌ها را با استفاده از جمینای 2.5 پرو برای طرح‌های پیچیده یا جمینای 2.5 فلش برای تکرارهای سریع‌تر پردازش می‌کند.

تولید کد فرانت‌اند با استیچ

استیچ کدهای HTML و CSS تمیز و کاربردی تولید می‌کند که با طرح‌های رابط کاربری تولید شده توسط هوش مصنوعی مطابقت دارد. این کدها آماده استفاده در محیط‌های توسعه (develop) کد هستند. با خودکارسازی تولید کد، استیچ نیاز به کدنویسی دستی عناصر فرانت‌اند را حذف کرده و زمان توسعه را به طور قابل‌توجهی کاهش می‌دهد. برای مثال یک برنامه‌نویس می‌تواند کد تولید شده برای یک رابط داشبورد را دریافت کرده و آن را با کد برنامه وب ادغام کند.

تولید چندین نسخه طراحی در استیچ

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

ادغام با فیگما

طرح‌های ایجادشده توسط استیچ می‌توانند توسط کاربر کپی شده و مستقیماً در فیگما (Figma) پیست شوند تا برای اصلاح و همکاری با تیم‌های طراحی استفاده شوند. این ادغام یکپارچه تضمین می‌کند که استیچ در جریان‌های کاری طراحی موجود جای می‌گیرد و به طراحان امکان می‌دهد اجزای تولید شده توسط هوش مصنوعی را در محیطی آشنا ویرایش کنند.

تولید و اصلاح از طریق چت استیچ

کاربران می‌توانند طرح‌هایشان را بدون نیاز به ادیت دستی و تنها از طریق پنل چت با استفاده از زبان طبیعی اصلاح کنند و عناصری مانند تم‌ها، فونت‌ها، رنگ‌ها یا چیدمان‌ها را تنظیم کنند. این ویژگی فرایند طراحی را شهودی می‌کند، زیرا کاربران می‌توانند تغییرات را توصیف کنند؛ مثلا «دکمه‌ها را بزرگ‌تر کن و از سایه تیره‌تری در زنگ آبی استفاده کن») بدون داشتن مهارت‌های طراحی پیشرفته.

الگوبرداری از سبک طراحی

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

دسترسی‌پذیری و سفارشی‌سازی

گوگل استیچ امکان شخصی‌سازی طرح‌ها با تنظیم تم‌ها، فونت‌ها، رنگ‌ها و چیدمان‌ها را فراهم می‌کند. همچنین به طور خودکار بهترین طراحی UX را اعمال می‌کند تا طرح‌ها کاربرپسند هم باشند.

نقاط قوت هوش مصنوعی استیچ

سرعت و کارایی: استیچ زمان لازم از ایده تا نمونه اولیه را به طور قابل توجهی کاهش می‌دهد و به کاربران امکان می‌دهد رابط‌های کاربری کاربردی را در چند دقیقه ایجاد کنند.

دسترسی برای همه سطوح مهارتی: گزینه‌های ورودی متنی و تصویری در مورد رابط کاربری آن را برای مبتدیان قابل دسترس کرده و در عین حال برای حرفه‌ای‌ها هم ابزاری قدرتمند و سریع فراهم آورده است.

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

مدل‌های هوش مصنوعی قدرتمند: استفاده از جمینای 2.5 پرو و جمینای 2.5 فلش عملکردی قوی برای وظایف طراحی پیچیده و سریع را ارائه می‌دهد.

دسترسی رایگان (با محدودیت): نسخه بتا عمومی با تعدادی سهمیه‌ ماهانه به صورت رایگان در دسترس است.

محدودیت‌های هوش مصنوعی استیچ

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

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

سهمیه‌های ماهانه برای استفاده: اگرچه استفاده از گوگل استیچ رایگان است، اما محدودیت‌های تولید ماهانه (اعتبار ۳۵۰ تایی برای حالت فلش، و اعتبار ۵۰ تایی برای حالت آزمایشی) ممکن است کاربران با لود کاری بالا را محدود کند.

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

جمع‌بندی

استیچ گوگل یک ابزار مبتنی بر هوش مصنوعی است که فرآیند طراحی رابط کاربری را با امکان نمونه‌سازی سریع و تولید کد از ورودی‌های متنی یا تصویری بازتعریف می‌کند. ادغام آن با مدل‌های جمینای 2.5، امکان جایگذاری مستقیم (پیست) در فیگما و تمرکز بر ساده سازی جریان‌های کاری طراحی آن را به منبعی ارزشمند برای توسعه‌دهندگان، طراحان و مبتدیان تبدیل کرده است. استیچ اگرچه جایگزین پلتفرم‌های طراحی جامعی مانند فیگما یا ادوبی XD نیست، اما توانایی آن در تسریع مراحل اولیه طراحی رابط کاربری در حوزه خود بی‌نظیر است.

منبع: stitch

نوشته همه چیز درباره هوش مصنوعی استیچ (Stitch) گوگل و نحوه کار با آن اولین بار در دیجی‌کالا مگ. پدیدار شد.

منبع