Compétences frontend-design
🎨

frontend-design

Sûr 🌐 Accès réseau📁 Accès au système de fichiers⚙️ Commandes externes

تصميم واجهات أمامية مميزة

Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AgentWorkforce,AJV009,anthropics

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

Prend en charge: Claude Codex Code(CC)
📊 69 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "frontend-design". إنشاء قسم بطل مميز لمحفظة وكالة تصميم

Résultat attendu:

  • مكون React مع تأثيرات كتلة التدرج الجوي
  • تحريكات متتالية للعنوان/العنوان الفرعي/دعوة الإجراء باستخدام Framer Motion
  • pairing طباعة مميز (عرض نوع الخط Syne مع جسم IBM Plex Sans)
  • تأثيرات الزجاج الشكلي وطبقات نسيج الضوضاء
  • تخطيط متجاوب مع التفاعلات اللمسية

Utilisation de "frontend-design". تصميم صفحة هبوط لشركة تكنولوجيا مالية ناشئة بجماليات جريئة

Résultat attendu:

  • تصميم الوضع الداكن مع ألوان التمييز النابضة
  • بطاقات زجاجية مخصصة مع تأثير التمويه الخلفي
  • تحريكات الكشف عند التمرير
  • أنماط هندسية مميزة وتدرجات لونية
  • حالات التفاعل مع تأثيرات التكبير

Audit de sécurité

Sûr
v5 • 1/16/2026

This is a pure documentation/guidance skill containing only design best practices, CSS examples, and React component templates. No executable code, system commands, network calls, or filesystem access. All static findings are false positives from pattern-matching on documentation content.

2
Fichiers analysés
559
Lignes analysées
3
résultats
5
Total des audits

Score de qualité

38
Architecture
100
Maintenabilité
85
Contenu
19
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

إنشاء مكونات ويب لا تُنسى

بناء مكونات ويب ذات جماليات فريدة تختلف عن القوالب والأطر العامة

تطوير صفحات موجهة بالتصميم

إنشاء صفحات هبوط ومواقع تسويقية وعروض بصرية لهوية بصرية مميزة

بناء واجهات مشذبة

تطوير تطبيقات ذات توجه تصميمي متماسك وتنفيذ كود عالي الجودة

Essayez ces prompts

قسم البطل
صمم قسم بطل مميز لمنتج من نوع [نوع المنتج] يتجنب الجماليات العامة للذكاء الاصطناعي مثل التدرجات اللونية الأرجوانية ونوع الخط Inter.
مكون متحرك
أنشئ مكون React مع تحريكات متتالية لنوع العنصر [نوع العنصر] باستخدام [مكتبة التحريك أو CSS].
نظام بصري
صمم نظام طباعة ولون متماسك للعلامة التجارية/الصناعة [العلامة التجارية/الصناعة] مع الاتجاه الجمالي [الاتجاه الجمالي].
صفحة الهبوط
ابنِ قسم صفحة هبوط كامل للميزة/الغرض [الميزة/الغرض] مع خلفيات جوية وتأثيرات حركة وتصميم بصري لا يُنسى.

Bonnes pratiques

  • التزم بالكامل باتجاه جمالي واضح بدلاً من اللعب على الآمن
  • اختر خطوطاً مميزة تخلق هوية علامة تجارية لا تُنسى
  • أولوية اللحظات عالية التأثير على التحريكات المبعثرة الصغيرة

Éviter

  • استخدام خطوط عامة مثل Inter وRoboto أو خطوط النظام الافتراضية
  • تطبيق مخططات لونية مستهلكة مثل التدرجات اللورية الأرجوانية على خلفيات بيضاء
  • اتباع تخطيطات متوقعة وأنماط مكونات جاهزة

Foire aux questions

ما هي أدوات الذكاء الاصطناعي التي تدعم هذا الدليل؟
يعمل هذا الدليل مع Claude وClaude Code وCodex لتوليد كود الواجهة الأمامية والإرشاد التصميمي.
ما مستويات التعقيد التي يمكنه معالجتها؟
من المكونات البسيطة إلى صفحات الهبوط المعقدة. طابق تعقيد الكود مع الرؤية الجمالية التي تريد تحقيقها.
كيف يتكامل مع سير عملي؟
استدعِ الدليل عند بناء مكونات أو صفحات جديدة.وفر سياقاً عن مشروعك وأهداف التصميم.
هل بياناتي آمنة؟
هذا الدليل يعالج فقط تعليمات التصميم. لا يصل إلى الملفات أو الشبكة أو الأنظمة الخارجية خارج توليد الكود.
لماذا تبدو تصاميمي عامة؟
تتقارب تصاميم الذكاء الاصطناعي العامة على أنماط شائعة. يفرض هذا الدليل خيارات مميزة في الطباعة واللون والتخطيط والحركة.
كيف يختلف هذا عن其他 التصميم prompts؟
يتجنب بنشاط جماليات الذكاء الاصطناعي المستهلكة ويفرض قرارات تصميم جريئة وقاصدة مع كود جاهز للإنتاج.

Détails du développeur

Structure de fichiers

📄 SKILL.md