prompt

مواصفة مكون نظام التصميم

يحدد مواصفة مكون واجهة بمتغيراته وحالاته واحجامه وقواعد استخدامه لنظام تصميم.

موثوقآخر تحديث يونيو ٢٠٢٦
الموجه
اكتب مواصفة مكون ل{{component}} في نظام تصميم. غط متغيراته ({{variants}})، والحالات التفاعلية (افتراضي، تحويم، تركيز، نشط، معطل)، وخيارات الحجم، وقواعد التباعد والمحاذاة، وملاحظات الوصولية، وافعل واحدا ولا تفعل واحدا للاستخدام. اجعله جاهزا للتنفيذ.
هل نجح معك؟ قيم هذا الموجه

المتغيرات

componentالمكون
variantsالمتغيرات

مثال للمخرجات

المكون: زر. المتغيرات: رئيسي، ثانوي، شبحي، مدمر. الحالات — افتراضي: تعبئة صلبة؛ تحويم: اغمق 8%؛ تركيز: حد 2 بكسل بازاحة لمستخدمي لوحة المفاتيح؛ نشط: اغمق 12%؛ معطل: شفافية 40% دون مؤشر. الحجم: صغير 32 بكسل، متوسط 40، كبير 48 ارتفاعا، بحشوة افقية 12/16/20 بكسل. التباعد: 8 بكسل حد ادنى بين الازرار المتجاورة؛ وفجوة الايقونة والنص 8 بكسل. الوصولية: النص حقيقي لا صورة، وحلقة التركيز ظاهرة دائما، وهدف اللمس 44 بكسل على الاقل. افعل: زر رئيسي واحد لكل عرض. لا تفعل: الاعتماد على اللون وحده للمتغير المدمر — اضف ايقونة او نصا واضحا.

التفاصيل

المصدر

AI Khazna

الرخصة

الأمان

موثوق

النوع

prompt

أصول ذات صلة

مختارات أخرى في التصميم والإبداع.

skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/canvas-design ~/.claude/skills/
تصميم Canvas
إنشاء أعمال فنية بصرية جميلة في ملفات .png و.pdf باستخدام فلسفة التصميم. استخدم هذه المهارة عندما يطلب المستخدم إنشاء ملصق أو عمل فني أو تصميم أو أي ق…★ ٤.٨ · ٢,٥٠٠+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/web-artifacts-builder ~/.claude/skills/
منشئ القطع الفنية الويب
مجموعة أدوات لإنشاء قطع عمل HTML متقدمة ومتعددة المكونات على claude.ai باستخدام تقنيات الويب الحديثة (React و Tailwind CSS و shadcn/ui). استخدمها للقط…★ ٤.٨ · ٢,٥٠٠+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/slack-gif-creator ~/.claude/skills/
منشئ رسائل Slack المتحركة
المعارف والأدوات لإنشاء صور GIF متحركة محسنة للاستخدام في Slack. يوفر قيودا وأدوات التحقق ومفاهيم الرسوم المتحركة. استخدمه عندما يطلب المستخدمون صور G…★ ٤.٨ · ٢,٥٠٠+
prompt
يفحص ازواج الالوان مقابل قواعد تباين WCAG ويقترح اصلاحات يمكن الوصول اليها.
مدقق تباين الوصول
يفحص ازواج الالوان مقابل قواعد تباين WCAG ويقترح اصلاحات يمكن الوصول اليها.٠+
image stylemidjourneydall-eflux
تصيير معماري واقعي — واجهات وداخليات وسياق حضري.
حزمة تصيير معماري
تصيير معماري واقعي — واجهات وداخليات وسياق حضري.٠+
prompt
يكيف لوحة الوان الوضع الفاتح الى لوحة وضع داكن وصولة برموز الاسطح والنص.
مكيف لوحة الوضع الداكن
يكيف لوحة الوان الوضع الفاتح الى لوحة وضع داكن وصولة برموز الاسطح والنص.٠+

افحص قبل التثبيت

شغل أي مصدر عبر فحوصاتنا - الظهور في الذكاء الاصطناعي والأمان والأداء واكتشاف التقنيات.

المزيد في التصميم والإبداع