·modern-frontend-design
</>

modern-frontend-design

كيفية تصميم وبناء واجهات أمامية حديثة عالية الجودة تشبه منتجات SaaS المتطورة وأدوات الذكاء الاصطناعي الحديثة ومواقع التصميم الحائزة على جوائز - وليس القوالب العامة أو التخطيطات القديمة. استخدم هذه المهارة عندما يطلب منك المستخدم إنشاء واجهة أمامية، أو إنشاء صفحة مقصودة، أو تصميم لوحة معلومات، أو دعم واجهة مستخدم تطبيق ويب، أو إنشاء واجهة SaaS، أو إنشاء موقع محفظة، أو إنتاج أي نوع من واجهة الويب التي تواجه المستخدم. استخدمها أيضًا عندما يقول المستخدم أشياء مثل "اجعلها تبدو حديثة"، أو "أنشئ لي واجهة مستخدم جميلة"، أو "أنشئ صفحة رئيسية لتطبيقي"، أو "صمم صفحة تسعير"، أو يذكر أي شيء متعلق بتصميم الواجهة الأمامية، أو واجهة المستخدم/تجربة المستخدم، أو بنية المكونات، أو تخطيطات الويب سريعة الاستجابة - حتى لو لم يذكر "الواجهة الأمامية" أو "التصميم" صراحةً.

31التثبيتات·19الرائج·@deveshpunjabi

التثبيت

$npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design

كيفية تثبيت modern-frontend-design

ثبّت مهارة الذكاء الاصطناعي modern-frontend-design بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: deveshpunjabi/modern-frontend-skill.

You are not just writing code. You are a senior frontend developer, a UI/UX designer, a product designer, and a visual design strategist — all at once. Your mission is to transform any user prompt, idea, or product concept into a visually stunning, modern, premium-quality website or web application.

Why this matters: most AI-generated frontends look generic, use dated patterns, and ignore the product context entirely. The result should resemble high-end SaaS products, modern AI tools, and award-winning design websites. A fintech dashboard should feel different from a creator platform. A cybersecurity tool should feel different from a social app. The design must serve the product.

The difference between a forgettable UI and a premium one is taste, restraint, and invisible details:

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design
الفئة
</>أدوات التطوير
موثق
أول ظهور
2026-03-09
آخر تحديث
2026-03-10

Browse more skills from deveshpunjabi/modern-frontend-skill

إجابات سريعة

ما هي modern-frontend-design؟

كيفية تصميم وبناء واجهات أمامية حديثة عالية الجودة تشبه منتجات SaaS المتطورة وأدوات الذكاء الاصطناعي الحديثة ومواقع التصميم الحائزة على جوائز - وليس القوالب العامة أو التخطيطات القديمة. استخدم هذه المهارة عندما يطلب منك المستخدم إنشاء واجهة أمامية، أو إنشاء صفحة مقصودة، أو تصميم لوحة معلومات، أو دعم واجهة مستخدم تطبيق ويب، أو إنشاء واجهة SaaS، أو إنشاء موقع محفظة، أو إنتاج أي نوع من واجهة الويب التي تواجه المستخدم. استخدمها أيضًا عندما يقول المستخدم أشياء مثل "اجعلها تبدو حديثة"، أو "أنشئ لي واجهة مستخدم جميلة"، أو "أنشئ صفحة رئيسية لتطبيقي"، أو "صمم صفحة تسعير"، أو يذكر أي شيء متعلق بتصميم الواجهة الأمامية، أو واجهة المستخدم/تجربة المستخدم، أو بنية المكونات، أو تخطيطات الويب سريعة الاستجابة - حتى لو لم يذكر "الواجهة الأمامية" أو "التصميم" صراحةً. المصدر: deveshpunjabi/modern-frontend-skill.

كيف أثبّت modern-frontend-design؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/deveshpunjabi/modern-frontend-skill

التفاصيل

الفئة
</>أدوات التطوير
المصدر
skills.sh
أول ظهور
2026-03-09

مهارات ذات صلة

لا يوجد