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

من طلب يومًا من 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 في مصفوفة التوافق. اختر المسار الأقرب إلى محرّرك:

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

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

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