افحص بصريًا وأصلح HTML و Markdown التي أنشأها الذكاء الاصطناعي
افتح الكود الجاهز في محرر مرئي مجاني، وشاهد النتيجة بعين المستخدم، وعدّل دون برمجة
- 1.افتح ChatGPT أو Claude وأنشئ كود HTML باستخدام المطالبة. انسخ النتيجة.
إذا كانت الخدمة غير متاحة في منطقتك، استخدم VPN أو نموذجًا محليًا عبر Ollama.
ChatGPT ↗عن الأداةالبرومبتأنشئ قالب بريد إلكتروني HTML متجاوب لـ [المناسبة: مثل رسالة ترحيب، نشرة إخبارية، إعلان تخفيضات]. أدرج CSS مضمّن، وترويسة بمكان شعار، وقسم محتوى رئيسي يحوي [الرسالة الأساسية]، وتذييلًا برابط إلغاء الاشتراك. اجعله متوافقًا مع الجوال بحد أقصى للعرض 600 بكسل.
ماذا يفعل هذا البرومبتالمطالبة تطلب من الذكاء الاصطناعي إنشاء قالب HTML لرسالة بريد. استبدل [المناسبة] بنوع الرسالة (مثل: رسالة ترحيب)، و[الرسالة الأساسية] بنصك. سيعيد الذكاء الاصطناعي كود HTML جاهزًا بأنماط مضمّنة. - 2.افتح CodePen - محرر HTML مجاني عبر الإنترنت بمعاينة حية. اضغط زر 'Pen' في الزاوية العلوية اليسرى.
التسجيل غير مطلوب للعرض، لكنه ضروري للحفظ. تتيح الخطة المجانية إنشاء عدد غير محدود من الـ pens.
CodePen ↗ - 3.الصق كود HTML المنشأ في لوحة HTML (العمود الأيسر). إذا كان الكود يحتوي على CSS، انقله إلى لوحة CSS (العمود الأوسط). ستظهر المعاينة تلقائيًا في العمود الأيمن.
إذا كان HTML يحتوي بالفعل على أنماط مضمّنة، يمكن إدراج كل الكود في لوحة HTML - ولا حاجة للوحة CSS.
CodePen ↗ - 4.افحص النتيجة بصريًا: كيف تبدو الترويسة والنص والأزرار. بدّل وضع العرض إلى الجوال بالضغط على زر تغيير الحجم في الشريط العلوي للمعاينة.
انتبه لقابلية قراءة النص والمسافات ومحاذاة العناصر.
CodePen ↗ - 5.إذا لزم إجراء تعديلات، حرّر الكود في اللوحة اليسرى. ستظهر التغييرات فورًا في المعاينة. لمستندات Markdown استخدم StackEdit (stackedit.io) - الصق النص في اللوحة اليسرى وتفقد النتيجة في اليمنى.
يدعم StackEdit المعاينة الحية والتصدير إلى HTML و PDF وغيرها من الصيغ.
StackEdit ↗ - 6.عندما تقتنع بالنتيجة، انسخ الكود النهائي من المحرر واستخدمه في مشروعك. لـ HTML اضغط زر 'Copy' في الزاوية العلوية اليمنى للوحة HTML في CodePen.
احفظ الـ pen في CodePen إذا أردت العودة إليه لاحقًا - يتطلب ذلك تسجيلًا مجانيًا.
CodePen ↗
💰 كم يكلف تطبيقهالأسعار حتى 2026-08
- مجاناChatGPT Freeالخطة المجانية تتيح الوصول إلى GPT-4o mini مع حد لعدد الرسائل في الساعة.
- مجاناCodePen Freeالخطة المجانية تتيح إنشاء عدد غير محدود من المشاريع بمعاينة حية، دون الحاجة للتسجيل للعرض.
- مجاناStackEditمحرر Markdown مجاني بالكامل عبر الإنترنت بمعاينة حية وتصدير إلى صيغ متعددة.
جربها وكن أول من يسجل إنجازه
وصفة الأسبوع على بريدك
خدمات الذكاء الاصطناعي تتغير بسرعة - قد تختلف الواجهات والحدود المجانية عما هو موصوف.