اجعل واجهتك جميلة باستخدام LLM وSkills: مطالبات وإضافات عملية
في الدروس السابقة، تعلمت بالفعل كيفية استخدام AI IDE لتحويل التصاميم إلى كود، واستخدام مكتبات المكونات لبناء واجهات بسرعة. لكنك ربما اكتشفت أيضًا مشكلة محرجة: نفس المتطلبات، الصفحات التي ينشئها AI تشعر دائمًا أن فيها شيئًا ناقصًا - الخط هو Inter المعتاد، والألوان هي التدرج البنفسجي المألوف، والتخطيط هو شبكة بطاقات متماثلة تسبب الملل، وتشع الصفحة بالكامل برائحة "AI" القوية.
هذا ليس خطأ AI، بل أنك لم تخبره ما الأسلوب الذي تريده.
تخيل أنك تذهب إلى صالون الحلاقة. إذا قلت فقط "قص شعري"، سيعطيك الحلاق نتيجة آمنة لكن عادية. لكن إذا قلت "أريد تموجات يابانية متراخية، غرة بشكل الثمانية، الطول حتى عظمة الترقوة، طبقات واضحة"، ستحصل على نتيجة تتوافق حقًا مع توقعاتك.
AI هو نفسه. يحتاج منك أن تصف اتجاهًا جماليًا واضحًا لإنشاء واجهات جميلة وفريدة.
هذا الدرس يعلمك طريقتين لجعل AI ينشئ واجهات جميلة:
- قوالب مطالبات مصممة بعناية - أخبر AI بأسلوبك الجمالي المطلوب بلغة طبيعية
- إضافات Skills للواجهة الأمامية - اجعل AI يحمل مواصفات تصميم احترافية تلقائيًا
ما ستتعلمه
- فهم لماذا الواجهات التي ينشئها AI افتراضيًا "عادية"
- إتقان 5 أبعاد لوصف أسلوب التصميم (الخطوط، الألوان، التخطيط، الرسوم المتحركة، التفاصيل)
- تعلم استخدام 3 إضافات Skills لجعل الواجهات جميلة
- من خلال ثلاثة سيناريوهات تطبيقية، تمرين إنشاء واجهات جميلة باستخدام المطالبات + Skills
1. لماذا الواجهات التي ينشئها AI افتراضيًا "عادية"؟
بيانات تدريب AI تحتوي على كميات هائلة من كود الواجهة الأمامية، ومعظم الكود يستخدم خيارات "آمنة":
| البُعد | الخيار الافتراضي لـ AI | المشكلة |
|---|---|---|
| الخطوط | Inter، Roboto، Arial | شائعة جدًا، بدون شخصية |
| الألوان | تدرج بنفسجي، لون أساسي أزرق | الاستخدام المفرط في قطاع التكنولوجيا، إرهاق بصري |
| التخطيط | شبكة متماثلة، تكديس بطاقات | قابلية التنبؤ عالية، يفتقر إلى المفاجأة |
| الرسوم المتحركة | تتلاشى داخل/خارج، hover بسيط | غير كافية الدقة، تفتقر إلى الطبقات |
| الخلفية | لون صلب، تدرج بسيط | رتيبة، تفتقر إلى الملمس |
هذه الخيارات كلها جيدة بشكل فردي، لكن عندما تستخدمها جميع صفحات AI المنشأة، تصبح "رائحة AI".
💡 رؤية رئيسية: AI لا يعجز عن التصميم، بل يعود افتراضيًا إلى "المتوسط الإحصائي". تحتاج إلى إخباره بوضوح بالاتجاه الذي يبتعد عن المتوسط.
2. الطريقة الأولى: وصف أسلوب التصميم بالمطالبات
2.1 الأبعاد الخمسة لأسلوب التصميم
لإنشاء واجهات جميلة، تحتاج إلى وصف التأثير الذي تريده من 5 أبعاد:
| البُعد | نقاط الوصف | كلمات مفتاحية مثال |
|---|---|---|
| الخطوط | عنوان بخط عرضي سميك، نص بخط مقروء | Space Grotesk، Playfair Display، JetBrains Mono |
| الألوان | لون أساسي + لون مميز، تجنب التوزيع المتساوي | #4F46E5 أساسي + #F59E0B مميز |
| التخطيط | غير متماثل، متداخل، كسر الشبكة | Bento Grid، تقسيم غير متماثل، عناصر عائمة |
| الرسوم المتحركة | تحميل صفحة منظم بعناية، تفاعلات دقيقة | staggered reveals، تشغيل بالتمرير |
| التفاصيل | خلفية، ظلال، حدود، ملمس | ضوضاء، أنماط هندسية، شبكة تدرج |
2.2 رؤية هي الحجة: مطالبة عادية vs مطالبة محسنة
دعنا نستخدم مثال صفحة هبوط لمقارنة التأثير:
المطالبة العادية:
ساعدني في إنشاء صفحة هبوط لمساعد كتابة AI، تحتوي على شريط تنقل، شاشة أولى، عرض ميزات، تسعير، تذييلالمطالبة المحسنة:
ساعدني في إنشاء صفحة هبوط لمساعد كتابة AI، المتطلبات:
**الأسلوب الجمالي: الوحشية الجديدة (Neubrutalism)**
**الخطوط:**
- العنوان: Space Grotesk، وزن 700-900
- النص: IBM Plex Sans، وزن 400
**الألوان:**
- اللون الأساسي: #000000 (أسود نقي)
- لون التمييز: #FF6B00 (برتقالي)
- الخلفية: #FFFDF0 (أبيض كريمي)
- الحدود: 3px أسود مصمت
**التخطيط:**
- تخطيط غير متماثل، العناصر مفصولة بحدود سوداء سميكة
- بطاقات مع ظل صلب (box-shadow: 8px 8px 0px #000)
- تباين جريء في المساحات البيضاء
**الرسوم المتحركة:**
- عناصر تنبثق من الأسفل عند تحميل الصفحة
- الزر يتحرك لأعلى 2px عند hover
**التفاصيل:**
- جميع الحدود المستديرة 0px (زوايا قائمة)
- أزرار بتأثير ثلاثي الأبعاد قوي
- إضافة ملمس ضوضاء خفيف للخلفيةنفس المتطلبات، المطالبة الثانية يمكن أن تجعل AI ينشئ صفحة بأسلوب مميز ولا تُنسى.
2.3 مستودع موارد Skills لتجميل الواجهة الأمامية
لا تبدأ بكتابة المطالبات من الصفر! هنا مجموعة من AI Skills المرتبطة مباشرة بتجميل الواجهة الأمامية:
| اسم المستودع | المحتوى | النجوم | الرابط |
|---|---|---|---|
| ui-ux-pro-max-skill | 57 أسلوب + 95 نظام ألوان + 56 خط | 10k+ | GitHub |
| antigravity-awesome-skills | تجنب القوالب الجمالية العامة لـ AI | - | GitHub |
| superdesigndev/superdesign | أداة تطوير UI أصلية لـ AI | 4.7k | GitHub |
| anthropics/skills/frontend-design | Skill تصميم واجهة أمامية رسمي من Anthropic | - | GitHub |
💡 لمزيد من مطالبات الأسلوب يرجى الرجوع إلى الملحق: مطالبات أسلوب التصميم السريعة
2.5 ثلاثة قوالب أسلوب شائعة
هنا ثلاثة قوالب أسلوب مجربة، انسخها وعدلها واستخدمها مباشرة:
القالب 1: الحد الأدنى
**الأسلوب الجمالي: الحد الأدنى**
**الخطوط:**
- العنوان: PP Neue Montreal، وزن 500-700
- النص: Inter، وزن 400
**الألوان:**
- اللون الأساسي: #FFFFFF (أبيض)
- النص: #1A1A1A (أسود قريب)
- التمييز: #3B82F6 (أزرق، استخدام قليل)
**التخطيط:**
- مساحات بيضاء كبيرة (padding حد أدنى 64px)
- تخطيط بعمود واحد أو عمودين، محاذاة للوسط
- العناصر مفصولة بمساحات بيضاء بدلاً من خطوط فاصلة
**الرسوم المتحركة:**
- تأثير تتلاشى بطيء (المدة 600ms)
- انتقال لوني عند hover
**التفاصيل:**
- حدود مستديرة: 8px
- ظل: خفيف (0 4px 12px rgba(0,0,0,0.08))
- بدون زخرفة خلفيةالقالب 2: الزجاجية الشبحية
**الأسلوب الجمالي: Glassmorphism (الزجاجية الشبحية)**
**الخطوط:**
- العنوان: Outfit، وزن 600-800
- النص: Plus Jakarta Sans، وزن 400-500
**الألوان:**
- الخلفية: تدرج #667eea إلى #764ba2
- خلفية البطاقة: rgba(255, 255, 255, 0.1)
- النص: #FFFFFF
**التخطيط:**
- تصميم بطاقات عائمة
- تداخل بين البطاقات
**الرسوم المتحركة:**
- بطاقات تطفو بالتتابع عند تحميل الصفحة (staggered)
- البطاقة تكبر 1.05 مرة عند hover
**التفاصيل:**
- حدود مستديرة: 20px
- ضبابية الخلفية: backdrop-blur-xl
- الحدود: 1px rgba(255, 255, 255, 0.2)
- تأثير هالة تدرج خفيفالقالب 3: Bento Grid (صندوق البنتو)
**الأسلوب الجمالي: Bento Grid**
**الخطوط:**
- العنوان: SF Pro Display، وزن 700
- النص: SF Pro Text، وزن 400
**الألوان:**
- الخلفية: #F5F5F7 (رمادي فاتح)
- البطاقات: #FFFFFF (أبيض)
- التمييز: #0071E3 (أزرق Apple)
**التخطيط:**
- تخطيط شبكي، بطاقات بأحجام مختلفة مجمعة معًا
- مسافة بين البطاقات gap 16px
- حدود مستديرة 24px
**الرسوم المتحركة:**
- البطاقة ترتفع قليلاً عند hover
- تأثير ضغط عند النقر
**التفاصيل:**
- بطاقات كبيرة تعرض المحتوى المهم
- بطاقات صغيرة تعرض المعلومات الثانوية
- استخدام أيقونات بدلاً من بعض النصوص
- ظل نظيف (0 4px 24px rgba(0,0,0,0.06))3. الطريقة الثانية: استخدام إضافات Skills لتحميل مواصفات التصميم تلقائيًا
كتابة مطالبات الأسلوب يدويًا في كل مرة مزعجة. Skills هي حزمة مواصفات تصميم قابلة لإعادة الاستخدام، بعد تثبيتها سيطبقها AI تلقائيًا.
3.1 ثلاث إضافات Skills لجعل الواجهات جميلة
| Skills | الخصائص | أمر التثبيت |
|---|---|---|
| UI/UX Pro Max | 67 أسلوب، 96 نظام ألوان، 57 مجموعة خطوط | npm install -g uipro-cli && uipro init --ai claude |
| frontend-design | رسمي من Anthropic، يتجنب قوالب AI الجمالية | npx skills add anthropics/skills/frontend-design |
| SuperDesign | مكون IDE إضافي، ينشئ عدة متغيرات تصميم | ابحث عن "SuperDesign" في سوق إضافات VSCode |
3.2 تثبيت UI/UX Pro Max (الأكثر توصية)
UI/UX Pro Max هي Skills مواصفات تصميم الأكثر شمولاً حاليًا، وتحتوي مسبقًا على:
- 67 أسلوب UI: Glassmorphism، Neumorphism، Brutalism، Bento Grid...
- 96 نظام ألوان: مصنفة حسب الصناعة (SaaS، التجارة الإلكترونية، التواصل الاجتماعي...)
- 57 مجموعة خطوط: مجموعات محققة من مصممين محترفين
- 100+ قاعدة تصميم: مواصفات للمسافات والحدود المستديرة والظلال
خطوات التثبيت:
bash
# 1. التثبيت العالمي لـ CLI
npm install -g uipro-cli
# 2. التهيئة (اختر أداة AI التي تستخدمها)
uipro init --ai claude
# أو
uipro init --ai cursor
# أو
uipro init --ai traeبعد التثبيت، تحتاج فقط إلى إضافة جملة في المطالبة:
استخدم أسلوب Glassmorphism من UI/UX Pro Max، ساعدني في إنشاء صفحة هبوط لمساعد كتابة AIسيطبق AI تلقائيًا مواصفات الخطوط والألوان والتخطيط المقابلة.
3.3 تثبيت frontend-design الرسمي من Anthropic
هذا Skill تصميم واجهة أمامية رسمي من Anthropic، مخصص لحل مشكلة "القوالب الجمالية لـ AI":
bash
# تنفيذ في Claude Code
npx skills add anthropics/skills/frontend-designبعد التثبيت، سيتجنب AI تلقائيًا:
- ❌ خطوط Inter و Roboto و Arial
- ❌ خلفيات تدرج بنفسجي
- ❌ تخطيط شبكي متماثل
- ❌ ظلال باهتة جدًا
وسيميل إلى:
- ✅ مجموعات خطوط فريدة
- ✅ لون أساسي جريء + لون مميز حاد
- ✅ تخطيط غير متماثل ومتداخل
- ✅ خلفيات ذات ملمس (ضوضاء، أنماط هندسية)
4. التطبيق الأول: إعادة تصميم صفحة هبوط باستخدام مطالبات محسنة
دعنا نستخدم المعرفة التي تعلمناها لجعل صفحة هبوط عادية تبدو جميلة.
4.1 النسخة العادية
أولاً استخدم مطالبة عادية لترى ما يعطيه AI:
ساعدني في إنشاء صفحة هبوط لمنصة تبني الحيوانات الأليفة، تحتوي على:
- شريط تنقل (شعار، روابط، زر تسجيل)
- شاشة أولى (عنوان، عنوان فرعي، زر CTA، صور حيوانات)
- عرض الحيوانات (ثلاث بطاقات حيوانات)
- من نحن
- تذييلالصفحة المنشأة... تعمل، لكنها عادية.
4.2 النسخة المحسنة
الآن أضف وصف الأسلوب:
ساعدني في إنشاء صفحة هبوط لمنصة تبني الحيوانات الأليفة، المتطلبات:
**الأسلوب الجمالي: دافئ وناعم + إحساس الرسم اليدوي**
**الخطوط:**
- العنوان: Nunito (دائري)، وزن 700-800
- النص: Nunito، وزن 400-600
**الألوان:**
- اللون الأساسي: #FFB347 (برتقالي دافئ)
- اللون الثانوي: #FFCCB3 (برتقالي فاتح)
- الخلفية: #FFF8F0 (أبيض كريمي)
- النص: #5D4037 (بني)
**التخطيط:**
- بطاقات مستديرة (border-radius: 24px)
- بطاقات مائلة قليلاً بزوايا مختلفة
- عناصر عائمة ومتداخلة
**الرسوم المتحركة:**
- عناصر تنزلق من الجانبين عند تحميل الصفحة
- بطاقات الحيوانات تتأرجح كرأس حيوان عند hover (رسوم متحركة rotate)
- زر يرتد عند hover
**التفاصيل:**
- جميع الحدود المستديرة 16-24px
- ظل دافئ وناعم (0 8px 24px rgba(255,179,71,0.3))
- إضافة زخرفة بصمة أقدام للخلفية
- صور مقصوصة بشكل غير منتظم (clip-path)
- أيقونات بأسلوب رسم يدوي (أسلوب outline)الصفحة المنشأة ستكون واجهة دافئة ولطيفة تجعلك ترغب في تبني حيوان أليف.
5. التطبيق الثاني: إنشاء لوحة بيانات بسرعة باستخدام Skills
Skills مناسبة بشكل خاص لأنظمة الخلفية التي تحتاج العديد من الصفحات.
5.1 استخدام UI/UX Pro Max
استخدم أسلوب Dashboard Dark من UI/UX Pro Max،
ساعدني في إنشاء صفحة لوحة بيانات للوحة تحكم منتج SaaS، تحتوي على:
**الأعلى:** أربع بطاقات إحصائية (عدد المستخدمين، المستخدمين النشطين، الإيرادات، استدعاءات API)
**المنتصف:**
- اليسار: رسم بياني خطي لنمو المستخدمين (آخر 7 أيام)
- اليمين: رسم بياني دائري لتوزيع خطط الاشتراك
**الأسفل:** قائمة آخر الأنشطة (الوقت، المستخدم، العملية)سيطبق AI تلقائيًا مواصفات تصميم لوحة البيانات الداكنة:
- خلفية رمادية داكنة (#1A1A2E)
- بطاقات عالية التباين (#16213E)
- ألوان بيانات زاهية (أزرق، أخضر، برتقالي)
- بطاقات عائمة بتأثير زجاجي شبحي
5.2 استخدام Skill frontend-design
استخدم skill frontend-design،
ساعدني في إنشاء الصفحة الرئيسية لمدونة شخصية، الأسلوب يجب أن يكون فريدًا وله شخصيةسيختار AI اتجاهًا جماليًا غير رئيسي (مثل مستقبلية ريترو أو أسلوب مجلة)، ثم ينفذه بخطوط وألوان وتخطيط فريدة.
6. التطبيق الثالث: إنشاء Skill نظام تصميم خاص بك
إذا كان لديك أسلوب علامة تجارية ثابت، يمكنك إنشاء Skill الخاص بك لجعل جميع الصفحات التي ينشئها AI تتوافق مع علامتك التجارية.
6.1 إنشاء ملف Skill
أنشئ .claude/skills/my-brand/SKILL.md في المشروع:
markdown
---
name: my-brand
description: نظام تصميم مشروعي الخاص، يضمن أن جميع UI تتبع لغة تصميم موحدة
---
# نظام تصميم مشروعي
## ألوان العلامة التجارية
- اللون الأساسي: #6366F1 (Indigo 500)
- اللون الثانوي: #8B5CF6 (Violet 500)
- النجاح: #10B981
- التحذير: #F59E0B
- الخطأ: #EF4444
- الخلفية: #F9FAFB
- البطاقات: #FFFFFF
## نظام الخطوط
- العنوان: Plus Jakarta Sans
- H1: 700, 48px
- H2: 600, 36px
- H3: 600, 24px
- النص: Inter
- Body: 400, 16px
- Small: 400, 14px
## نظام المسافات
- الوحدة الأساسية: 4px
- الهامش الداخلي للمكونات: 8px / 12px / 16px
- المسافة بين الأقسام: 24px / 32px / 48px
- هامش الصفحة: 64px
## الحدود المستديرة
- الأزرار: 8px
- البطاقات: 12px
- مربعات الإدخال: 8px
- النوافذ المنبثقة: 16px
## الظلال
- صغير: 0 1px 3px rgba(0,0,0,0.1)
- متوسط: 0 4px 12px rgba(0,0,0,0.1)
- كبير: 0 8px 24px rgba(0,0,0,0.12)
## الرسوم المتحركة
- وقت الانتقال: 150ms / 300ms
- دالة التخفيف: cubic-bezier(0.4, 0, 0.2, 1)
- تأثير hover: تكبير خفيف (scale-105)
## الأنماط المحظورة
- لا تستخدم خلفية تدرج بنفسجي
- لا تستخدم خطوط غير Inter
- لا تستخدم حدود مستديرة أكبر من 16px
- لا تستخدم أسود نقي (#000000)، استخدم #1F29376.2 استخدام Skill الخاص بك
بعد الإنشاء، تحتاج فقط إلى القول في المطالبة:
استخدم skill my-brand، ساعدني في إنشاء صفحة إعدادات المستخدمسيطبق AI تلقائيًا جميع مواصفات التصميم التي حددتها.
7. الخلاصة
هناك طريقتان لجعل AI ينشئ واجهات جميلة:
| الطريقة | المزايا | العيوب | سيناريوهات التطبيق |
|---|---|---|---|
| وصف المطالبات | مرن، يمكن تعديله في كل مرة | يحتاج إعادة الكتابة | صفحات لمرة واحدة، تجربة أساليب مختلفة |
| إضافات Skills | تثبيت لمرة واحدة، يستمر في العمل | يحتاج تثبيت وتكوين | مشاريع ذات متطلبات أسلوب ثابت |
توصيات سير عمل Vibe Coding:
- مرحلة الاستكشاف: جرب مطالبات أسلوب مختلفة للعثور على اتجاهك الجمالي المفضل
- بعد تحديد الأسلوب: ثبت Skill المقابل (UI/UX Pro Max أو frontend-design)
- مشاريع العلامة التجارية: أنشئ Skill الخاص بك لتوحيد لغة تصميم المشروع بالكامل
تمرين
اختر أيًا من السيناريوهات التالية وأنجز من الصفر باستخدام طريقة هذا الدرس:
- أعد تصميم واجهة مشروع سابق باستخدام مطالبة أسلوب (اختر أسلوبًا يعجبك)
- ثبت UI/UX Pro Max واستخدم أحد أساليبه لإنشاء صفحة جديدة
- أنشئ Skill نظام تصميم خاص بك وحدد ألوان وخطوط علامتك التجارية
الملحق: جدول مرجعي سريع لأساليب التصميم
| الأسلوب | الكلمات المفتاحية | سيناريوهات التطبيق | منتجات مثال |
|---|---|---|---|
| الحد الأدنى | مساحات بيضاء، أحادية اللون، بسيط | منتجات فاخرة، معرض أعمال شخصي | موقع Apple |
| الزجاجية الشبحية | زجاج مصنفر، تدرج، ضبابية | منتجات تقنية، صفحات هبوط SaaS | macOS Big Sur |
| الوحشية الجديدة | حدود سميكة، ظل صلب، ألوان نقية | علامات تجارية عصرية، مواقع فنية | Brassius |
| Bento Grid | شبكة، كولاج، بطاقات | عرض المعلومات، لوحات بيانات | صفحة Apple الترويجية |
| ريترو مستقبلي | نيون، تدرج، موجة سينث | ألعاب، موسيقى | STRANGER THINGS |
| أسلوب الرسم اليدوي | غير منتظم، مستدير، رسومات | تعليم، منتجات أطفال | Duolingo |
| أسلوب المجلة | خطوط كبيرة، غير متماثل، مساحات بيضاء | مواقع محتوى، مدونات | Medium |
| فخامة داكنة | داكن، ذهبي، دقيق | منتجات فاخرة، سلع فاخرة | العديد من العلامات الفاخرة |
الملحق: مرجع سريع لتثبيت Skills
bash
# UI/UX Pro Max
npm install -g uipro-cli
uipro init --ai claude
# Anthropic frontend-design
npx skills add anthropics/skills/frontend-design
# Anthropic brand-guidelines
npx skills add anthropics/skills/brand-guidelines
# عرض Skills المثبتة في Claude Code
/helpالملحق: أنظمة ألوان موصى بها
| نظام الألوان | اللون الأساسي | لون التمييز | الخلفية | الأسلوب |
|---|---|---|---|---|
| غروب الشمس | #F97316 | #FBBF24 | #FFF7ED | دافئ، حيوي |
| المحيط | #0EA5E9 | #06B6D4 | #F0F9FF | منعش، احترافي |
| الغابة | #10B981 | #34D399 | #ECFDF5 | طبيعي، صحي |
| التوت | #8B5CF6 | #EC4899 | #FAF5FF | رومانسي، إبداعي |
| القهوة | #78350F | #D97706 | #FFFBEB | دافئ، ريترو |
| الحجر | #6B7280 | #9CA3AF | #F9FAFB | احترافي، محايد |
الملحق: مطالبات أسلوب التصميم السريعة
مطالبات لتجعل صفحات الويب الأمامية أجمل:
فئات الأسلوب
| الأسلوب | الكلمات المفتاحية (بالإنجليزية) | الخصائص البصرية الأساسية | مثال المطالبة |
|---|---|---|---|
| فن البوب | Pop Art | ألوان متضاربة جريئة، خطوط سوداء محيطية، ملمس شبكي | Pop art style website, bold colors and comic dots, vibrant |
| الحد الأدنى | Minimalism | مساحات بيضاء كبيرة، ألوان وخطوط قليلة جدًا، بدون زخرفة | Minimalist web design, ample white space, geometric, serene |
| التعبيرية التجريدية | Abstract Expressionism | ضربات فرشاة مليئة بالتوتر العاطفي، رشات لون | Abstract expressionism background, dynamic paint splashes, emotional |
| أسلوب ريترو | Retro/Vintage | خطوط قديمة، ملمس قديم، ألوان ريترو | Retro 80s website design, neon grid and synthwave color palette |
| سايبربانك | Cyberpunk | ألوان نيون عالية التباين، تأثيرات فن الأعطال، خلفية داكنة | Cyberpunk UI, neon lights on dark background, glitch effects |
| نيومورفية | Neumorphism | ظلال وإضاءات ناعمة، ملمس بارز/غائر قليلاً | Neumorphism design style, soft shadows, clean and modern |
| فن توليدي | Generative Art | أنماط بصرية متدفقة مُنشأة خوارزميًا | Generative art background, flowing algorithmic patterns, digital |
| تصميم حمضي | Acid Graphics | ملمس معدني، حالة زجاجية، خطوط مسننة | Acid graphics web layout, glass morphism, chaotic typography |
| ثلاثي الأبعاد غامر | Immersive 3D | مشاهد ثلاثية الأبعاد تفاعلية، إحساس مكاني قوي | Immersive 3D website, interactive product model in space |