المحتويات
أداة إعادة إنشاء التصميم — قيد التطويرما ينتج عن التصميم المعاد إنشاؤهكيف ستستخدمهاإلهام، وليس استيلاءلماذا تقوم Rekreate ببنائهالأسئلة الشائعةيقوم المصممون ومطورو الواجهة الأمامية بعكس هندسة الواجهات يوميًا: قياس التباعد من لقطة شاشة، تخمين مقياس النص، إعادة بناء مكون لمعرفة كيفية تصرفه. إعادة إنشاء التصميم يحول ذلك إلى خطوة واحدة — قم بإسقاط لقطة الشاشة أو الرابط واحصل على رموز التصميم، وتحليل المكونات، وكود واجهة أمامية يعمل.
هذه الأداة قيد التطوير في Rekreate. أدناه هو ما ستنتجه بالضبط، وما يمكن لأدواتنا الحالية أن تفعله لك اليوم.
- الإدخال: لقطة شاشة، إطار Figma أو رابط URL. الإخراج: الرموز، المكونات، الكود.
- لوحة الألوان، مقياس النص، إيقاع التباعد، الزوايا والظلال مستخرجة كمتغيرات.
- إخراج على مستوى المكونات — بطاقة، شريط تنقل، جدول أسعار — وليس كتلة واحدة من التعليمات البرمجية.
- قيد التطوير. أدوات الصور في
/makeمتاحة الآن.
أداة إعادة إنشاء التصميم — قيد التطوير
أعطها واجهة واحصل على النظام وراءها: لوحة ألوان مع رموز مسماة، مقياس النص، إيقاع التباعد، زوايا الزوايا والارتفاع، ثم يتم إعادة بناء كل مكون في HTML وCSS بأسماء فئات منطقية وسلوك استجابة.
الفكرة ليست استنساخ منتج شخص آخر. الفكرة هي الإجابة على السؤال الذي يطرحه كل مصمم على لقطة شاشة — كيف تم بناء هذا فعليًا؟ — في ثوانٍ بدلاً من ساعات.
هذه الأداة ليست متاحة بعد. أنشئ حسابًا مجانيًا وسنخبرك في التطبيق بمجرد أن تصبح متاحة.
ما يمكنك فعله اليوم
ما يعمل بالفعل في Rekreate:
- إعادة إنشاء صورة — إعادة بناء صورة، نموذج أو رسم بأسلوبك الخاص.
- إعادة إنشاء شعار — أصول العلامة التجارية النظيفة بخلفيات شفافة.
- Ideogram — رسومات بأسلوب الواجهة حيث يجب أن يكون النص مقروءًا.
للكود اليوم، استخدم أداة مخصصة لتحويل لقطة الشاشة إلى كود؛ عد هنا عندما تفتح أداة إعادة الإنشاء.
ما ينتج عن التصميم المعاد إنشاؤه
| الطبقة | الإخراج المخطط |
|---|---|
| الألوان | لوحة مع الأدوار — السطح، الحبر، المطفأ، التمييز، الدلالي — كمتغيرات CSS، للوضعيْن الفاتح والداكن |
| النص | عائلات الخطوط، المقياس المستخدم، الأوزان، ارتفاعات السطر وتباعد الحروف |
| التباعد | الإيقاع الأساسي (4/8pt أو غيره) بالإضافة إلى عرض الحاويات والمسافات البينية |
| المكونات | الأزرار، البطاقات، شريط التنقل، النماذج، الجداول — كل منها كـ HTML وCSS معزولة |
| الحالات | الحالة عند التمرير، التركيز، التعطيل والخطأ حيث يمكن استنتاجها |
| ملاحظات إمكانية الوصول | تحذيرات التباين وحالات التركيز المفقودة يتم الإشارة إليها، وليس نسخها بصمت |
كيف ستستخدمها
إسقاط المرجع
لقطة شاشة من منتج تعجبك، إطار Figma، أو رابط URL مباشر.
اختر النطاق
الشاشة بأكملها، أو مكون واحد تحتاج لفهمه — بطاقة الأسعار، الشريط الجانبي، الحالة الفارغة.
راجع النظام
ابدأ بالرموز: هل اللوحة صحيحة، هل مقياس النص متطابق، هل التباعد على شبكة؟ أصلح أي شيء خمنه النموذج بشكل خاطئ.
خذ الكود
انسخ المكونات إلى مشروعك، أو احتفظ بها كتنفيذ مرجعي بينما يبني فريقك الشيء الحقيقي.
إلهام، وليس استيلاء
أنماط الواجهة هي حرفة مشتركة. لا أحد يمتلك بطاقة تحتوي على عنوان، نص رئيسي وزر؛ الصناعة اتفقت على هذه الأنماط لأنها تعمل.
ما يُمتلك: هوية المنتج البصرية — شعاره، أسلوب الرسوم التوضيحية، الخطوط المخصصة، الصور والنصوص — بالإضافة إلى أي كود خاص. يجب أن يعلمك التصميم المعاد إنشاؤه الآليات ثم يتم تكييفه مع علامتك التجارية الخاصة.
إذا كانت شاشتك تشبه شاشة منافس مع شعار مختلف، فقد نسخت هويتهم، ولم تتعلم من هيكلهم. استخدم الرموز كنقطة انطلاق وحركها نحو نظامك الخاص.
لماذا تقوم Rekreate ببنائه
منتجنا بالكامل هو فكرة واحدة: ابدأ بشيء يعمل بالفعل، ثم اجعله ملكك. بدأ ذلك مع الفيديوهات الفيروسية، ثم انتقل إلى الإعلانات، الصور والأصوات، والتصميم هو نفس الحركة المطبقة على الواجهات.
كما أنه يكمل عائلة /make للفرق: أعد إنشاء الإعلان، أعد إنشاء صفحة الهبوط، أعد إنشاء نظام التصميم وراءها — كل ذلك في مكان واحد، باللغة التي تعمل بها.
تابع أداة إعادة إنشاء المواقع وأداة إعادة إنشاء التطبيقات إذا كنت تريد الأدوات المجاورة.
الأسئلة الشائعة
هل يمكن للذكاء الاصطناعي إعادة إنشاء تصميم واجهة المستخدم من لقطة شاشة؟
نعم — يمكن لنماذج الرؤية استخراج لوحة ألوان، مقياس نص وتخطيط من صورة وإعادة بناء المكونات في الكود. أداة إعادة إنشاء التصميم من Rekreate قيد التطوير؛ اليوم تغطي أدواتنا الحية الصور، الشعارات والفيديو.
هل ستوفر لي ملفات Figma؟
الإخراج المخطط هو رموز التصميم والكود الأمامي. الرموز تُستورد بسهولة إلى معظم أدوات التصميم، لكن الأداة تهدف للوصول إلى كود يعمل.
هل من القانوني إعادة إنشاء واجهة مستخدم شخص ما؟
أنماط التخطيط والتفاعل ليست محمية مثل أصول العلامة التجارية. لا تعيد استخدام شعارهم، الرسوم التوضيحية، الخطوط المخصصة، النصوص أو الكود الخاص — خذ الهيكل وأضف هويتك الخاصة.
هل يدعم الوضع الداكن؟
نعم، هذا هو المخطط: يتم استخراج الرموز لكل موضوع بحيث تعمل المكونات المعاد إنشاؤها على كلا الوضعين بدلاً من أن تكون مشفرة لوضع واحد.
متى سيتم إطلاقه؟
لا يوجد تاريخ عام حتى الآن. أنشئ حسابًا مجانيًا وستظهر أدوات /make الجديدة في التطبيق عند فتحها.
ماذا يجب أن أستخدم في الوقت الحالي؟
استخدم أداة إعادة إنشاء الصور من Rekreate للمرئيات وأداة إعادة إنشاء الشعارات لأصول العلامة التجارية، بالإضافة إلى أداة مخصصة لتحويل لقطة الشاشة إلى كود للعلامة.
أنشئ الفيديو الفيروسي التالي باستخدام Rekreate
ابحث عن فيديو قصير ناجح، أعد إنشاؤه باستخدام نصك، شخصيتك الافتراضية وصوتك، وأنشئ مشاهد باستخدام Seedance وKling وVeo في مكان عمل واحد.
ابدأ التجربة المجانية →