همه چیز درباره هوش مصنوعی استیچ (Stitch) گوگل و نحوه کار با آن
به گزارش مجله بابلسر، گوگل در کنفرانس توسعه دهندگان که در تاریخ 20 و 21 ماه مه 2025 مصادف با 30 و 31 اردیبهشت ماه 1404 برگزار گردید، ابزار تازه مبتنی بر هوش مصنوعی خود به نام استیچ (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 طراحی نشده است. این ابزار بر فراوری اولیه طراحی و کد تمرکز دارد و برای پروژه های پیچیده احتیاج به اصلاح در ابزارهای دیگر دارد.
محدود به طراحی رابط کاربری: برخلاف ابزارهای کدنویسی گسترده تر مانند اوپن ای آی کدکس یا گیت هاب کوپایلوت، استیچ برای فراوری رابط کاربری تخصصی شده و فاقد قابلیت های بک اند یا فول استک است.
سهمیه های ماهانه برای استفاده: اگرچه استفاده از گوگل استیچ رایگان است، اما محدودیت های فراوری ماهانه (اعتبار 350 تایی برای حالت فلش، و اعتبار 50 تایی برای حالت آزمایشی) ممکن است کاربران با لود کاری بالا را محدود کند.
وابستگی به مدل های جمینای: کیفیت خروجی ها به شدت به عملکرد مدل های جمینای گوگل وابسته است، که ممکن است در بعضی سناریوها با رقبایی مانند مدل های اوپن ای آی برابری نکند.
جمع بندی
استیچ گوگل یک ابزار مبتنی بر هوش مصنوعی است که فرآیند طراحی رابط کاربری را با امکان نمونه سازی سریع و فراوری کد از ورودی های متنی یا تصویری بازتعریف می نماید. ادغام آن با مدل های جمینای 2.5، امکان جایگذاری مستقیم (پیست) در فیگما و تمرکز بر ساده سازی جریان های کاری طراحی آن را به منبعی ارزشمند برای توسعه دهندگان، طراحان و مبتدیان تبدیل نموده است. استیچ اگرچه جایگزین پلتفرم های طراحی جامعی مانند فیگما یا ادوبی XD نیست، اما توانایی آن در تسریع مراحل اولیه طراحی رابط کاربری در حوزه خود بی نظیر است.
منبع: stitch
منبع: دیجیکالا مگ