استخرج لغة التصميم الشاملة من مواقع الويب بما في ذلك الألوان والطباعة والرسوم المتحركة والحالات التفاعلية والظلال والتدرجات وأنماط المكونات وسلوكيات تجربة المستخدم. يُنشئ أدلة تصميم مثالية للبيكسل مع لقطات شاشة سريعة الاستجابة ووثائق نظام التصميم الكاملة. يُستخدم عند تحليل تصميم موقع الويب، أو إنشاء أنظمة التصميم، أو إعادة بناء المواقع.
ثبّت مهارة الذكاء الاصطناعي design-guide بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: tyrchen/claude-skills.
Extract the complete design language from any website with automated analysis of colors, typography, animations, interactions, and UX patterns. Goes far beyond basic CSS extraction to capture the full design system.
✅ design-guide.md - Main comprehensive guide ✅ All screenshots - Visual reference ✅ designdata.json - Structured data for programmatic use ✅ Source files - HTML, CSS, computed styles
Optional: ✅ Recreated components - If requested ✅ Comparison analysis - If analyzing multiple sites ✅ Token library - CSS/SCSS variables file
استخرج لغة التصميم الشاملة من مواقع الويب بما في ذلك الألوان والطباعة والرسوم المتحركة والحالات التفاعلية والظلال والتدرجات وأنماط المكونات وسلوكيات تجربة المستخدم. يُنشئ أدلة تصميم مثالية للبيكسل مع لقطات شاشة سريعة الاستجابة ووثائق نظام التصميم الكاملة. يُستخدم عند تحليل تصميم موقع الويب، أو إنشاء أنظمة التصميم، أو إعادة بناء المواقع. المصدر: tyrchen/claude-skills.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/tyrchen/claude-skills --skill design-guideاستخرج لغة التصميم الشاملة من مواقع الويب بما في ذلك الألوان والطباعة والرسوم المتحركة والحالات التفاعلية والظلال والتدرجات وأنماط المكونات وسلوكيات تجربة المستخدم. يُنشئ أدلة تصميم مثالية للبيكسل مع لقطات شاشة سريعة الاستجابة ووثائق نظام التصميم الكاملة. يُستخدم عند تحليل تصميم موقع الويب، أو إنشاء أنظمة التصميم، أو إعادة بناء المواقع. المصدر: tyrchen/claude-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/tyrchen/claude-skills --skill design-guide بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/tyrchen/claude-skills