يجب أن ينتج التصميم بالذكاء الاصطناعي بنية
معظم الفرق لا تحتاج إلى صورة مسطحة أخرى لا يمكنها تعديلها. هي تحتاج إلى نقطة بداية يمكنها التحرك عبر سير عمل حقيقي: Figma, PowerPoint, Canva, Keynote, SVG, JSON, code، أو pipeline مخصص.
هذا هو جوهر فلسفة Codia في التصميم بالذكاء الاصطناعي. نحن نستخدم AI لفهم المحتوى المرئي وإعادة بنائه كهيكل قابل للتحرير. لا ينبغي أن تبقى لقطة الشاشة أو PDF أو الصورة أو الشريحة أو ملف التصميم محبوسة كبيكسلات. يجب أن تصبح نصا يمكنك إعادة كتابته، وأشكالا يمكنك ضبطها، وطبقات يمكنك إعادة تنظيمها، وتخطيطات يمكنك إعادة استخدامها، وcode يمكنك مراجعته.
ماذا تعني Codia بـ "فهم" التصميم
في Codia، الفهم البصري يعني أكثر من مجرد اكتشاف العناصر على canvas. يبحث النظام عن العلاقات:
- تسلسل layout الهرمي، المجموعات، الأقسام، البطاقات، الجداول، العناوين، والتنقل
- كتل النص، والطباعة، والتسلسل الهرمي، وcopy القابل للتحرير
- الأشكال، والأيقونات، والصور، والأقنعة، والطبقات البصرية
- المسافات، والمحاذاة، والألوان، والإيقاع البصري
- قيود خاصة بالإخراج مثل Figma auto-layout، كائنات PowerPoint، بنية SVG، أو بنية مكونات frontend
لهذا السبب تُبنى منتجات Codia حول إعادة البناء بدلا من التحويل البسيط. غالبا ما تحافظ المحولات التقليدية على الشكل لكنها تفقد البنية. تحاول Codia الحفاظ على الأجزاء من التصميم التي تجعل التحرير لاحقا ممكنا.
الناتج القابل للتحرير هو متطلب المنتج
بالنسبة إلى Codia Design، يعني ذلك تحويل لقطات الشاشة وPDF والصور وصفحات الويب إلى طبقات Figma قابلة للتحرير بدلا من bitmap واحد ملصق.
وبالنسبة إلى NoteSlide، يعني ذلك إعادة بناء PDFs والعروض القائمة على الصور إلى decks PowerPoint أو Keynote قابلة للتحرير، بحيث يبقى النص نصا وتبقى الأشكال أشكالا.
وبالنسبة إلى Codia Code، يعني ذلك تحويل التصاميم إلى implementations للواجهة الأمامية مع بنية components، وأسماء ذات معنى، وresponsive breakpoints، وattributes للـ accessibility، وخيارات إخراج خاصة بالإطار.
وبالنسبة إلى Visual Struct API، يعني ذلك إرجاع شجرة JSON typed يمكن للأدوات اللاحقة فحصها أو عرضها أو تحويلها أو استيرادها إلى أنظمة التصميم والبرمجة الخاصة بها.
يتغير شكل الإخراج حسب المنتج. أما المبدأ فلا يتغير: يجب أن تكون النتيجة قابلة للاستخدام بعد التوليد.
أين يقع Codia Studio
Codia Studio هو جانب الإنشاء من الفكرة نفسها. يتيح للمستخدمين وصف ما يريدونه باللغة الطبيعية وتوليد عمل بصري يمكن تحريره وتكراره وإعادة استخدامه. يصف الموقع الحالي Studio بأنه workspace للتصميم يفهم design systems، ويحافظ على اتساق اللغة البصرية، ويدعم تحرير النصوص على طبقات، ويقدم editor احترافيا بدلا من صور منفردة فقط.
هذا مهم لأن العمل الإبداعي نادرا ما ينتهي عند أول توليد. الفرق تراجع العناوين، وتبدل assets، وتعدل الألوان، وتلائم قواعد العلامة، وتصدر إلى أدوات لاحقة. تم تصميم Codia Studio حول هذه الحلقة.
أين يقع Codia Code
تصميم إلى code هو المكان الذي يجب أن يلتقي فيه "AI design" مع واقع الهندسة. يدعم Codia Code مخرجات React, Vue, HTML/CSS, Flutter، وSwiftUI، مع خيارات تنسيق مثل Tailwind CSS وCSS Modules وinline styles وstyled components.
تقسم وثائق توليد code هذا إلى وضعين عمليين:
- Base Code للدقة البصرية السريعة عندما يكون الهدف الأول هو مطابقة التصميم
- AI Code لإخراج أكثر قابلية للصيانة يستخدم تحليل البنية، والتعرف البصري، والتسمية الذكية، والتعرف على layout، واكتشاف components، واستخراج assets، والإعدادات الافتراضية لـ accessibility
هذا التقسيم مقصود. أحيانا تكون السرعة هي الأهم. وأحيانا يجب أن يصبح الناتج code إنتاجيا يمكن للمهندسين صيانته. يجب أن يجعل المنتج هذا المفاضلة واضحة.
تبقى الإبداعية البشرية طبقة المراجعة
لا تتعامل Codia مع AI كبديل عن الحكم التصميمي. صفحات المنتج واضحة بشأن المراجعة: يجب التحقق من الناتج القابل للتحرير مقابل الملف المصدر قبل الانتقال إلى production، وتعتمد ادعاءات المقاييس على جودة المصدر ونوع الملف وشكل الإخراج المختار.
هذا هو الدور العملي للـ AI في Codia:
- أتمتة إعادة البناء الهيكلية الأولى
- الحفاظ على أكبر قدر ممكن من النية القابلة للتحرير
- تقليل الترجمة اليدوية المتكررة
- ترك الحكم النهائي وقرارات العلامة ومعنى المنتج للفريق البشري
الذكاء الاصطناعي يقوم بالعمل الثقيل. أما المصممون والمطورون والمسوقون والمعلمون والمشغلون فهم الذين يقررون ما يجب أن يُطلق.