·screenshot-to-code
*

screenshot-to-code

تحويل لقطات شاشة واجهة المستخدم إلى كود HTML/CSS/React/Vue صالح للعمل. يكتشف أنماط التصميم والمكونات وينشئ تخطيطات سريعة الاستجابة. استخدم هذا عندما يقدم المستخدمون لقطات شاشة لمواقع الويب أو التطبيقات أو تصميمات واجهة المستخدم ويريدون تنفيذ التعليمات البرمجية.

4التثبيتات·0الرائج·@gked2121

التثبيت

$npx skills add https://github.com/gked2121/claude-skills --skill screenshot-to-code

كيفية تثبيت screenshot-to-code

ثبّت مهارة الذكاء الاصطناعي screenshot-to-code بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/gked2121/claude-skills --skill screenshot-to-code
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: gked2121/claude-skills.

Convert UI screenshots into production-ready code with accurate styling and structure.

When a user provides a screenshot of a UI design:

Default: If not specified, use React with Tailwind CSS for modern designs, or plain HTML/CSS for simple pages.

تحويل لقطات شاشة واجهة المستخدم إلى كود HTML/CSS/React/Vue صالح للعمل. يكتشف أنماط التصميم والمكونات وينشئ تخطيطات سريعة الاستجابة. استخدم هذا عندما يقدم المستخدمون لقطات شاشة لمواقع الويب أو التطبيقات أو تصميمات واجهة المستخدم ويريدون تنفيذ التعليمات البرمجية. المصدر: gked2121/claude-skills.

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/gked2121/claude-skills --skill screenshot-to-code
الفئة
*وسائط إبداعية
موثق
أول ظهور
2026-02-11
آخر تحديث
2026-03-10

Browse more skills from gked2121/claude-skills

إجابات سريعة

ما هي screenshot-to-code؟

تحويل لقطات شاشة واجهة المستخدم إلى كود HTML/CSS/React/Vue صالح للعمل. يكتشف أنماط التصميم والمكونات وينشئ تخطيطات سريعة الاستجابة. استخدم هذا عندما يقدم المستخدمون لقطات شاشة لمواقع الويب أو التطبيقات أو تصميمات واجهة المستخدم ويريدون تنفيذ التعليمات البرمجية. المصدر: gked2121/claude-skills.

كيف أثبّت screenshot-to-code؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/gked2121/claude-skills --skill screenshot-to-code بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/gked2121/claude-skills