قم بتحليل لقطات شاشة تصميم واجهة المستخدم وإنشاء مكونات React باستخدام TypeScript وTailwind CSS. استخدم هذه المهارة عندما يقدم المستخدم نماذج بالحجم الطبيعي لواجهة المستخدم أو لقطات شاشة للتصميم أو تصدير Figma وطلب التنفيذ. يوفر تحليلًا تفصيليًا للتخطيط وتقسيم المكونات واستخراج رمز التصميم وإنشاء تعليمات برمجية جاهزة للإنتاج باتباع أفضل الممارسات.
ثبّت مهارة الذكاء الاصطناعي ui-analyzer بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: smallnest/langgraphgo.
This skill provides a systematic approach to analyzing UI design screenshots and translating them into production-ready React components using TypeScript and Tailwind CSS.
Transform UI design screenshots into well-structured, accessible, and maintainable React components. The skill guides through analyzing layouts, extracting design tokens, identifying components, and generating clean code that matches the design while following best practices.
Read the provided screenshot first using the Read tool if a file path is provided, or if the user has shared an image in the conversation.
قم بتحليل لقطات شاشة تصميم واجهة المستخدم وإنشاء مكونات React باستخدام TypeScript وTailwind CSS. استخدم هذه المهارة عندما يقدم المستخدم نماذج بالحجم الطبيعي لواجهة المستخدم أو لقطات شاشة للتصميم أو تصدير Figma وطلب التنفيذ. يوفر تحليلًا تفصيليًا للتخطيط وتقسيم المكونات واستخراج رمز التصميم وإنشاء تعليمات برمجية جاهزة للإنتاج باتباع أفضل الممارسات. المصدر: smallnest/langgraphgo.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/smallnest/langgraphgo --skill ui-analyzerقم بتحليل لقطات شاشة تصميم واجهة المستخدم وإنشاء مكونات React باستخدام TypeScript وTailwind CSS. استخدم هذه المهارة عندما يقدم المستخدم نماذج بالحجم الطبيعي لواجهة المستخدم أو لقطات شاشة للتصميم أو تصدير Figma وطلب التنفيذ. يوفر تحليلًا تفصيليًا للتخطيط وتقسيم المكونات واستخراج رمز التصميم وإنشاء تعليمات برمجية جاهزة للإنتاج باتباع أفضل الممارسات. المصدر: smallnest/langgraphgo.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/smallnest/langgraphgo --skill ui-analyzer بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/smallnest/langgraphgo