web-design

شرح مستودع xiaopu-ai/web-design

ما هو هذا المستودع ولماذا يُستخدم؟

هو "مهارة" (SKILL) ذكية تعمل مع Claude Code (مساعد البرمجة بالذكاء الاصطناعي) لتصميم صفحات ويب جميلة ومتناسقة. الفكرة الأساسية هي نهج "المواصفات أولاً، الكود ثانياً"، حيث يتم إنشاء وثيقة تصمام تفصيلية قبل كتابة أي سطر من الكود.

لماذا تحتاج إلى هذا المستودع؟

للحصول على تصاميم متناسقة: يضمن أن كل صفحات موقعك تتبع نفس المعايير البصرية (الألوان، الخطوط، التباعد، الخلفيات).
لوفّر الوقت: يحوّل الأفكار أو المواصفات التقنية (PRD) أو حتى لقطات الشاشة إلى تصميم متكامل جاهز للكود.
للعمل منظم: يُنتِج ملف DESIGN.md قابل للتعديل يدوياً، فيصبح مرجعاً موثوقاً للفريق كله.

أهم ميزاته وآلية عمله

يعمل المستودع عبر ثلاث مراحل رئيسية:

المرحلة	الوصف	المخرجات
أ. الفهم	يحلل المدخلات: وثيقة متطلبات (PRD)، أو رابط موقع مرجعي، أو لقطة شاشة، أو كلمات مفتاحية.	استخراج إشارات التصميم الأساسية.
ب. إنتاج ملف التصمام	يُنشئ ملف `DESIGN.md` يتضمن 9 أقسام تفصيلية (الألوان، الطباعة، المكونات، التخطيط، الحركة، العمق، الإرشادات، التجاوب، الإمكانية الوصولية).	ملف مواصفات تصميم كامل وواضح.
ج. توليد الكود	يكتب كود HTML/CSS/JavaScript مطابقاً تماماً للمواصفات في الملف، ثم يقوم بفحص ذاتي لجودة النتيجة.	صفحات ويب جاهزة ومتوافقة مع الأجهزة المختلفة.

ميزة ذكية: يعمل حتى مع مدخلات محدودة جداً بفضل نظام احتياطي ذكي.

كيفية التثبيت والاستخدام

1. التثبيت (في بيئة Claude Code)

git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design

سيكتشف Claude Code المهارة تلقائياً في المرة التالية التي تبدأ فيها جلسة عمل.

2. التشغيل المحلي للصفحة التعريفية

cd web-design/docs
python3 -m http.server 8000
# افتح المتصفح على: http://localhost:8000

> ملاحظة: لا تفتح ملف index.html مباشرة من المجلد باستخدام file://، فبعض المكتبات مثل Google Fonts تحتاج خادم HTTP للعمل.

التقنيات المستخدمة

اللغة الأساسية: Python (للسكربتات الأوتوماتيكية).
لغات الويب: HTML, CSS, JavaScript (لإنتاج وعرض التصميم النهائي).
أدوات متخصصة:
Playwright: مكتبة للزحف والتحكم في المتصفح، تُستخدم هنا لجمع المكونات التصميمية من مواقع مرجعية.
GitHub Pages: لاستضافة الصفحة التعريفية والعرض الحي للمستودع.
Unsplash API: لجلب صور عالية الجودة من الإنترنت.

هيكل المستودع

web-design/
├── SKILL.md            # ملف التعليمات الرئيسي الذي يتبعه Claude Code.
├── references/         # مكتبة مرجعية: أنظمة تصميم، أنماط حركية، قائمة جودة.
├── scripts/            # أدوات آلية: زاحف ويب، محلل نصوص، جالب صور.
└── docs/               # الصفحة التعريفية (تعمل عبر GitHub Pages).
    ├── index.html, styles.css, app.js
    ├── DESIGN.md       # مواصفات تصميم الصفحة نفسها (تم إنشاؤها بواسطة المهارة).
    └── images/

لمن يصلح هذا المستودع؟

الفئة	كيفية الاستفادة
مطورو الويب (خاصة مع Claude Code)	يسرّعون عملية الانتقال من الفكرة إلى تصميم واجهة مستخدم احترافية ومتكاملة.
مصممو واجهات المستخدم (UI/UX)	يُنشئون مسودات تصميم أولية سريعة أو يوحدون أنظمة تصميم للمشاريع الكبيرة.
فرق التطوير الصغيرة	توفر لل팀 مرجعاً موثوقاً (`DESIGN.md`) يضمن التزام الجميع بمعايير التصميم الموحدة.
المطورون المستقلون	يحصلون على تصميم جيد المستوى دون الحاجة لتخصص عميق في التصميم.

بيانات المستودع

الاسم: xiaopu-ai/web-design
الوصف: A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second.
اللغة الرئيسية: Python
عدد النجوم: 555
ملخص README: يشرح أن المستودع أداة ذكية (SKILL) تتبع منهجية "المواصفات أولاً" لتصميم صفحات ويب متناسقة وقابلة للتعديل. تُولِّد ملف DESIGN.md تفصيلياً ثم كود الويب بناءً عليه. تتميز بسهولة التثبيت والعمل حتى مع مدخلات بسيطة.