كيف تحوّل Claude artifact إلى عرض تقديمي في PowerPoint

آخر تحديث: 2026-10-14 · فريق دورني

انسخ الـ artifact من Claude أو نزّله كملف ‎.html، واطلب من Claude ترتيبه في شرائح بحجم 1920x1080 مع ملاحظات المتحدث داخل ‎<aside class="notes">، ثم حوّل الملف إلى ‎.pptx باستخدام محوّل HTML إلى PowerPoint يعمل داخل المتصفح. تصبح كل شريحة صورة مطابقة تماماً مع الاحتفاظ بالملاحظات، لكن نص الشرائح نفسه غير قابل للتعديل في PowerPoint.

ما الذي ستحصل عليه وما الذي لن تحصل عليه

يجيد Claude إنتاج عرض تقديمي أنيق في صورة HTML artifact: ملف واحد يضم التخطيط والألوان والخطوط وغالباً بعض الرسوم البيانية. لا يستطيع PowerPoint فتح هذا الملف مباشرة، لذا تحتاج إلى خطوة تحويل.

الطريقة الأكثر دقة هي التقاط كل شريحة كصورة ووضعها على شريحة PowerPoint بنسبة 16:9. وهذا ما يفعله محوّل HTML إلى PowerPoint المجاني داخل متصفحك ومن دون رفع الملف. كن واضحاً بشأن المقايضة قبل أن تبدأ:

• ما يُحفظ: التصميم كما هو، والخطوط والألوان والرسوم البيانية والخلفيات، وشريحة PowerPoint لكل شريحة HTML، وملاحظات المتحدث كملاحظات PowerPoint حقيقية.
• ما لا يُحفظ: النص القابل للتعديل. كل شريحة صورة، فلا يمكنك تصحيح خطأ إملائي أو تغيير رقم داخل PowerPoint؛ بل تعدّل HTML ثم تعيد التحويل.
• يعمل مع: PowerPoint وKeynote وGoogle Slides، لأن النتيجة ملف ‎.pptx قياسي.

الخطوة 1: استخراج HTML من Claude

يمكن نسخ HTML artifact أو تنزيله من نافذة عرض الـ artifact. ابحث عن خيار النسخ أو التنزيل بجانب المعاينة؛ قد تتغير تسميات الأزرار من وقت لآخر، لكن كليهما يعطيك الكود نفسه.

1. إذا نزّلته، فلديك ملف ‎.html جاهز. انتقل إلى الخطوة 4.
2. إذا نسخت الكود، فافتح محرر نصوص بسيطاً: Notepad على Windows، أو TextEdit على Mac بعد اختيار Format ← Make Plain Text.
3. الصق الكود واحفظ الملف باسم deck.html، بترميز UTF-8 إن سألك المحرر (مهم للنص العربي والحروف المشكولة).
4. انقر نقراً مزدوجاً على الملف. يجب أن يُفتح في متصفحك ويبدو مثل المعاينة في Claude.

إذا كان الـ artifact مكوّن React

أحياناً يكون الـ artifact كود React (مكوّن ‎.jsx) وليس صفحة ويب عادية. يحتاج المحوّل إلى صفحة يمكنه فتحها، لذا اطلب من Claude: «أعد كتابة هذا كملف HTML واحد مستقل يعمل عند فتحه في المتصفح».

الخطوة 2: اجعل الـ artifact على شكل شرائح

يجب أن يعرف المحوّل أين تنتهي شريحة وتبدأ التالية. يكتشف محوّلنا عروض reveal.js، والعناصر ذات الصنف slide، والأقسام بمقاس 16:9 (1920x1080 أو 1280x720)، وفواصل الصفحات في CSS. أما الصفحة الطويلة بلا بنية شرائح فتُقسَّم إلى صفحات، ونادراً ما ينتج عن ذلك عرض جيد.

أسهل حل هو أن تطلب البنية الصحيحة من Claude. الصق هذا الطلب في المحادثة نفسها (بالإنجليزية أو مترجماً، كلاهما يعمل):

Rewrite this as a slide deck in one self-contained HTML file:
- each slide is a <section class="slide"> of exactly 1920 x 1080 px (16:9)
- one idea per slide, large text, no slide that needs scrolling
- use px sizes inside slides: no vw, vh or % font sizes
- no entrance animations, transitions or scroll effects
- charts drawn without animation
- put my speaker notes for each slide in an <aside class="notes">
  inside that slide, hidden on screen
- keep all CSS in the file; use Google Fonts or system fonts only

• الأحجام الثابتة بالبكسل مهمة: وحدات مثل vw وvh تتغير مع حجم النافذة، فقد تتجاوز شريحةٌ بدت سليمة في المحادثة حدودَها عند الالتقاط.
• الحركات تجعل الالتقاط يمسك حالة غير مكتملة. يجمّد المحوّل حركات CSS عند حالتها النهائية، لكن طلب عدم وجودها أكثر أماناً.
• فكرة واحدة لكل شريحة تُبقي النص كبيراً بما يكفي للقراءة على جهاز العرض. راجع أيضاً تحويل شرائح HTML إلى PPTX دون فقدان التصميم.

الخطوة 3: أضف ملاحظات المتحدث ودع Claude يكتبها لك

تنجو ملاحظات المتحدث من التحويل عندما توضع داخل كل شريحة في عنصر aside يحمل الصنف notes، وهو نفس العرف الذي تستخدمه reveal.js. وتصبح ملاحظات PowerPoint حقيقية قابلة للتعديل أسفل كل شريحة. هذا عرض بسيط من شريحتين يطبّق كل القواعد السابقة:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Q3 review</title>
<style>
  body { margin: 0; background: #e5e7eb; }
  .slide {
    width: 1920px; height: 1080px;
    box-sizing: border-box; padding: 96px 120px;
    position: relative; overflow: hidden;
    background: #ffffff; color: #111827;
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  }
  .slide h1 { font-size: 96px; margin: 0 0 40px; }
  .slide h2 { font-size: 72px; margin: 0 0 32px; }
  .slide p, .slide li { font-size: 40px; line-height: 1.4; }
  .slide .notes { display: none; }   /* notes are not shown on the slide */
  @media print {
    @page { size: 1920px 1080px; margin: 0; }
    body { background: none; }
    .slide { break-after: page; }
  }
</style>
</head>
<body>
  <section class="slide">
    <h1>Q3 review</h1>
    <p>Revenue, churn and next steps</p>
    <aside class="notes">Welcome everyone. 20 minutes, questions at the end.</aside>
  </section>

  <section class="slide">
    <h2>Revenue grew in every region</h2>
    <ul>
      <li>Europe: strongest quarter so far</li>
      <li>Middle East: two new enterprise customers</li>
    </ul>
    <aside class="notes">Mention the two customer names only if asked.</aside>
  </section>
</body>
</html>

الخطوة 4: حوّل HTML إلى ‎.pptx

1. افتح أداة HTML إلى PPTX المجانية وأسقط deck.html (أو ملف ‎.zip إذا كان العرض يستخدم صوراً وخطوطاً محلية).
2. تحقق من عدد الشرائح المكتشفة. إن وجد صفحة واحدة ضخمة، فارجع إلى الخطوة 2.
3. إذا كان العرض يحمّل Tailwind عبر CDN أو خطوط ويب أو Chart.js، فزد قيمة «الانتظار N ثانية» ليُرسم كل شيء قبل الالتقاط.
4. نزّل ملف ‎.pptx وافتحه في PowerPoint أو Keynote أو Google Slides.
5. افتح جزء الملاحظات للتأكد من وجود ملاحظات المتحدث.

الصور المستضافة على مواقع أخرى لا تسمح بالوصول عبر النطاقات (CORS) قد تظهر فارغة. في هذه الحالة نزّل تلك الصور، وضعها بجانب deck.html داخل ملف ‎.zip واستخدم مسارات نسبية.

دورة مراجعة سريعة قبل العرض

بما أن ملف HTML هو المرجع الأساسي، فأسرع طريقة لتحسين العرض هي التعديل داخل المحادثة وعدم التحويل إلا في النهاية. روتين بسيط يجنّبك المفاجآت يوم الاجتماع.

1. افتح deck.html في متصفحك بتكبير 100% ومرّر عبره: يجب أن تكون كل شريحة كتلة كاملة بحجم 1920x1080 دون أي محتوى يتجاوز حدودها.
2. اطلب التعديلات من Claude بكلمات بسيطة («اختصر الشريحة 4 إلى ثلاث نقاط»، «اجعل رسم الشريحة 6 رسماً بالأعمدة»)، ثم نزّل النسخة الجديدة باسم deck-v2.html لتتمكن من الرجوع إذا لزم الأمر.
3. حوّل الملف، وافتح ‎.pptx وشغّله مرة واحدة في وضع المقدّم: تحقق من ترتيب الشرائح والملاحظات ومن أن الرسوم البيانية تعرض قيمها النهائية.
4. احتفظ بملف HTML وملف ‎.pptx في المجلد نفسه؛ في الربع القادم لن تحتاج إلا إلى تحديث الأرقام.

صور أم نص قابل للتعديل: متى تعيد البناء في PowerPoint

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

حل هجين عملي

احتفظ بملف HTML كمصدر. حوّله إلى ‎.pptx للعرض، وإذا احتاجت شريحة واحدة إلى نص حيّ، فأضف مربع نص في PowerPoint فوق صورة تلك الشريحة فقط. وعندما يتغير المحتوى كثيراً، حدّث HTML مع Claude وأعد التحويل؛ فهذا أسرع من تعديل عشرين شريحة يدوياً.

بديل PDF للمشاركة

إذا كان العرض سيُرسل بدل أن يُقدَّم، فغالباً ما يكون ملف PDF بنسبة 16:9 أفضل من ‎.pptx: يُفتح على أي هاتف، ويحافظ على التصميم، ولا يمكن تعديله بالخطأ. في المحوّل نفسه اختر مقاس شرائح 16:9. خيار «طباعة / حفظ PDF» يُبقي النص قابلاً للتحديد والملف صغيراً، و«تنزيل PDF» يعطي نسخة مطابقة بنقرة واحدة مع نص على شكل صور.

تجد مقارنة طرق PDF في تحويل HTML إلى PDF مجاناً: 3 طرق.

حل مشاكل عرض Claude

• شريحة واحدة فقط في ‎.pptx: لا توجد بنية شرائح في HTML؛ اطلب عناصر ‎<section class="slide"> بحجم 1920x1080 بكسل.
• نص مقطوع أسفل الشريحة: المحتوى أكثر من اللازم لشريحة واحدة؛ اطلب من Claude تقسيمها، أو صغّر حجم الخط في HTML.
• خط بديل بدل الخط المصمَّم: لم يكن خط الويب قد حُمّل؛ زد وقت الانتظار.
• رسم بياني مفقود أو نصف مرسوم: اطلب رسوماً بلا حركة (في Chart.js: animation: false).
• ملاحظات مفقودة: يجب أن يكون aside داخل الشريحة التي ينتمي إليها وأن يحمل class="notes".