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

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

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

اختر حسب ما بين يديك. ملف Figma يذهب إلى أداة تحويل مثل توليد الكود المدمج في Figma أو Anima أو Builder.io Visual Copilot. لقطة الشاشة تذهب إلى screenshot-to-code. الأمر النصي يذهب إلى v0 أو Lovable أو Bolt. وقاعدة الكود الموجودة تذهب إلى وكيل برمجة يقرأ نظام التصميم لديك عبر Model Context Protocol (MCP).

الخلاصة السريعة

• استخدم توليد الكود المدمج في Figma إذا كنت تدفع اشتراك Figma؛ و screenshot-to-code فقط عندما لا يوجد ملف تصميم؛ و v0 أو Lovable أو bolt.diy حسب وجهة النشر وطريقة الفوترة والحاجة إلى مفاتيح النماذج؛ و Figma MCP مع ربط Code Connect عندما تكون لديك قاعدة كود ونظام تصميم.
• قبل اعتماد أي أداة، ولّد شاشة واحدة لديك مكوّناتها بالفعل، وافحص المخرجات بحثًا عن ألوان hex وقيم بكسل مكتوبة بشكل ثابت (hardcoded)، وعن مكوّنات مُعرّفة من جديد في مواضع كان يجب فيها استيرادها من مكتبتك.
• يمكنك تشغيل bolt.diy و screenshot-to-code و Penpot على خادم تتحكم فيه، لكن لكل منها تحفّظًا: توقفت الـ commits في bolt.diy من فبراير إلى أكتوبر 2026 ويعود آخر إصدار موسوم له إلى مايو 2025، و screenshot-to-code يحتاج إلى مفتاح API لنموذج، و Penpot المستضاف ذاتيًا يتأخر عن إصدار السحابة.
• تكون إعادة استخدام المكوّنات في أقوى حالاتها عندما تملك الأداة ربطًا صريحًا، مثل Figma MCP مع Code Connect أو فهرسة نظام التصميم في Builder.io، لكن المخرجات المولّدة تحتاج إلى مراجعة رغم ذلك، فخصّص وقتًا للتنظيف في كل مسار.

اختر الأداة حسب نقطة البداية

لقطة الشاشة تحمل بكسلات فقط لا غير. ملف Figma يضيف أسماء المكوّنات والمتغيرات وقواعد التخطيط، وقاعدة الكود تحمل المكوّنات نفسها، لذا فالمدخل هو ما يحدد أي نوع من الأدوات لديه ما يعمل عليه.

اختبار الشاشة الواحدة لإعادة استخدام المكوّنات والـ tokens

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

1. اختر شاشة بناها فريقك من مكوّنات موجودة، مثل نموذج إعدادات أو بطاقة أسعار.
2. ولّد تلك الشاشة بالأداة التي تفكر فيها، مستخدمًا نوع المدخل نفسه الذي ستستخدمه في العمل الجديد.
3. ابحث في المخرجات عن قيم مكتوبة بشكل ثابت: ألوان hex خام مثل #3B82F6، وأحجام خطوط بالبكسل مثل font-size: 14px، ومسافات ثابتة. وقارن ذلك بعدد مرات استخدامها لأسماء الـ tokens أو متغيرات CSS أو فئات السمة لديك.
4. افحص عمليات الاستيراد. المخرجات التي تعرّف Button أو Card جديدًا بدلًا من استيراد مكوّناتك من مكتبة المكوّنات قد بنت واجهة موازية.
5. تأكد من أن إطار العمل وأسلوب التنسيق يطابقان المستودع. HTML عادي بأنماط مضمّنة يعني إعادة كتابة، مهما بدت المعاينة جيدة.

في استطلاع Stack Overflow للمطورين لعام 2025، اختار 66% من المطورين «حلول الذكاء الاصطناعي الصحيحة تقريبًا، لكن ليس تمامًا» بوصفها أكبر إحباط لهم مع الذكاء الاصطناعي. هذه نتيجة تخص أدوات البرمجة بالذكاء الاصطناعي عمومًا، وليست دراسة عن تحويل التصميم إلى كود، لكن الشاشة التي تبدو صحيحة بينما تكتب كل لون بشكل ثابت هي «صحيحة تقريبًا» بهذا المعنى تمامًا.

ملاحظة: أجرِ هذا الفحص قبل تعميم الأداة على الفريق كله. شاشة مولّدة واحدة تكلّف بضع دقائق؛ أما شهر من المخرجات المدموجة ذات القيم الثابتة فيكلّف sprint كاملًا من التنظيف.

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

إذا كان لديك ملف Figma مكتمل

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

توليد الكود المدمج في Figma

تحدد إطارًا أو مكوّنًا أو قسمًا في Figma Design، وتفتح الوكيل، وتطلب HTML و CSS، أو مكوّنات React، أو إطار عمل محددًا. تقول Figma إنه يمكنك توجيه الوكيل إلى نظام التصميم لديك لكي تشير المخرجات إلى الـ tokens والمتغيرات وبنية المكوّنات الخاصة بك بدلًا من عناصر نائبة عامة. وتذكر الصفحة نفسها أن الميزة متاحة في جميع خطط Figma المدفوعة. وحتى أكتوبر 2026 لا تزال الميزة في مرحلة تجريبية مفتوحة، لذا قد يتغير استهلاك الأرصدة والحدود.

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

Figma Make

Figma Make منتج منفصل يعتمد على الأوامر النصية. وبحسب Figma، فإن Make يُخرج HTML و CSS و JavaScript لنماذج الواجهة الأمامية الأولية، مع محرر مدمج لإجراء التعديلات. ويمكنك تجربته على خطة Starter المجانية، كما يدعم التكامل مع Supabase لمحاكاة بيانات حية.

منتجات Figma نفسها تؤدي مهام مختلفة. Make يُنتج نموذجًا أوليًا يعمل من أمر نصي مع إطار. والمولّد داخل اللوحة يحوّل الإطارات المحددة إلى كود باستخدام مكتبة الملف. أما Figma MCP فيتيح لوكيل برمجة في مستودعك قراءة المكوّنات والمتغيرات مباشرة.

Anima و Builder.io Visual Copilot و Locofy

تذكر Builder.io أن Visual Copilot يوفّر مخرجات لـ React و Qwik و Angular، إضافة إلى Kotlin و Flutter للجوال، مع تنسيق عبر Tailwind CSS أو CSS Modules. ولإعادة الاستخدام، تذكر الصفحة نفسها Custom Component Mapping، الذي يربط مكوّنات Figma بالمكوّنات الموجودة في قاعدة الكود لديك. وتصنّف وثائق Builder الآن الربط اليدوي للمكوّنات على أنه مُهمَل (deprecated) لصالح فهرسة المكوّنات، وتصفه بأنه ميزة في خطة Enterprise، لذا راجع الوثائق الحالية وخطتك أولًا.

تتيح الخطة المجانية من Anima 5 عمليات توليد كود في إضافة Figma، إلى جانب 5 رسائل دردشة يوميًا و 5 عمليات استيراد من Figma في AI Playground الخاص بها. أما تسعير Enterprise، حتى أكتوبر 2026، فيبدأ من 500 دولار شهريًا، بدفع سنوي.

تشغّل Anima أيضًا خادم MCP، والكود المولّد عبره يُحتسب من حصة توليد الكود نفسها. و Locofy أداة تحويل أخرى لملفات Figma ضمن هذه الفئة.

بأي محوّل Figma تبدأ

ابدأ بتوليد الكود المدمج في Figma إذا كان فريقك يدفع اشتراك Figma: فهو يقرأ مكتبة الملف دون خطوة تصدير، وعلى خطة مدفوعة لا يضيف اختبار الشاشة الواحدة أي اشتراك جديد. انتقل إلى Builder.io Visual Copilot عندما تريد مخرجات تستورد مكوّنات قاعدة الكود لديك (راجع وثائقه لمعرفة كيف ينطبق الربط أو فهرسة المكوّنات على خطتك)، أو عندما تريد مخرجات الجوال بـ Kotlin أو Flutter التي يذكرها بالاسم.

استخدم Figma Make لنموذج أولي قابل للنقر ستعرضه على الآخرين. أما الكود الذي تنوي دمجه فمكانه توليد الكود داخل لوحة Figma أو Builder.io Visual Copilot.

إذا لم يكن لديك سوى لقطة شاشة

screenshot-to-code هو الخيار مفتوح المصدر الافتراضي هنا: مرخّص بـ MIT، ولديه نحو 80,000 نجمة على GitHub، ولا يزال يتلقى commits في 2026. أعطه صورة فيعيد لك HTML مع Tailwind أو CSS، أو React، أو Vue، بين حزم تقنية أخرى. وتوجد نسخة مستضافة على screenshottocode.com إن كنت تفضّل عدم تشغيل أي شيء.

أدوات screenshot-to-code بالذكاء الاصطناعي لا تعمل إلا بما تُظهره الصورة، لذا فالحد يكمن في المدخل. لقطة الشاشة لا تحمل هوية للمكوّنات، ولا متغيرات، ولا حالات hover أو focus، ولا نقاط توقف متجاوبة. وكل ما يعود إليك هو إعادة بناء لإطار ثابت واحد بعرض واحد، وكل token يجب تخمينه من ألوان البكسلات.

screenshot-to-code هو الأداة المناسبة عندما لا يوجد ملف تصميم، كأن تطابق تخطيطًا مرجعيًا أو تعيد بناء صفحة قديمة لا يملك أحد ملف Figma لها. وإذا كان ملف Figma موجودًا، فابدأ منه بدلًا من ذلك، لأن الملف يحمل المعلومات التي تتخلص منها لقطة الشاشة.

إذا لم يكن لديك سوى أمر نصي

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

v0

تأتي خطة v0 المجانية مع حد يومي قدره 7 رسائل، إضافة إلى النشر على Vercel، والمزامنة مع GitHub، و Design Mode مرئي. يُحتسب الاستخدام المدفوع لكل token، وأسعار tokens نماذج v0 تختلف بين أربع فئات من النماذج، من v0 Mini إلى v0 Max Fast. وتعتمد تكلفة الجلسة على الفئة التي تختارها ومدة المحادثة.

Lovable

تحاسب Lovable بالأرصدة (credits). في Default Mode تختلف التكلفة حسب تعقيد المهمة، بينما يكلّف Plan Mode رصيدًا واحدًا (1) لكل رسالة. تتضمن الخطة المجانية منحة يومية من 5 أرصدة بناء، بحد أقصى 30 شهريًا.

كتب أحد المعلّقين في سلسلة نقاش على Reddit تقارن بين Bolt و Lovable أن Bolt يمنح «تحكمًا شبه كامل» في الكود، بينما بدا أن Lovable يعرض فروقات الكود فقط «دون صلاحية تعديل». هذا تقرير مستخدم واحد، فتحقق من المحرر الحالي قبل أن تفترض أنه لا يزال صحيحًا.

Bolt.new و bolt.diy

Bolt.new هو المنتج المستضاف. أما bolt.diy فهو نظيره مفتوح المصدر، ويتيح لك اختيار الـ LLM لكل أمر نصي من بين 21 مزوّدًا أو أكثر، بما في ذلك النماذج المحلية عبر Ollama. لا يشترط قاعدة بيانات؛ و Supabase تكامل اختياري. تحقق من سجل الـ commits وشروط الترخيص قبل أن تبني عليه.

Google Stitch

أعادت Google إطلاق Stitch في مارس 2026 مع لوحة لا نهائية وتفاعل صوتي ووكيل تصميم، وفقًا لتقرير Winbuzzer عن إعادة التصميم. ويذكر التقرير نفسه أن التصاميم تُصدَّر بصيغة Figma أو إلى أطر عمل برمجية مثل React، وأن خادم MCP يربط Stitch بـ Claude Code و Gemini CLI و Cursor و Antigravity. وهذا يضع Stitch بين مسار الأمر النصي ومسار قاعدة الكود: فهو يبدأ من أمر نصي، لكنه يستطيع تسليم التصاميم إلى وكيل يعمل في مستودعك.

بأي أداة أوامر نصية تبدأ

في نقاش على Hacker News حول Lovable و Bolt، رأى أحد المعلّقين أنه مع إسناد الواجهة الخلفية إلى Supabase، يصبح سقف بناء برمجيات مفيدة بهاتين الأداتين «منخفضًا بشكل لا يُصدَّق». وقد أفصح هذا المعلّق أنه يبني منتجًا منافسًا، فاقرأ كلامه بوصفه رأيًا مطّلعًا لصاحبه مصلحة، لا قياسًا.

ولا يعني امتلاك ملف Figma أن هذا المسار مستبعد تلقائيًا. ففي سلسلة النقاش نفسها على Reddit عن Bolt و Lovable، قال معلّق آخر إنه لم يستعن بـ Figma قط لأنه بدا «أصعب وأكثر إزعاجًا من مجرد كتابة الأوامر» للتصميم الذي أراده.

اختر v0 عندما ينشر فريقك على Vercel ويريد المزامنة مع GitHub من اليوم الأول. واختر Lovable عندما تريد تخطيط البناء برسائل Plan Mode ثابتة التكلفة قبل إنفاق أرصدة البناء، وتحقق من محرره أولًا إن كنت تتوقع تعديل الكود يدويًا.

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

إذا كانت لديك قاعدة كود ونظام تصميم بالفعل

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

Figma MCP

وفقًا لمركز المساعدة في Figma، يستطيع خادم Figma MCP توليد الكود من الإطارات المحددة بعد قراءة المكوّنات والمتغيرات وبيانات التخطيط ومحتوى FigJam وموارد Make. ويستخدم Code Connect لإبقاء ذلك الكود متوافقًا مع مكوّناتك، ويستطيع الخادم البعيد الكتابة مجددًا على اللوحة.

يأتي بنسختين: خادم بعيد توصي به Figma لمعظم المستخدمين، وخادم لسطح المكتب لحالات محددة على مستوى المؤسسات وخطط enterprise.

من الناحية الآلية، يمنح MCP وكيل البرمجة لديك تغذية منظّمة للتصميم. عندما يفحص الوكيل إطارًا، يرسل الخادم مكوّنات ذلك الإطار وأنماطه ومتغيراته، وتوضح مدونة Figma أنه عندما تكون هذه العناصر مربوطة بالكود عبر Code Connect، يستطيع الوكيل السحب من موارد الكود لديك. ومن دون هذا الربط، يحصل مع ذلك على سياق التنسيق ويكتب المكوّن من الصفر.

اختيار الوكيل يعود إليك. دليل الإعداد من Figma مكتوب لـ Claude Code، وتوثيق MCP في OpenCode يغطي الخوادم المحلية والبعيدة. والاختيار بين Claude Code و OpenCode يرجع إلى المفاضلة بين راحة الخدمة المُدارة والتحكم في المزوّد، ولا شيء في هذا الاختيار يخص عمل التصميم تحديدًا.

Penpot MCP

Penpot هو المكافئ مفتوح المصدر، ويصف توثيقه ثلاثة أجزاء رئيسية: خادم MCP، وإضافة MCP تعمل داخل Penpot وتربط ملفك المفتوح، وعميل MCP الذي تكتب فيه الأوامر النصية. تضبطه من صفحة Integrations في حساب Penpot الخاص بك باستخدام مفتاح MCP شخصي. ومن خلاله، يستطيع الوكيل قراءة المكوّنات والأنماط والـ tokens والطبقات وتعديلها.

تغيّرت بنية المشروع مؤخرًا. يحمل مستودع penpot-mcp المستقل إشعارًا بأنه أُرشف في فبراير 2026، مع دمج محتوياته في مستودع Penpot الرئيسي. وقد تصف الأدلة المكتوبة للمستودع القديم إعدادًا مختلفًا.

Claude Design

أطلقت Anthropic أداة Claude Design في أبريل 2026 كمعاينة بحثية من Anthropic Labs لمشتركي Pro و Max و Team و Enterprise. وأثناء الإعداد الأولي، يبني Claude نظام تصميم لفريقك عبر قراءة قاعدة الكود وملفات التصميم لديك، ثم يطبّقه على المشاريع اللاحقة، ويجمع التصاميم النهائية في حزمة تسليم لـ Claude Code.

كتبت UXPin، وهي شركة تبيع أدوات تصميم خاصة بها، هذا خلال أسبوع الإطلاق:

«أبلغ المصممون الذين جرّبوا Claude Design هذا الأسبوع عن خطوط خاطئة وألوان أزرار غير صحيحة وتباعد غير متّسق خلال جلساتهم القليلة الأولى.»

بأي إعداد لقاعدة الكود تبدأ

استخدم Figma MCP مع وكيل برمجة عندما يكون نظام التصميم لديك في Figma وتكون مستعدًا لإجراء ربط Code Connect، لأن هذا الربط هو ما يفصل بين المكوّنات المستوردة والنسخ المعاد تنسيقها.

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

استخدم Claude Design عندما يدفع فريقك اشتراك Claude ويريد أقل قدر من الإعداد، وأجرِ اختبار الشاشة الواحدة قبل أن تثق بنسخته من نظام التصميم لديك.

تشغيل الخيارات مفتوحة المصدر على خادمك الخاص

ثلاث من هذه الأدوات يمكن تشغيلها على خادم تتحكم فيه، وهذا يعني استبدال استضافة المزوّد بصيانتك أنت، واستبدال عدّاد الأرصدة بمفاتيح نماذجك بالنسبة إلى bolt.diy و screenshot-to-code. واعتبارًا من أكتوبر 2026، لكل منها مقايضة.

bolt.diy. مرّ المشروع دون أي commit من 7 فبراير إلى 4 أكتوبر 2026، وصدر آخر إصدار موسوم له، v1.0.0، في مايو 2025، وفقًا لسجل commits المستودع. المشروع مرخّص بـ MIT، لكن WebContainers API التي يعتمد عليها (بيئة التشغيل داخل المتصفح التي تنفّذ الكود المولّد) تتطلب ترخيصًا للاستخدام الإنتاجي في سياق تجاري ربحي.

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

screenshot-to-code. تشغيله بنفسك يحتاج إلى مفتاح واحد على الأقل من مزوّد نماذج، من OpenAI أو Anthropic أو Gemini، إضافة إلى خادم تتولى صيانته. وتكلفة التشغيل هي استهلاك النموذج لكل عملية توليد، ويحاسبك عليها المزوّد الذي تضبط مفتاحه.

Penpot. يُستضاف Penpot ذاتيًا عبر Docker Compose، أو مخطط Helm الرسمي على Kubernetes، أو OpenShift، أو Rancher. ويشير توثيقه إلى أن صور Docker للاستضافة الذاتية تُنشر بعد وقت قصير من تحديثات نسخة SaaS، لذا تصل أي ميزة سحابية جديدة إلى نسختك متأخرة قليلًا.

مكان تشغيلها يعتمد على من يستخدمها. الحاسوب المحمول كافٍ لتجربة bolt.diy أو screenshot-to-code بمفردك. أما الخادم فيصبح مناسبًا عندما يتشارك فريق نسخة Penpot واحدة، أو عندما يجب أن تبقى الأدوات متاحة بينما حاسوبك مغلق.

لا يوجد حد أدنى رسمي لـ bolt.diy، لذا اعتبر نحو 4 GB من RAM و 2 vCPU مع تخزين NVMe نقطة بداية لتطبيق Node واحد مثله. ويذكر مركز مساعدة Penpot أن 4 وحدات CPU و 16 GB من RAM كافية لدعم آلاف المستخدمين، وأنه يمكنك التحفّظ عند تخصيص الموارد؛ ولنسخة فريق صغير مع وكيل برمجة على الخادم نفسه، فإن ما يقارب 8 إلى 12 GB من RAM بداية معقولة. وإذا كان الوكيل سيعمل أيضًا في بيئة تطوير داخل المتصفح على ذلك الجهاز، فإن تحديد موارد Code Server مع Claude Code حساب مستقل بذاته.

الاستضافة الذاتية تعني أنك من يشغّل الخادم، ويطبّق التحديثات، ويحافظ على أمان مفاتيح النماذج. وإن كنت تفضّل تخطي خطوة التثبيت، فنحن نقدّم نشرًا بنقرة واحدة لـ bolt.diy لتجهيز بيئة نماذج أولية، وPenpot لمساحة عمل تصميم مشتركة، على Linux VPS مع وصول root. ووكلاء البرمجة مثل Claude Code و OpenCode يُنشرون بالطريقة نفسها كتطبيقات منفصلة. الصيانة تبقى مسؤوليتك؛ أما الإعداد فلا.

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

أيهما أفضل، Figma Make أم v0؟

نقطة البداية هي التي تحسم الأمر. يعمل Figma Make داخل Figma، ويأخذ إطارًا مع أمر نصي، ويُخرج HTML و CSS و JavaScript لنماذج الواجهة الأمامية الأولية. أما v0 فيبدأ من أمر نصي فقط، وينشر على Vercel، ويتزامن مع GitHub. اختر Make عندما يكون التصميم موجودًا في Figma، و v0 عندما تبدأ من وصف.

هل يستطيع الذكاء الاصطناعي تحويل لقطة شاشة إلى كود يعمل؟

نعم. مشروع screenshot-to-code مفتوح المصدر يحوّل لقطة الشاشة إلى كود HTML أو React أو Vue باستخدام مفتاح API من OpenAI أو Anthropic أو Gemini. لكن النتيجة إعادة بناء لإطار ثابت واحد، دون هوية للمكوّنات أو حالات تفاعل أو نقاط توقف متجاوبة، لذا يقدّم ملف Figma مدخلًا أفضل عند وجوده.

هل يوجد بديل مفتوح المصدر لـ v0 أو Bolt أو Lovable؟

نعم. bolt.diy هو النظير مفتوح المصدر لـ Bolt.new، والخيار القابل للاستضافة الذاتية بين أدوات تحويل الأوامر النصية إلى تطبيقات التي نتناولها هنا. وهو مرخّص بـ MIT ويعمل بمفاتيح نماذجك، بما في ذلك النماذج المحلية عبر Ollama. توقفت الـ commits فيه من فبراير إلى أكتوبر 2026، واعتماده على WebContainers يتطلب ترخيصًا تجاريًا للاستخدام الإنتاجي الربحي، لذا تحقق من نشاطه ومن الترخيص قبل بناء منتج عليه.

لماذا يتجاهل الكود المولّد بالذكاء الاصطناعي نظام التصميم لديّ؟

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