frontend-design
تصميم واجهات أمامية مميزة بجماليات جريئة
Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,anthropics
مخرجات الذكاء الاصطناعي العامة تنتج تصاميم ويب باهتة ومشتقة تفتقر إلى الشخصية. هذه المهارة توجه Claude للالتزام باتجاهات جمالية جريئة وتقديم كود أمامي جاهز للإنتاج لا يُنسى مع خيارات إبداعية مقصودة.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "frontend-design". Create a pricing card component for a SaaS product with a refined minimalist aesthetic
Résultat attendu:
- ثلاث بطاقات تسعير بتسلسل طباعي نظيف باستخدام مزاوجة مميزة بين خطوط serif وsans
- خلفية محايدة مهيمنة مع لون تمييز حاد واحد لأزرار الحث على اتخاذ إجراء
- تأثيرات تمرير دقيقة مع انتقالات CSS سلسة وتغييرات ظل دقيقة
- تخطيط شبكة مستجيب يتراص بشكل أنيق على الأجهزة المحمولة
- خصائص CSS مخصصة للألوان والمسافات والطباعة للحفاظ على الاتساق البصري
Utilisation de "frontend-design". Build a hero section for a music festival website with a maximalist aesthetic
Résultat attendu:
- طباعة عرض جريئة مع طبقات نص متداخلة وعناصر زخرفية
- خلفيات شبكة متدرجة نابضة بالحياة مع طبقة تراكب حبيبية متحركة
- رسوم متحركة كشف متدرجة مفعّلة بالتمرير لمعلومات التشكيلة
- تخطيط غير متماثل بتدفق قطري وعناصر بصرية تكسر الشبكة
- تصميم مؤشر مخصص وظلال إسقاط درامية للعمق
Audit de sécurité
SûrPure prompt-based skill containing only design guidelines and instructions. No executable code, network calls, filesystem operations, or external commands. All 49 high-severity findings are false positives from pattern matching against instructional text.
Facteurs de risque
🌐 Accès réseau (1)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
بناء مكونات واجهة مستخدم لافتة
إنشاء أزرار وبطاقات وأشرطة تنقل وتخطيطات صفحات لا تُنسى تتميز عن القوالب العامة بجماليات جريئة
تنفيذ تصاميم إبداعية
تنفيذ رؤى تصميمية جريئة بكود بجودة الإنتاج ورسوم متحركة واهتمام دقيق بالتفاصيل البصرية
تصميم صفحات هبوط
بناء صفحات هبوط مذهلة بصريًا بجماليات فريدة وتفاعلات جذابة وتجارب بصرية لا تُنسى
Essayez ces prompts
Design and build a navigation bar for a portfolio page. Choose a bold aesthetic direction and implement production-ready code with animations.
Create a hero section with a brutalist aesthetic. Include distinctive typography pairings, CSS custom properties for colors, and scroll-triggered animations.
Build an interactive pricing card grid with hover states, staggered reveal animations on page load, and micro-interactions. Use CSS-first approach for all animations.
Design a complete landing page for a creative agency with asymmetric layout, unexpected spatial composition, atmospheric gradient backgrounds, and cohesive visual details. Include all HTML, CSS, and JavaScript code.
Bonnes pratiques
- الالتزام باتجاه جمالي واضح قبل الترميز لأن البساطة أو الكثافة كلاهما ينجح عند التنفيذ بدقة مقصودة
- اختيار مزاوجات طباعية مميزة ترفع التصميم فوق خطوط النظام العامة مثل Arial وInter وRoboto
- استخدام خصائص ومتغيرات CSS المخصصة للحفاظ على الاتساق البصري عبر جميع المكونات وتمكين التصميم السهل
Éviter
- استخدام خطوط عامة مثل Arial وInter وRoboto دون خيارات تصميمية مقصودة تتناسب مع اتجاهك الجمالي
- تطبيق لوحات ألوان خجولة موزعة بالتساوي بدلاً من الالتزام بألوان مهيمنة جريئة مع خيارات تمييز حادة
- إنشاء تخطيطات متوقعة متمركزة دون تكوين مكاني أو عدم تماثل أو تداخل أو عناصر تكسر الشبكة