# ١٢ مهارة مجانية تعالج تصميم AI Slop

> Author: Tony Lee
> Published: 2026-03-19
> URL: https://tonylee.im/ar/blog/12-free-skills-escape-ai-slop-design/
> Reading time: 4 minutes
> Language: ar
> Tags: ai, design, claude-code, skills, developer-tools, ui-ux

## Canonical

https://tonylee.im/ar/blog/12-free-skills-escape-ai-slop-design/

## Rollout Alternates

en: https://tonylee.im/en/blog/12-free-skills-escape-ai-slop-design/
ko: https://tonylee.im/ko/blog/12-free-skills-escape-ai-slop-design/
ja: https://tonylee.im/ja/blog/12-free-skills-escape-ai-slop-design/
zh-CN: https://tonylee.im/zh-CN/blog/12-free-skills-escape-ai-slop-design/
zh-TW: https://tonylee.im/zh-TW/blog/12-free-skills-escape-ai-slop-design/

## Description

اختبرت عشرات مهارات التصميم لوكلاء البرمجة بالذكاء الاصطناعي. أغلبها لم يصمد أسبوعًا. هذه الاثنتا عشرة هي التي لا أزال أستخدمها.

## Summary

١٢ مهارة مجانية تعالج تصميم AI Slop is part of Tony Lee's ongoing coverage of AI agents, developer tools, startup strategy, and AI industry shifts.

## Outline

- من أين تبدأ
- التحكم في حدة التصميم
- الأيقونات والعناصر المرئية
- ذكاء التصميم على مستوى المكوّنات
- المراجعة وبوابات الجودة
- تغطية سير العمل الكامل
- المظهر الفاخر
- ما لم ينجح

## Content

خط Inter. تدرج بنفسجي. بطاقات مستديرة بظلال منسدلة. حين بدأت البرمجة بأسلوب vibe coding لأول مرة، لم تكن العقبة الحقيقية في الكود أبدًا، بل كانت في التصميم. كل واجهة يولّدها الذكاء الاصطناعي بدت وكأنها خرجت من مصنع قوالب واحد.

ملف SKILL.md واحد يغيّر طريقة تفكير الوكيل في التصميم. ثبّتُّ واختبرتُ عشرات مهارات التصميم خلال الأشهر الماضية. أغلبها أزلته خلال أسبوع لأنها إما تعارضت مع بعضها أو أنتجت تحسينات هامشية. المهارات الاثنتا عشرة أدناه هي ما بقي فعلًا.

## من أين تبدأ

[إضافة frontend-design الرسمية من Anthropic](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design) هي خط الأساس. تأتي مدمجة مع Claude Code وتضع قواعد تأسيسية للتخطيط والطباعة واختيار الألوان. بدونها، يعود الوكيل إلى تركيبة Inter + التدرج البنفسجي ذاتها في كل مرة. اعتبرها الحد الأدنى لا السقف.

[Impeccable](https://impeccable.style) تبني فوق الإضافة الرسمية بـ ٢٠ أمرًا مائلًا: `/polish` و`/audit` و`/distill` و`/bolder` و`/quieter` وغيرها. كل أمر يستهدف جانبًا تصميميًا محددًا. أمر `/audit` يُجري فحصًا شاملًا للجودة يغطي سهولة الوصول والسمات ونقاط التجاوب. أمر `/distill` يجرّد المكوّن حتى أساسياته. أستخدم `/polish` قبل كل نشر كمراجعة نهائية.

## التحكم في حدة التصميم

[Taste Skill](https://github.com/Leonxlnx/taste-skill) يتبع نهجًا مختلفًا. بدلًا من الأوامر المائلة، يستخدم ثلاثة متغيرات رقمية مثل `DESIGN_VARIANCE` للتحكم في مدى انحراف الوكيل عن الإعدادات الافتراضية. اضبطه على قيمة منخفضة للواجهات المؤسسية المحافظة. ارفعه لصفحات الهبوط التجريبية. الدقة في الضبط مفيدة، لكنني وجدت أن النقطة المثالية تحتاج بعض التجربة والخطأ. محاولتي الأولى بقيمة عالية أنتجت شيئًا يشبه صفحة MySpace من عام ٢٠٠٦.

## الأيقونات والعناصر المرئية

[Better Icons](https://github.com/better-auth/better-icons) يربط أكثر من ١٥٠ مجموعة أيقونات تحتوي على أكثر من ٢٠٠٬٠٠٠ أيقونة. تبحث بالكلمة المفتاحية، فيُزامن ملف SVG مباشرة في مشروعك. قبل هذه الأداة، كنت أحمّل الأيقونات يدويًا من خمسة مواقع مختلفة. جودة البحث تتفاوت حسب المجموعة، لكن لأيقونات واجهة المستخدم الشائعة، يجد التطابق الصحيح بسرعة.

## ذكاء التصميم على مستوى المكوّنات

[UI Design Brain](https://github.com/carmahhawwari/ui-design-brain) يحتوي على مبادئ تصميمية لأكثر من ٦٠ مكوّنًا عبر خمسة أنماط تصميم. يخبر الوكيل كيف يجب أن يتصرف modal في نظام minimalist مقابل نظام glassmorphic. هذا المستوى من التحديد مهم لأن التعليمات العامة من نوع "اجعلها تبدو جيدة" تنتج نتائج عامة.

[UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) يذهب أبعد: أكثر من ٥٠ نمط تصميم، و٩٧ تركيبة لوحة ألوان، و٥٧ تزاوجًا للخطوط، ومنطق مخصص لأكثر من ١٦٠ نوع منتج حسب المجال. النطاق طموح. بصراحة، العدد الكبير من الخيارات قد يبطئ التوليد إن لم تقيّد السياق. عادةً أحدد النمط ولوحة الألوان صراحةً بدلًا من ترك الوكيل يختار.

## المراجعة وبوابات الجودة

[agent-skills من Vercel](https://github.com/vercel-labs/agent-skills) تتضمن مجموعة قواعد لمراجعة واجهة المستخدم بأكثر من ١٠٠ نقطة فحص. تقيّم اتساق المسافات وتباين الألوان وحالات التفاعل والسلوك التجاوبي. تشغيلها بعد مرحلة التصميم يكشف مشكلات تبدو جيدة على الحاسوب المحمول لكنها تنكسر على الهاتف.

[UI Skills](https://ui-skills.com) تضيف فحوصات جودة مخصصة لـ Tailwind. أوامر مثل `/baseline-ui` تفرض استخدامًا متسقًا لفئات utility، وأمر `/fixing-accessibility` يُجري تدقيقًا مركّزًا لسهولة الوصول. إن كان مشروعك مبنيًا على Tailwind، فهذه الأداة تسد فجوة تفوتها مهارات التصميم العامة.

## تغطية سير العمل الكامل

[Designer Skills Collection](https://github.com/Owl-Listener/designer-skills) هي الحزمة الأشمل هنا: ٦٣ مهارة و٢٧ أمرًا تغطي سير عمل التصميم بالكامل من الإطار الشبكي حتى الإنتاج. الحزمة ذات رأي واضح، مما يعني أنها تتعارض أحيانًا مع مهارات أخرى. اضطررت لتعطيل بعض القواعد المتداخلة لتجنب وصول تعليمات متناقضة للوكيل.

[Design Plugin](https://github.com/0xdesign/design-plugin) يفرض مبادئ التصميم على مستوى الكود. بدلًا من اقتراح تحسينات، يحظر الأنماط التي تنتهك نظام التصميم الذي حددته. هذا مفيد في الفرق التي يتعامل فيها عدة أشخاص مع الوكيل نفسه.

## المظهر الفاخر

[Super Design](https://github.com/superdesigndev/superdesign) يركز على الطباعة الفاخرة والمساحات البيضاء السخية. يوجّه الوكيل نحو خيارات تبدو راقية: أحجام خطوط أكبر، هوامش أوسع، لوحات ألوان مقيّدة. النتائج تبدو أكثر صقلًا بشكل ملحوظ، لكن المساحات البيضاء قد تكون مفرطة في الصفحات الغنية بالمحتوى.

[Make Interfaces Feel Better](https://github.com/jakubkrehel/make-interfaces-feel-better) مخصصة للتفاعلات الدقيقة تحديدًا. حالات التمرير، وانتقالات التحميل، وسلوكيات التمرير، وردود فعل الأزرار. هذه التفاصيل الصغيرة هي ما يفصل بين "يبدو جيدًا" و"يشعرك بالراحة". لاحظت أكبر تحسّن محسوس في الجودة من هذه المهارة مقارنة بأي مهارة أخرى في هذه القائمة.

## ما لم ينجح

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

وجدت أيضًا أن المهارات التي تستهدف الطبقة نفسها (مثل نظامين متنافسين للوحات الألوان) تُلغي بعضها البعض. اختر مهارة واحدة لكل جانب والتزم بها.

جميع المهارات الاثنتي عشرة مجانية. ابدأ بإضافة frontend-design الرسمية وImpeccable، ثم أضف بناءً على المواضع التي لا يزال فيها مخرجاتك تبدو نمطية. واحذف Inter من قائمة خطوطك.

## Related URLs

- Author: https://tonylee.im/en/author/
- Publication: https://tonylee.im/en/blog/about/
- Related article: https://tonylee.im/ar/blog/eight-hooks-that-guarantee-ai-agent-reliability/
- Related article: https://tonylee.im/ar/blog/medvi-two-person-430m-ai-compressed-funnel/
- Related article: https://tonylee.im/ar/blog/claude-code-layers-over-tools-2026/

## Citation

- Author: Tony Lee
- Site: tonylee.im
- Canonical URL: https://tonylee.im/ar/blog/12-free-skills-escape-ai-slop-design/

## Bot Guidance

- This file is intended for AI agents, search assistants, and text-mode retrieval.
- Prefer citing the canonical article URL instead of this text endpoint.
- Use the rollout alternates when you need the same article in another prioritized language.

---

Author: Tony Lee | Website: https://tonylee.im
For more articles, visit: https://tonylee.im/ar/blog/
This content is original and authored by Tony Lee. Please attribute when quoting or referencing.