uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
المدونة · العربية · 2026-05-28

# تصميم برمجة الذكاء الاصطناعي — لماذا تنتج كل أداة نفس الواجهة؟

من طلب يومًا من Claude Code أو Cursor أو Windsurf أو GitHub Copilot أو Cline أو Continue بناء صفحة هبوط، يعرف الناتج بمجرد رؤيته: خط Inter مرفوع إلى أحجام العناوين، تدرّج من البنفسجي إلى الأزرق في الخلفية، ثلاث بطاقات متطابقة جنبًا إلى جنب، وسطر «Build something amazing» أسفل الـ hero. المشكلة ليست في الأداة. المشكلة أن كل هذه الأدوات تعلّمت من نفس المجموعة من القوالب. يوقف ux-skill هذه الافتراضات داخل الـ CI، دون استدعاء أي LLM، عبر 145 قاعدة Regex حتمية.

By the ux-skill team · قراءة 9 دقائق · مفتوح المصدر برخصة MIT

## الافتراضات البصرية الثمانية التي تنتجها كل أداة ذكاء اصطناعي

وثّقنا المجموعة الكاملة في تصنيف بصمات تصميم الذكاء الاصطناعي. أما الثمانية الأكثر بروزًا فتظهر تقريبًا في كل قسم hero يُولِّد:

1. استخدام Inter كخط عرض — خط مُصمَّم أصلًا لوضوح القراءة على الأحجام الصغيرة، مرفوع إلى 90px في الـ hero. عكس استعماله المقصود تمامًا.
2. تدرّج من البنفسجي إلى الأزرق — عائلة `#7C3AED → #3B82F6`، تُستخدم كخلفية للقسم الأول.
3. ثلاث بطاقات متطابقة في صفٍّ واحد — أيقونة وعنوان من كلمة وسطر فرعي، مكررة ثلاث مرات.
4. حركة fade-in-up شاملة — تطبّق على كل ابن مباشر لكل قسم، دون أي تفريق حسب الدور.
5. توسيط كل شيء — الـ hero والبطاقات والنماذج، كلها على المحور المركزي للشاشة.
6. نسخ نص عامة — «Build something amazing» و«Beautiful experiences» و«Revolutionizing X»، دون أي اسم مرتبط بالمنتج.
7. روابط صور من بنوك الصور — صور عامة بدل لقطات شاشة فعلية للمنتج.
8. ظلال ثقيلة فوق تصميم مسطّح — يصطدم انعكاس «يجب أن يلفت النظر» بصرعة «الـ flat» فيخرج عمق بصري متناقض.

أي افتراض من هؤلاء بمفرده ليس خطأً. المشكلة أن وجود الثمانية في نفس الصفحة يخلق بصمة يعرفها أي شخص لأول نظرة. واحد منها يمر، أربعة منها في نفس above-the-fold يُمكِّنانك من تخمين الأداة التي ولّدت الكود.

## لماذا لا تكفي التعليمات في الـ prompt

ردّة الفعل الأولى لأي فريق هي إضافة تعليمات إلى الـ prompt: «لا تستخدم التدرّج الافتراضي»، «اختر خط عرض حقيقيًا»، «لا تضع ثلاث بطاقات متطابقة». ينجح هذا في رسالة واحدة. ثم تخفّ التعليمات في الرسالة التالية، يتضخّم الـ context window، وتعود البصمة. التوجيه بالـ prompt احتمالي بطبيعته، ويذوب مع طول المحادثة.

المطلوب أرضية حتمية — فحص يعمل بعد أن يكتب النموذج، دون LLM في الحلقة. هذه هي الفجوة التي يسدّها ux-skill. يضيّق المُوصي خيارات النموذج من الأمام، ويوقف الـ linter ما يفلت من الافتراضات من الخلف.

### لا تردّ على الاحتمالي باحتمالي آخر

تتكرّر فكرة «نضع LLM ثانٍ يقيّم ناتج الأول». لكن التقييم بنموذج لغوي يحمل نفس التشتّت الذي يحمله التوليد بنموذج لغوي: يتأثر بصياغة prompt التقييم، وبأمثلة الـ few-shot، وبإصدار النموذج اليوم. ما نحتاجه في الـ CI طبقة تعطي نفس الحكم في كل مرة. الحتمية هي الميزة الوحيدة للـ Regex، وهي كافية تمامًا هنا.

## 145 قاعدة Regex، بلا LLM، داخل الـ CI

يفحص الـ linter كل ملف من `*.tsx`، `*.jsx`، `*.vue`، `*.svelte`، `*.astro`، `*.css`، `*.scss`، `*.html`. يطبّق 145 تعبيرًا نمطيًا مع الـ flags `i` و`m`. يُرجِع JSON يضم معرّف القاعدة، درجة الخطورة، الملف، السطر، العمود، مقتطفًا، والإصلاح المقترح.

    # Lint محلي، البوابة الافتراضية على high+critical
    $ uxskill lint
    [OK] Scanned 142 files in 412ms · 0 findings at threshold high

    # مجلّد فرعي + JSON
    $ uxskill lint apps/web/src --json | jq '.summary'
    {
      "critical": 0,
      "high": 4,
      "medium": 11,
      "low": 3,
      "total": 18
    }

صفر استدعاءات LLM. متوسط فحص مستودع Next.js يضم 200 ملف هو 380 مللي ثانية باردًا و90 مللي ثانية ساخنًا. الوصف الكامل للقواعد متوفر في دليل Regex linter.

## قبل/بعد على hero حقيقي

فيما يلي كتلة hero مبسّطة من قالب Next.js افتراضي تسقط في ثلاث قواعد، يليها بديل يُعيد كتابتها يخرج بـ exit 0. نفس نية التحويل، بصمة مختلفة.

    // قبل — 3 نتائج high
    <section className="bg-gradient-to-br
      from-purple-500 via-violet-500
      to-blue-500 py-32">
      <h1 className="font-['Inter']
        text-7xl leading-none">
        Build something amazing.
      </h1>
      <div className="grid grid-cols-3 gap-6">
        <Card icon="Zap" title="Fast" />
        <Card icon="Shield" title="Safe" />
        <Card icon="Heart" title="Loved" />
      </div>
    </section>

    // بعد — 0 نتائج
    <section className="bg-stone-50 py-28">
      <h1 className="font-['Fraunces']
        text-6xl leading-[1.04]
        tracking-tight">
        The routing layer your TMS
        never actually shipped.
      </h1>
      <div className="grid grid-cols-12 gap-6 mt-16">
        <Card className="col-span-7"
          title="Freight consolidation" />
        <Card className="col-span-5"
          title="Carrier ranking" />
      </div>
    </section>

في الـ«قبل» تنطلق ثلاث قواعد: Inter في `text-7xl`، تدرّج الذكاء الاصطناعي القياسي، وشبكة البطاقات الثلاث المتطابقة. في الـ«بعد» يقترن Fraunces (عرض) مع Inter (نصّ)، تعتمد سطحًا مسطّحًا، وتنتقل إلى شبكة غير متناظرة 7 و5. نفس النية، البصمة اختفت.

> المُوصي يرفع الأرضية. الـ linter يضع السقف. كلاهما ضروري.

## كيف تثبت نظام تصميم حقيقي على Claude Code

Claude Code هو المكان الأصلي لـ ux-skill. التثبيت من سوق الإضافات يتم في سطرين:

    # Claude Code plugin marketplace
    $ /plugin marketplace add Laith0003/ux-skill
    $ /plugin install ux@ux-skill

بعد التثبيت تُسجَّل 22 أمر slash في جلسة Claude Code. الأمر `/ux-discover` يجمع موجزًا من 10 حقول عبر أسئلة منظّمة، و`/ux-recommend` يشغّل خمس عمليات بحث متوازية (الصناعة والأسلوب واللوحة اللونية والخطوط والحركة)، ثم `/ux-persist save` يكتب `MASTER.md` و`tokens.css` و`manifest.json` في جذر المستودع. ما أن تُكتب هذه الملفات حتى يستند Claude Code إليها في كل جلسة لاحقة أثناء الكتابة.

على Cursor الدمج هو `.cursorrules` + خادم MCP عبر `uxskill init --target cursor`. على Windsurf هو `.windsurfrules` + MCP عبر `uxskill init --target windsurf`. على GitHub Copilot، يولِّد ux-skill ملف `.github/copilot-instructions.md` ويربط الـ linter على القرص عبر `uxskill init --target copilot`.

## ثلاثة مسارات للتثبيت، محرّك واحد

نفس حزمة Python تصل إلى الـ 17 IDE في مصفوفة التوافق. اختر المسار الأقرب إلى محرّرك:

المحرّر | المسار | الأمر
--- | --- | ---
Claude Code | السوق | `/plugin install ux@ux-skill`
Cursor | `.cursorrules` + MCP | `uxskill init --target cursor`
Windsurf | `.windsurfrules` + MCP | `uxskill init --target windsurf`
GitHub Copilot | `copilot-instructions.md` | `uxskill init --target copilot`
Cline / Continue | خادم MCP | `uxskill mcp-config --target cline`
JetBrains AI Assistant | `.junie/guidelines.md` | `uxskill init --target jetbrains`
Zed | MCP stdio | `uxskill init --target zed`
Codex CLI / Aider | CLI مباشر | `pip install uxskill`

تحت كل مسار: 1٬182 مدخلًا في الكتالوج، 145 قاعدة، 160 مواصفة علامة تجارية، 22 أمرًا، و75 اختبارًا أخضر في كل إصدار.

نطاق صريح

#### القواعد تمسك بالبنية، لا بالذوق.

لن يلتقط الـ linter يومًا «هذا القسم إيقاعه سيئ» أو «هذه الجملة تبدو باردة». هذه مهمة الإنسان أو نموذج لغوي في مراجعة لاحقة. أما البصمات التي يمكن وصفها برموز نصّية أو أنماط أو أشكال، فالـ Regex يلتقطها بثبات — وهذه تشكّل معظم افتراضات الذكاء الاصطناعي، لأن النموذج يعود إلى نفس الإنتاج كل مرة.

اخترنا عن قصد ألّا نشغّل قاضي LLM في الـ CI. إن كان المقياس «هل يبدو من صنع مصمّم؟» فهذه مراجعة كود، لا lint. يوفّر ux-skill أمر `ux critique` لتلك المرحلة، لكنه يعمل عند الطلب من المحرّر، لا من الـ CI.

## قراءات ذات صلة

- الـ 35 بصمة تصميم تصدّرها كل أداة ذكاء اصطناعي افتراضيًا
- Regex linter للبرمجة بالذكاء الاصطناعي — 145 قاعدة في الـ CI
- ترتيب أدوات مكافحة slop لـ Claude Code بصراحة
- إضافة التصميم لـ Cursor — دليل التثبيت
- README (النسخة العربية)
- صفحة التثبيت / إعداد MCP

التثبيت

## 17 محرّرًا. محرّك واحد. 145 قاعدة.

المُوصي والـ linter وخادم MCP والـ 22 أمرًا والـ 160 مواصفة علامة و1٬182 مدخلًا في الكتالوج تُوزَّع معًا. الـ linter يعمل تحت الثانية، والباقي عند الطلب. رخصة MIT، بلا أي قياسات عن بُعد، وبلا حساب.

$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill
— or —
$ pip install uxskill
— or —
$ npx uxskill@alpha init

## قراءات ذات صلة

- الـ 35 بصمة تصميم
- Regex linter — 145 قاعدة
- ترتيب أدوات مكافحة slop
- إضافة Cursor