المحرر المرئي
انقر على العناصر لتعديل النصوص والألوان والمسافات والخطوط والمزيد. الأفضل للتعديلات الصغيرة؛ استخدم المحادثة للتغييرات الكبيرة.
يتيح لك المحرر المرئي تغيير واجهة مستخدم تطبيقك بالنقر على العناصر وتعديل خصائصها مباشرةً. بدّل إلى وضع Visual في شريط أدوات البناء لتفعيله.
كيف يعمل
Section titled “كيف يعمل”- بدّل إلى وضع Visual في شريط الأدوات (بجانب Preview وCode وDashboard)
- مرّر المؤشر فوق العناصر في المعاينة — يتم تمييزها بطبقة تراكب
- انقر على عنصر لتحديده
- عدّل الخصائص في لوحة الشريط الجانبي: النصوص والألوان والمسافات والخطوط والحدود والصور والتأثيرات
تُطبَّق التغييرات فوراً على المعاينة وتُكتب إلى ملفات المصدر. استخدم زر Reset last edit في الشريط الجانبي للتراجع عن آخر تغيير في الخصائص.
ما الذي يمكنني تعديله؟
Section titled “ما الذي يمكنني تعديله؟”- النص — تعديل المحتوى النصي مباشرةً
- حجم الخط — xs وsm وbase وlg وxl وغيرها
- وزن الخط — thin وlight وnormal وmedium وsemibold وbold وextrabold
- عائلة الخط — Geist وInter وMontserrat وNoto Serif وGeist Mono وFira Code وJetBrains Mono
- نمط الخط — تبديل الخط المائل (Italic)
- محاذاة النص — يسار ووسط ويمين ومضبوط
- لون النص — أي لون من ألوان Tailwind
- لون الخلفية — أي لون من ألوان Tailwind
- المسافات — الحشو (Padding) والهامش (margin) على جميع الجوانب
- الحدود — العرض واللون ونصف القطر (متاح على عناصر الحاوية التي لا تحتوي على نصوص)
- الصورة — استبدالها بصورة من مكتبة الصور المخزنة أو رفع صورتك الخاصة (ينطبق على عناصر
imgوصور الخلفية) - التأثيرات — الظل والشفافية
التراجع / الإعادة
Section titled “التراجع / الإعادة”استخدم Cmd+Z (Mac) أو Ctrl+Z (Windows) للتراجع عن التغييرات. وCmd+Shift+Z / Ctrl+Shift+Z لإعادتها.
لوحة ألوان الصفحة
Section titled “لوحة ألوان الصفحة”يفحص المحرر المرئي صفحتك ويعرض جميع ألوان Tailwind وخصائص CSS المخصصة المستخدمة فيها. عند فتح منتقي الألوان للعنصر المحدد، يمكنك الاختيار من لوحة ألوان الصفحة للحفاظ على الاتساق مع نظام التصميم الحالي الخاص بك بدلاً من تخمين رموز الألوان السداسية.
استشر الذكاء الاصطناعي حول عنصر محدد
Section titled “استشر الذكاء الاصطناعي حول عنصر محدد”للتعديلات التي لا يستطيع محرر الخصائص التعبير عنها، اكتب سؤالاً مختصراً في حقل Ask AI أسفل الشريط الجانبي. يتم تمرير العنصر المحدد كسياق، لذا تعمل الأوامر مثل “اجعل هذه البطاقة أكثر إحكاماً” أو “أضف حالة تحويم مع رفع خفيف” دون الحاجة إلى وصف العنصر الذي تقصده.
العناصر الثابتة مقابل الديناميكية
Section titled “العناصر الثابتة مقابل الديناميكية”يعمل المحرر المرئي بشكل أفضل على العناصر الثابتة حيث تكون className ومحتوى النص عبارة عن سلاسل نصية حرفية في JSX. أما العناصر الديناميكية (أسماء الفئات المحسوبة والعرض الشرطي والتعبيرات)، فيتراجع المحرر تلقائياً إلى محادثة الذكاء الاصطناعي مع موجه منظَّم.
متى يجب استخدام المحرر المرئي؟
Section titled “متى يجب استخدام المحرر المرئي؟”المحرر المرئي الأفضل للـتعديلات الصغيرة والسريعة:
- تصحيح خطأ مطبعي
- ضبط المسافات
- تغيير لون
- تحديث نص زر
للتغييرات الكبيرة (أقسام جديدة وإعادة هيكلة التخطيط وميزات جديدة)، استخدم محادثة الذكاء الاصطناعي عوضاً عن ذلك.
كيف أحفظ التغييرات؟
Section titled “كيف أحفظ التغييرات؟”تُحفظ التغييرات تلقائياً عند تعديل أي خاصية. يُكتب الملف إلى بيئة التشغيل الخاصة بك ويُودَع (commit) عند إنشاء commit من قِبل الذكاء الاصطناعي أو من قِبلك.
الأسئلة الشائعة
Section titled “الأسئلة الشائعة”هل يمكنني التراجع عن التعديلات المرئية؟
نعم. استخدم Cmd+Z / Ctrl+Z للتراجع. يحتفظ المحرر المرئي بمكدس تراجع/إعادة خاص به.
لماذا يمكنني تعديل بعض العناصر دون غيرها؟
يمكن تعديل سمات النص الثابت وclassName مباشرةً. أما القيم الديناميكية أو المحسوبة (القوالب الحرفية والتعبيرات الثلاثية واستدعاءات الدوال) فتتراجع تلقائياً إلى محادثة الذكاء الاصطناعي.
ما الفرق بين المحرر المرئي ومحرر الكود؟
| الأداة | الأفضل لـ |
|---|---|
| Visual Editor | تغييرات سريعة على الخصائص (النصوص والألوان والمسافات) بالنقر |
| Code Editor | تعديل الكود المصدري الكامل مع VS Code |
| AI Chat | التغييرات المعقدة والميزات الجديدة وتصحيح الأخطاء |