Onlook

Onlook هو محرر مرئي مفتوح المصدر يعتمد على الذكاء الاصطناعي أولاً، ومصمم لتطبيقات React. تأسس في عام 2024 على يد المصمم Daniel Farrell والمهندس Kiet Ho (اللذين عملا سابقاً في Amazon و ServiceNow)، وانضم فريق سان فرانسيسكو إلى دفعة شتاء 2025 من Y Combinator لحل مشكلة واضحة: الفجوة المؤلمة في عملية التسليم بين نماذج Figma البرمجية وكود React الإنتاجي. بدلاً من أداة تصميم تصدر الأصول، أو مولد أكواد ينتج ملفات تقوم بلصقها يدوياً، يتيح Onlook للمصممين التحكم في تطبيق Next.js قيد التشغيل داخل لوحة عمل مرئية، بينما تُكتب التعديلات مباشرة في ملفات JSX الفعلية على القرص في الوقت الفعلي.

تعمل الأداة على أي مشروع Next.js و TailwindCSS. تشمل القدرات الأساسية لوحة طبقات تعتمد على السحب والإفلات بأسلوب Figma، وواجهة دردشة مدعومة بالذكاء الاصطناعي تفهم شجرة المكونات الحالية لديك، وتحكماً في الفروع والإصدارات لتجارب التصميم، وإمكانية التعليق لعدة مستخدمين، وتكامل MCP (Model Context Protocol) لتوسيع سلسلة الأدوات. يعمل كل من تطبيق سطح المكتب وبيئة الاختبار على الويب بنفس النواة مفتوحة المصدر، المرخصة بموجب Apache 2.0، مما يتيح للفرق التي تستضيف الأداة ذاتياً الحصول على مجموعة الميزات الكاملة دون التقيد بمورد معين. تجاوز مستودع GitHub حاجز 25,900 نجمة بحلول منتصف عام 2026، مع أكثر من 2,000 تفرع و 1,637 التزاماً من مجتمع متنامٍ من المساهمين.

ما الذي يفعله Onlook فعلياً في يونيو 2026

تستحق الآلية التقنية لـ Onlook الفهم لأنها ما يميزه عن أي محرر مرئي آخر في السوق. في وقت البناء، يقوم Onlook بحقن سمات data-oid في JSX الخاص بك، مما ينشئ خريطة دائمة بين كل عقدة DOM في تطبيقك قيد التشغيل والسطر الدقيق من الكود المصدري الذي أنتجها. عندما يقوم المصمم بنقل مكون، أو تغيير لون، أو تغيير حجم حاوية في لوحة العمل المرئية، تستخدم الأداة تدفق diff-match-patch مقترناً بـ HMR (الاستبدال الساخن للوحدات) لتطبيق هذا التغيير على الملف الموجود على القرص. لا توجد خطوة تصدير. لا يوجد نسخ ولصق. تعكس قاعدة التعليمات البرمجية التعديل المرئي في غضون ثوانٍ.

تعمل طبقة الدردشة المدعومة بالذكاء الاصطناعي عبر OpenRouter، مما يعني أن Onlook يمكنه التوجيه إلى GPT-4o أو Claude 3.5 Sonnet أو نماذج أخرى بناءً على المهمة. على عكس تكامل روبوتات الدردشة العامة، يمتلك الذكاء الاصطناعي سياقاً حول شجرة المكونات الفعلية الخاصة بك ويمكنه إجراء تعديلات مستهدفة على ملفات محددة. يمكنك أن تطلب "جعل قسم البطل أكثر بساطة" أو "تقليل الحشو على الأجهزة المحمولة" وسيقوم الذكاء الاصطناعي بتعديل JSX الصحيح، وليس تقريباً مهلوساً له.

أبرز الميزات الحالية في سلسلة إصدارات v0.2: لوحة طبقات للتنقل في التسلسل الهرمي للمكونات، والسحب والإفلات لتغييرات التخطيط، وتحرير خصائص CSS عبر عناصر تحكم مرئية (منتقي الألوان، والتباعد، والطباعة)، والتفريع لتجارب التصميم دون المساس بالفرع الرئيسي، والتعاون متعدد المستخدمين مع التعليقات المضمنة، ودعم استدعاء أدوات MCP للفرق التي توسع المحرر بتكاملات مخصصة. تتيح الفئة المستضافة المجانية 200 استدعاء MCP يومياً مع مشاريع ودردشة ذكاء اصطناعي غير محدودة.

"أداة تصميم بالذكاء الاصطناعي مذهلة للغاية!! لقد استخدمت Onlook لبضعة أشهر الآن على إصدار سطح المكتب" - Michael Thiel، Product Hunt، أغسطس 2025

موقع Onlook مقارنة بـ v0 by Vercel و Bolt.new

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

يقوم v0 by Vercel بإنشاء مكونات واجهة المستخدم من مطالبة نصية أو لقطة شاشة. تصف ما تريده، وينتج v0 كود React و Shadcn نظيفاً، وتقوم بلصقه في مشروعك. لا توجد لوحة عمل مرئية. لا يوجد اتصال بقاعدة التعليمات البرمجية الحالية الخاصة بك. يبدأ كل إنشاء في v0 من الصفر. تم تحسين v0 لإنشاء المكونات من الصفر، وليس للتكرار على تطبيق حي قيد التشغيل بالفعل. إنه يخرج كوداً تقوم بدمجه؛ بينما يقوم Onlook بتعديل الكود الموجود بالفعل.

يقوم Bolt.new من StackBlitz ببناء تطبيقات متكاملة (full-stack) بالكامل من مطالبة، وتعمل في WebContainer داخل المتصفح مع جزء محرر أكواد مدمج. يتعامل Bolt مع الواجهة الأمامية والواجهة الخلفية ومخطط قاعدة البيانات في خطوة واحدة، مما يجعله سريعاً لإنشاء نماذج أولية للأفكار الجديدة. مثل v0، لا يتصل بمشروع موجود، ولا يقدم لوحة عمل مرئية بأسلوب Figma للتحرير بالنقر والتوجيه. Bolt.new هو مولد تطبيقات متكاملة؛ بينما Onlook هو طبقة تصميم مرئية لقاعدة تعليمات برمجية موجودة.

الفرق الميكانيكي: يقوم v0 و Bolt.new بإنشاء كود جديد من المطالبات. بينما يقوم Onlook بتعديل الكود الحالي من خلال لوحة عمل مرئية تظل متزامنة مع التطبيق الحي. هذا سير عمل مختلف جذرياً، ومناسب للحظة مختلفة في دورة حياة المنتج: بعد بناء التطبيق وحاجة الفريق إلى التكرار على المرئيات دون تدخل مستمر من المطورين.

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

كيف يبدو واقع سير عمل التحرير المرئي

تعتمد التجربة العملية اليومية بشكل كبير على الإصدار الذي تستخدمه. تقوم بيئة الاختبار على الويب بتشغيل المشروع في حاوية سحابية عبر CodeSandbox SDK و Bun، مما يعني عدم وجود إعداد محلي، ولكن أيضاً عدم وجود وضع عدم الاتصال والاعتماد على البنية التحتية لـ Onlook. يتصل تطبيق سطح المكتب (المتاح لأنظمة Mac و Windows) بخادم تطوير محلي، وهو أسرع ويعمل دون اتصال بالإنترنت ولكنه يتطلب تشغيل npm أو bun محلياً أولاً.

في جلسة تكرار نموذجية لصفحة هبوط: يفتح المصمم المشروع في تطبيق الويب Onlook، ويرى عرض Next.js الحي في لوحة عمل مع لوحة طبقات على اليسار، وينقر على قسم، ويسحبه إلى موضع جديد، ثم يستخدم منتقي الألوان لضبط زر الحث على اتخاذ إجراء (CTA) الأساسي. تنتج كل نقرة اختلافاً مرئياً في ملف JSX الأساسي. تتعامل دردشة الذكاء الاصطناعي مع المهام الأثقل: "إضافة شبكة ميزات من ثلاثة أعمدة أسفل قسم البطل" تنتج مكونات JSX جديدة في السياق، وليس مقتطفاً عاماً لنسخه في مكان آخر.

"Onlook أداة رائعة لبناء الأكواد.. تمنحك الكثير من التنوع للعمل بالطريقة التي تريحك أكثر" - Diana Fusther، Product Hunt، أغسطس 2025

تتيح ميزة التفريع للمصممين التجربة دون الالتزام بشجرة العمل الرئيسية، على غرار فروع Git ولكنها تظهر كإجراء بنقرة واحدة في واجهة المستخدم. هذا مهم لمراجعات التصميم: يمكن للمصمم إرسال رابط فرع إلى مطور، ويرى المطور التغيير المرئي جنباً إلى جنب مع الاختلافات، ويقوم بدمجه أو رفضه مثل طلب سحب (PR) قياسي. يزيل نموذج التعاون هذا حلقة التصميم-إلى-تذكرة-إلى-طلب سحب التي تبطئ العديد من فرق الواجهة الأمامية.

أين يظهر الاحتكاك: الأداة في مرحلة ألفا (alpha)، وهذا ليس إخلاء مسؤولية مهذباً. يمكن أن تؤدي إعادة تسمية الملفات إلى عدم مزامنة خريطة data-oid، مما يكسر وعي الطبقة المرئية بهذا المكون حتى تعيد تشغيل خطوة البناء. تتصرف مكتبات المكونات خارج نظام فئات أدوات Tailwind القياسي بشكل غير متوقع. لا يمكن للفرق التي تستخدم أطراً أخرى غير Next.js استخدام المنتج على الإطلاق حتى الآن.

لمن تم بناء Onlook

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

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

حالة الاستخدام الثالثة هي المنشئ المستقل في مشروع Next.js: مؤسس غير مهندس يبني صفحة هبوط SaaS الخاصة به، ويكرر مرئياً دون التبديل بين محرر الأكواد وحلقة تحديث المتصفح. تغطي دردشة الذكاء الاصطناعي إنشاء الأكواد الأثقل؛ بينما تتعامل لوحة العمل مع الضبط الدقيق.

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

ما لا يمثله Onlook

لا يدعم Onlook مشاريع Vue أو Svelte أو Angular أو React العادية بدون TailwindCSS. إذا كانت حزمة التقنيات الخاصة بك لا تتضمن Next.js و Tailwind، فلن يتصل Onlook بمشروعك. هذا هو المصدر الأكثر شيوعاً لخيبة الأمل وقيود حقيقية للفرق التي تستخدم أطراً أخرى.

Onlook ليس أداة بناء تطبيقات متكاملة (full-stack). لن يقوم بإنشاء واجهة خلفية، أو تكوين قاعدة بيانات، أو ربط تدفقات المصادقة. لذلك، استخدم Bolt.new أو Replit. يبدأ Onlook بعد وضع بنية التطبيق ويتعامل مع طبقة التصميم المرئي من هناك.

Onlook ليس مستقراً للإنتاج بنفس الطريقة التي يعمل بها Cursor أو GitHub Copilot. مرحلة ألفا (alpha) حقيقية. يجب على الفرق التي تسلم أعمال العملاء في مواعيد نهائية ضيقة اختبار استقرار Onlook على قاعدة التعليمات البرمجية الخاصة بهم قبل الاعتماد عليه لدورة الإصدار. تعمل آلية حقن data-oid بشكل موثوق لمعظم المشاريع، ولكن الحالات الاستثنائية حول المستودعات الأحادية (monorepos)، وتكوينات webpack المخصصة، وتجاوزات مكتبة المكونات تظل مشكلات مفتوحة وموثقة.

كما أنه ليس أداة لإنشاء النماذج الأولية من الصفر. إذا لم يكن لديك قاعدة تعليمات برمجية وترغب في إنشاء واجهة مستخدم تعمل من وصف، فإن v0 أو Bolt.new سيوصلانك إلى أبعد من ذلك بشكل أسرع. تكمن قوة Onlook في التحرير والتكرار على شيء يعمل بالفعل.

"لقد أُعجبت حقاً بمدى سهولة استخدامه مقارنة باستخدام الكثير من الأدوات الشائعة الأخرى" - May Zhou، Product Hunt، أغسطس 2025