الوصف
Screenshot to Code هي أداة مدعومة بالذكاء الاصطناعي مصممة لتحويل التصاميم المرئية إلى كود عملي. تقبل مدخلات متنوعة، بما في ذلك لقطات الشاشة، والنماذج الأولية، وتصاميم Figma، وحتى تسجيلات الشاشة لمواقع الويب أثناء العمل، وتحويلها إلى كود نظيف وجاهز للاستخدام. تدعم الأداة مكدسات الواجهة الأمامية الشائعة مثل HTML مع Tailwind CSS، و React مع Tailwind CSS، و Vue مع Tailwind CSS، و Bootstrap، و Ionic مع Tailwind CSS.
لدى المستخدمين طريقتان أساسيتان للتفاعل مع Screenshot to Code: عن طريق تشغيلها محليًا للتخصيص والمساهمة، أو عن طريق استخدام التطبيق المستضاف الرسمي على screenshottocode.com للاختبار الفوري دون أي إعداد محلي. يتضمن تشغيل الأداة محليًا إعداد واجهة أمامية React/Vite وواجهة خلفية FastAPI، ويتطلب مفاتيح API لموفري نماذج الذكاء الاصطناعي مثل OpenAI و Anthropic و Gemini. يوصى بـ Gemini بشكل خاص لقدراته على استخراج الأصول، مما يسمح بإعادة استخدام الشعارات والصور الحقيقية من لقطات الشاشة، بينما يعد Replicate أمرًا بالغ الأهمية لتوليد الصور وإزالة الخلفية ووظائف التحرير.
يدعم المشروع مجموعة من نماذج الذكاء الاصطناعي، بما في ذلك Gemini 3 Flash و Gemini 3.1 Pro Preview، و GPT-5.5 و GPT-5.4 Mini، و Claude Opus 4.6/4.8. يعزز تكامل مفاتيح API المتعددة دقة وجودة الكود المُنشأ من خلال السماح للتطبيق باختيار مزيج أقوى من النماذج. بالنسبة للمهتمين بالميزات المتقدمة مثل تحويل تسجيل الشاشة إلى نموذج أولي عملي، فإن Gemini شرط أساسي. يوفر المشروع أيضًا دعم Docker لتسهيل النشر والتنفيذ.
يهدف Screenshot to Code إلى تبسيط سير عمل تطوير الويب من خلال أتمتة العملية الشاقة المتمثلة في ترجمة التصاميم إلى كود. هذا مفيد بشكل خاص للمطورين والمصممين والفرق التي تتطلع إلى تسريع النماذج الأولية، وتقليل جهد الترميز اليدوي، وضمان الاتساق بين التصميم والتنفيذ. يتم صيانة المشروع بنشاط على GitHub، مما يشجع على مساهمات المجتمع وردود الفعل.
الميزات الأساسية لـ تحويل لقطة الشاشة إلى كود
يحول لقطات الشاشة والنماذج الأولية إلى كود HTML، و Tailwind، و React، و Vue.
يدعم تسجيلات الشاشة لإنشاء نماذج أولية عملية.
يوفر تطبيقًا مستضافًا للاستخدام الفوري.
يسمح بالتنفيذ المحلي للتخصيص والمساهمة.
يتكامل مع نماذج AI متعددة بما في ذلك Gemini، و GPT، و Claude.
يتميز باستخراج الأصول المدعوم بالذكاء الاصطناعي باستخدام Gemini.
يدعم توليد الصور وإزالة الخلفية والتحرير عبر Replicate.
يوفر واجهة أمامية React/Vite وواجهة خلفية FastAPI.
يتضمن معاينة اختيارية لقطة الشاشة للتحقق البصري.
دعم Docker للنشر المبسط.
البدء مع تحويل لقطة الشاشة إلى كود
استنساخ المستودع من GitHub.
تثبيت التبعيات باستخدام Poetry للواجهة الخلفية و Yarn للواجهة الأمامية.
تكوين مفاتيح API لموفري نماذج الذكاء الاصطناعي (OpenAI، Anthropic، Gemini، Replicate) في ملفات البيئة.
تثبيت تبعيات المتصفح الضرورية مثل Chromium.
تشغيل خادم الواجهة الخلفية باستخدام Poetry.
تشغيل خادم تطوير الواجهة الأمامية باستخدام Yarn.
الوصول إلى التطبيق عبر عنوان URL المحلي المقدم (على سبيل المثال، http://localhost:5173).
حالات استخدام تحويل لقطة الشاشة إلى كود
- النماذج الأولية السريعة
- تطوير الواجهة الأمامية
- تحويل التصميم إلى كود
- تسريع سير عمل UI/UX
- تسجيل الشاشة إلى نموذج أولي
- استخراج الأصول
- مقارنة توليد الكود
