المهارات designing-frontend
🎨

designing-frontend

آمن 🌐 الوصول إلى الشبكة

Concevoir des interfaces frontend distinctives

Les interfaces génériques ne parviennent pas à capter l'attention des utilisateurs et diluent l'identité de marque. Cette compétence guide les assistants IA pour créer des designs frontend audacieux et mémorables avec une esthétique unique, une hiérarchie visuelle forte et une qualité de code prête pour la production.

يدعم: Claude Codex Code(CC)
📊 69 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "designing-frontend". Design a login page with a brutalist aesthetic

النتيجة المتوقعة:

  • Typographie grande et audacieuse avec police d'affichage monospace
  • Palette de couleurs à contraste élevé (noir/blanc avec accent marqué)
  • Champs de saisie surdimensionnés avec bordures épaisses
  • Pas de border-radius - coins géométriques nets
  • États de survol avec inversions de couleur agressives
  • Propriétés personnalisées CSS pour faciliter la personnalisation
  • Étiquettes ARIA et gestion du focus pour l'accessibilité

استخدام "designing-frontend". Create a hero section with organic design

النتيجة المتوقعة:

  • Formes douces et fluides avec palette de couleurs naturelles
  • Transparences superposées et effets de profondeur
  • Animations subtiles lors de l'interaction au défilement
  • Mise en page responsive avec approche mobile-first
  • Structure HTML sémantique avec repères appropriés

التدقيق الأمني

آمن
v5 • 1/16/2026

This is a pure markdown prompt skill containing only design guidelines. The static scanner misidentified common English words and JSON structure as security threats. No executable code, network calls, file system access, cryptographic operations, or external commands exist in this skill. Safe for immediate publication.

2
الملفات التي تم فحصها
242
الأسطر التي تم تحليلها
1
النتائج
5
إجمالي عمليات التدقيق

عوامل الخطر

🌐 الوصول إلى الشبكة (1)
skill-report.json:6
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
20
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

Créer des interfaces web mémorables

Créer des interfaces utilisateur uniques et prêtes pour la production qui se démarquent des modèles et motifs génériques.

Transformer des concepts en code

Traduire une vision de design en code frontend propre et accessible avec une identité visuelle distinctive.

Ajouter un impact visuel aux projets

Élever les applications web avec une esthétique audacieuse, un mouvement réfléchi et un langage de design cohérent.

جرّب هذه الموجهات

Demande de composant simple 
Design a [button/card/modal] component with a [brutalist/minimalist/retro] aesthetic. Include hover states and accessibility.
Page avec thème spécifique 
Create a landing page for [product type] with a [luxury/organic/tech] theme. Use distinctive typography and cohesive color palette.
Élément interactif 
Design an interactive [navigation/modal/gallery] with staggered animations, scroll-triggered effects, and smooth transitions.
Système de design complet 
Build a complete [dashboard/application/landing] with a unique [aesthetic direction]. Include responsive layout, typography system, color variables, motion guidelines, and all core components. Verify accessibility compliance.

أفضل الممارسات

  • Spécifier la direction esthétique dès le départ (brutaliste, maximaliste, organique) pour guider toutes les décisions de design
  • Inclure les contraintes techniques (framework, budget de performance, exigences d'accessibilité) dans votre demande
  • Itérer progressivement - commencer par la mise en page de base, puis ajouter le mouvement et les effets visuels
  • Demander la vérification de la conformité à l'accessibilité (navigation au clavier, support de lecteur d'écran)

تجنب

  • Utiliser des choix esthétiques génériques (police Inter, dégradés violets, mises en page centrées)
  • Négliger l'accessibilité au profit de l'impact visuel
  • Converger vers des motifs familiers au lieu de rechercher la distinction
  • Ignorer les implications de performance des animations ou effets lourds

الأسئلة المتكررة

Quels frameworks frontend sont pris en charge ?
Fonctionne avec React, Vue, HTML/CSS/JS et d'autres frameworks modernes. Spécifiez votre framework dans le prompt.
Quelles esthétiques de design sont disponibles ?
Prend en charge les esthétiques brutaliste, minimaliste, maximaliste, rétro-futuriste, organique, luxe et mixtes personnalisées.
Comment cela s'intègre-t-il avec le code existant ?
Génère des composants qui suivent les motifs de votre projet. Fournissez le contexte du code existant pour une meilleure intégration.
Mes données sont-elles en sécurité lors de l'utilisation de cette compétence ?
Oui. Il s'agit d'une compétence basée uniquement sur des prompts sans exécution de code. Aucune donnée ne quitte votre environnement.
Pourquoi mes designs semblent-ils parfois génériques ?
Spécifiez une direction esthétique audacieuse et demandez une typographie distinctive. Évitez les choix génériques comme la police Inter.
En quoi cela diffère-t-il de la génération de code standard ?
Priorise l'identité visuelle unique plutôt que les motifs génériques. Se concentre sur la typographie, le mouvement et les esthétiques mémorables.

تفاصيل المطور

المؤلف

Byunk

الترخيص

MIT

المستودع

https://github.com/Byunk/claude-code-essentials/tree/main/essentials/skills/designing-frontend

مرجع

main

بنية الملفات

📄 SKILL.md