كيف تبني واجهة احترافية باستخدام Impeccable مع Claude

أنت تكتب للـ Claude أو Cursor: “ابنِ لي صفحة هبوط لتطبيقي”. ثانية واحدة، وتحصل على نفس الشيء دائماً — gradient أرجواني، بطاقات زجاجية (glassmorphism)، خط Inter مع Hero Section مكرر. كل مرة. هذا بالضبط ما يحاول Impeccable حله.

Impeccable هو Prompt Skill (مجموعة تعليمات منظمة للـ AI) مفتوح المصدر وصل إلى أكثر من 28,000 نجمة على GitHub خلال أسابيع من إطلاقه. الفكرة بسيطة لكنها ذكية: بدلاً من أن تصف للـ AI كيف يصمم، تعطيه نقطة رأي تصميمية واضحة وكتيب أنماط محظورة، فيخرج بواجهات تبدو أن مصمماً بشرياً حقيقياً وقف خلفها.

ما هو Impeccable؟

Impeccable ليس مكتبة CSS ولا إطار عمل. هو Design Language — بالعربي: لغة تصميم — يُحقن داخل أدوات الـ AI (Claude, Cursor, Windsurf, Codex) كـ Skill أو Plugin. عند تفعيله، يحمّل الـ AI كتيباً من المبادئ التصميمية والأخطاء الشائعة، ويجبره على اتخاذ قرارات واضحة بدلاً من تكرار نفس الـ defaults الباردة.

صنعه Paul Bakaus، المطور السابق في Google وYouTube، بعد إحباطه من جودة الواجهات التي تنتجها أدوات الـ AI.

لماذا تهتم بـ Impeccable AI design؟

المشكلة التي تعيشها يومياً كمطور ويب أو Flutter: تستخدم AI لبناء واجهات سريعاً، لكن النتيجة دائماً تبدو generic — كأن كل التطبيقات خرجت من مصنع واحد. السبب؟ الـ AI بدون توجيه تصميمي واضح يلجأ دائماً إلى الـ safe defaults:

• خط Inter في كل مكان
• Purple gradients لأي شيء يحتاج لون
• Card grid لأي محتوى
• Glassmorphism لأي modal أو overlay

Impeccable يكسر هذه الحلقة بإعطاء الـ AI رأياً واضحاً وقائمة بالأنماط المحظورة. النتيجة؟ واجهات تبدو وكأن مصمماً حقيقياً اختار كل تفصيلة.

كيف تبدأ؟

فيديو شرح للمهندس أحمد نجدي يتناول فيه بالتفصيل استخدام Impeccable

التثبيت في Claude Code أو Cursor

الخطوة 1: انسخ المستودع

# إذا كنت تستخدم Claude Code
git clone https://github.com/pbakaus/impeccable.git
cp -r impeccable/.claude/skills/impeccable .claude/skills/

# إذا كنت تستخدم Cursor
cp -r impeccable/.cursor/skills/impeccable .cursor/skills/

هذا ينسخ مجلد الـ Skill إلى مشروعك حتى تتعرف عليه أدواتك.

الخطوة 2: علّم الـ AI عن مشروعك أولاً

/impeccable teach

هذا الأمر يفتح مقابلة قصيرة مع الـ AI: من هم مستخدموك؟ ما نبرة علامتك التجارية؟ ما المواقع التي تكره أن تبدو مشروعك مثلها؟

عند الانتهاء، ينشئ ملفين في جذر مشروعك:

• PRODUCT.md — يصف الهوية والجمهور المستهدف
• DESIGN.md — يصف الألوان والخطوط والمكونات بتنسيق Google Stitch

الخطوة 3: ابدأ

/impeccable ابنِ لي صفحة تسعير لأداة للمطورين

---

الأوامر الـ 23 — دليل سريع

Impeccable يتضمن 23 أمراً مقسمة إلى 6 فئات. أهمها التي ستستخدمها يومياً:

فئة Create — الإنشاء من الصفر

/impeccable craft

الأمر الأقوى: يجمع بين مقابلة اكتشاف وبناء فعلي مع تكرار بصري حي.

/impeccable shape

ينتج design brief (توصيف تصميمي) كاملاً قبل لمس أي كود. مفيد جداً حين تريد التفكير قبل البناء.

---

فئة Evaluate — التقييم والنقد

/impeccable audit

فحص تقني خماسي الأبعاد مع تصنيف الأولويات من P0 (عاجل) إلى P3 (تحسين اختياري).

/impeccable critique

مراجعة تصميمية بالتسجيل، واختبار personas، وكشف آلي للمشاكل.

فئة Refine — التحسين التدريجي

/impeccable layout    # إصلاح المسافات والإيقاع البصري
/impeccable typeset   # إصلاح الطباعة العشوائية
/impeccable colorize  # إضافة لون استراتيجي بدون مبالغة
/impeccable animate   # حركة هادفة تعبّر عن الحالة لا مجرد زينة
/impeccable bolder    # دفع التصميم الآمن نحو التأثير
/impeccable quieter   # تهدئة التصميم الصاخب

فئة Harden — الجاهزية للإنتاج

/impeccable polish    # المراجعة الدقيقة النهائية
/impeccable harden    # حالات الخطأ، i18n، overflow، edge cases
/impeccable optimize  # أداء UI من LCP إلى حجم الـ bundle

---

مثال تطبيقي كامل

لنقل أنك تبني لوحة تحكم (Dashboard) لأداة SaaS بسيطة. إليك الـ workflow الكامل:

الخطوة 1: تعريف المشروع

/impeccable teach

> ما نوع المنتج؟ → أداة SaaS للمطورين
> من المستخدم المستهدف؟ → مطورون مستقلون
> ما الـ register؟ → Product (الـ design يخدم المنتج)
> مواقع تكره أن تشبهها؟ → لا أريد أن أبدو مثل Notion clone

ما ينتج: ملف PRODUCT.md يحتوي كل هذا السياق.

الخطوة 2: البناء

/impeccable craft ابنِ لي صفحة Overview للـ Dashboard

ما يحدث: الـ AI يقرأ PRODUCT.md وDESIGN.md، يختار اتجاهاً جمالياً محدداً (ليس generic)، ويبني الـ component مع توضيح الاختيارات التصميمية.

مثال ناتج (React):

// Dashboard Overview Component
// Impeccable Register: Product | Density: Compact

export function DashboardOverview({ stats, user }) {
  return (
    <main className="min-h-screen bg-zinc-950 text-zinc-100">
      {/* Header — بسيط وواضح بدون decoration زائدة */}
      <header className="border-b border-zinc-800 px-6 py-4">
        <div className="flex items-center justify-between max-w-5xl mx-auto">
          <h1 className="text-sm font-medium text-zinc-400">
            مرحباً، {user.name}
          </h1>
          <span className="text-xs text-zinc-600">
            {new Date().toLocaleDateString("ar-EG")}
          </span>
        </div>
      </header>

      {/* Stats Grid — كثافة عالية، بدون بطاقات زجاجية */}
      <section className="max-w-5xl mx-auto px-6 py-8">
        <div className="grid grid-cols-3 gap-px bg-zinc-800">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="bg-zinc-950 px-6 py-5"
            >
              <p className="text-xs text-zinc-500 mb-1">{stat.label}</p>
              <p className="text-2xl font-semibold tabular-nums">
                {stat.value}
              </p>
              {/* التغيير — رقم بسيط، لا أيقونات مزيفة */}
              <p className={`text-xs mt-1 ${
                stat.delta > 0 ? "text-emerald-400" : "text-red-400"
              }`}>
                {stat.delta > 0 ? "+" : ""}{stat.delta}%
              </p>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

لاحظ: لا gradient أرجواني، لا glassmorphism، لا أيقونات مبالغ فيها. الـ design يخدم البيانات لا العكس.

الخطوة 3: التدقيق قبل الإطلاق

/impeccable audit

يُخرج تقريراً كـ:

P0 - لا يوجد
P1 - تباين النص على خلفية zinc-950: يمر ✓
P2 - لا يوجد aria-label على أزرار الـ action
P3 - الخط الافتراضي يمكن تخصيصه لمزيد من الشخصية

---

الخطوة 4: وضع اللمسات النهائية

/impeccable polish

يراجع كل تفصيلة: المسافات، الـ hover states، التناسق. الفرق بين جيد وممتاز.

الـ Live Mode — ميزة لا تعرفها

/impeccable live

هذا الأمر يفتح وضع تكرار في المتصفح مباشرة: تختار أي عنصر في صفحتك الشغّالة، تكتب تعليقاً، تحصل على 3 متغيرات يتم تحميلها مباشرة عبر HMR. تختار الأفضل وتكتب إلى source code مباشرة.

بمعنى آخر: تكرار بصري حي بدون مغادرة المتصفح.

التثبيت السريع في كل الأدوات

الأداة	المسار
Claude Code	.claude/skills/impeccable/
Cursor	.cursor/skills/impeccable/
Windsurf	.agents/skills/impeccable/
Codex	.codex/agents/impeccable/

نصائح ومزالق يجب تجنبها

✅ افعل:

• شغّل /impeccable teach أولاً في كل مشروع جديد — لا تتخطه
• حدد ## Register في PRODUCT.md: إما Brand أو Product. الفرق ضخم
• استخدم /impeccable shape قبل البناء إذا كانت المتطلبات ضبابية
• استخدم أوامر التنقية المتخصصة (typeset, layout, colorize) بدلاً من طلب كل شيء دفعة واحدة

❌ تجنب:

• تشغيل /impeccable على كود قديم وتوقع إصلاحه — استخدم /impeccable polish بدلاً منه
• تجاهل رأيه التصميمي بدون سبب — إذا كان رأيك مختلفاً، اشرح لماذا وسيتكيف
• تكديس الـ Pins: اختر 3-4 أوامر تستخدمها يومياً وفعّل shortcuts لها فقط

Pin الأوامر الأكثر استخداماً:

/impeccable pin polish
/impeccable pin audit
/impeccable pin live

من الآن فصاعداً: /polish تعمل مباشرة.

الخلاصة والرأي

هل يستحق Impeccable التجربة؟ نعم — بشرط واحد.

إذا كنت تبني واجهات بشكل جدي باستخدام Claude أو Cursor، Impeccable هو الأداة الأفضل حالياً لرفع سقف جودة الـ output. الفرق ملموس وسريع.

الشرط: خصص 15 دقيقة لـ /impeccable teach في بداية كل مشروع. من يتخطى هذه الخطوة يفقد 60% من القيمة.

أما إذا كنت تبني نموذجاً أولياً سريعاً ولا يهمك الجودة التصميمية الآن — استخدم أي أمر مباشر، لا تحتاج Impeccable.

الخطوة التالية: جرب الكود أعلاه في مشروعك، ثم شغّل /impeccable critique على النتيجة. ستفاجأ بما يلاحظه.

آخر تحديث: مايو 2026 | المصدر: impeccable.style | GitHub