5 أدوات مجانية مفتوحة المصدر لتصميم موقع احترافي مع Claude Code

تريد تصميم موقع احترافي مع Claude Code؟ هذه خمس أدوات مفتوحة المصدر على GitHub، كل واحدة منها تعطي الوكيل شيئاً ينقصه: مرجعاً، وذوقاً، وصقلاً، وعيناً ترى الموقع، وطريقة لتحويل صورة إلى مجسم ثلاثي الأبعاد.

الأدوات نفسها مجانية، أما استهلاك Claude Code فيبقى حسب اشتراكك. المعلومات هنا من صفحات المشاريع الرسمية بتاريخ 4 نوفمبر 2026، ولم نجرّب الأدوات الخمس بأنفسنا لهذا المقال. الأوامر تتغير مع الإصدارات، فراجع صفحة كل مشروع قبل أن تنفّذ.

الأداة 1: Awesome Design MD، مرجع جاهز لوكيلك

مجموعة ملفات DESIGN.md مستخرجة من مواقع حقيقية. الفكرة بسيطة: ملف DESIGN.md هو وثيقة نصية تصف نظام التصميم، يقرؤها وكيل البرمجة ليبني واجهات متناسقة. تنسخ الملف إلى جذر مشروعك، وتقول لوكيلك أن يبني لك صفحة بهذا الشكل.

github.com/VoltAgent/awesome-design-md

الترخيص: MIT.

انتبه: هذه الملفات تصف تصاميم مواقع يملكها أصحابها. صفحة المشروع نفسها تقول إنهم لا يدّعون ملكية الهوية البصرية لأي موقع. استخدمها مرجعاً للإلهام، وابنِ فوقها هويتك أنت.

اقرأ ملف DESIGN.md في جذر المشروع، ثم ابنِ لي صفحة هبوط تتبع نفس لغة التصميم، لكن بالألوان والخطوط والشعار الخاصة بمشروعي.

الأداة 2: Taste، ذوق تصميم لوكيلك

مهارة (skill) تعطي وكيل البرمجة اتجاهاً فنياً وصوراً مرجعية، وتفحص الصفحة في متصفح حقيقي بدل أن تخرج صفحات عامة الشكل. بحسب ملاحظات الإصدار، يفتح الفاحص الصفحة بعروض 1440 و768 و390 بكسل، ثم يراجع الوكيل لقطاته ويصلح أهم المشاكل.

github.com/Leonxlnx/taste-skill

الترخيص: MIT. ملاحظات الإصدار تقول إنه لا يستخدم مفاتيح API، ويحتاج Node 22 فما فوق ومتصفح Chrome أو Edge أو Chromium. التركيب:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

إن شاهدت فيديوهات قديمة تتكلم عن إعدادات Variance وMotion وDensity فهي من النسخ السابقة. النسخة الحالية لا فيها هذه الأزرار، والنسخ القديمة انتقلت إلى مستودع منفصل اسمه taste-skill-classics.

الأداة 3: Impeccable، يصقل التصميم ويرتب التفاصيل

مفردات تصميم لوكيلك. بدل أن تقول «خلّه أحلى» وتترك الوكيل يخمّن، تعطيه أوامر محددة مثل polish وcritique وaudit وbolder، وتوجّهها إلى عنصر واحد. وفيه أيضاً كاشف يمسك الأنماط المكررة في الواجهات قبل أن تُسلَّم.

github.com/pbakaus/impeccable

الترخيص: Apache-2.0. التركيب، ثم أمر التهيئة مرة واحدة لكل مشروع:

npx impeccable install

ثم داخل وكيلك:

/impeccable init
/impeccable critique the pricing cards
/impeccable polish settings

وفيه أمر /impeccable live: يفتح خادم التطوير عندك بطبقة تحديد، فتختار عنصراً وتجرّب اتجاهات مختلفة له، وما تقبله يُكتب في الكود. تنبيه من صفحة المشروع: هذا الوضع يعدّل نسخة محلية فقط، فلا تحقنه في موقع منشور.

الأداة 4: Playwright CLI، عين لوكيلك على الموقع

واجهة سطر أوامر لـ Playwright مع skills لوكلاء البرمجة. تعطي الوكيل متصفحاً: يفتح الموقع، ويتفاعل معه، ويصوّره. وبعد أن يرى النتيجة يصلح الأخطاء التي وجدها. تقول صفحة المشروع إن أوامر CLI أخف على سياق الوكيل من MCP لأنها لا تحمّل مخططات الأدوات الكبيرة.

github.com/microsoft/playwright-cli

الترخيص: Apache-2.0، ويحتاج Node 18 فما فوق.

npm install -g @playwright/cli@latest
playwright-cli install --skills

ثم جرّبه يدوياً لتعرف شكل الأوامر:

playwright-cli open https://playwright.dev --headed
playwright-cli screenshot

الأداة 5: img2threejs، من صورة واحدة إلى مجسم

مهارة تعيد بناء الجسم الذي في صورة مرجعية كنموذج Three.js بالكود فقط، وليس ملف شبكة جاهزاً. تقول صفحة المشروع بوضوح إن الصورة الواحدة لا تكشف الجوانب المخفية ولا تضمن دقة الهندسة. فتستنتج الأوجه غير الظاهرة بنسخ ما هو ظاهر، وتقول لك إن التقريب كان تقريباً. هي أقوى مع الأجسام الصلبة، أما الشخصيات فتخرج مجسمات مبسّطة وليست نسخاً دقيقة.

github.com/img2threejs/img2threejs

الترخيص: Apache-2.0. يحتاج Node 18 فما فوق وGit وPython 3.10 فما فوق، وأحد الوكلاء مثل Claude Code. التركيب ثم تحقق منه:

npx --yes img2threejs@latest install
npx --yes img2threejs@latest doctor

أعد تشغيل الوكيل، ثم أرفق صورة أو مسارها وشغّل:

/img2threejs Rebuild the object in ./reference.png as a procedural Three.js model. Keep its proportions, silhouette and colours. Report the output files and any inferred regions.

معرض النماذج الحية على موقع المشروع: img2threejs.io

كيف تجمعها؟

هذا ترتيب مقترح منا، وليس من صفحات المشاريع:

1. ابدأ بملف DESIGN.md من Awesome Design MD كمرجع للشكل.
2. اترك Taste يبني الصفحة بذوق أفضل من الصفحات العامة.
3. مرّر Impeccable على العناصر التي تحتاج صقلاً.
4. استخدم Playwright CLI ليفتح الوكيل الموقع ويراه ويصلح ما يكسر.
5. وإن احتجت مجسماً ثلاثي الأبعاد في الواجهة، جرّب img2threejs.

تابعنا على @nexcodekw، وإن كتبت كلمة Design في تعليق الفيديو نرسل لك الروابط.