● مجتمع
Leonxlnx
⚡ فوري
Taste Skill
بواسطة Leonxlnx · Leonxlnx/taste-skill
تُرمّز الذوق التصميمي — الطباعة والمسافات والألوان والتكوين — حتى يتوقف Claude عن شحن واجهات مستخدم مبتذلة ويُنتج عملاً يبدو متقناً.
Taste Skill هي مجموعة صغيرة من القواعد الواضحة التي تتوقع أكثر أخطاء تصميم AI شيوعاً: خطوط عديدة جداً، نص أساسي بـ 14px على موقع تسويقي، ثلاثة ألوان تأكيد متنافسة، تكديس hero يشبه Bootstrap 4 في 2018. يعمل كخطوة مراجعة وإعادة كتابة على الواجهات المولَّدة، مُطبِّقاً قواعده وشارحاً السبب. قابل للاستخدام في أي وكيل يدعم المهارات.
لماذا تستخدمه
الميزات الأساسية
- قواعد الطباعة: المقياس والتباين والتسلسل الهرمي
- تطبيق نظام المسافات (لا مسافات 1px عشوائية)
- انضباط لوحة الألوان (لون تأكيد واحد، محايدات دلالية)
- نقد التكوين (الوزن البصري والمسافة البيضاء)
- يُبرر نفسه: يشرح لماذا يهم الإصلاح لا فقط 'افعل هذا'
- يعمل على Tailwind وCSS عادي وSwiftUI وCompose
عرض مباشر
كيف يبدو في الممارسة
جاهز
حالات الاستخدام
استخدامات عملية: Taste Skill
متى تستخدمه: المخرج الأول يبدو جيداً لكنه غير مميز.
الخطوات
-
النقد
Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ تم النسخ
→ 10–20 انتهاكاً، كل منها مُوسوم
-
إصلاح الطبقة الأولى
Apply only severity-high fixes. Don't change copy — only visual/structural.✓ تم النسخ
→ الفروق مُطبَّقة؛ الموقع لم يعد يصرخ 'مبتذل'
-
التكرار
Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ تم النسخ
→ يتقارب في مرورين
النتيجة: صفحة تُقرأ على أنها مصنوعة بعناية لا مولَّدة.
المزالق
- المهارة تفرض أسلوباً يتعارض مع العلامة التجارية — مرّر
--brand /design/brand.md لتحترم الحواجز
متى تستخدمه: قبل شحن مكوّن جديد إلى النظام.
الخطوات
-
النقد
Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ تم النسخ
→ مشكلات مع اقتباس الأسطر
-
فحص المتغيرات
Compare hover, focus, and disabled states for visual coherence.✓ تم النسخ
→ انجراف مكتشف إن وجد
النتيجة: المكوّن يشحن مع عدد أقل من تذاكر 'لماذا يبدو هذا غريباً'.
المزالق
- النقد يتجاهل اختيارات تصميمية متعمدة (مثل الأسلوب brutalist) — مرّر
--style brutalist أو ما شابهه لتخفيف بعض القواعد
متى تستخدمه: تختار مقياس token وخطاً ولوحة ألوان وتريد افتراضياً معقولاً.
الخطوات
-
توليد الخط الأساسي
Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ تم النسخ
→ tokens.json مع مبرر لكل اختيار
-
اختبار الضغط
Generate sample pages (login, dashboard, settings) using the baseline. Critique your own output.✓ تم النسخ
→ صفحات + نقد ذاتي مع تحسينات ممكنة
النتيجة: نقطة بداية قابلة للدفاع لم تحتج التفاوض عليها مع أصحاب المصلحة.
المزالق
- الخط الأساسي المولَّد 'آمن' جداً — أرفق مدخلات العلامة التجارية (المزاج والمراجع) حتى لا يكون المخرج فاتراً
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
سحب tokens من موقع مرجعي، ثم تشغيل taste-skill للتحسين
Extract tokens from https://linear.app, then run taste critique on a page using them.✓ تم النسخ
حفظ النقود كسجلات مراجعة تصميمية
Save each critique to /design/reviews/$(date +%F)-<page>.md.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- غير ذي صلة
- الرموز لكل استدعاء
- متوسط — نقد الصفحة الكاملة 5–10 ألف token
- التكلفة المالية
- مجاني
- نصيحة
- النقد على مستوى المكوّن أرخص من الصفحة الكاملة؛ تكرّر بهذه الطريقة
الأمان
الصلاحيات والأسرار ونطاق الأثر
الحد الأدنى من الصلاحيات: filesystem-read filesystem-write
تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: محلي
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
النقد لا يُرجع انتهاكات على واجهة مبتذلة بوضوح
المهارة قد تكون في وضع 'متساهل' — مرّر --strict
الإصلاح يكسر التخطيط
شغّل مع --diff-preview أولاً، طبّق بانتقائية
تعارض مع إرشادات العلامة التجارية
مرّر markdown العلامة التجارية عبر --brand حتى تحترم المهارة الاستثناءات
البدائل
Taste Skill مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| stevembarclay/pencilplaybook | تريد ذوقاً متجذّراً في منتج Pencil | خاص بـ Pencil؛ taste-skill عام |
| مجرد prompt brand.md | تشحن منتجاً واحداً فقط | لن يلتقط الأنماط المبتذلة من AI التي شُكِّلت هذه المهارة ضدها |