技能 frontend-design
🎨

frontend-design

安全 🌐 網路存取📁 檔案系統存取⚙️ 外部命令

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

也可從以下取得: davila7,1bertogit,DennisLiuCk,Azeem-2,92Bilal26,YYH211,AJV009,7Spade,7Spade,92Bilal26,AdamAugustinsky,anthropics,AgentWorkforce,1bertogit,anthropics,CesarAugustusGroB

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

支援: Claude Codex Code(CC)
📊 69 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「frontend-design」。 إنشاء قسم بطل مميز لمحفظة وكالة تصميم

預期結果:

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

正在使用「frontend-design」。 تصميم صفحة هبوط لشركة تكنولوجيا مالية ناشئة بجماليات جريئة

預期結果:

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

安全審計

安全
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
已掃描檔案
559
分析行數
3
發現項
5
審計總數
審計者: claude 查看審計歷史 →

品質評分

38
架構
100
可維護性
85
內容
22
社群
100
安全
91
規範符合性

你能建構什麼

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

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

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

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

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

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

試試這些提示

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

最佳實務

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

避免

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

常見問題

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

開發者詳情

檔案結構

📄 SKILL.md