impeccable
بناء واجهات أمامية متقنة باستخدام الذكاء الاصطناعي
تبدو الواجهات التي يولدها الذكاء الاصطناعي غالبًا عامة ومُ-templateية. يُرشد Impeccable الذكاء الاصطناعي من خلال قرارات تصميم خبيرة، مما يُنتج كود أمامي مميز وجاهز للإنتاج.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "impeccable". إنشاء قسم رئيسي لمعرض وكالة إبداعية مع خط عريض وتخطيط غير متماثل
النتيجة المتوقعة:
قسم رئيسي متجاوب مع خط عرض سائل باستخدام clamp()، وتخطيط شبكة غير متماثل مع تباعد متغير، واختيار خطوط مميز من خلال إجراء اختيار الخطوط، وتسلسل هرمي بصري واضح يجتاز اختبار Squint.
استخدام "impeccable". استخراج رموز قابلة لإعادة الاستخدام من صفحة بقيم ألوان غير متسقة
النتيجة المتوقعة:
نظام رموز تصميمي متماسك مع ألوان بدائية基于 OKLCH، ومقاييس محايدة ملونة، وتعيينات ألوان دلالية للألوان الأساسية وحالات الألوان، مع إرشادات موثقة حول متى تستخدم كل رمز.
استخدام "impeccable". تصميم نموذج اتصال يمكن الوصول إليه مع التحقق الصحيح
النتيجة المتوقعة:
نموذج بتسميات مرئية، والتحقق عند فقدان التركيز، ورسائل خطأ وصفية مع aria-describedby، وحلقات تركيز صحيحة باستخدام focus-visible، وأهداف لمس بحجم مناسب لمستخدمي الهاتف المحمول.
التدقيق الأمني
مخاطر منخفضةAll 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.
مشكلات منخفضة المخاطر (1)
عوامل الخطر
⚙️ الأوامر الخارجية (1)
📁 الوصول إلى نظام الملفات (3)
درجة الجودة
ماذا يمكنك بناءه
إعادة تصميم موقع تسويقي
يريد مؤسس شركة ناشئة أن يبرز صفحته الرئيسية من بحر قوالب SaaS المتشابهة. يُرشد Impeccable الذكاء الاصطناعي نحو توجه جمالي جريء مع اختيارات مميزة للخطوط والألوان.
إطلاق نظام تصميمي
يحتاج المطور إلى استخراج الرموز التصميمية والمكونات والأنماط المتسقة من قاعدة كود موجودة إلى نظام تصميم قابل لإعادة الاستخدام. يحدد وضع الاستخراج الأنماط القابلة لإعادة الاستخدام ويُنشئها رسميًا.
تصميم نموذج ونمط تفاعلي يمكن الوصول إليه
يحتاج فريق المنتج إلى نماذج مصممة بشكل صحيح وأنماط التركيز وأنماط التحميل والتنقل بلوحة المفاتيح. يوفر Impeccable مرجعًا حول التوافق مع WCAG وPopover API وتصميم حلقات التركيز.
جرّب هذه الموجهات
Run /impeccable teach to gather design context for my project. Scan the codebase first, then ask me the questions you still need answered.
Run /impeccable craft a pricing page for a SaaS product. The target audience is small business owners who value clarity and speed. The brand tone is confident, practical, and no-nonsense.
Run /impeccable extract the shared design tokens and reusable components from my existing component library. Focus on colors, spacing, typography, and button variants.
Run /impeccable craft a dark-mode dashboard for an observability tool used by SREs. The interface needs to be information-dense but readable, with a muted color palette and strong data visualization hierarchy.
أفضل الممارسات
- اجمع دائمًا السياق التصميمي من المستخدم قبل إنشاء أي عمل تصميمي. تحقق من التعليمات الموجودة، ثم .impeccable.md، ثم شغّل تدفق teach.
- التزم بتوجه جمالي جريء بدلاً من التراجع إلى الإعدادات الافتراضية الآمنة والعامة. يعمل كل من الماكسيمالية والميnimالية عند التنفيذ بقصد.
- شغّل اختبار AI slop على كل ناتج: هل سيتعرف أحد فورًا على أن هذا من توليد الذكاء الاصطناعي؟ إذا نعم، يحتاج التصميم إلى خيارات إبداعية أكثر تميزًا.
تجنب
- استخدام خطوط reflex مثل Inter وFraunces وSpace Grotesk وCormorant التي تُنشئ ثقافة أحادية عبر مشاريع الذكاء الاصطناعي.
- الافتراضي إلى cyan-on-dark أو تدرجات من بنفسجي إلى أزرق أو لمسات متوهجة على خلفيات داكنة، وهي أكثر مؤشرات تصميم الذكاء الاصطناعي وضوحًا.
- استخدام شرائح التمييز على اليسار على البطاقات والنص المتدرج وglassmorphism كزخرفة، وهي محظورة صراحةً كأنماط AI slop.
الأسئلة المتكررة
متى يجب استدعاء Impeccable؟
ما الفرق بين وضعي craft وteach وextract؟
هل يعمل Impeccable مع React أو Vue أو إطارات أخرى؟
كيف يمنع Impeccable التصاميم العامة الشبيهة بالذكاء الاصطناعي؟
هل يمكن لـ Impeccable المساعدة في التوافق مع إمكانية الوصول؟
ماذا يحدث عند التحديث إلى إصدار جديد من Impeccable؟
تفاصيل المطور
المؤلف
pbakausالترخيص
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
مرجع
main
بنية الملفات