frontend-design
ابنِ واجهات أمامية متميزة تبرز وتلفت الانتباه
こちらからも入手できます: davila7,92Bilal26,YYH211,7Spade,sickn33,92Bilal26,DennisLiuCk,7Spade,am-will,anthropics,AI-Vibe-Prompts,1bertogit,1bertogit,CesarAugustusGroB,anthropics,ZhanlinCui,Azeem-2,AdamAugustinsky,AgentWorkforce,AJV009
الكود المُنشأ بالذكاء الاصطناعي بشكل عام يُنتج تصاميم منسيّة وقولبية. هذه المهارة تُعلّم التوجّه الجمالي الجريء والتنفيذ على مستوى الإنتاج الذي يخلق تجارب مستخدم لا تُنسى.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「frontend-design」を使用しています。 مكون بطاقة للمقالات المميزة
期待される結果:
بطاقة مقال منسّقة مع خطوط سائلة وارتفاع حالة التمرير باستخدام transform وحلقة focus-visible لمستخدمي لوحة المفاتيح وصورة متجاوبة مع نسبة عرض إلى ارتفاع مناسبة وبنية HTML دلالية مع عناصر article/heading/time وعناصر زخرفية خفيفة تعزّز هوية العلامة التجارية.
「frontend-design」を使用しています。 قائمة تنقل للجوال
期待される結果:
تنقل مبني للجوال أولاً باستخدام popover API مع سلوك تجاهل خفيف وtabindex متنقّل للتنقل بمفاتيح الأسهم وحركة ارتفاع سلسة باستخدام grid-template-rows وهوامش آمنة لأجهزة notch ودعم الحركة المخفضة الذي يحترم تفضيلات المستخدم.
セキュリティ監査
安全All static analysis findings are false positives. The skill consists entirely of markdown documentation files containing CSS and HTML code examples. Detected patterns (backtick execution, cryptographic algorithms, URLs) are artifacts of pattern matching on documentation content: backticks are markdown code fence delimiters, flagged terms appear in legitimate design guidance, and URLs are reference links to design resources.
品質スコア
作れるもの
تصميم صفحة الهبوط
إنشاء صفحة هبوط لافتة بصرياً مع خطوط عريضة ولوحة ألوان متماسكة وحركات هادفة تحوّل الزوار.
تطوير مكتبة المكونات
بناء نظام مكونات متسق ويمكن الوصول إليه مع حالات التركيز المناسبة وأنماط التحميل والسلوك المتجاوب.
واجهة لوحة المعلومات
تصميم واجهات غنية بالبيانات مع تسلسل هرمي واضح وجداول قابلة للقراءة والكشف التدريجي للتطبيقات المعقدة.
これらのプロンプトを試す
أنشئ مكون بطاقة تسعير مع ثلاث فئات. استخدم جمالية مكررة وبسيطة مع لمسات لونية خفيفة وتسلسل بصري واضح.
صمّم صفحة هبوط لتطبيق إنتاجية. الجمهور المستهدف هم المحترفون المبدعون. استخدم جمالية وحشية مع خطوط عريضة وتخطيطات غير متوقعة. ضمّن قسم البطل وشبكة الميزات والشهادات ودعوة لاتخاذ إجراء.
ولّد نظام خصائص CSS مخصصة كامل لبنية رموز التصميم. ضمّن لوحة ألوان باستخدام OKLCH ومقياس خطوط مع حجم سائل ونظام تباعد يعتمد على الإيقاع العمودي ورموز خاصة بالمكونات. ادعم السمات الفاتحة والداكنة.
ابنِ لوحة تحليلات لمقاييس التجارة الإلكترونية. ضمّن جداول بيانات مع أعمدة قابلة للفرز وتصورات الاتجاهات وعناصر تحكم في التصفية ووظيفة التصدير. طبّق الكشف التدريجي للخيارات المتقدمة. ضمّن التنقل عبر لوحة المفاتيح ودعم قارئ الشاشة. استخدم سمة داكنة متطورة مع لمسات غير مشبعة.
ベストプラクティス
- التزم باتجاه جمالي جريء مبكراً ونفّذ بدقة عبر جميع قرارات التصميم
- استخدم ميزات CSS الحديثة مثل ألوان OKLCH واستعلامات الحاويات وclamp() لتصميمات سائلة وسهلة الصيانة
- صمّم جميع الحالات التفاعلية الثمانية (الافتراضي والتمرير والتركيز والنشط والمعطل والتحميل والخطأ والنجاح) لكل عنصر تفاعلي
- طبّق قاعدة 60-30-10 لتوزيع الألوان مع إبقاء ألوان التمييز نادرة وهادفة
- اختبر نسب التباين برمجياً وحاكِ عمى الألوان لضمان إمكانية الوصول
回避
- استخدام جماليات الذكاء الاصطناعي العامة: الوضع الداكن مع لمسات متوهجة ونص متدرج على المقاييس وشبكات بطر بتخطيطات متطابقة
- إزالة مؤشرات التركيز دون بدائل يمكن الوصول إليها مما يُعطل التنقل عبر لوحة المفاتيح
- استخدام نص نائب كعنوان مما يخفي إرشادات النموذج الحرجة عن المستخدمين
- الافتراضي إلى أسود نقي (#000) أو رمادي نقي - الظلال والأسطح الحقيقية دائماً لها لون خفيف
よくある質問
ما الذي يجعل هذه المهارة مختلفة عن توليد كود الواجهات الأمامية القياسي؟
هل تعمل هذه المهارة مع إطارات عمل محددة مثل React أو Vue؟
كيف أتأكد من تطابق التصاميم المُنشأة مع علامتي التجارية؟
هل تتعامل هذه المهارة مع متطلبات إمكانية الوصول؟
開発者の詳細
作成者
pbakausライセンス
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
参照
main