معرض تفاعلي لمزايا سكيل تصميم

RTL · Web · Native · AI tools

Hatem-Design-skill

جرّب السكيل قبل تثبيته

هذه ليست واجهة تطبيق بعينه. غيّر الكثافة والسياق وطريقة العرض لترى كيف يكيّف السكيل التوكنز والمكوّنات والحالات لمنتجات مختلفة. ما تراه هنا هو شرح حي لما يتم تثبيته.

الكثافة

لغة الرموز

إطلاق بوابة العملاء

قيد التنفيذ

17 / 25

تحسين رحلة التسجيل

مكتمل

8 / 8

تحديث مركز المساعدة

مراجعة

4 / 12

احترافيالبيانات والحالات أولًا

دقيقعقود قابلة للقياس

هادئالمهمة أعلى من الواجهة

ميدانيلمس ووصول تحت الضغط

الأساس واحد، والمخرجات مولّدة

مصدر DTCG واحد يربط الألوان والطباعة والمسافات والحركة والكثافة، ثم يولّد CSS وReact Native وFlutter وSwiftUI وCompose.

Canvas--hds-color-bg

Surface--hds-color-surface-1

Action--hds-color-accent

Success--hds-color-success-fill

Danger--hds-color-danger-fill

Warning--hds-color-warning-fill

Thmanyah Serif Display محليًا · IBM Plex Sans Arabic تلقائيًاوضوح تحت الضغط

Display: 30 / 700
Title: 22 / 700
Body: 15 / 400
Technical: HDS-2048

الحالات جزء من المكوّن

لا يُعد المكوّن جاهزًا قبل نجاحه في الافتراضي والتركيز والتعطيل والتحميل والخطأ والعمل دون اتصال.

الأفعال

ارتفاع لمس موحّد وأزواج لون مختبرة.

الحقول

Label حقيقي، مساعدة، خطأ وقراءة فقط.

اسم مساحة العمليظهر هذا الاسم للفريق.الرابط العامتُعزل الروابط محليًا باتجاه LTR.

الحالة والتقدم

نص وشكل بجانب اللون، مع aria-live.

المهام17 / 25

السكيل يكيّف النظام، لا ينسخ منتجًا

الأساس والحالات وأنماط التفاعل مشتركة. أما أسماء الكيانات والرموز والوصفات فتتبع مجال المنتج الذي تطبّق عليه السكيل.

Core / Patterns

مساحة عمل لأي منتج

Navigation وview switcher
Loading / empty / error / permission
Table وKanban بعقد لوحة مفاتيح
Modal يتحول إلى Sheet

Context / Adaptive

نفس القواعد، بلغة المنتج

SaaS: مساحة · مشروع · مهمة
تجارة: متجر · مجموعة · طلب
تعليم: أكاديمية · مساق · درس

الإيموجي يتبع المنتج، لا يفرضه السكيل

عند طلب المستخدم للإيموجي، يرث السكيل قاموس المنتج ونبرته. لا يخلط أساليب مختلفة، ولا يستخدم الرمز وحده كاسم لفعل.

مساحة العملرمز السياق الأعلى

مجموعةكيان يجمع عناصر

عنصرالوحدة اليومية

مكتملالرمز بجانب النص

Release 1: حزمتان لأربع منصات

مصدر واحد وقواعد واحدة، موزعة في حزمتين فقط: OpenAI Plugin لـChatGPT وCodex، وAgent Skill لـClaude Chat وClaude Code.

ChatGPT + Codex

OpenAI Plugin

حزمة Plugin واحدة تخدم منصتي OpenAI بنفس المصدر وقواعد التصميم.

Hatem-Design-skill-openai-plugin.zip

ChatGPT: @hatem-design-skill
Codex: $hatem-design-skill

Claude Chat + Claude Code

Agent Skill

حزمة Skill واحدة تُرفع إلى Claude Chat أو تُثبت داخل مشروع Claude Code.

Hatem-Design-skill-agent-skill.zip

Claude Chat: تفعيل تلقائي بعد رفع ZIP
Claude Code: /hatem-design-skill

Release 1 هو الإصدار العام الأول: حزمتان متزامنتان تخدمان أربع منصات، من دون نسخ تصميم متفرقة.

حالة المنصات بصراحة

الاسم الموجود على الملف لا يعني أن المكوّن ناضج على تلك المنصة.

Web CSS + Runtime: Stable
React patterns: Documented
React Native / Flutter / SwiftUI / Compose: Generated mappings · Experimental
Domain recipes: Opt-in

صاحب العمل

صممه وطوّره عمّار.

أنا عمّار (iiAMMAR11). بنيت Hatem-Design-skill خلال ثلاثة أيام مكثفة من التحليل، قرارات UX/UI، التوكنز، المكوّنات، التوثيق، وتجهيز حزم التثبيت. هذا المعرض هو الشرح الحي للعمل الذي صنعته، وليس واجهة منتج مستقل.