مهارة Guizang PPT: إنشاء عروض HTML مذهلة مباشرة داخل Claude Code

هل سبق لك أن أردت تحويل مقال طويل، أو تحليل منتج، أو حتى مقال شخصي إلى مجموعة شرائح مصممة بشكل جيد — دون فتح PowerPoint والصراع مع مربعات النصوص؟ لست وحدك. هذه هي المشكلة التي تحلها مهارة Guizang PPT بالضبط. صممها مفكر الذكاء الاصطناعي 歸藏 وطوّرها عبر محاضرات حضورية، وهذه المهارة مفتوحة المصدر تعمل داخل Claude Code وCodex وبيئات الوكلاء المشابهة لتوليد عروض تقديمية جميلة بصيغة HTML من ملف واحد. وهي ليست مجرد أداة تسلية أيضًا: فهي تأتي بنظامين بصريين مختلفين، و22 تخطيطًا ثابتًا، ووضع مقدم كامل، وحتى توليد صور بالذكاء الاصطناعي اختياريًا للأغلفة والرسوم البيانية.

لماذا HTML بدلاً من PPTX؟

المشروع بأكمله مبني على رهان بسيط: HTML هو التنسيق المثالي للوكلاء الاصطناعيين لإنشاء الشرائح. ولأن HTML وCSS نصوص عادية، يمكن للوكيل أن يقرأ الملف ويحرّره ويتحقق منه مباشرة. وعلى عكس عروض Markdown، يمنحك HTML تحكمًا دقيقًا في التخطيط على مستوى البكسل، ورسومًا متحركة، وتصميمًا متجاوبًا. وبخلاف PPTX، يكون الناتج النهائي ملفًا واحدًا يمكنك فتحه في أي متصفح، أو تقديمه، أو التقاط لقطة شاشة له، أو إرساله إلى زميل. لا خطوة بناء، ولا خادم، ولا جحيم تبعيات.

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

نمطان بصريان لقصص مختلفة

تأتي المهارة مع نظامين للأسلوب. يُسمى النمط A “مجلة إلكترونية × حبر إلكتروني”. تخيل مجلة Monocle تلتقي بجمالية الكود البسيطة. إنه مثالي للسرد والآراء والمشاركات الشخصية وأي شيء تكون فيه الشخصية مهمة. هناك عشرة تخطيطات مرنة لأشياء مثل فواتح الفصول وصفحات البيانات وشبكات الصور والمسارات والمقارنات. يمكنك الاختيار من خمس سمات مستوحاة من الحبر: الحبر الكلاسيكي، والخزف النيلي، وحبر الغابة، وورق الكرافت، والكثبان.

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

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

البدء خلال 30 ثانية

التثبيت بسيط بشكل منعش. السطر الموصى به هو:

إذا كنت تفضل أن يتولى الذكاء الاصطناعي كل شيء، الصق هذا في Claude Code أو Cursor أو أي وكيل يملك وصولًا إلى الصدفة:

帮我安装 guizang-ppt-skill。请把 https://github.com/op7418/guizang-ppt-skill 克隆到 ~/.claude/skills/guizang-ppt-skill,安装完成后检查 SKILL.md、assets/、references/ 是否存在。

أما بالنسبة للطريقة اليدوية، فقم بتشغيل:

بمجرد التثبيت، تعمل المهارة تلقائيًا عندما تقدم طلبات مثل:

كيف يبدو سير العمل الفعلي

السحر الحقيقي هو أن المهارة هي سير عمل منظم، وليس مجرد توجيه غامض. عندما تطلب عرضًا تقديميًا، يمر الوكيل بعدة خطوات: اختيار النمط، وتوضيح المتطلبات عبر قائمة من سبعة أسئلة، ونسخ القالب المناسب من assets/template.html أو assets/template-swiss.html، وملء المحتوى من جدول الإيقاع، وتوليد الصور اختياريًا، وإنشاء ملاحظات المتحدث، وتشغيل فحوصات التحقق، ومعاينة العرض في المتصفح.

قد يكون الطلب النموذجي: “帮我把这个产品分析文档做成电子杂志风 PPT，重点突出观点和叙事节奏。” بعدها سينتج الوكيل عرض HTML من ملف واحد باستخدام قالب المجلة، مع انتقالات الصفحات وألوان السمة وملاحظات المتحدث وبيئة تشغيل المقدم المدمجة.

وضع مقدم مفيد فعلاً

من بين الميزات العميقة بشكل مدهش وضع المقدم المدمج. انقر فوق P في الزاوية السفلية اليمنى، ويفتح العرض طريقة عرض مخصصة للمقدم بينما تفتح نافذة نظيفة للجمهور في علامة تبويب أخرى. ستحصل على معاينة مباشرة بنسبة 16:9 للشريحة الحالية والتالية، وملاحظات منظمة تتضمن الهدف ونقاط الحديث، ومؤقتات للوقت المنقضي والوتيرة الإجمالية، ووضع تدريب يسجل الوقت الفعلي لكل صفحة محليًا. هناك أيضًا أدوات عملية مثل مؤشر الليزر، وقلم تمييز للرسم، ونقرة واحدة لإظهار شاشة سوداء أو بيضاء. إذا انقطع الإنترنت، فلن يتعطل أي من هذا — فكل شيء HTML محلي وواجهات برمجة متصفح، وليس خدمة سحابية.

الصور المولدة بالذكاء الاصطناعي وفن الأغلفة

داخل Codex، يمكن للمهارة أن تستفيد من GPT-Image 2.0 / GPT-M 2.0 لإنشاء صور بأسلوب وثائقي، ورسوم معلوماتية، ومخططات انسيابية، ومخططات أنظمة، ونماذج أولية لواجهة المستخدم. القاعدة الأساسية هي أن الصور أصول مدمجة، وليست ملصقات مستقلة — لذا يجب ألا تحمل تذييلات أو عناوين أو حدودًا زخرفية خاصة بها. تعرف المهارة أيضًا كيفية إعادة تصميم لقطات الشاشة الفوضوية إلى أصول عرض نظيفة باستخدام مكتبة الخلفيات المضمنة، وهو أمر منقذ للحياة عندما تحتاج إلى مرئيات متسقة دون إعادة بناء كل شريحة يدويًا.

إلى جانب الشرائح، يمتد النظام البصري نفسه ليشمل أغلفة وسائل التواصل. يمكنك توليد صورة رئيسية لحساب WeChat العام بنسبة 21:9، أو بطاقة مشاركة بنسبة 1:1، أو غلاف Xiaohongshu بنسبة 3:4، أو غلاف فيديو أفقي بنسبة 16:9 — وكلها مطابقة للون سمة العرض وخطوطه.

متى تستخدمها (ومتى لا)

تتألق مهارة Guizang PPT في المحادثات دون اتصال، والعروض التقديمية الداخلية، وإطلاقات منتجات الذكاء الاصطناعي، وأيام العروض التجريبية، وأي خطاب بصوت شخصي قوي. إنها ليست مثالية للوحات معلومات جداول البيانات الكثيفة، أو المواد التدريبية، أو العروض التي تحتاج إلى تعاون كثيف في الوقت الفعلي، لأن الناتج ملف HTML ثابت بحكم التصميم.

فلسفة التصميم في المشروع منعشة: ضبط النفس على حساب البهرجة، والبنية على حساب الزخرفة، والصور كعناصر من الدرجة الأولى بنسب أبعاد ثابتة. يمكنك الضغط على B لتعطيل حركات WebGL/canvas والدخول في وضع ثابت خفيف إذا كان جهازك يعاني.

إلى أين من هنا؟

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