التصميم والمعاينة

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

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

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

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

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

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

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

قبل أن تبدأ

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

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

ضبط الأنماط العامة باستخدام 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 — بدّل بين أحجام الشاشات لاختبار الاستجابة. غالبًا ما تبدو تغييرات Theme والطباعة صحيحة على سطح المكتب لكنها تتعطل على الهاتف، لذا تحقق دائمًا من الهاتف قبل النشر.
• Page selector — انتقل بين صفحات تطبيقك.
• Refresh — أعد تحميل المعاينة إذا بدت قديمة.
• Open in a new tab — اعرض التطبيق بعرض كامل في علامة تبويب جديدة منفصلة في المتصفح.
• Console — افتح لوحة السجل عندما يبدو أن هناك خطأ ما.

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

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

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

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

نشر تغييراتك

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

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

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