مراجعة Google Stitch: حوّلت فكرة تطبيق إلى واقع بالتحدث مع الذكاء الاصطناعي

هل تعرف ذلك الشعور حين تكون فكرة تطبيق واضحة في ذهنك إلى حد أنك تكاد تراها؟ لكن ما إن تفتح أداة التصميم حتى تتبخر الفكرة كلها؟

هذه الفجوة بين الفكرة في ذهنك وما يظهر على الشاشة هي بالضبط ما تحاول Google Stitch (GOOGL ) سدها. ومن تجربتي، تقترب الأداة كثيرًا من تحقيق ذلك.

Stitch ليست مثل بقية أدوات التصميم بالذكاء الاصطناعي. فهي لا تطلب منك تعلّم نظام جديد أو سحب المكونات على لوحة التصميم قبل أن تبدأ النتيجة بالظهور بالشكل الصحيح.

بل تجعل الأمر بسيطًا للغاية. تصف نوع التطبيق أو الموقع الذي تريد تصميمه، بصوتك إن شئت، فتبدأ شاشات كاملة بالظهور أمامك خلال دقائق.

في هذه المراجعة لأداة Google Stitch، سأناقش مزاياها وعيوبها، وماهيتها، والفئات الأنسب لها، وميزاتها الأساسية. ثم أوضح كيف استخدمتها لإنشاء تصميم واجهة مستخدم لتطبيق قائمة التحقق من أمتعة السفر.

وأختتم المقال بمقارنة Stitch بثلاثة من أفضل البدائل التي اخترتها (Base44، Softr، وDraftbit). وفي النهاية ستعرف إن كانت Stitch مناسبة لك!

الخلاصة

Google Stitch تجعل إنشاء واجهات المستخدم من النص أو الصوت أو الرسومات الأولية سهلًا للغاية. ويمكن تصديرها إلى Figma أو إلى شيفرة برمجية، وتعديل التصميم فورًا يدويًا أو بالتحدث مع الذكاء الاصطناعي. وهي رائعة للمشروعات السريعة، لكن التصاميم قد تبدو نمطية، والتحكم محدود، ومسارات الاستخدام المعقدة صعبة.

ما هي Stitch؟

Google Stitch أداة لتصميم واجهات المستخدم من Google Labs، تستخدم الذكاء الاصطناعي لتحويل الأوصاف النصية والرسومات الأولية ولقطات الشاشة إلى مواقع متجاوبة وتطبيقات للهواتف.

مثلًا، يمكنك أن تطلب من Stitch إنشاء لوحة معلومات للهاتف لتطبيق لياقة بدنية، بسمة داكنة وتخطيط قائم على البطاقات، فتبدأ ببناء الواجهة الكاملة بمكونات فعلية. ويمكن تصدير شيفرة الواجهة الأمامية، أي HTML وCSS، لتسليم التصميم بسهولة إلى المطورين أو دمجه مباشرة في سير العمل دون إعادة بنائه من الصفر.

الجذور: Galileo AI

لكن Stitch لم تظهر من العدم. فقد استحوذت Google على شركة ناشئة اسمها Galileo AI، كانت متخصصة في توليد تصاميم واجهات المستخدم من الأوصاف النصية والصور. ودمجت Google تقنيتها في منظومتها وأعادت تسميتها Stitch.

لذلك، فأنت تستخدم نسخة متطورة من أداة كان المصممون يدفعون بالفعل مبالغ معتبرة مقابلها. أي إن النموذج الأساسي لم يُبنَ من الصفر، بل جرى تحسينه.

الإطلاق الأول

ظهرت الأداة رسميًا في Google I/O 2025، وهو مؤتمر Google السنوي للمطورين. لكن النسخة الأولى كانت لا تزال غير مصقولة.

وكانت إعادة التصميم في مارس 2026 هي ما جذب الانتباه حقًا. أصبحت الواجهة أبسط، والنتائج أجود، وبدا المنتج أقل شبهًا بنموذج أولي وأكثر شبهًا بأداة تستخدمها في سير عمل فعلي.

أداة «Vibe Design»

ما يميز Stitch عن بقية أدوات التصميم بالذكاء الاصطناعي هو أنها أداة «Vibe Design» القائمة على وصف الانطباع المطلوب. فبدلًا من تحديد مواصفات تقنية مثل «استخدم شبكة من 12 عمودًا بفواصل 16 بكسل»، تصف الإحساس الذي تريد أن ينقله التصميم.

مثلًا: «شاشة ترحيب وتهيئة هادئة وتوحي بالثقة لتطبيق تأمل». وتفسر Stitch المقصود وتحوله إلى تصميم واجهة مستخدم عملي.

تعمل في المتصفح

آخر ما أود ذكره وأقدّره فعلًا هو عدم الحاجة إلى تثبيت شيء. تفتح stitch.withgoogle.com في المتصفح، دون تعقيدات إعداد حساب أو تنزيل تطبيق مكتبي يستهلك الذاكرة. إنها تعمل ببساطة.

ومن اللافت أن أداة تعتمد على أحدث إصدار من Gemini Pro تعمل بالكامل في المتصفح.

هذه إذن قصة نشأة Stitch. إنها أداة سهلة الاستخدام قد تغيّر نظرة كثيرين منا إلى تصميم واجهات المستخدم.

لمن تناسب Stitch أكثر؟

هذه أبرز الفئات التي تناسبها Google Stitch:

• يمكن لصنّاع المنتجات المستقلين تحويل أفكار التطبيقات بسرعة إلى مسارات استخدام وشيفرة دون معرفة تقنية متخصصة.
• يمكن لفرق الواجهات الأمامية توليد نسخ مختلفة من عناصر التصميم تلقائيًا عبر سطر الأوامر وتصدير المشروعات إلى Tailwind وJSX.
• يمكن لمسؤولي المنتجات إنشاء بدائل للتصميم ومواءمتها بسرعة مع أهداف العملاء.
• يمكن للمؤسسين غير التقنيين استخدام Vibe Design والأوامر الصوتية لتحويل تصورهم إلى تطبيق بمجرد وصفه بالكلام.
• يمكن للوكالات استكشاف اتجاهات تصميم متعددة على لوحة غير محدودة، وإجراء تعديلات مباشرة مع العملاء أثناء الاجتماعات.

ميزات Stitch الأساسية

هذه أبرز ميزات Stitch:

• صف ما تريد إنشاءه بنص لتحصل على تصاميم كاملة للويب أو الهاتف. تولّد Stitch كل شيء: شاشات متعددة، وتخطيطًا، ومكونات، وألوانًا، وتنسيقًا للخطوط.
• استخدم Live Mode للتحدث إلى الذكاء الاصطناعي عبر ميكروفون الجهاز وتوليد تصاميم كاملة للويب أو الهاتف. واصل المحادثة لتعديل التصاميم وتحديثها فورًا.
• ارفع رسومات أولية أو لقطات شاشة لتحويلها إلى واجهات تطبيقات ومواقع قابلة للتحرير.
• أنشئ بدائل للشاشات وقارنها دون فقدان الأصلية، وطبّق التغييرات على شاشات متعددة معًا للحفاظ على اتساق مسارات الاستخدام.
• عدّل الألوان والنصوص مباشرة، ثم اضبطها بدقة أكبر باستخدام الأوصاف النصية.
• أرسل التصاميم إلى Figma مع الحفاظ على الطبقات والمكونات والتخطيط، لتسهيل التحرير الجماعي.
• صدّر المشروع بصيغة HTML/CSS أو JSX/Tailwind لتسليمه بسهولة إلى المطورين أو استخدامه مباشرة في سير عمل الواجهات الأمامية.
• شغّل Stitch من سطر الأوامر (CLI) وأدرجها ضمن عملية بناء البرنامج.
• تستخدم أحدث Gemini 3 Flash لتصاميم HTML عالية الجودة، وGemini 3.1 Pro الذي يولي الأولوية لأعلى جودة وللاستدلال بدلًا من السرعة.
• ارفع صورًا مرجعية لتوجيه الذكاء الاصطناعي نحو محاكاة أسلوبها أو تخطيطها أو عناصر محددة فيها عند توليد التصاميم.

كيفية استخدام Stitch

هذه طريقتي في استخدام Google Stitch لإنشاء تصميم واجهة مستخدم لتطبيق قائمة التحقق من أمتعة السفر:

1. التسجيل في Stitch
2. إضافة وصف نصي
3. ضبط الإعدادات
4. تجربة Live Mode
5. إخبار الذكاء الاصطناعي بما تريد إنشاءه
6. توليد التطبيق أو الموقع
7. التحرير بالأوصاف النصية
8. إجراء تعديلات يدوية
9. المعاينة والتصدير والمشاركة

الخطوة 1: التسجيل في Stitch

بدأت بفتح stitch.withgoogle.com واختيار «Try now» (جرّب الآن).

انتقلت دون إجراءات تسجيل معقدة إلى مولّد التصاميم بالذكاء الاصطناعي في Stitch.

على اليسار ظهرت مشروعاتي والمشروعات التي شاركها الآخرون معي. وفي الوسط كان المولّد، حيث أستطيع رفع رسم أولي أو لقطة شاشة وإنشاء تطبيق أو موقع باستخدام وصف نصي.

الخطوة 2: إضافة وصف نصي

في أعلى المولّد كانت هناك أمثلة للأوصاف النصية:

• تطبيق قائمة تحقق لأمتعة السفر يقترح ما ينبغي حزمه بحسب طقس الوجهة ونوع الرحلة.
• تبويب تصفح لتطبيق هاتف يقدّم أفكارًا للرومانسية وأمسيات المواعدة.
• صفحة اختبار في تطبيق لتعلم اللغات، مع شريط تقدم في الأعلى. يطلب العنوان مطابقة كلمة إسبانية مع الإجابة الصحيحة من أربعة خيارات.

كان بإمكاني اختيار أحدها أو كتابة وصف خاص بي.

كانت أمثلة Stitch خيارات مضمونة ذات هياكل واضحة يتعامل معها الذكاء الاصطناعي جيدًا، لكنني أردت معرفة ما إذا كانت الأداة تستطيع تصميم شيء أكثر إثارة للاهتمام.

أضفت وصفًا خاصًا بي يتضمن تفاصيل أدق:

«تطبيق قائمة تحقق لأمتعة رحلة عمل إلى لندن لمدة ثلاثة أيام في نوفمبر. يجب أن تمنح الواجهة انطباعًا احترافيًا وراقيًا، مع مفتاح تبديل بعنوان: أمتعة المقصورة فقط، وأداة طقس ذكية. أضف قسمًا للتقنية والإلكترونيات، واستخدم الكحلي الداكن ودرجات رمادية ناعمة في لوحة الألوان».

الخطوة 3: ضبط الإعدادات

في الأسفل ظهرت إعدادات تتيح ما يلي:

• إرفاق لقطة شاشة أو رسم أولي أو مرجع بصري ملهم
• اختيار نوع التصميم: تطبيق أو موقع
• اختيار نظام تصميم من إعدادات مسبقة مثل Bauhaus وNeon Tokyo وCandy وغيرها
• اختيار نموذج: 3 Flash للتصاميم عالية الجودة، و3.1 Pro لتقديم الجودة على السرعة، وإعادة التصميم باستخدام Nano Banana Pro، ووضع ابتكار الأفكار لحل المشكلات

لم أرفع لقطة شاشة أو رسمًا أوليًا، لكنني تأكدت من ضبط نوع التصميم على «App». واخترت «Silk» لنظام التصميم. كما اخترت أحدث نموذج، 3.1 Pro، الذي يستغرق وقتًا أطول من 3.0 لكنه يقدّم أعلى جودة للتصميم.

الخطوة 4: تجربة Live Mode

لكن قبل الضغط على «Generate»، لاحظت زر «Live Mode» الذي لم أره من قبل في أداة لتصميم واجهات المستخدم.

الخطوة 5: إخبار الذكاء الاصطناعي بما تريد إنشاءه

اتضح أنني أستطيع إخبار الذكاء الاصطناعي بما أريد إنشاءه شفهيًا، عبر ميكروفون جهازي، بدلًا من كتابة وصف. وكانت هذه ميزة رائعة في رأيي.

إنها عملية تصميم حوارية: يسأل الذكاء الاصطناعي أسئلة توضيحية، ويقترح أفكارًا، ويعدّل النتيجة لحظيًا حتى تطابق رؤيتي. بدت التجربة أقرب إلى التعاون مع مساعد منها إلى استخدام أداة تقليدية، وكان ذلك تغييرًا لطيفًا.

قلت للذكاء الاصطناعي هذا الوصف نفسه:

«تطبيق قائمة تحقق لأمتعة رحلة عمل إلى لندن لمدة ثلاثة أيام في نوفمبر. يجب أن تمنح الواجهة انطباعًا احترافيًا وراقيًا، مع مفتاح تبديل بعنوان: أمتعة المقصورة فقط، وأداة طقس ذكية. أضف قسمًا للتقنية والإلكترونيات، واستخدم الكحلي الداكن ودرجات رمادية ناعمة في لوحة الألوان».

الخطوة 6: توليد التطبيق أو الموقع

بعد دقائق، أنشأ الذكاء الاصطناعي دليل أسلوب وأربع شاشات: إضافة عنصر، وقائمة التحقق من الأمتعة، والطقس والاقتراحات، ونظرة عامة على الرحلة.

Stitch أنشأت نتيجة دقيقة على نحو مفاجئ. تضمنت معلومات محددة عن لندن، وتفاصيل مثل مفتاح أمتعة المقصورة وأداة الطقس مع اقتراحات. لم أحتج حتى إلى كتابة وصف، بل أخبرت الذكاء الاصطناعي بما أريده فحسب!

الخطوة 7: التحرير بالأوصاف النصية

في الأسفل كان حقل وصف فارغ، يمكنني مواصلة طلب التغييرات فيه، مثل «أضف عناصر إلى قسم التقنية» أو «غيّر الكحلي إلى الرمادي الفحمي». فقررت أن أطلب تغيير الكحلي إلى الرمادي الفحمي.

بعد ثوانٍ، أنشأت Stitch مجموعة جديدة بالكامل من الشاشات بالرمادي بدلًا من الكحلي. وكان من الجميل أنها احتفظت بالشاشات الأصلية.

الخطوة 8: إجراء تعديلات يدوية

على اليمين ظهرت أدوات إضافية للتحرير اليدوي:

• Select ‏(V): انقر على شاشة لتحريرها بالذكاء الاصطناعي، أو اختر «Edit ‏(E)» تحت «Modify» لإجراء تعديلات محددة، مثل تعديل النصوص.
• Mark ‏(M): ارسم إطارًا حول منطقة محددة، فيظهر مربع نص تخبر فيه الذكاء الاصطناعي بالتغييرات المطلوبة في تلك المنطقة.
• Direct Edit ‏(E): عدّل يدويًا أو بالذكاء الاصطناعي بالنقر على عناصر محددة في التصميم.
• Pan ‏(H): انقر واسحب للتنقل داخل لوحة التصميم.
• Upload files to canvas: أضف صورة يستخدمها الذكاء الاصطناعي مرجعًا.
• Design System: اعرض لوحات الألوان المختلفة المستخدمة في التصميم.
• Favourites: ضع نجمة على شاشاتك المفضلة لتجميعها في مجموعة.

أردت تجربة Mark، فضغطت M على لوحة المفاتيح ورسمت إطارًا حول بطاقة تعرض اسم الحدث وموقعه وعدد الأيام المتبقية عليه والطقس في موقعه.

وأردت التحقق مما إذا كانت Stitch تستطيع إجراء تغييرات دقيقة، فأعطيتها الوصف التالي:

«حوّل بطاقة الحدث هذه إلى أداة لعرض برنامج رحلة شخصي. احتفظ بموقع Barbican Centre، لكن غيّر الحدث إلى: عشاء خاص للعملاء في Searcys. أضف زرًا صغيرًا بعنوان: عرض قائمة الطعام، ومفتاح تذكير مضبوطًا بالفعل على وضع التشغيل».

بعد ثوانٍ، أنشأت Stitch شاشة جديدة تحمل العناصر نفسها ولكن ببطاقة محدّثة! احتفظت بالموقع، وغيّرت الحدث إلى «عشاء خاص للعملاء في Searcys» كما طلبت. وأضافت أيضًا زر عرض قائمة الطعام ومفتاح التذكير في وضع التشغيل.

الخطوة 9: المعاينة والتصدير والمشاركة

عندما رضيت عن النتيجة، انتقلت إلى أعلى اليمين. كانت هناك خيارات كثيرة للربط والمعاينة عبر نماذج أولية فورية، وللتصدير والمشاركة.

كان خيار Instant Prototype، أي زر التشغيل، رائعًا. فقد أنشأ نموذجًا أوليًا يمكن عرضه بمقاسات الهاتف أو الجهاز اللوحي. كانت الشاشات كلها مترابطة وجاهزة للتفاعل، وأمكنني أيضًا إضافة شاشات أخرى وتحريرها وربطها.

كان استكشاف المعاينة بالنقر وتعديل النموذج الأولي سهلًا للغاية. فبدل التنقل بين مشاهد أو أدوات متعددة، يُحدّث كل شيء في سياقه. أعطاني ذلك تصورًا أوضح كثيرًا لكيفية عمل المنتج النهائي، لا لمظهره فقط.

تفحصت أيضًا خيارات التصدير، وكانت كثيرة جدًا: Figma وJules وملف .zip وغيرها.

بوجه عام، جعلت Google Stitch عملية التصميم سريعة وسهلة، وأتاحت لي التركيز على البناء بدلًا من فهم الأداة.

وكان Live Mode أكثر الميزات إبهارًا بوضوح. جعل العملية تفاعلية، كأنني أعمل مع مساعد حقيقي.

أفضل ثلاثة بدائل لـStitch

هذه أفضل بدائل Google Stitch:

Base44

أول بديل أوصي به لـGoogle Stitch هو Base44. يبني التطبيقات والمواقع بسرعة بمجرد وصف ما تريد، دون برمجة أو إعداد.

يتضمن مصادقة المستخدمين وتخزين البيانات والصلاحيات، فتكون وظائف الخلفية جاهزة فورًا. يمكنك بذلك بناء لوحة معلومات تعمل بتسجيل دخول حقيقي دون كتابة سطر برمجي واحد.

كلتا الأداتين تتيح توليد واجهات المستخدم بسرعة. فإن لم تكن مطورًا وأردت نموذجًا أوليًا سريعًا، فكلتاهما مناسبة. لكن اتجاههما يختلف من هنا.

Stitch أداة تصميم في جوهرها، وتجيد توليد تخطيطات الواجهات وتعديلها لحظيًا بالذكاء الاصطناعي ثم تصديرها إلى Figma أو شيفرة مرتبة.

أما Base44 فأعم استخدامًا. يناسب بناء لوحات الإدارة والمتاجر الإلكترونية وصفحات الهبوط. تصف ما تريد فيبنيه مع الخلفية البرمجية.

إذا احتجت تطبيقًا كاملًا بسرعة مع وظائف الخلفية، فاختر Base44. ولواجهة واضحة مع تصدير إلى Figma وتعديلات تصميم بالذكاء الاصطناعي، اختر Google Stitch.

اقرأ مراجعتي لـBase44 أو زر Base44!

Softr

البديل التالي الذي أوصي به لـGoogle Stitch هو Softr. وهو أنسب لمن يبني شيئًا مخصصًا لأعماله.

يمكنك باستخدام Softr إنشاء تطبيقات ذكاء اصطناعي مخصصة ولوحات معلومات وبوابات عملاء دون برمجة. يتضمن قواعد بيانات وتسجيل دخول آمنًا جاهزين، ويتصل بأدوات يُرجح أنك تستخدمها بالفعل مثل Airtable وGoogle Sheets وHubSpot.

كل من Softr وGoogle Stitch لا يتطلب البرمجة، مما يجعلهما مناسبين لمن ليس لديهم خلفية تطوير. لكن أوجه التشابه تتوقف إلى حد كبير هنا.

تعطي Stitch الأولوية للتصميم: تساعدك على توليد شاشات جميلة بالذكاء الاصطناعي، ثم نقلها إلى Figma أو تصديرها كشيفرة. ولا تهدف إلى إدارة بياناتك أو أتمتة إجراءات بدء استخدام العملاء للخدمة.

أما Softr فيقوم على أن بياناتك موجودة بالفعل في مكان ما وأنك تحتاج تطبيقًا يعمل فوقها. ويركز على سير الأعمال وواجهات البيانات وإتاحة المعلومات المناسبة للأشخاص المناسبين.

إذا احتجت بوابة عملاء ببيانات وتسجيل دخول، فاختر Softr. وإن أردت تصميم شاشات تطبيق وتسليمها إلى مطور، فاختر Stitch. الأولى لبناء كيفية عمل التطبيق، والثانية لتصميم مظهره.

اقرأ مراجعتي لـSoftr أو زر Softr!

Draftbit

آخر بديل أوصي به لـGoogle Stitch هو Draftbit. وهو برنامج لبناء التطبيقات بقليل من البرمجة، يتيح تصميم تطبيقات الهاتف والويب وبناءها وإطلاقها. ويدعم تصدير الشيفرة كاملة والنشر الفوري في متاجر التطبيقات.

تساعد المنصتان على إنشاء واجهات التطبيقات بسرعة دون قدر كبير من البرمجة، فتسرّعان التطوير.

لكن Draftbit يتميز بقدرات تطوير أعمق. تستطيع إضافة منطق برمجي وربط واجهات API والتعاون لحظيًا وتصدير الشيفرة دون الارتهان لمنصة بعينها. وهو مصمم لإطلاق التطبيقات، بينما تركز Google Stitch على توليد تصاميم الواجهات وتحسينها بالذكاء الاصطناعي وتصديرها لمواصلة تطويرها.

لبناء تطبيقات هاتف ذات وظائف فعلية وإطلاقها مع ملكية الشيفرة، اختر Draftbit. ولتصميم واجهات سريع مدعوم بالذكاء الاصطناعي وتنقيحها وتصديرها إلى Figma أو كشيفرة، اختر Google Stitch!

اقرأ مراجعتي لـDraftbit أو زر Draftbit!

مراجعة Stitch: هل هي الأداة المناسبة لك؟

بعد تجربة Google Stitch، أستطيع القول بثقة إنني لا أشعر بأنني أستخدم أداة تصميم تقليدية. بل كأنني أحاور شخصًا يفهم فعلًا ما أحاول بناءه.

لم أختبر من قبل أن أشرح فكرة بالكلام، وأشاهد الشاشات تتولد خلال دقائق، ثم أعاين فورًا مظهرها ومسارات التنقل فيها. يصعب العثور على هذا الجمع بين السرعة والفورية، خصوصًا في المراحل المبكرة المضطربة التي تتغير فيها الأفكار باستمرار.

لكن Stitch ليست مثالية. إذا احتجت منطقًا خلفيًا أو سير عمل آليًا أو شيئًا قريبًا من تطبيق مكتمل الوظائف، فستصطدم بحدودها سريعًا.

جرّب في هذه الحالة أحد البدائل التالية:

• Base44 هو الأفضل لبناء التطبيقات بسرعة مع الخلفية البرمجية، مثل تسجيل الدخول وتخزين البيانات.
• Softr هو الأفضل لأدوات الأعمال وبوابات العملاء والتطبيقات القائمة على بياناتك الحالية.
• Draftbit هو الأفضل لبناء تطبيقات الهاتف وإطلاقها مع التحكم الكامل وملكية الشيفرة.

لكن Stitch تتفوق حين تريد تحويل فكرة مبعثرة إلى شيء صالح للعرض بأسرع وقت ممكن. لم أجد أداة تحقق ذلك أفضل منها. يصعب منافستها في المفاهيم الأولية وعروض العملاء ونقل ما في ذهنك إلى الشاشة.

شكرًا لقراءة مراجعتي لـGoogle Stitch! آمل أن تكون مفيدة. جرّبها مجانًا واكتشف مدى إعجابك بها.

الأسئلة الشائعة

هل Google Stitch مجانية تمامًا؟

نعم، Google Stitch مجانية. تنشئ تصاميم الواجهات من النص أو الرسومات الأولية، مع لوحات تصميم تدعم الصوت ونماذج أولية وتصدير للشيفرة.

ما استخدام Google Stitch؟

Google Stitch أداة ذكاء اصطناعي من Google Labs تحوّل النصوص أو الصور بسرعة إلى تصاميم واجهات مستخدم ونماذج أولية تفاعلية.