frontend-design
تصميم واجهات أمامية متميزة من الدرجة الإنتاجية
Également disponible depuis: sickn33,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
غالبًا ما يبدو رمز الواجهة الأمامية الذي ينشئه الذكاء الاصطناعي العام متماثلًا ويتميز بغياب الطابع الإبداعي. ترشد هذه المهارة إلى إنشاء واجهات فريدة ولا تُنسى مع خيارات جمالية جريئة، وطباعة مناسبة، وموضوعات لونية متماسكة، وتفاصيل بصرية مصقولة.
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". إنشاء صفحة هبوط عصرية لمحل قهوة
Résultat attendu:
- صفحة هبوط متكاملة مع قسم رئيسي وتأثيرات صب القهوة المتحركة وطباعة جريئة وتدرج لوني دافئ ورسوم متحركة مرتبطة بالتمرير وتخطيط متجاوب
Audit de sécurité
SûrThis is a pure prompt-based skill containing only design guidelines and aesthetic principles. No executable code, network calls, file access, or command execution. The content provides instructional guidance for frontend design without any security concerns.
Score de qualité
Ce que vous pouvez construire
إنشاء مكونات ويب مصقولة
إنشاء مكونات React أو تخطيطات HTML/CSS أو صفحات ويب متكاملة مع تصميم بصري متميز.
توليد نماذج واجهة المستخدم
إنتاج أكواد واجهة أمامية عاملة لصفحات الهبوط أو لوحات التحكم أو واجهات التطبيقات من مفاهيم التصميم.
تصميم عناصر ويب الإبداعية
إنشاء ملصقات أو صفحات ترويجية أو محتوى ويب بصري دون خبرة في البرمجة.
Essayez ces prompts
Build a [component type] for a [purpose] using [framework if specified]. Make it visually striking with unique typography and bold color choices.
Create a landing page for [product/service]. Use a [specific aesthetic] design with animations, custom fonts, and memorable visual elements.
Design a dashboard for [use case] with multiple data visualizations, cohesive theme, and smooth interactions. Avoid generic Bootstrap-like layouts.
Create an experimental [component/page] that showcases [theme/idea]. Push creative boundaries with typography, motion, and unexpected visual choices.
Bonnes pratiques
- توفير معلومات سياقية حول الغرض والجمهور وشخصية العلامة التجارية لتحقيق محاذاة أفضل للتصميم
- تحديد اتجاه جمالي واضح أو مزاج لتوجيه الخيارات الإبداعية
- طلب أطر عمل أو مكتبات محددة عند الحاجة للتكامل مع الأكواد القائمة
Éviter
- طلب تصاميم نمطية أو قالبية تفتقر للطابع المتميز
- طلب أكواد وظيفية فقط دون أي اهتمام بالتأثير البصري
- إغفال القيود أو المعلومات السياقية التي تشكل الاتجاه الجمالي