·web-design-mastery
*

web-design-mastery

تصميم واجهة مستخدم لتطبيق الويب على مستوى الإنتاج استنادًا إلى مبادئ إعادة هيكلة واجهة المستخدم. يتم التنشيط دائمًا لـ: الصفحة المقصودة، لوحة المعلومات، شاشات المصادقة، أقسام البطل، تصميم البطاقة، تصميم الزر، مدخلات النموذج، التنقل، التخطيطات، قرارات التباعد، التسلسل الهرمي للطباعة، اختيار الألوان، الظلال، العمق، الحالات الفارغة، زخرفة الخلفية. يوفر سير عمل التصميم، والتسلسل الهرمي المرئي، وأنظمة التباعد (شبكة 4 بكسل)، ومقياس الكتابة، وأنظمة ألوان HSL، وارتفاع الظل، واللمسات النهائية. التركية: sayfa tasarımı، UI/UX، frontend tasarım، web tasarım، güzel arayüz، Modern Tasarım، Card Tasarımı،buton stili، form tasarımı، renk Paliti، Tipografi. اللغة الإنجليزية: واجهة جميلة، تصميم أنيق، إحساس متميز، تسلسل هرمي مرئي، مسافة بيضاء، لوحة ألوان، مقياس الطباعة.

24التثبيتات·1الرائج·@anilcancakir

التثبيت

$npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery

كيفية تثبيت web-design-mastery

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

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

المصدر: anilcancakir/my-claude-code.

Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.

| 1 | 4 | Micro gaps | | 2 | 8 | Tight, within components | | 3 | 12 | Related elements | | 4 | 16 | Section padding | | 6 | 24 | Between sections | | 8 | 32 | Major separation | | 12 | 48 | Large gaps | | 16 | 64 | Hero spacing | | 24 | 96 | Maximum separation |

| 12 | Labels, meta, fine print | | 14 | Body text, default | | 16 | Emphasis, subheadings | | 18 | Section headings | | 20 | Card titles | | 24 | Page section titles | | 30 | Page headings | | 36 | Hero subheading | | 48 | Hero heading | | 60-72 | Display text |

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

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

أمر التثبيت
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery
الفئة
*وسائط إبداعية
موثق
أول ظهور
2026-02-01
آخر تحديث
2026-03-10

Browse more skills from anilcancakir/my-claude-code

إجابات سريعة

ما هي web-design-mastery؟

تصميم واجهة مستخدم لتطبيق الويب على مستوى الإنتاج استنادًا إلى مبادئ إعادة هيكلة واجهة المستخدم. يتم التنشيط دائمًا لـ: الصفحة المقصودة، لوحة المعلومات، شاشات المصادقة، أقسام البطل، تصميم البطاقة، تصميم الزر، مدخلات النموذج، التنقل، التخطيطات، قرارات التباعد، التسلسل الهرمي للطباعة، اختيار الألوان، الظلال، العمق، الحالات الفارغة، زخرفة الخلفية. يوفر سير عمل التصميم، والتسلسل الهرمي المرئي، وأنظمة التباعد (شبكة 4 بكسل)، ومقياس الكتابة، وأنظمة ألوان HSL، وارتفاع الظل، واللمسات النهائية. التركية: sayfa tasarımı، UI/UX، frontend tasarım، web tasarım، güzel arayüz، Modern Tasarım، Card Tasarımı،buton stili، form tasarımı، renk Paliti، Tipografi. اللغة الإنجليزية: واجهة جميلة، تصميم أنيق، إحساس متميز، تسلسل هرمي مرئي، مسافة بيضاء، لوحة ألوان، مقياس الطباعة. المصدر: anilcancakir/my-claude-code.

كيف أثبّت web-design-mastery؟

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

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

https://github.com/anilcancakir/my-claude-code