Impeccable: Skill للتصميم يستحق التجربة، لكنه يستهلك الكثير من الـ tokens

عندما بدأت إعادة تصميم هذا الموقع، لم أكن أريده أن يشبه أي موقع يصممه الـ AI، بخلفية كريمية وخط serif كبير وكلمة واحدة ملونة في العنوان. الـ coding agent يكتب كودًا يعمل، لكن الشكل يعود إلى العادات نفسها كل مرة. وعندما رأيت أول تصميم، شعرت أن فيه أشياء لا تبدو جيدة، ولم أستطع تحديدها.

Impeccable من الـ Skills التي أضفتها قبل أن نبدأ، وهو الذي سمى هذه الأشياء واحدًا واحدًا.

ما هو Impeccable

Skill مجاني ومفتوح المصدر، كتبه Paul Bakaus. تثبته في الـ coding agent الذي تستخدمه، ويعمل مع Claude Code وCodex وCursor وGitHub Copilot وAntigravity وغيرها.

يعطي الـ agent مفردات محددة للتصميم بدل الوصف العام. فبدل أن تقول له “اجعله بارزًا”، تكتب bolder على جزء معين، أو quieter لصفحة مزدحمة، أو polish قبل النشر. فيه 24 أمرًا، منها:

• critique: مراجعة تمنح الصفحة درجة من 40 بناء على عشر قواعد معروفة في سهولة الاستخدام، مع قائمة مرتبة بما يجب إصلاحه، من P0 (يعطل العمل) إلى P3 (تحسينات أخيرة).
• audit: فحص تقني لسهولة الوصول وسرعة الصفحة والوضعين الفاتح والداكن وشكل الصفحة على الهاتف.

ومعه كاشف فيه 62 قاعدة، يبحث عن العادات التي تكشف أن الـ AI صمم الصفحة، مثل التدرج البنفسجي وخط Inter في كل مكان والبطاقة داخل البطاقة. الكاشف لا يستخدم أي نموذج AI ولا يحتاج إلى API key، لذلك تعطيك الصفحة نفسها النتيجة نفسها في كل مرة.

كيف استخدمته في هذا الموقع

بعد كل جولة تصميم، أطلب critique على صفحة الأدوات والصفحة الرئيسية وصفحة الاختيار. وأقسم المراجعة إلى جزأين، كل جزء في agent منفصل: الأول يراجع التصميم، والثاني يشغل الكاشف ويقيس في المتصفح، حتى لا يحكم الـ agent الذي صمم على عمله بنفسه.

ارتفعت درجة صفحة الأدوات خلال خمس جولات: 22، ثم 25، ثم 28، ثم 30، وأخيرًا 35 من 40.

الدرجة تأتي من Impeccable نفسه، فهي ليست حكمًا نهائيًا على التصميم. ما أفادني هو القائمة التي تأتي معها، لأنها تحدد الخطأ بدقة. في الجولة الثانية مثلًا، قال إن أعلى الصفحة الرئيسية قريب جدًا من موقع آخر كنت متأثرًا به، وفي الجولة الرابعة اكتشف أن الضغط على اسم الأداة يفتح أحيانًا شرح النوع بدل الأداة نفسها.

ما أعجبني

يختصر عليك الكثير في تصميم المواقع والتطبيقات. الأشياء التي تشعر أنها خاطئة ولا تستطيع تسميتها، يسميها لك ويرتبها حسب أهميتها، ويمكنك أن تعطي القائمة لأي agent ليصلحها.

ما لم يعجبني

يذهب ويعود كثيرًا. كل مراجعة تقرأ ملفات وتفتح المتصفح وتلتقط صورًا وتقيس، ثم تأتي جولة إصلاح، ثم مراجعة أخرى. كل هذا يستهلك الـ tokens، ولهذا لا أنصح به لمن اشتراكه 20 دولارًا في الشهر.

ويذكرون في شرحهم أن النتيجة تكون أفضل إذا ركزت على جزء واحد بدل الصفحة كلها.

كيف تبدأ

من مجلد المشروع:

npx impeccable install

يبحث أمر التثبيت عن أدوات البرمجة الموجودة عندك، ويسألك هل تريده لهذا المشروع فقط أم لكل المشاريع. بعدها أغلق الأداة وافتحها من جديد، واكتب للـ agent (في Codex اكتب $impeccable بدل /impeccable):

/impeccable init

يقرأ الكود، ويسألك عن المنتج: لمن هو، وما الذي يجب أن يفعله، وما حدوده، ثم يكتب ملف PRODUCT.md تقرؤه كل الأوامر لاحقًا. بعد ذلك اختر جزءًا واحدًا وابدأ:

/impeccable critique the pricing cards

ويمكنك تشغيل الكاشف دون أي agent:

npx impeccable detect src/

إذا كان اشتراكك 20 دولارًا في الشهر، فابدأ بالكاشف وحده لأنه لا يستخدم أي نموذج، واترك critique والجولات الطويلة لوقت يكون فيه اشتراكك أكبر.