اضبط مظهر تطبيقك، ثم عاين النتيجة قبل النشر.

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

يغطي هذا الدليل إعداد الأنماط العامة باستخدام Theme، وتحرير العناصر الفردية باستخدام المحرر المرئي، واستبدال الصور من Library، ووصف التغييرات بلغة بسيطة، والتحقق من عملك عبر الأجهزة قبل أن يصبح متاحًا للعامة.

كيف يعمل التصميم

عندما يُكمل AI Agents مهمة ما، يظهر عارض التطبيقات في أعلى الصفحة. حدّد Design لفتح لوحة التصميم على يسار الشاشة، مع ظهور المعاينة المباشرة بجانبها. تحتوي على ثلاث علامات تبويب:

• Theme يحدد القواعد العامة للتطبيق بالكامل — الألوان والخطوط والتأثيرات. يُفضّل استخدامه قبل البدء في البناء.
• المحرر المرئي يضبط العناصر التي حددتها. يعمل على أي مشروع وفي أي وقت.
• Library يستبدل الصور أو ينشئ صورًا جديدة.

يضع Theme القواعد، بينما يُتقن المحرر المرئي التفاصيل. حدّد Exit لإغلاق اللوحة.

تُفتح لوحة Design على اليسار. وحتى تحدد شيئًا ما، سيطلب منك المحرر المرئي اختيار عنصر.

قبل أن تبدأ

قبل فتح Design، تأكد من أن:

• مشروعك يحتوي على بناء مكتمل. يفتح Design من عارض التطبيقات، والذي يظهر فقط بعد أن ينهي الوكلاء مهمة ما.
• أنت تعلم أن التغييرات لن تصبح مباشرة حتى تقوم بالنشر. لن يتأثر رابطك العام حتى تنشر الإصدار المحدّث.
• أنت تعلم أن السمة تؤثر فقط على الأنماط المشتركة. العناصر المبنية بقيم ثابتة ستحتفظ بمظهرها القديم بعد تغيير السمة. راجع إذا لم تبدُ السمة صحيحة أدناه.

اضبط الأنماط العامة باستخدام Theme

السمة هي نظام التصميم الخاص بمشروعك. فهي تحدد المتغيرات العامة — لوحات الألوان والطباعة والتباعد — التي تُطبَّق على التطبيق بالكامل، بدلًا من إعدادات عنصر واحد.

من الأفضل استخدام Theme خلال مرحلة التحضير، قبل أن تبدأ البناء. فتطبيقه مبكرًا يعني أن كل ما ينشئه الوكلاء سيتبعه منذ البداية.

اختر سمة

تُفتح علامة تبويب Theme مع حقل Search Themes وتُجمّع السمات ضمن أقسام:

• Current Theme — ما يستخدمه مشروعك الآن. قبل تطبيق أي شيء، ستظهر العبارة No theme applied yet، ويؤدي زر + بجانبها إلى إنشاء سمة جديدة.
• Default Theme — 14 إعدادًا مسبقًا منسقًا من قبل المصممين. يُعرض كل منها كمعاينة لصفحة مبنية به، مع اسمه وصف من العينات اللونية التي تُظهر لوحته. لا يمكن حذف هذه السمات.
• My Theme — السمات التي أنشأتها أو خصصتها. يمكن إعادة تسميتها وحذفها.

تظهر كل سمة كمعاينة لصفحة مبنية بها، مع اسمها وصف من العينات اللونية التي تُظهر لوحتها، حتى تتمكن من تقييم الاتجاه قبل تطبيقها.

علامة تبويب Theme، مع سمة مطبقة في الأعلى وسماتك المحفوظة أسفلها.

لتطبيق واحدة:

1. حدّد السمة التي تريدها.
2. يسأل Atoms "Do you want to apply theme name?"
3. حدّد Apply للتأكيد، أو Cancel للرجوع.
4. تحقق من المعاينة.

النتيجة المتوقعة: تتحدث المعاينة إلى السمة التي اخترتها، وتظهر الآن ضمن Current Theme.

ملاحظة: إذا كانت لديك تغييرات غير محفوظة في المحرر المرئي، فسيعرض Atoms Unsaved Changes ويطلب منك حفظها أو تجاهلها قبل تطبيق سمة جديدة.

تحديث سمة مطبقة

تعني النقطة الموجودة على علامة تبويب Theme أن إصدارًا أحدث من السمة المطبقة لديك متاح.

لاستخدامه، حدّد Update على السمة الحالية وأكد Do you want to re-apply theme name? بعد ذلك سيستخدم مشروعك الإصدار الأحدث.

لست مضطرًا إلى التحديث. إذا تركته كما هو، فسيستمر مشروعك في استخدام الإصدار الذي طبقته.

ملاحظة: إذا لم يكن تطبيقك يبدو مثل السمة التي اخترتها، فقد تكون بعض العناصر قد تم تجاوزها في المحرر المرئي. تستهدف هذه التجاوزات محتوى محددًا وتبقى بعد تغيير السمة.

أنشئ سمة أو حررها في Theme Manager

حدّد + بجانب Current Theme لإنشاء سمة من الصفر، أو افتح سمة موجودة لتغييرها. في كلتا الحالتين سيتم فتح Theme Manager، حيث يمكنك ضبط السمة بدقة مقابل معاينة مباشرة.

توجد إعداداته ضمن ثلاث علامات تبويب:

• Color — أدوار الألوان التي يستخدمها تطبيقك، مجمعة حسب الغرض: Base Colors و Card و Popover و Primary و Secondary وغير ذلك. لكل دور قيمته الخاصة، لذا فإن تغيير Primary يصل إلى كل عنصر يستخدمه.
• Fonts — خطوط Serif و Sans-serif و Mono لديك.
• Effects — Radius الزوايا، و Shadow يمكنك التحكم فيه عبر اللون والشفافية والتمويه والانتشار والإزاحة.

المعاينة بجانبها مبنية من مكونات حقيقية — نماذج تسجيل الدخول، والأزرار، وحقول الإدخال، ونصوص المتن والنصوص أحادية المسافة — حتى تتمكن من تقييم التغيير فورًا بدلًا من التخمين. استخدم مفتاح التبديل بين الوضع الفاتح والداكن أسفلها للتحقق من كليهما، لأن لوحة ألوان تعمل جيدًا على الأسطح الفاتحة قد تفقد التباين على الداكنة.

أسفل المعاينة ستحصل أيضًا على Undo و Redo للتنقل بين تغييراتك، و Reset لإعادة السمة إلى حالتها الأصلية.

Theme Manager. تتحدث المعاينة عند تغيير أي قيمة، وتغطي عناصر التحكم أسفلها التراجع والإعادة والتصدير والاستيراد وإعادة الضبط.

حفظ سمة

1. حدّد Save.
2. امنحها Theme Name، أو احتفظ بالاسم المقترح.
3. حدّد Save للتأكيد.

النتيجة المتوقعة: تظهر سمتك ضمن My Theme في علامة تبويب Theme، مع عرض لوحتها على شكل عينات لونية. طبّقها بالطريقة نفسها مثل أي سمة أخرى.

ملاحظة: لا يتم الاحتفاظ بالتعديلات حتى تحفظها. سيوقفك Atoms ويعرض عليك الحفظ أو التجاهل إذا حاولت تطبيق سمة مختلفة بينما لا تزال هناك تغييرات غير محفوظة.

إعادة استخدام سمة عبر المشاريع

يحتوي Theme Manager على Export و Import أسفل المعاينة. صدّر سمة إلى ملف، ثم استوردها إلى مشروع آخر لإعادة استخدام نفس الاتجاه التصميمي، أو شاركها مع زميل في الفريق حتى يتطابق مشروعه مع مشروعك.

إذا لم تبدُ السمة صحيحة

تطبيق السمة ليس فحص توافق، لذلك فهو لا يفشل عادةً. تستبدل السمة قيم الأنماط المشتركة التي بُني عليها تطبيقك، ما يعني أن أي سمة في أداة الاختيار يمكن عادةً تطبيقها على أي مشروع.

ما قد تراه بدلًا من ذلك هو سمة تُطبَّق بنجاح لكنها لا تصل إلى كل شيء. لا توجد رسالة خطأ لهذا — بل يبدو المظهر ببساطة غير صحيح.

جزء من تطبيقك يحتفظ بمظهره القديم. هذه هي المشكلة الأكثر شيوعًا. العنصر الذي أُعطي قيمة ثابتة، مثل لون أو خط محدد تم تعيينه عليه مباشرة بدلًا من أحد الأنماط المشتركة في تطبيقك، لا يمكن أن يصل إليه تغيير السمة، لذلك يحتفظ بمظهره السابق وقد يتعارض مع كل ما حوله. أصلح ذلك في المحرر المرئي، أو اطلب من الوكلاء في الدردشة استبدال القيمة الثابتة بأنماط السمة الخاصة بك.

يصبح النص صعب القراءة. قد تؤدي سمة داكنة مطبقة على تخطيط صُمم لأسطح فاتحة إلى ترك النص بتباين منخفض جدًا. اضبط العناصر المتأثرة في المحرر المرئي، أو اختر سمة أقرب إلى تصميمك الحالي.

يخبرك Atoms بأنه لا يمكن تطبيق السمة. هذا غير شائع، ويعني أن واجهة مشروعك لم تُبنَ على نظام السمات الخاص بـ Atoms. استخدم المحرر المرئي بدلًا من ذلك — فما زال كل شيء ممكنًا عنصرًا بعنصر.

مهم: اختر سمة مبكرًا كلما أمكن. عندما يبني الوكلاء مع وجود سمة مطبقة مسبقًا، فإنهم يستخدمون أنماطها المشتركة منذ البداية، لذلك ينتهي الأمر بعدد أقل من العناصر بقيم ثابتة لا يمكن لتغيير سمة لاحق الوصول إليها.

حرر العناصر الفردية باستخدام المحرر المرئي

حدّد عنصرًا في المعاينة لتحريره. وللعمل على عدة عناصر في الوقت نفسه، اضغط باستمرار على Ctrl ثم انقر في Windows، أو Cmd ثم انقر في Mac.

مهم: تعمل عناصر التحكم في الخصائص الموضحة أدناه على عنصر واحد في كل مرة. عندما تكون قد حددت عدة عناصر، غيّرها عبر وصف ما تريده في الدردشة بدلًا من ذلك — راجع صف التغييرات بدلًا من النقر.

تعرض شارة فوق التحديد اسم العنصر وحجمه — حجم الخط للنص، أو الأبعاد للحاوية — حتى تتمكن من التأكد من أنك حددت العنصر المقصود لا الحاوية الخاصة به.

تعرض علامة تبويب المحرر المرئي بعد ذلك الخصائص المتاحة لذلك العنصر، مجمعة ضمن أقسام:

• Layout — الهوامش الخارجية والداخلية.
• Appearance — لون الخلفية، والشفافية، ونصف قطر الزوايا. يبدأ Radius من None مرورًا بـ Small و Medium و Large و XL و 2XL و 3XL وصولًا إلى Full.
• Content — نص العنصر.
• Style — عائلة الخط، والوزن، والحجم، ومحاذاة النص، والزخرفة.
• Class — فئات التنسيق المطبقة على العنصر، وهي مطوية افتراضيًا.

تعتمد الأقسام التي تظهر على ما حددته: فعنصر النص يوفر Content و Style، بينما قد تعرض الحاوية فقط Layout و Appearance و Class.

يظهر أيضًا شريط أدوات عائم فوق التحديد يضع أكثر عناصر التحكم شيوعًا في متناول اليد — الخط، والوزن، والمحاذاة، واللون للنص — إلى جانب عنصر الحذف وحقل الـ prompt الموضح أدناه.

تظهر التغييرات في المعاينة أثناء إجرائها. وللتخلي عنها، استخدم Discard أسفل المعاينة.

احفظ تغييراتك

لا يتم الاحتفاظ بالتعديلات حتى تحفظها. بمجرد إجراء تغيير، سيظهر Discard و Save أسفل المعاينة.

• Save يحتفظ بتغييراتك.
• Discard يتخلص منها ويعيد العنصر إلى حالته السابقة.

النتيجة المتوقعة: تختفي الأزرار بمجرد الحفظ، ويصبح التغيير الآن جزءًا من المشروع.

ملاحظة: إذا حاولت مغادرة Design، أو تطبيق سمة مختلفة، أو استخدام حدد للدردشة بينما لا تزال هناك أعمال غير محفوظة، فسيعرض Atoms Unsaved Changes ويطلب منك الحفظ أو التجاهل قبل المتابعة.

يحفظ الحفظ التغيير داخل مشروعك. لكنه لا ينشره على موقعك المباشر — راجع انشر تغييراتك.

عند تحديد عنصر، يعرض المحرر المرئي خصائصه. ويتبدل شريط الأدوات العائم فوق التحديد بين وصف التغيير وتحريره مباشرة.

نصائح:

1. استخدم المحرر المرئي للتغييرات الشكلية، واستخدم الدردشة للتغييرات الهيكلية مثل الصفحات الجديدة أو الميزات الجديدة أو منطق الواجهة الخلفية.
2. لإجراء التغيير نفسه عبر صف من البطاقات أو الأزرار، حدّدها جميعًا باستخدام Ctrl-click أو Cmd-click ثم صف التغيير مرة واحدة في الدردشة. أما تحرير كل واحد منها عبر عناصر التحكم في الخصائص فيعني تكرار الأمر نفسه.

استبدل الصور باستخدام Library

تطبق Library صورة على العنصر الذي حددته، لذا ابدأ باختيار المكان الذي يجب أن تذهب إليه الصورة.

1. حدّد العنصر الذي تريد تغييره في المعاينة. وحتى تفعل ذلك، ستعرض Library Select an element to start visual editing.
2. افتح علامة تبويب Library واختر مصدرًا — Image أو Generate أو Upload.
3. طبّق صورتك. تعتمد الطريقة على مصدرها. بالنسبة إلى صورة مدمجة، مرر المؤشر فوقها وحدد Use asset. أما الصورة التي أنشأتها أو رفعتها، فحدّد الصورة المصغرة النهائية الخاصة بها.
4. تحقق من المعاينة. تُطبَّق الصورة على العنصر المحدد فورًا.
5. حدّد Save أسفل المعاينة، أو Discard للتراجع عنها.

النتيجة المتوقعة: يحمل العنصر الذي اخترته الصورة الجديدة، وتختفي أزرار Save و Discard بمجرد الحفظ.

علامة تبويب Library مع فئات الصور و Popular Images.

من أين تأتي الصور

Image هي المجموعة المدمجة. استخدم Search assets لشيء محدد، أو تصفح فئة — Backgrounds و Nature و Education و Health و Fashion و Science و Feelings و People، مع More tags للبقية. يؤدي تحديد فئة إلى فتحها؛ استخدم سهم الرجوع للعودة. يعرض Popular Images أدناه مجموعة عامة. مرر المؤشر فوق أي صورة وحدد Use asset لتطبيقها.

Generate ينشئ صورة جديدة من وصف، ويتطلب باقة Pro أو Max. اكتب ما تريده تحت Describe the image you want to generate وحدد Generate. تظهر النتائج أسفل الحقل. حدّد صورة مصغرة مكتملة لتطبيقها على عنصرك.

Upload يضيف ملفك الخاص عبر السحب والإفلات أو اللصق أو النقر. يمكن أن تكون الصور بصيغ JPEG أو PNG أو GIF أو BMP أو TIFF أو WEBP، حتى 4MB. تظهر الصور المرفوعة أسفل منطقة الإفلات — حدّد واحدة لتطبيقها.

ملاحظة: يظهر Use asset على الصور المدمجة فقط. أما الصور التي تنشئها أو ترفعها فتُطبَّق عبر تحديد صورتها المصغرة بدلًا من ذلك.

صف التغييرات بدلًا من النقر

عندما يكون وصف التغيير أسهل من النقر عبر الخيارات، يمكنك أن تطلب من الوكلاء القيام بذلك بدلًا منك. هناك مكانان للقيام بذلك، وكلاهما يعمل على أي شيء حددته حاليًا.

• شريط الأدوات العائم فوق التحديد. يظهر شريط أدوات صغير فوق العنصر الذي اخترته. وتبدّل أيقونتاه بين وصف التغيير وتحرير الخصائص مباشرة. اكتب في Ask the Atoms to change… ثم أرسل.
• إدخال الدردشة أسفل لوحة Design. عند تحديد عنصر، يعرض حقل الإدخال تسمية Design و prompt بعنوان Ask the Atoms team to modify the selected element…، بحيث يطبق الوكلاء تعليماتك على ذلك العنصر بدلًا من المشروع كله.

يوجد شريط الأدوات العائم فوق التحديد. وتُظهر الشارة الموجودة على اليسار العنصر الذي ستُطبَّق عليه التعليمات.

صف النتيجة، لا الآلية:

- "اجعل هذا أكثر هدوءًا — مساحة بيضاء أكبر، وعنوان أصغر."

- "طابق تنسيق هذا الزر مع صفحة التسعير."

تعطي التعليمات الغامضة مثل "اجعله يبدو أفضل" نتائج غير متوقعة.

ملاحظة: يؤدي النقر على خاصية في المحرر المرئي إلى تغييرها فورًا. أما إرسال prompt فيطلب من الوكلاء تنفيذ العمل، وهذا يستغرق وقتًا أطول. بالنسبة إلى تغيير بسيط في اللون أو التباعد، حرر الخاصية مباشرة.

عاين تغييراتك

استخدم شريط الأدوات أعلى المعاينة:

• Device view — بدّل بين أحجام الشاشات لاختبار الاستجابة. غالبًا ما تبدو تغييرات السمة والطباعة صحيحة على سطح المكتب لكنها تتعطل على الهاتف المحمول، لذا تحقق دائمًا من العرض على الهاتف قبل النشر.
• Page selector — تنقل بين صفحات تطبيقك.
• Refresh — أعد تحميل المعاينة إذا بدت قديمة.
• Open in a new tab — اعرض التطبيق بعرض كامل في علامة تبويب منفصلة في المتصفح.
• Console — افتح لوحة السجل عندما يبدو شيء ما غير صحيح.

النتيجة المتوقعة: تكون تغييراتك مرئية في كل صفحة وعند كل عرض جهاز تنوي دعمه.

التعافي من مشكلة في المعاينة

إذا بدت المعاينة قديمة، أو استمرت في التحميل، أو أظهرت أخطاء حمراء، فالمشكلة تتعلق بالمعاينة لا بـ Design. راجع استكشاف أخطاء البناء والمعاينة وإصلاحها لمعرفة خطوات الاستكشاف — Refresh ولوحة Console و Resolve وكيفية الإبلاغ عن خطأ مستمر.

هناك أمر واحد خاص بـ Design: إذا بدا أن تعديلاتك قد اختفت، فتحقق مما إذا كنت قد حفظتها. يتم تجاهل التغييرات غير المحفوظة عند مغادرة Design — راجع احفظ تغييراتك.

انشر تغييراتك

تبقى تغييرات Design داخل مشروع العمل الخاص بك حتى تقوم بالنشر. حدّد Publish في الزاوية العلوية اليمنى، أو Update إذا كان المشروع مباشرًا بالفعل.

ملاحظة: إذا كان مشروعك يستخدم Specify Version بدلًا من Always Latest، فسيظل الموقع المباشر مقيدًا بالإصدار الذي اخترته، ولن تظهر تغييرات التصميم للعامة حتى تنشر إصدارًا جديدًا.

بالنسبة إلى الأخطاء التي يبلغ عنها الوكلاء أثناء البناء، راجع الإبلاغ عن مشكلة.