Impeccable: الحل مفتوح المصدر لـ AI Design Slop — 77.8 ألف نجمة ومرخّص Apache

🔗 رابط المشروع على GitHub: https://github.com/pbakaus/impeccable

🌐 الموقع الرسمي: impeccable.style

📘 توثيق الـ Detector: impeccable.style/docs/detector

🎨 Case Study: impeccable.style/cases/neo-mirai — قبل وبعد

---

🔄 آخر تحديث: المقال اتحدّث مع النسخة الجديدة من Impeccable — الـ repo قفز من 75.4k إلى 77.8k نجمة في يومين، وأضيفت تكاملات VS Code وGrok Build، وخلاصة الـ Rust engine المستقل بدون Node.

لو انت بتعمل Vibe Coding أو بتبني SaaS بـ Claude Code أو Cursor أو Codex، لازم تكون لاحظت ظاهرة “AI Design Slop”: كل الواجهات اللي بتطلع من AI بتشبه بعض. نفس خط Inter، نفس الـ purple-to-blue gradients، نفس الـ cards نيستد في cards، نفس الـ gray text على خلفيات ملونة.

السبب علمي: كل الـ models اتدرّبت على نفس SaaS templates. فطلع كل مطور بـ AI بينتج نفس المنتج شكلياً.

Impeccable من Paul Bakaus (ex-Google Developer Advocate) هو الحل المفتوح المصدر لده. الـ repo اتجاوز 77.8 ألف نجمة و4.6 ألف fork. مرخّص Apache 2.0.

إيه هو Impeccable بالظبط؟

Impeccable هو design language كامل بيحوّل الـ AI coding harness بتاعك (سواء Claude Code أو Cursor أو Codex أو غيرهم) إلى مصمم أفضل. فيه ثلاث طبقات:

• Skill واحد مع 24 أمر (polish، audit، critique، distill…)
• 60 قاعدة كشف حتمية (deterministic detector) تشتغل بدون LLM وبدون API key
• Live browser iteration mode — تجرّب variants مباشرة في المتصفح

الفلسفة: بدلاً من ما تنتظر الـ AI يخمّن تصميمك، تدي له قاموس تصميمي مشترك يعرف يميّز بيه الشكل الاحترافي من الـ slop.

⭐ الجديد في النسخة الحالية

1) VS Code Extension رسمي

Impeccable أطلق extension رسمي على Visual Studio Marketplace لمستخدمي GitHub Copilot:

code --install-extension renaissance-geek.impeccable

بيحتاج VS Code 1.109.3+ وCopilot Chat. افتح الـ Chat في Agent mode وجرّب /impeccable polish.

2) Grok Build Plugin

grok plugin install pbakaus/impeccable#plugin --trust

تثبيت أصلي لـ Grok Build من xAI مع تكامل كامل للـ hook system.

3) Pin Shortcuts

الأوامر اللي بتستخدمها كتير بقيت تقدر تثبّتها كـ shortcut مستقل:

/impeccable pin audit    # يخلق /audit كـ shortcut
/audit                   # ويشتغل مباشرة

4) Rust Engine Standalone — بدون Node

الـ skill مش محتاج Node runtime. فيه Rust binary standalone يُحمَّل مرة واحدة في ~/.impeccable/bin/ ويخدم كل الـ hooks والـ commands. ده بيخلي الـ overhead تقريباً صفر وبيشتغل أسرع من JavaScript بكتير.

5) Case Study — Neo Mirai

Impeccable نشروا case study حقيقي لمشروع “Neo Mirai” على impeccable.style/cases/neo-mirai — before/after screenshots كاملة. تقدر تشوف الفرق بعينك.

6) Browser Extension

فيه browser extension جديد يفحص production sites مباشرة — بديل لـ npx impeccable detect URL لما تحب تفحص موقع العميل بسرعة.

7) Inline Waivers

بدل ما تضيف استثناء في config للملف كله، تقدر تحط comment في الكود نفسه:

<!-- impeccable-disable overused-font: exported brand doc -->
<!-- impeccable-disable-line -->
<!-- impeccable-disable-next-line -->

البداية — Anthropic frontend-design وبعدين؟

الـ skill الأصلي كان frontend-design من Anthropic، وكان أول skill تصميم مستخدم على نطاق واسع. Impeccable بدأ من هناك، بس أضاف:

• Setup flow واحد: الأمر /impeccable init بيعمل سكان للمشروع، يسأل أسئلة عن durable product truth (الجمهور، الهدف، الصوت، الـ constraints) ويكتبها في PRODUCT.md
• 24 أمر مشترك كـ vocabulary تتكلم بيه مع الـ AI
• Detector بـ 60 قاعدة ترصد الأخطاء بدون LLM

الـ 24 أمر — إيه الموجود؟

كل الأوامر بتشتغل من خلال /impeccable. دي أهم المجموعات:

🏗️ البناء والتخطيط

• /impeccable craft — الـ flow الكامل: shape → build → iterate
• /impeccable init — إعداد مرة واحدة: يكتب PRODUCT.md
• /impeccable shape — خطط للـ UX/UI قبل كتابة الكود
• /impeccable document — يولّد DESIGN.md من كود المشروع الحالي
• /impeccable extract — يستخرج components قابلة لإعادة الاستخدام

🔍 المراجعة

• /impeccable critique — مراجعة UX كاملة (hierarchy، clarity، emotional resonance)
• /impeccable audit — مراجعة فنية (a11y، performance، responsive)
• /impeccable polish — تمرير أخير وجاهزية للنشر

🎨 التعديل الموجّه

• /impeccable bolder — ضخّم تصميم مُمل
• /impeccable quieter — هدّي تصميم مبالغ فيه
• /impeccable distill — جرّد للجوهر
• /impeccable animate — ضيف motion مقصود
• /impeccable colorize — ضيف لون استراتيجي
• /impeccable typeset — اضبط الخطوط والـ hierarchy
• /impeccable layout — صلّح الـ spacing والـ visual rhythm
• /impeccable delight — ضيف لحظات متعة
• /impeccable overdrive — effects استثنائية تقنياً

🛡️ التجهيز للإنتاج

• /impeccable harden — error handling، i18n، text overflow، edge cases
• /impeccable onboard — first-run flows، empty states
• /impeccable adapt — تكييف للأجهزة المختلفة
• /impeccable optimize — تحسين الأداء
• /impeccable clarify — تحسين UX copy

🖥️ التجريب المباشر

• /impeccable live — Visual variant mode: جرّب في المتصفح
• /impeccable generate — ولّد variants لعنصر معين في المتصفح

🚨 الـ Anti-Patterns اللي بيرصدها (60 قاعدة)

• ❌ خطوط overused (Arial، Inter، system defaults)
• ❌ Gray text على خلفيات ملونة
• ❌ Pure black/gray بدون tint
• ❌ Cards نيستد في cards (الـ nested card syndrome)
• ❌ Side-tab borders
• ❌ Purple-to-blue gradients المكررة
• ❌ Bounce/elastic easing (بتحس قديمة)
• ❌ Dark glows
• ❌ Rounded-square icon tiles فوق كل heading
• ❌ Line length طويل جداً
• ❌ Padding ضيق
• ❌ Touch targets صغيرة
• ❌ Skipped headings

Quickstart في خطوتين

# 1. ثبّت من جذر المشروع
npx impeccable install

# 2. اعمل init داخل الـ AI harness
/impeccable init

# 3. للتحديث لاحقاً
npx impeccable update

الـ installer بيكتشف automatically أي harnesses مركّبة عندك (~/.claude, ~/.codex, ~/.cursor, ~/.grok, ~/.hermes, ~/.veto…) ويعرض عليك تختار.

الـ Harnesses المدعومة — 18 أداة

• Cursor، Claude Code، GitHub Copilot، Codex CLI
• Gemini CLI، Google Antigravity
• Grok Build (xAI)، Mistral Vibe، DeepSeek Harness
• Hermes Agent (Nous Research)، OpenCode، Pi
• Kiro، Trae (International + China)، Rovo Dev (Atlassian)، Qoder
• Veto، VS Code (via Copilot Marketplace extension)

مش هتلاقي أداة AI جادة مش مدعومة.

الـ Design Hook — الحماية اللحظية

على Claude Code وCursor وCodex وGitHub Copilot وGrok Build، لما تثبّت Impeccable بيضيف hook تلقائي يشتغل كل ما الـ agent يعدّل ملف UI. الـ hook يشغّل الـ detector ويرجع الـ findings للـ agent قبل ما يستمر.

• Cursor: يبلوك الكتابة السيئة قبل ما تطبّق
• Claude Code & Copilot: يعرض الـ findings بعد التعديل + تمريرة أعمق على Stop
• Codex: يحتاج موافقة project trust مرة واحدة
• Grok Build: يفحص بعد التعديل ويعرض على Stop (محتاج /hooks-trust)

الـ CLI — بدون AI harness

تقدر تستخدم الـ detector لوحده بدون AI:

npx impeccable detect src/                   # فحص directory
npx impeccable detect index.html             # فحص ملف HTML
npx impeccable detect https://example.com    # فحص URL (محتاج Chrome)
npx impeccable detect --json .               # للـ CI
npx impeccable ignores add-file "src/legacy/**"

Exit code 0 = نظيف، 2 = فيه findings، 1 = حصل error. مثالي للـ CI pipelines.

Comp-first vs Code-first — فلسفتين

الـ init بيسألك سؤال مهم: هل تحب تعمل comp (تصميم كامل بصورة أو image) الأول وتبنيه، ولا تبني مباشرة code وتتحقق بعدين؟

• Comp-first: نتائج أجرأ، وقت أطول (محتاج image generation)
• Code-first: أسرع، أقل تعقيد

الاختيار بيُحفظ في .impeccable/config.json كـ buildPath، وفيه toggle في كل جلسة لو حبيت تغيّر. في monorepo، تقدر تضع إعدادات مختلفة لكل workspace.

سيناريو Ibrahim المباشر

• كورس Vibe Coding — الموضوع ده لازم يبقى درس كامل. الطلاب هيبنوا SaaS بـ AI، وأول حاجة هيلاحظوها إن كل الـ UIs بتشبه بعض. Impeccable هو الحل.
• faahm.com + bond — شغّل /impeccable audit على المنتجات بتاعتك. حرفياً دقايق لتحسين ملحوظ.
• مشاريع SaaS القادمة (CRM، expenses، doctors، lecture-docs) — ابدأ كل واحد بـ /impeccable init فتدخل الـ product truth مرة ويلتزم بيها كل الأدوات.
• Agency clients (DSE) — تقدر تشغّله على landing pages العملاء وتطلعلهم تقرير “60 problem detected” كـ sales artifact.
• Opencode server على Cloudflare Tunnel اللي عندك — ركّب Impeccable عليه بـ npx impeccable install --providers=opencode.

ليه ده مهم استراتيجياً؟

الـ AI design slop مشكلة مرئية ومُحرجة. أول مؤسس عربي يقدم خدمة “AI Slop Removal” (أدقق تطبيقك اللي بناه AI، أزيل الـ 60 pattern، أسلّم في 3 أيام) هيكسب market كامل. الأدوات موجودة، الـ know-how موجود، السوق مش عارف.

الزيادة من 75k إلى 77.8k نجمة في يومين = momentum حقيقي. المشروع ده مش هيبقى hype مؤقت.

📎 رابط المشروع: github.com/pbakaus/impeccable