تحويل لقطة الشاشة إلى كود بالذكاء الاصطناعي مجانًا: المحوّل مفتوح المصدر وطريق DeepSeek البصري
مساران لتحويل لقطة تصميم إلى كود يعمل فعلًا: تثبيت abi/screenshot-to-code برخصة MIT عبر Docker ومفتاح نموذج واحد، أو إرفاق الصورة في DeepSeek لتعود ملف HTML واحدًا. خمس عشرة خطوة، وكل عبارة هنا مضبوطة على مستودع المشروع و api-docs.deepseek.com.
الخلاصة
- البرنامج مجاني والتوكنز ليست كذلك. رخصة abi/screenshot-to-code هي MIT ولا يكلّف تشغيله عندك شيئًا، لكنه يطلب مفتاح نموذج واحدًا على الأقل — OpenAI أو Anthropic أو Gemini — وتدفع عنه للمزوّد بعدد التوكنز.
- DeepSeek ليس من نماذج هذا المحوّل. قائمة النماذج الافتراضية في README تذكر Gemini 3 Flash / 3.1 Pro و GPT-5.5 / 5.4 Mini و Claude Opus 4.6 / 4.8، أما البحث عن "deepseek" داخل المستودع فلا يعيد نتيجة واحدة.
- النموذج الذي يرى في DeepSeek هو deepseek-flash: جدول الأسعار الرسمي يضع ✓ في صف Vision مقابل flash، ويكتب «Not supported» مقابل deepseek-v4-pro. تُرسل الصورة بصيغة base64 أو برابط عام أو عبر file_id من Files API.
- المساران ينتهيان بالشيء نفسه: ملف HTML واحد تفتحه بنقرة مزدوجة. بأسعار Flash المنشورة تكلّفك اللقطة وبضعة آلاف من توكنز الترميز أقلّ بكثير من سنت واحد.
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
القناة:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
القناة:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
التوثيق:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
التوثيق:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
التوثيق:api-docs.deepseek.comDocs
الصور مأخوذة من تسجيلَي شاشة نظيفَين (بلا كاميرا وجه وبلا ترجمة محروقة)؛ والتقنيات المدعومة والمفاتيح المطلوبة وأوامر Docker وحدود الصور في DeepSeek مضبوطة على README الخاص بـ abi/screenshot-to-code وملفات المصدر و api-docs.deepseek.com.
تُنسب اللقطات إلى القنوات التي سجّلتها، وكل خطوة ترتبط مباشرة بالطابع الزمني الصحيح. التسجيلان يسبقان تسميات نماذج DeepSeek الحالية، فحين تعرض لقطة تسمية قديمة يتبع النص التوثيق الرسمي.
الخطوات الخمس عشرة: من لقطة واحدة إلى صفحة تُفتح
النقطة الأولى: لقطة شاشة
- 1
التقط الجزء الذي تريد إعادة بناءه
تصلح أي صورة ثابتة: عرض المحوّل نفسه يستخدم صفحة قناة على يوتيوب، ومسار DeepSeek أدناه يستخدم نموذجًا لتصميم صفحة دخول بحجم 68 كيلوبايت محفوظًا باسم log.PNG. اللقطة تتفوّق على الوصف المكتوب لأن التباعدات والألوان والتسلسل الهرمي محسومة أصلًا، فيقرأها النموذج بدل أن يخترعها. اقتطع المكوّن الذي يعنيك فقط، فالشاشة الكاملة تحرق توكنز على إطار ستحذفه بعد قليل.
نقطة البداية: بطاقة تسجيل دخول محفوظة بصيغة PNG، ولم يُحوَّل شيء بعد.شاهد عند 1:02 - 2
افتح المحوّل وتأمل مسارات الإدخال الأربعة
بعد التثبيت المحلي يمنحك http://localhost:5173 صندوق رفع وثلاثة اختصارات: Record Screen لتسجيل مقطع من موقع يعمل، و Enter URL مع Capture ليقتطع المحوّل لقطة بنفسه، و Import from Code لتلصق HTML قائمًا وتكمل تعديله. قائمة Generating تحدد التقنيات المطلوبة — HTML مع Tailwind، أو HTML مع CSS، أو React مع Tailwind، أو Vue مع Tailwind، أو Bootstrap، أو Ionic مع Tailwind. لا حسابات في الأمر: التطبيق يخاطب مزوّد النماذج مباشرة.
مدخل النسخة المستضافة ذاتيًا: منطقة الإفلات، وتسجيل الشاشة، والالتقاط برابط، واستيراد الكود.شاهد عند 4:00
تثبيت المحوّل المجاني مفتوح المصدر
- 3
افحص الجهاز قبل التثبيت
التطبيق واجهة أمامية بـ React/Vite وخلفية بـ FastAPI، ومسار Docker يفترض Docker Engine يعمل. يبدأ Fahd Mirza بـ cat /etc/*release للتأكد من الجهاز — وهنا النتيجة Ubuntu 22.04.4 LTS — لأن الأوامر التالية تفترض صدفة POSIX وأمراً docker compose متاحًا. يعمل الأمر كذلك على macOS و Windows ما دام Docker Desktop يعمل.
فحص يستغرق ثانيتين: Ubuntu 22.04.4 LTS وخلفها Docker Desktop يعمل.شاهد عند 2:12 - 4
استنسخ المستودع وضع مفتاحًا في backend/.env
نفّذ git clone https://github.com/abi/screenshot-to-code ثم ادخل المجلد واكتب المفتاح في ملف .env الذي يقرأه تركيبة Compose — السطر في README حرفيًا هو echo "OPENAI_API_KEY=sk-your-key" > .env. مفتاح واحد يكفي للبدء؛ README يقبل OpenAI و Anthropic و Gemini، وكلما أضفت مفاتيح اختار التطبيق توليفة نماذج أقوى في كل توليد. DeepSeek ليس في هذه القائمة، وسؤال الأسئلة الشائعة الثاني يشرح لماذا لا يغيّر تجاوز OpenAI Base URL هذا الواقع.
مفتاح وهمي منسوخ حرفيًا من README، مكتوب في الملف الذي تحمّله الخلفية عند الإقلاع.شاهد عند 2:55 - 5
ابنِ الوحاوين وشغّلهما بأمر واحد
من جذر المستودع يجلب docker compose up -d --build الصور الأساسية، ثم يثبّت Poetry للخلفية وحزم yarn للواجهة ويتركهما يعملان في الخلفية. مع ذاكرة تخزين فارغة احسب لها بضع دقائق: ملف Compose يخصص للميناء 7001 للخلفية ولمنفذ 5173 للواجهة. يحذّر README من أن هذا المسار للتشغيل لا للتطوير، فتعديل الملفات لا يعيد البناء.
التثبيت كله أمر واحد؛ و -d يعزله بحيث يمكنك إغلاق الطرفية.شاهد عند 3:25 - 6
راقب بناء طبقات الخلفية والواجهة
السجل هو الجزء المفيد حين يتعطّل شيء: الطبقتان backend 2/7 RUN pip install "poetry==1.4.1" و frontend 4/5 RUN yarn install هما أول ما ينكسر خلف بروكسي أو على شبكة مقيّدة. وإذا توقّف عند هنا فالإصلاح في الغالب في DNS الخاص بـ Docker أو في مرآة npm، لا في التطبيق. وما إن تكتمل الطبقة الأخيرة حتى يبدأ localhost:5173 بالرد.
بعد عشرين ثانية من البناء تكون الصورتان قد تجاوزتا طبقات الاعتماديات.شاهد عند 3:45
التحويل والحفظ والتحسين
- 7
أفلت اللقطة داخل الصندوق
اسحب الملف إلى الإطار المتقطّع أو انقر ليفتح منتقي الملفات؛ تستقر الصورة في العمود الأيسر باسم ORIGINAL SCREENSHOT وتبقى هناك مرجعًا لكل نسخة لاحقة. الوضع الداكن أو الفاتح تفضيل داخل أيقونة الترس وليس فرقًا في الوظائف. ذلك الحوار نفسه هو موضع لصق المفاتيح دون لمس ملف .env — ويرد في README أن المفاتيح المضبوطة هنا لا تعيش إلا في متصفحك وأنها تتجاوز إعدادات .env.
التطبيق نفسه بالوضع الداكن في انتظار الملف — منطقة الإفلات تكاد تكون الواجهة كلها.شاهد عند 4:45 - 8
ولّد وقارن بين النسخ
يشغّل التطبيق أكثر من نموذج على الطلب نفسه حتى تختار نتيجة بدل أن تقبل الأولى: Option 1 و Option 2 تبويبان فوق اللقطة ذاتها، وعدد النسخ يحدده NUM_VARIANTS في backend/config.py — أربعة مع الصورة وواثنان مع الفيديو. يتدفق الكود إلى الشريط الجانبي أثناء توليده، وزر Cancel موجود حين يخطئ الاتجاه. وكل تشغيل محفوظ تحت Versions، فلا تخسر شيئًا من التجربة.
نسختان من اللقطة نفسها أثناء البث، وأصلها مثبّت أسفله.شاهد عند 5:00 - 9
ثلاث قراءات: سطح المكتب والجوال والكود
فوق منطقة المعاينة ثلاثة مفاتيح — Desktop و Mobile و Code — وأهمها للتسليم هو Code لأنه يعرض الترميز الخام القابل للنسخ. يرمي Reset التشغيل الحالي، ويصدّر Download الناتج، وتحت التبويبات تجلس Update لإرسال تعليمات جديدة، و Regenerate لإعادة تعليمات نفسها، و Select and update لتحديد المنطقة المراد تغييرها بإطار. هنا يتوقف screenshot-to-code عن كونه عرضًا ويصبح حلقة تحرير.
الصفحة المعاد بناؤها إلى جوار أدوات التحسين عليها.شاهد عند 5:20 - 10
احفظ الترميز ملف .html عاديًا
انسخ الكود من تبويب Code إلى ملف — وهنا هو test.html داخل مجلد mycode — وبذلك ينتهي «مرحلة البناء» كلها. الناتج HTML مكتفٍ بذاته مع أصناف Tailwind، فلا حزم تُثبَّت ولا خادم تطوير يقف بينك وبين الصفحة. وإن أردته داخل شجرة مكوّنات حقيقية فالصقه في ملف React أو Vue وأنقل أسماء الأصناف هناك.
ملف واحد بحجم 3.1 كيلوبايت، فُتح في Firefox من القائمة السياقية.شاهد عند 5:40 - 11
افتحه من القرص وانظر ما نجا من التصميم
تحميل الملف مباشرة من نظام الملفات يثبت أن الناتج يعمل دون أي خادم. ثم قارنه بصدق بمصغّرة ORIGINAL SCREENSHOT: التخطيط والتسلسل الطباعي والتباعدات تنتقل غالبًا جيدًا، أما الشعارات والصور العائدة لآخرين فهي ما يُقرَّب — وهذا بالضبط سبب توصية README القوية بمفتاح Gemini لأنه يقود استخراج الأصول ويعيد استخدام الصور الحقيقية من اللقطة، وبمفتاح Replicate لتوليد الصور وإزالة الخلفيات. وما ينقص يُستكمل بتعليمة تالية، لا بإعادة كتابة.
الصفحة المحوّلة تعمل من القرص المحلي، وقد أُعيد بناء اللافتة وترويسة القناة.شاهد عند 6:12 - 12
حسّن بتعليمة تحديث بدل إعادة التوليد
اكتب التغيير في الحقل تحت التبويبات — وهنا «change the background color to deep blue» — فينتج التطبيق نسخة جديدة لا صفحة جديدة، لذا يحفظ Versions الاثنتين: Create v1 والتحديث بوصفه v2. ووضع علامة على «Include screenshot of current version؟» يرسل المعاينة الحالية مع التعليمة، وهو ما يمنع التحسين الصغير من الانزلاق إلى تخطيط عام. هذه الحلقة هي سبب استحقاق التثبيت أصلًا.
بعد تعليمة واحدة يُحفظ التعديل في v2 بينما يبقى v1 على بعد نقرة.شاهد عند 6:45
المسار الثاني: DeepSeek ينظر إلى الصورة
- 13
المسار الثاني: أرفق اللقطة في DeepSeek
إن كنت لا تريد تشغيل شيء، يستقبل منتج الدردشة في DeepSeek الصورة مباشرة: مشبك الورق يضيف log.PNG، ويظهر في حقل الإدخال كمرفق حجمه 68.14 كيلوبايت، والتعليمة جملة واحدة — «give me html and css code for this image in a single html file». تحمل هذه اللقطة شارة DeepThink (R1)؛ أسماء النماذج في القائمة تتغيّر أسرع من الشروحات، فثق بالآلية لا بالتسمية. وما يعود ملف واحد تلصقه وتفتحه.
اللقطة مرفقة في دردشة DeepSeek، وتحتها مكتوب الطلب بصيغة ملف HTML واحد.شاهد عند 1:22 - 14
اقرأ الخطة قبل الكود
لوحة التفكير هي ما يكشف إن كان النموذج قد نظر فعلًا: يعدّد عنوان «Login» وتسميتَي «User Name» و «Password» وحقلي الإدخال وزر Submit، ثم يختار flexbox مع توسيط بـ justify-content و align-items وارتفاع 100vh. وحين تخرج إعادة البناء معطوبة فهنا تنظر — نموذج تخطى التسميات سيعيد نموذجًا بلا تسميات. افتح اللوحة، وإن كان الوصف منحرفًا فأعد اقتطاع اللقطة وأرسلها من جديد.
عشر ثوانٍ من الاستدلال: النموذج يسمّي كل عنصر ينوي تقليده.شاهد عند 1:45 - 15
عاين ثم خذ الكود
يعرض DeepSeek إجابته بنفسه في نافذة معاينة — بطاقة دخول معاد بناؤها بتسميات فوق حقولها وزر Submit أزرق بعرض الحقل كله، وتحتها عبارة «AI-generated, for reference only». إنها تبسيط لا استنساخ: اختفت هالات التدرج وأيقونات الحقول من النموذج الأصلي. انسخ HTML واحفظه باسم index.html وافتحه تمامًا كالخطوتين 10 و 11. ولأن الصراحة مطلوبة: كلا من دردشة DeepSeek وواجهته البرمجية يستقبل الصور، أما المولّدات النصية البحتة — ومنها مولّد القطع الفنية في هذا الموقع — فلا تستقبلها، فهناك صف الواجهة بالكلمات بدل أن تتوقع منها رؤية لقطتك.
البطاقة المعاد بناؤها داخل معاينة DeepSeek: قريبة بما يكفي للبناء عليها، ومبسّطة بما يكفي للتدقيق.شاهد عند 2:48