يُستخدم عند تصميم أو مراجعة واجهة مستخدم الويب، أو تنفيذ النماذج/الأزرار/المدخلات، أو إصلاح مشكلات التسلسل الهرمي المرئي، أو إنشاء أنظمة الألوان، أو بناء التخطيطات، أو عندما تبدو الواجهة مزدحمة، أو يصعب قراءتها، أو عندما لا يعرف المستخدمون ما يجب النقر عليه.
ثبّت مهارة الذكاء الاصطناعي web-interface-design بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: ratacat/claude-skills.
Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.
This skill orchestrates domain-specific reference files. Read only what you need for the task.
| Font sizes, line spacing, heading hierarchy, vertical rhythm | references/typography.md | | Input fields, validation, checkboxes, radios, selects, textareas | references/forms-and-inputs.md | | Button hierarchy, sizing, states, CTAs, ghost buttons | references/buttons.md |
يُستخدم عند تصميم أو مراجعة واجهة مستخدم الويب، أو تنفيذ النماذج/الأزرار/المدخلات، أو إصلاح مشكلات التسلسل الهرمي المرئي، أو إنشاء أنظمة الألوان، أو بناء التخطيطات، أو عندما تبدو الواجهة مزدحمة، أو يصعب قراءتها، أو عندما لا يعرف المستخدمون ما يجب النقر عليه. المصدر: ratacat/claude-skills.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/ratacat/claude-skills --skill web-interface-designيُستخدم عند تصميم أو مراجعة واجهة مستخدم الويب، أو تنفيذ النماذج/الأزرار/المدخلات، أو إصلاح مشكلات التسلسل الهرمي المرئي، أو إنشاء أنظمة الألوان، أو بناء التخطيطات، أو عندما تبدو الواجهة مزدحمة، أو يصعب قراءتها، أو عندما لا يعرف المستخدمون ما يجب النقر عليه. المصدر: ratacat/claude-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/ratacat/claude-skills