Markdown يدخل، HTML يخرج: دورة مكثفة
اكتب بلغة Markdown. اقرأ بلغة HTML. لغتا المستندات للعمل مع الوكلاء.
يقوم معظم الأشخاص بكتابة طلب غامض في الذكاء الاصطناعي ويحصلون على جدار طويل من النص مرة أخرى. كان الطلب غامضًا، لذلك كان على الذكاء الاصطناعي تخمين ما يقصدونه. الإجابة طويلة جدًا بحيث لا يمكن قراءتها، لذا فهم يتصفحونها. لقد ضاع شيء ما في كلا الاتجاهين: لم يفهمهم الذكاء الاصطناعي أبدًا، ولم يقرأوا إجابته أبدًا.
تحدد هذه الدورة كلا الاتجاهين، مع لغة واحدة لكل منهما. قد يكون كلا الاسمين جديدًا بالنسبة لك. Markdown هو نص عادي مع بعض العلامات الإضافية التي توضح البنية: # قبل العنوان، و- قبل كل عنصر في القائمة. لقد رأيته بالفعل دون معرفة اسمه: عندما يقوم Claude أو ChatGPT بكتابة كلمة بخط غامق أو يعطيك قائمة نقطية، فهذا يعني كتابة Markdown. يمكنك كتابته مباشرة في نفس مربع الدردشة الذي تستخدمه بالفعل؛ لا يوجد شيء للتثبيت. HTML هي اللغة التي يتم إنشاء صفحات الويب منها: كل صفحة قمت بفتحها في المتصفح، بما في ذلك هذه الصفحة، هي HTML تحتها. ولا البرمجة. وكلاهما نص عادي. المهارة هي معرفة أي واحد يجب استخدامه وفي أي اتجاه.
يقوم المستخدمون المتميزون بتقسيم المحادثة حسب الاتجاه. إنهم ** يكتبون إلى الذكاء الاصطناعي في Markdown ** (العناوين، والقوائم، وكتل التعليمات البرمجية)، لأن البنية لا تترك أي شيء للتخمين. وهم يطلبون من الذكاء الاصطناعي الإجابة بتنسيق HTML (الرسوم البيانية والجداول والألوان والتفاعلية)، لأن الصفحة المصممة هي الإجابة الطويلة الوحيدة التي يقرأها الإنسان المشغول فعليًا. اللغة الأولى تستغرق ساعة لتعلمها. والثاني الذي لا تكتبه مطلقًا؛ تتعلم فقط أن تطلب ذلك. (كلمة واحدة قبل أن نواصل: يقول هذا الكتاب وكيل لذكاء اصطناعي يقوم بعمل متعدد الخطوات نيابة عنك. اليوم، هذا مجرد كلود في علامة تبويب المتصفح. لاحقًا في الكتاب، يحصل على محطة طرفية وملفاتك. قواعد التنسيق التي تتعلمها هنا هي نفسها في كلتا الحالتين.)
الدورة كاملة في صورة واحدة:
خلف الصورة يوجد سؤال واحد، وهو يحسم كل قرار بشأن التنسيق في هذه الدورة: من يقرأ هذا الأخير؟ إذا كان الشخص سيقرأها في المتصفح، فاطلب HTML. إذا كان الذكاء الاصطناعي سيقرأها، أو ستعيدها إلى الذكاء الاصطناعي لاحقًا، فاحتفظ بها في Markdown. إذا كان سينتقل إلى موجز اجتماعي، نص عادي. "Markdown in، HTML out" هو مجرد زوج من الإجابات الأكثر شيوعًا. عقد السؤال؛ بقية هذه الصفحة هي التفاصيل.
اثبات ذلك في دقيقتين
قبل أي نظرية، قم بتشغيل الدورة بأكملها مرة واحدة. افتح Claude.ai (الحساب المجاني يستغرق دقيقة واحدة؛ ChatGPT أو Gemini يعمل أيضًا) والصق:
اجعلني صفحة ويب صغيرة كأداة HTML: بطاقة ترحيب ل مركز تعليم الحي. لافتة ملونة لإشعار العطلة في الأعلى، ثلاث دورات نموذجية برسوم شهرية في جدول أنيق، و زر الاتصال واتساب. اجعلها قابلة للقراءة على الهاتف.
يفكر كلود للحظة، ثم يفتح لوحة بجانب الدردشة ويبني فيها صفحة حقيقية مصممة: لافتة، جدول، زر. هذه اللوحة عبارة عن قطعة أثرية: مستند مباشر ينشئه الذكاء الاصطناعي بجوار المحادثة بدلاً من داخلها. (يطلق ChatGPT وGemini على صفحتهما اسم Canvas؛ نفس الفكرة.) إذا حصلت على جدار من التعليمات البرمجية بدلاً من صفحة معروضة، قل show it to me as a rendered artifact وسوف ينقلب. ابحث الآن عن عنصر التحكم في المشاركة أو النشر على لوحة العناصر، وانقر عليه، وافتح الرابط الناتج على هاتفك.
دقيقتين، وتكون قد فعلت بالفعل كل ما تعلمه هذه الدورة، مرة واحدة، عن طريق الصدفة: تم إدخال بضعة أسطر منظمة، وظهرت صفحة مصممة، ورابط يجعلها قابلة للمشاركة. المفاهيم الأربعة عشر أدناه تجعل كل خطوة من هذه الخطوات مدروسة، بحيث تستمر في العمل عندما تكون المخاطر أعلى من العرض التوضيحي. الجزء الأول يؤطر التقسيم. الجزء الثاني يعلمك مجموعة من عمليات Markdown التي تكتبها يدويًا. يعلمك الجزء 3 كيفية المطالبة بمحتوى HTML الذي لا تكتبه أبدًا، والحكم عليه، ونشره. الجزء 4 يُجري تمرينًا واحدًا عبر الطرق الثلاث التي ستقابل بها الوكلاء في هذا الكتاب. بحلول النهاية، ستكون قادرًا على كتابة مواصفات Markdown نظيفة، وتحويلها إلى قطعة أثرية HTML قابلة للقراءة يمكن لشخص آخر فتحها من رابط، وتحديد أي مخرجات معينة سواء كان Markdown أو HTML أو نصًا عاديًا للخلاصة.
📚 وسائل تعليمية
عرض العرض التقديمي الكامل — Markdown In، HTML Out
تفترض هذه الدورة التدريبية المكثفة الأسس التي سبقتها: ما هو الذكاء الاصطناعي في الواقع للنموذج العقلي للآلة، ومطالبة الذكاء الاصطناعي في 2026 للعادات. هذه العادات (تحميل السياق الصحيح، العصف الذهني ثم التكرار، تصنيف الناتج من 10) كلها تظهر هنا مرة أخرى؛ تمنحهم هذه الدورة التدريبية تنسيق ملف للعيش فيه. تتوفر الإرشادات التفصيلية للأداة بشكل أعمق في Agentic Coding Crash Course وCowork & OpenWork Crash Course؛ لا تحتاج إلى إنهاء هذه الصفحة.
- حساب دردشة مجاني واحد. Claude.ai هو ما تستخدمه الأمثلة؛ يقوم ChatGPT أو Gemini بتشغيل كل مطالبات الدردشة هنا دون تغيير. عندما تقول المطالبة "قطعة أثرية"، قل "قماش" على هذين الاثنين؛ باستخدام أي أداة أخرى، اطلب "ملف HTML واحدًا" وسيعمل بنفس الطريقة.
- تم تشغيل الوصول إلى الويب في الأداة، حتى يتمكن الذكاء الاصطناعي من جلب الروابط التي قمت بتضمينها. يتم تشغيله افتراضيًا في معظم الأدوات؛ إذا لم يعمل مثال الرابط، فتحقق من إعداد بحث الويب.
- هاتف، للحكم على ما تصنعه بالطريقة التي يراها القراء بالفعل.
تستغرق القراءة حوالي الساعة؛ تضيف المطالبات الختامية السبعة حوالي ثلاثين دقيقة. قم بتشغيل المطالبات أثناء التنقل: القراءة تمنحك المفردات، وتشغيلها يمنحك المهارة.
الجزء الأول: اللغتان
1. لماذا يحتاج الوكلاء إلى الهيكلة؟
وهنا نفس الطلب مكتوب مرتين
غير منظم:
I want a page for my tuition center, it should look professional
and have our courses and timings and a way for parents to contact
us, also fees, and it should work on phones since most parents
use phones, oh and put the Eid holiday notice somewhere visible.
منظم:
# Tuition Center Landing Page Specification
## Goal
A single-page site parents visit from their phones to check
courses, timings, fees, and contact info.
## Requirements
- Mobile-first layout (most visitors are on phones)
- Course list with timings and monthly fees
- Contact section: phone, WhatsApp link, location
- Holiday notice banner at the top (currently: Eid holidays,
center closed June 6-9)
## Out of scope
- Online payments
- Student login
كلاهما يحتوي على نفس المعلومات. لكن الأول يجبر الوكيل على استنتاج البنية: هل إشعار الإجازة أهم من الرسوم؟ هل "الاحتراف" عائق أم شعور؟ هل "طريقة التواصل معنا" نموذج أم رقم هاتف؟ كل استدلال هو مكان يمكن للوكيل أن يخمنه بشكل خاطئ، والوكيل الذي يخمن بشكل خاطئ لا يبدو مخطئًا. يبدو واثقا.
الإصدار الثاني يجعل الهيكل واضحا. تعلن العناوين عن نوع المعلومات التي تحتوي عليها كل كتلة. يعلن التعداد النقطي أن المتطلبات عبارة عن set، ويمكن التحقق من كل منها بشكل مستقل. وقسم "خارج النطاق" يفعل شيئًا لا يفعله النثر أبدًا: فهو يوضح ما لا تريده، وهو نصف كل المواصفات الجيدة.
ولهذا السبب فإن Markdown هي لغة المواصفات للعمل الوكيل. يتم تدريب الوكلاء على كميات هائلة من Markdown (معظم الوثائق الموجودة على الإنترنت مكتوبة بها)، لذلك يقومون بتحليل هيكلها محليًا: العنوان # ليس زخرفة بالنسبة لهم، بل هو إشارة حول التسلسل الهرمي والأهمية. (تسمي الفصول اللاحقة المكان الذي تعيش فيه هذه النوايا المكتوبة ب طبقة النوايا: النية البشرية، المكتوبة بدقة كافية ليتصرف العميل بناءً عليها. أنت تتعلم كتابتها الآن.)
مثال غير برمجي. طلب مسؤول مدرسة من أحد الوكلاء "صياغة خطة اليوم الرياضي السنوية، والأحداث المعتادة، والتأكد من عدم تواجد الأطفال الأصغر سنًا في فترة ما بعد الظهر." حددت المسودة سباقات أقل من 8 سنوات في الساعة 2 بعد الظهر. على أية حال: دفن القيد في منتصف الجملة في النثر، ورجحه الفاعل على التفضيل. أعادت كتابة الطلب باستخدام عنوان ## Hard constraints يحتوي على رمز نقطي واحد: "يجب أن تنتهي جميع الأحداث التي تقل عن 8 سنوات قبل الساعة 11:30 صباحًا." امتثلت المسودة التالية تمامًا. ولم يتغير القيد. تغيرت رؤيته في الهيكل.
العادة، التي ذكرت مرة واحدة: أي شيء لا يجب على العميل أن يخطئ فيه، ينتمي تحت عنوانه الخاص أو في رصاصته الخاصة، وليس داخل الجملة أبدًا.
2. عدم التماثل: Markdown يدخل، HTML يخرج
لذا فإن Markdown هي لغة الإدخال. هل هي لغة الإخراج أيضا؟ حتى وقت قريب، نعم: يجيب الوكلاء بطريقة Markdown بشكل افتراضي، وبالنسبة للإجابات القصيرة فلا بأس بذلك.
ولكن إذا كانت صورتك الذهنية لمخرجات الذكاء الاصطناعي عبارة عن جدران من النص النقطي، فهذه الصورة أصبحت الآن قديمة. في مقالة منتشرة على نطاق واسع، وصف طارق شيهيبار من فريق Anthropic's Claude Code لماذا توقف هو وآخرون في الفريق عن طلب Markdown outputs وبدأوا في طلب HTML. استدلاله ، مقتبس:
- Long Markdown غير قابل للقراءة. بعد مرور حوالي مائة سطر، يتوقف البشر عن قراءة ملفات Markdown، وعندما يتولى الوكلاء مهام أكبر، تستمر خططهم وتقاريرهم في الطول. المائة ليست رقما سحريا؛ الاختبار الصادق هو ما إذا كنت ستقرأ الموضوع من الأعلى إلى الأسفل، وبعد فترة من الزمن تصبح الإجابة لا. الخطة غير المقروءة هي خطة لم توافق عليها فعليًا.
- سقف Markdown منخفض. العناوين، والقوائم، والجداول، وليس الكثير. عندما يحتاج الوكيل إلى أن يعرض لك سير عمل، أو لوحة ألوان، أو تخطيطًا، فإن Markdown يلجأ إلى فن ASCII: ساحر ولكنه حل بديل.
- **HTML ليس له سقف تقريبًا. ** الجداول المصممة والرسوم البيانية والتعليمات البرمجية المشروحة وعناصر التحكم التفاعلية. لا يوجد سوى القليل جدًا الذي يمكن للوكيل أن يعرفه أن HTML لا يمكنه إظهار الإنسان بكفاءة.
- HTML قابل للمشاركة. تعرضه المتصفحات محليًا. ينقر أحد الزملاء على الرابط؛ لا أحد يقوم بتثبيت أي شيء. يقرأ الناس في الواقع صفحة مصممة؛ يتجاهلون بأدب ملفًا نصيًا خامًا.
- ميزة Markdown القاتلة بدأت تتلاشى. كان Markdown رائعًا لأن البشر يمكنهم تعديله يدويًا بسهولة. لكن على نحو متزايد، لا تقوم بتحرير مخرجات الوكيل يدويًا؛ تطالب الوكيل بتحريره. بمجرد قيام الوكيل بالتحرير، يجب أن يناسب التنسيق القارئ فقط.
والنتيجة هي عدم تناسق واضح، وهو العمود الفقري لهذه الدورة بأكملها:
| اتجاه | شكل | لماذا |
|---|---|---|
| أنت → الوكيل | Markdown | هيكل يزيل الغموض. سريع في الكتابة. يحلّله الوكلاء محليًا. |
| الوكيل → أنت | HTML | غنية وقابلة للقراءة وقابلة للمشاركة وتفاعلية. خطة من 500 سطر ستقرأها بالفعل. |
| وكيل → وكيل | Markdown | تظل المواصفات والملاحظات والسياق التي تُمرَّر بين جلسات الذكاء الاصطناعي مدمجة ودقيقة. |
أنت تكتب الصف الأول يدويًا، ولهذا السبب يعلمك الجزء 2 ذلك بشكل صحيح. أنت لا تكتب الصف الثاني أبدًا؛ أنت تطالب بذلك، ولهذا السبب يقوم الجزء 3 بتعليم المطالبات بدلاً من العلامات.
كل ميزة يتمتع بها HTML هي ميزة للعين والمتصفحات. بالنسبة إلى الذكاء الاصطناعي، فإن الملف نفسه عبارة عن ضجيج حول المعنى: العلامات والتصميم ورمز التخطيط تنفق آلاف الكلمات لتقول ما يقوله Markdown في خمسين. لذا فإن أي شيء يتم الاحتفاظ به من أجل الذكاء الاصطناعي يبقى Markdown. يتضمن ذلك أكثر مما قد تعتقد: الدردشة الجديدة لا تتذكر شيئًا، وبالتالي فإن الملاحظات التي تحفظها اليوم وتلصقها في محادثة الغد هي أيضًا "وكيل → وكيل"، على الرغم من أن كلا العميلين يتحدثان إليك. اطرح سؤالاً واحدًا: من يقرأ هذا الأخير؟
- آخر شخص قرأها → HTML.
- يقرأها الذكاء الاصطناعي أخيرًا (بما في ذلك الدردشة المستقبلية) → Markdown.
- غير متأكد بصراحة → Markdown. يمكن لأي شخص أن يقرأ Markdown جيدًا بما فيه الكفاية؛ الذكاء الاصطناعي يقرأ لغة HTML بشكل سيء. ويمكنك دائمًا تحويل Markdown إلى HTML في اللحظة التي يحتاجها الشخص.
كل فصل من هذا الكتاب مكتوب بلغة Markdown (تنتهي الملفات المصدر ب .md)، ومعظم الرسوم البيانية التي تراها هي SVG، وهي لغة التوضيح في HTML. يمارس الكتاب عدم التماثل الذي يبشّر به: Markdown حيث تكون الدقة مهمة، والمرئيات الغنية حيث تكون القراءة البشرية مهمة.
الجزء الثاني: Markdown، لغة الكتابة
يحتوي Markdown على العشرات من الميزات. أنت بحاجة إلى خمسة. تغطي العناصر الخمسة أدناه بشكل أساسي كل المواصفات والملخص وملف السياق الذي ستكتبه في هذا الكتاب، ويجمعها المفهوم الختامي لهذا الجزء في المواصفات الكاملة الأولى الخاصة بك.
كيفية التدريب: كل مثال في هذا الجزء عبارة عن مطالبة يمكنك لصقها في Claude.ai الآن. البنية التي تكتبها هي الدرس.
3. العناوين: أخبر الذكاء الاصطناعي بما هو أكثر أهمية
# يصنع العنوان. المزيد من الرموز # تجعل المستويات أعمق:
# Document title (one per document)
## Major section
### Subsection
هذا هو بناء الجملة بأكمله. ما يهم هو ما تفعله العناوين الخاصة بالذكاء الاصطناعي: فهي توضح المعلومات الأكثر أهمية والتفاصيل التي تنتمي إلى أي قسم. كل شيء ضمن ## Hard constraints يعد قيدًا يجب على الذكاء الاصطناعي اتباعه. كل شيء تحت ## Nice to have اختياري. بدون عناوين، يجب على الذكاء الاصطناعي تخمين ما يهم. مع العناوين، يمكنك إخبارها مباشرة.
ثلاث قواعد تمنع 90% من الأخطاء الرأسية:
| قاعدة | لماذا يهم الوكيل |
|---|---|
عنوان واحد # لكل مستند | عنوانان يعني وثيقتين مدمجتين معًا؛ يجوز للوكيل التعامل معها كمهام منفصلة. |
لا تقم أبدًا بتخطي المستويات (# → ###) | المستوى الذي تم تخطيه يكسر الشجرة؛ يمكن للوكيل أن يخطئ في إرفاق قسم فرعي بالوالد الخطأ. |
| اجعل العناوين مطالبات، وليس تسميات | ## Budget يقول أقل من ## Budget: PKR 50,000 hard ceiling. العنوان نفسه يحمل القيد. |
جربه الآن. الصق هذا في Claude.ai:
إليكم ملاحظاتي لعشاء العيد العائلي، كفقرة واحدة فوضوية:
"حوالي 20 ضيفًا، ثلاثة منهم نباتيون، وميزانيتهم حوالي 25 ألف روبية، والدتي تتولى إعداد البرياني، لذا لا تخطط لطبق أرز رئيسي، نحتاج إلى طاولة للأطفال، العشاء في الساعة 8 مساءً، نحن نستأجر 4 كراسي إضافية."
أعد هيكلة هذه الملاحظات كمستند Markdown مع عناوين ل الهدف، والقيود الصعبة، والتعامل معها بالفعل، والأسئلة المفتوحة. ضع كل حقيقة تحت العنوان الصحيح. إذا كانت الحقيقة يمكن أن تنتمي إلى عنوانين، اختر أحدهما وأخبرني لماذا.
اقرأ ما يعود. سيصدر الوكيل قرارًا أو اثنين (هل يعتبر "العشاء في الساعة 8 مساءً" قيدًا أم هدفًا؟)، ورؤيته يشرح المكالمة يعلمك كيف يقرأ الوكلاء هيكلك.
4. القوائم: تعداد نقطي للمجموعات، وأرقام للتسلسلات
هناك نوعان من القائمة، وتمييز واحد يأخذه الوكلاء على محمل الجد:
Features the page must have: Steps to publish:
- Course list with fees 1. Review the draft
- WhatsApp contact button 2. Fix the timings table
- Holiday banner 3. Publish
- Urdu/English toggle 4. Send the link to parents
- تعداد نقطي (
-) يقول: _هذه العناصر عبارة عن مجموعة؛ النظام لا يهم. كل منها صحيح بشكل مستقل. _ استخدمها للميزات والمتطلبات والقيود والخيارات. - الأرقام (
1.) تقول: _هذه العناصر عبارة عن تسلسل؛ النظام هو النقطة. تفترض الخطوة 3 حدوث الخطوة 2. استخدمها في الإجراءات وسير العمل وأي شيء يؤدي القيام به بشكل عكسي إلى كسره.
هذا يبدو مستحضرات التجميل. ليس كذلك. أعط الوكيل قائمة مرقمة وسيتعامل مع الأمر كجزء من التعليمات؛ لن يبدأ أبدًا الخطوة 4 قبل الخطوة 1. أعطها نقاطًا ولا تتردد في معالجة العناصر بأي ترتيب يكون فعالاً. يؤدي اختيار نوع القائمة الخاطئ إلى إرسال إشارة خاطئة حول نيتك.
يضيف التداخل بُعدًا آخر: تنتمي العناصر الفرعية إلى أصلها.
- Contact section
- Phone number (clickable on mobile)
- WhatsApp link (tapping it opens a chat)
- Map pin, not a full embedded map
عادة التعداد النقطي القابل للتحقق. أفضل التعداد النقطي المطلوب هو تلك التي يمكن للمراجع وضع علامة عليها ✅ أو ❌ بدون مناقشة. "يجب أن تكون الصفحة سريعة" غير قابلة للتحقق. "يتم تحميل الصفحة في أقل من 3 ثوانٍ عبر اتصال 3G". عندما تكتب مواصفات، أعد قراءة كل نقطة واسأل: _هل يمكن للوكيل، أو أنا، التحقق من هذه النقطة بموضوعية؟ _ هذا هو نظام الدرجة من أصل 10 من AI Prompting in 2026، يتم تطبيق رمز نقطي واحد في كل مرة.
5. كتل التعليمات البرمجية: توضح للذكاء الاصطناعي ما تعنيه بالضبط
أحيانًا تحتاج إلى تضمين جزء من النص في مطالبتك يجب أن ينظر إليه الذكاء الاصطناعي ولا يتصرف بناءً عليه: رسالة خطأ، أو مثال لتنسيق الإخراج الذي تريده، أو اقتباس من شخص آخر. لفّه بثلاث علامات backtick (```) يخبر الذكاء الاصطناعي: «هذه بيانات، وليست تعليمة». (علامة backtick ` توجد أعلى مفتاح Tab في معظم لوحات مفاتيح الحواسيب المحمولة؛ وعلى لوحة مفاتيح الهاتف، اضغط مطولًا على الفاصلة العليا.)
```python
def greet(name):
return f"Assalam-o-Alaikum, {name}!"
```
وسم اللغة بعد السور الافتتاحي (python، bash، text، html) يخبر البشر والوكلاء بكيفية تفسير الكتلة. تؤدي backticks المفردة الوظيفة نفسها داخل السطر: اكتب `npm install` عندما تقصد الأمر الحرفي، لا مفهوم التثبيت.
Why does this matter? Without the backtick fence, the AI reads everything as instructions it should follow. With the fence, it reads the wrapped text as something to analyze or copy. Three situations where this saves you:
| Situation | Without fences | With fences |
|---|---|---|
| Showing an error message you want diagnosed | Agent may "helpfully" act on words inside the error | Agent analyzes the error as a literal artifact |
| Including example output you want matched | Agent paraphrases the format | Agent reproduces the format exactly |
| Quoting someone else's text inside your prompt | Agent can confuse their voice with your instructions | Clean boundary between quoted text and your ask |
And the most useful trick: show the AI an example of what the correct output looks like. Instead of describing the format you want in three paragraphs, just show one example row inside a fence:
The timings table must look exactly like this:
| Course | Days | Time | Monthly fee |
| ------------- | -------- | ------------- | ----------- |
| Matric Math | Mon-Wed | 4:00-5:30 pm | PKR 3,500 |
Same columns, same order, same fee format.
أحد الأمثلة على الصفوف مثل هذا يخبر الذكاء الاصطناعي بما تريده بالضبط. لا يمكن أن يخطئ في قراءة مثال ملموس بالطريقة التي يمكن أن يخطئ بها في قراءة الوصف المكتوب.
6. الروابط والصور: الإشارة إلى العالم
آخر قطعتين من بناء الجملة:
[link text](https://example.com)
سبب أهمية الروابط: عندما تقوم بتضمين رابط في المطالبة، يستطيع الذكاء الاصطناعي زيارة تلك الصفحة وقراءتها. لذا بدلاً من تلخيص سياسة رسوم مدرستك من الذاكرة (وفهمها بشكل خاطئ)، ما عليك سوى ربط الصفحة وكتابة "يجب أن تتطابق الرسوم مع هذا". يقرأ الذكاء الاصطناعي الصفحة الحقيقية. لقد قمت باستبدال فقرة تحتوي على معلومات ربما تكون خاطئة بالمصدر الفعلي. يقوم Claude.ai بذلك عند تشغيل الوصول إلى الويب، وأدوات قراءة الملفات التي ستقابلها في الجزء 4 تفعل الشيء نفسه مع الملفات الموجودة على جهاز الكمبيوتر الخاص بك.
7. المواصفات الكاملة الأولى الخاصة بك
Why images matter: adding ! before the brackets puts the image directly into your document instead of just linking to it. The description you write inside the brackets is important because it is what the AI reads when it looks at your image. Think of it as a caption that tells the AI what to pay attention to. For example, if your spec includes a screenshot of a page design, a good description would be: ![Mockup: banner on top, course table in the middle, contact buttons pinned to bottom]. That tells the AI exactly what matters in the image.
كل ما سبق يتجمع في قطعة أثرية واحدة: المواصفات. هذا هو شكل المستند الذي ستكتبه مئات المرات في هذا الكتاب: بالنسبة لصفحات الويب الآن، ولاحقًا في الكتاب، بالنسبة ل Digital FTEs، تم تصميم وكلاء الذكاء الاصطناعي للقيام بدور كامل بالطريقة التي قد يفعلها الموظف («المعادل الرقمي بدوام كامل»). مثل هذه المواصفات هي الطريقة التي تلخص بها واحدة. الهيكل العظمي:
# [What you are building] Specification
## Goal
One paragraph: what this is and who it serves.
## Context
Links and facts the agent needs. Attach files; link sources.
## Requirements
- Checkable bullet
- Checkable bullet
- Checkable bullet
## Hard constraints
- Things that must not be violated (budget, deadline, platform)
## Out of scope
- Things you are explicitly NOT asking for
## Expected output
A fenced example, a format description, or a mockup image.
قسمان من هذا الهيكل العظمي يقومان بعمل غير متناسب. خارج النطاق يقضي على الفشل الأكثر شيوعًا للوكيل: التسليم الزائد المتحمّس، ونظام تسجيل الدخول الذي لم تطلبه أبدًا، والميزات السبعة عشر التي تدفن الميزات الثلاثة التي تريدها. المخرجات المتوقعة تقضي على ثاني أكثر العناصر شيوعًا: انحراف التنسيق.
ثم الخطوة التي تفصل المواصفات عن الرغبة: التحقق من صحة المواصفات قبل تنفيذها. لا تسلم مسودتك الأولى إلى وكيل وتأمل. قم بتسليمه إلى الوكيل واطلب منه مهاجمته:
هذه هي مواصفاتي: [لصق المواصفات]
لا تبني أي شيء بعد. أولاً، قم بمراجعة المواصفات نفسها:
- قائمة كل غموض: كل مكان فيه معقولان سيبني القراء شيئين مختلفين.
- قم بإدراج كل القيود المفقودة التي قد تحتاج إلى تخمينها.
- قم بتقييم المواصفات من 10 من حيث الوضوح والاكتمال والدقة إمكانية التحقق، مع تبرير جملة واحدة لكل منهما.
- اقترح التغيير الوحيد الذي من شأنه رفع الدرجة أكثر.
هذه هي حلقة التقدير والتكرار من AI Prompting in 2026، والتي تستهدف المواصفات الخاصة بك بدلاً من مخرجات الوكيل. عادةً ما تستغرق جولتان أو ثلاث جولات مواصفات من 6 إلى 9، ومواصفات 9/10 هي أرخص تحسين للجودة في جميع أعمال الوكيل، لأن كل قطعة أثرية ترث وضوحها. إصلاح رصاصة واحدة غامضة في المواصفات يكلف دقيقة واحدة. إصلاح الشيء الخطأ الذي بناه العميل من تلك الرصاصة يكلف فترة ما بعد الظهر.
سيستمر هذا الكتاب في تعزيز التحول الذهني: في العمل المعتمد على الذكاء الاصطناعي، لا تعد المواصفات بمثابة عمل ورقي قبل العمل الحقيقي. إنه ** هو ** العمل الحقيقي. إن مخرجات الوكيل هي دالة للمواصفات الخاصة بك؛ تحسين المواصفات وكل تجديد يتحسن معها. يدعو الكتاب البناء بهذه الطريقة التطوير القائم على المواصفات، والجزء الأول من الكتاب يطوره بالكامل. هذا الهيكل العظمي هو بذوره.
الجزء الثالث: HTML لغة القراءة
أنت الآن تكتب مدخلات منظمة. يتطلب النصف الثاني من المهارة إخراجًا منظمًا، وهنا تنقلب القاعدة تمامًا. لن تتعلم علامات HTML هنا، لأنك لن تكتبها. الوكيل يكتب لهم. مهمتك هي أن تعرف متى تطلب HTML، وما الذي تطلبه، وكيف تحكم على ما يأتي.
8. لماذا تطلب HTML أصلاً؟
قم بإجراء هذه التجربة مرة واحدة ولن تحتاج إلى الإقناع مرة أخرى. خذ أي خطة أو تقرير أعده لك الوكيل في Markdown، وهو شيء أطول من الشاشة. (ليس لديك إجابة طويلة في تاريخك حتى الآن؟ اطلب خطة دراسة مفصلة لمدة أسبوعين لأي شيء تتعلمه، ثم استخدم ذلك.) ثم اسأل:
قم بتحويل هذا إلى ملف HTML واحد مصمم للقراءة: تسلسل هرمي مرئي واضح، وجدول محتويات صغير، والمفتاح الأرقام كجدول مُصمم، ومخطط SVG واحد للشكل الإجمالي تدفق. قم بتحسينه لشخص يقرأه مرة واحدة على الهاتف.
وما ستحصل عليه هو نفس المعلومات، ولكنك في الواقع ستقرأها هذه المرة. هذا الاختلاف، القراءة مقابل القراءة، هو الحجة بأكملها. لقد شعرت بنسخة صغيرة منه في الدليل الذي مدته دقيقتين في الأعلى؛ يوضح الملحق أنه من النهاية إلى النهاية بمواصفات حقيقية. تفكيك الفرق إلى أجزائه:
| ما يضيفه HTML | كيف يبدو في الممارسة العملية |
|---|---|
| كثافة المعلومات | الجداول، والترميز اللوني، والرسوم البيانية SVG، والتعليمات البرمجية المشروحة، بدلاً من فن ASCII وجدران الرصاص |
| ** سهولة التنقل ** | علامات التبويب، وجدول المحتويات، والأقسام القابلة للطي: خطة مكونة من 500 سطر يمكنك التنقل خلالها |
| قابلية المشاركة | يفتح في أي متصفح. نشر رابط عنصر ويقوم أحد الوالدين أو الطالب أو الزميل بالنقر عليه، بدون تطبيق ولا حساب |
| التفاعل | أشرطة التمرير، والتبديل، والبطاقات القابلة للسحب، والمعاينات المباشرة: يصبح المستند أداة، وليس نسخة مطبوعة |
| ** حلقة "النسخ الخلفي" ** | زر يقوم بتصدير اختياراتك كنص تلصقه مرة أخرى إلى الوكيل: يمكنك الضبط بصريًا، ويستقبله الوكيل بدقة |
وهذا الصف الأخير يستحق نظرة فاحصة، لأنه الأقل وضوحا والأقوى. يصعب التعبير عن بعض التفضيلات بالكلمات: اللون، وسرعة الحركة، وترتيب الأولوية لثلاثين عنصرًا. إن مطالبة الوكيل بإنشاء عناصر تحكم لهم، بالإضافة إلى زر نسخ كنص، يحول "جعله أكثر دفئًا، لا، أقل برتقاليًا" إلى ثلاثين ثانية من سحب شريط التمرير ولصق واحد. عليك البقاء في الحلقة. الحلقة تصبح أكثر إحكاما.
مثال غير برمجي. طلب مدير المدرسة من وكيله تقديم تقرير عن اتجاهات القبول لمدة ثلاث سنوات. كان إصدار Markdown عبارة عن تسع شاشات من الرصاص. قرأت اثنين. تمت إعادة المطالبة به بتنسيق HTML (خطوط الاتجاه كمخططات SVG، لون واحد لكل حرم جامعي، جدول النتائج في الأعلى، التفاصيل مقسمة أدناه)، استغرق التقرير نفسه أربع دقائق لاستيعابه، وأرسلت الرابط المنشور إلى مجلس إدارتها في ذلك المساء. لم يكن أحد في اللوحة ليقوم بفتح مرفق .md. الجميع ينقر على الرابط.
يستخدم إخراج HTML رموزًا أكثر من Markdown، وبالنسبة للإجابة المكونة من ثلاثة أسطر، فهو يمثل عبئًا خالصًا. تستحق التجارة العناء على وجه التحديد عندما يكون الإخراج طويلًا أو مرئيًا أو مشتركًا أو تمت إعادة النظر فيه. ومع نمو مهامك، يصبح ذلك هو معظم المخرجات المهمة. للتبادل السريع في الدردشة، تظل الردود البسيطة هي الخيار الافتراضي الصحيح. قم بمطابقة الشكل مع القراءة وليس مع الموضة.
هناك تكلفة أخرى تؤثر على بيانات الهاتف المحمول: يمكن أن تتضخم قطعة أثرية تفاعلية ثقيلة (الخطوط الخارجية، والصور المدمجة الكبيرة، والمكتبات الكبيرة) إلى عدة ميغابايت، وهي مشكلة حقيقية للقارئ الذي يفتحها على الهاتف عند اتصال بطيء. عندما يكون النطاق الترددي مهمًا، قل ذلك في الموجز: "ملف واحد خفيف الوزن، لا توجد خطوط أو مكتبات خارجية، احتفظ به أقل من 200 كيلو بايت." سيقوم الوكيل بتضمين ما يحتاج إليه وتخطي ما لا يحتاج إليه.
9. أنت لا تكتب لغة HTML؛ أنت تطالب بذلك
لا يتطلب الحصول على HTML من الوكيل أي بناء جملة خاص. في Claude.ai (أو ChatGPT أو Gemini)، قل "قم بإنشاء عنصر HTML" وسيقوم الذكاء الاصطناعي بإنشاء صفحة مباشرة في لوحة جانبية بجوار الدردشة مباشرةً. يمكنك رؤيته والنقر عليه والتفاعل معه على الفور. لاحقًا في الجزء الرابع، ستتعرف على الأدوات الطرفية مثل Claude Code وOpenCode، والتي تعمل على جهاز الكمبيوتر الخاص بك بدلاً من المتصفح. هذه الأدوات ليس لها لوحة جانبية؛ وبدلاً من ذلك، يقومون بكتابة ملفات حقيقية مباشرة إلى جهاز الكمبيوتر الخاص بك. هناك، تقول "اكتب هذا كملف HTML" ويقوم الذكاء الاصطناعي بإنشاء ملف مثل report.html على القرص الذي تفتحه في متصفحك. أدوات مختلفة، نفس الزناد البسيط.
السؤال عن HTML هو الجزء السهل. الحصول على لغة HTML _الجيدة هو المكان الذي تعيش فيه المهارة. الفرق بين الصفحة المتوسطة والصفحة الممتازة ليس في كلمة التشغيل ("قطعة أثرية" أو "ملف HTML") ولكن في الموجز الذي تكتبه حولها. فكر في الأمر بهذه الطريقة: "اصنع لي صفحة" يشبه أن تقول للطاهي "اصنع لي طعامًا". سوف تحصل على شيء ما، ولكن ربما لن يكون ما أردت. كلما أخبرت الذكاء الاصطناعي أكثر عن من سيقرأه، وما الذي يجب أن يحتوي عليه، وكيف ينبغي أن يشعر به، كلما كانت النتيجة أفضل.
أربعة أشياء يجب تضمينها في كل طلب HTML:
- من سيقرأها. تبدو الصفحة المصممة لمديرة المدرسة التي تفحصها مرة واحدة على هاتفها مختلفة تمامًا عن الصفحة المصممة لك كمرجع عمل ستفتحها عشر مرات. أخبر الذكاء الاصطناعي من هو القارئ وكيف سيراه. مثال: "بالنسبة للمؤسسين المشاركين، يقرأان مرة واحدة على أجهزة الكمبيوتر المحمولة الخاصة بهما."
- ما ينبغي أن يحتوي عليه. قم بتسمية الأجزاء المحددة التي تريدها: رسم تخطيطي ل X، وجدول ل Y، وشريط ملخص به ثلاثة أرقام رئيسية في الأعلى، وقسم "مسكتك" في الأسفل. الوكلاء ممتازون في بناء المكونات التي تسميها ومتوسطون في تخمين المكونات التي تريدها. إذا لم تقم بتسميته، فمن المحتمل أنه لن يظهر.
- ما إذا كان يجب أن يكون تفاعليًا. هل يقرأه القارئ للتو، أم يجب أن يكون قادرًا على فعل شيء ما؟ المتزلجون لضبط عدد؟ زر ينسخ اختياراتهم كنص؟ مجموعة من علامات التبويب للتبديل بين طرق العرض؟ إذا كنت لا تحتاج إلى أي تفاعل، تخطي هذا. إذا قمت بذلك، قم بتسمية ما تفعله عناصر التحكم.
- كيف ينبغي قراءتها. ينتج عن خيار "تحسين القراءة مرة واحدة" صفحة خطية نظيفة. "التحسين كمرجع سأعود إليه" ينتج عنه جدول محتويات وأقسام قابلة للطي. إن عبارة "اجعلها جيدة المظهر للعميل" تنتج شيئًا مصقولًا بما يكفي لتقديمه. كل عبارة تسحب التصميم في اتجاه مختلف. اختر واحدة.
يقارن:
Weak: Make an HTML report about my sales data.
Strong: Read the attached sales CSV. Produce one HTML file for
my two co-founders, reading once on laptops: a headline
findings strip on top (3 numbers, large), one SVG chart
of monthly revenue by product, a table of the 5 fastest
growers, and a short "what I'd do next" section. No
scrolling past 3 screens.
انظر إلى النسخة القوية مرة أخرى. فهو يجيب على الأسئلة الأربعة المذكورة أعلاه: من يقرأه (المؤسسان المشاركان لي، على أجهزة الكمبيوتر المحمولة)، ما يجب أن يحتوي عليه (أرقام العناوين، رسم بياني، جدول، قسم التوصيات)، أي تفاعل (لا حاجة إلى أي تفاعل هنا، لذا تم تخطيه)، و كيف ينبغي قراءته (القراءة مرة واحدة، دون التمرير فوق الثلاث شاشات). هذا هو كل ما يتطلبه الأمر. أنت تكتب نفس النوع من الملخص المنظم الذي تعلمته في الجزء 2، لكن الشيء الذي تطلبه هذه المرة هو صفحة مصممة بدلاً من إجابة نصية.
الحكم على ما يعود. ينتقل نظام الدرجات مباشرة. نموذج تقييم مفيد لأي عنصر HTML، من أصل 10 لكل منها: _هل تم تمثيل كل حقيقة من المصدر الخاص بي؟ هل يمكنني العثور على أهم شيء في 10 ثوانٍ؟ هل يقرأ على الهاتف؟ هل يمكنني إعادة توجيه هذا الرابط؟ _ أي شيء أقل من 9، قم بتسمية الفجوة وإعادة إنشائها. إن تكرار قطعة أثرية أمر رخيص؛ يقوم الوكيل بتحريره في مكانه.
10. أنماط HTML الخمسة
الآن بعد أن عرفت كيفية طلب HTML، ما الذي يجب أن تطلبه فعليًا؟ من الناحية العملية، تنقسم معظم مخرجات HTML إلى خمسة أشكال شائعة. يستخدم الفريق الذي يقف خلف Claude Code في Anthropic هذه الأنماط يوميًا، وستفعل أنت أيضًا. يشرح كل نمط أدناه ماهيته ومتى يتم استخدامه، ويمنحك رسالة جاهزة لللصق يمكنك تجربتها الآن.
النمط 1: الخطط والاستكشافات. عندما تحتاج إلى اتخاذ قرار، لا تطلب من الذكاء الاصطناعي إجابة واحدة. اطلب منه وضع عدة خيارات جنبًا إلى جنب كشبكة مرئية، حتى تتمكن من مقارنتها بنظرة سريعة. يحصل كل خيار على بطاقته الخاصة التي توضح ما تكسبه وما تتخلى عنه. تنظر أولاً، وتختار ما يعجبك، وعندها فقط تطلب من الذكاء الاصطناعي أن يبنيها بالتفصيل. هذه هي حلقة تكرار العصف الذهني من دورة مطالبة الذكاء الاصطناعي، ولكن الخيارات الآن عبارة عن صفحة مصممة يمكنك رؤيتها فعليًا، وليست جدارًا من الرموز النقطية التي يتعين عليك قراءتها.
أنا أقرر كيفية تنظيم [الشيء]. توليد 5 بشكل واضح طرق مختلفة ووضعها في ملف HTML واحد كملف الشبكة يمكنني المقارنة جنبا إلى جنب. قم بتسمية كل بطاقة بالرمز المقايضة التي يقوم بها. لا توصي بعد. اسمحوا لي أن ننظر أولا.
النمط 2: الشروحات والتقارير. لديك مستند طويل، أو ملف بيانات، أو كومة من ملاحظات الاجتماع التي لن تقرأها أبدًا سطرًا تلو الآخر. اطلب من الذكاء الاصطناعي أن يقرأها لك وينتج ملخصًا بتنسيق HTML من صفحة واحدة: رسم تخطيطي لكيفية عمل العملية الرئيسية، والحقائق الأساسية مستخرجة في جدول مصمم، وقسم "مسكتك" في الأسفل لأي شيء مفاجئ. هذا هو النمط الذي استخدمته مديرة المدرسة سابقًا في هذه الدورة لتحويل بيانات القبول لمدة ثلاث سنوات إلى تقرير قرأه مجلس إدارتها بالفعل.
Read [source]. Produce a one-page HTML explainer: an SVG
diagram of how [system/process] works, the 4 key facts
annotated, and a "gotchas" section at the bottom. Optimize
for someone reading it exactly once.
النمط 3: مراجعة الكود وفهمه. إذا كنت تعمل باستخدام الكود (أو ستعمل لاحقًا في هذا الكتاب)، فإن عرض ما تغير ولماذا هو أمر مؤلم في نص عادي. في لغة HTML، يمكن للذكاء الاصطناعي إنتاج فروق مرمزة بالألوان، وتعليمات برمجية مشروحة مع توضيحات في الهوامش، ومخططات انسيابية لكيفية اتصال القطع. تم تطوير هذا النمط بالكامل في الدورة التدريبية المكثفة للترميز الوكيل؛ في الوقت الحالي، كل ما عليك فعله هو معرفة أنه موجود وأن HTML هو السبب الذي يجعل مراجعات التعليمات البرمجية قابلة للقراءة.
النمط 4: نماذج التصميم الأولية. بعض الأشياء من المستحيل وصفها بالكلمات. ما الظل من اللون الأزرق؟ كيف ينبغي أن تكون الزوايا مستديرة؟ ما الحجم الذي يجب أن يكون عليه العنوان؟ بدلاً من التنقل ذهابًا وإيابًا باستخدام الذكاء الاصطناعي في النص ("أكثر دفئًا قليلاً، ليس أقل برتقاليًا، وليس برتقاليًا")، اطلب منه إنشاء صفحة تحتوي على عناصر تحكم مباشرة: أشرطة التمرير، وعينات الألوان، وتبديل حجم الخط. يمكنك السحب والضبط حتى يبدو صحيحًا، ثم النقر فوق الزر "نسخ اختياراتي" الذي يصدر إعداداتك كنص تلصقه مرة أخرى إلى الذكاء الاصطناعي. تحل عشر ثوانٍ من السحب محل عشر جولات من "المحاولة مرة أخرى".
أنا أختار المظهر ل [الشيء] ولا أستطيع وصف ما أقوم به تريد في الكلمات. أنشئ قطعة أثرية بتنسيق HTML باستخدام بطاقة نموذجية واحدة و الضوابط الحية لذلك: أشرطة التمرير لدفء الخلفية والزاوية الاستدارة، وبعض عينات الألوان المميزة، وتبديل حجم الخط، و زر "نسخ المعلمات" الذي يصدر اختياراتي النهائية ك نص يمكنني لصقه لك.
النمط 5: المحررون المهملون. النمط الأكثر استخفافًا. في بعض الأحيان تحتاج إلى أداة مخصصة صغيرة لوظيفة واحدة: تحديد أولويات 30 مهمة، وفرز 20 فكرة إلى فئات، وتصنيف 15 مرشحًا. بدلاً من القيام بذلك في رأسك أو على الورق، اطلب من الذكاء الاصطناعي إنشاء صفحة سحب وإفلات سريعة: بطاقات يمكنك سحبها بين الأعمدة مثل "الآن" و"التالي" و"لاحقًا"، مع زر في الأسفل ينسخ ترتيبك النهائي كنص. استخدمها لمدة عشر دقائق، وانقر فوق زر النسخ، والصق النتيجة مرة أخرى في الذكاء الاصطناعي، ولا تفتح الصفحة مرة أخرى أبدًا. الصفحة يمكن التخلص منها. النص الذي يصدره هو ما تحتفظ به. إن زر التصدير هذا هو ما يجعل النموذج يعمل: فهو يحول القرار المرئي مرة أخرى إلى نص دقيق يمكن للذكاء الاصطناعي التصرف بناءً عليه.
لاحظ الخط الفاصل: في كل نمط، يتم إدخال Markdown (أو بياناتك)، ويخرج HTML، وأي شيء يحتاج إلى مواصلة المحادثة يعود كنص. عدم التماثل من المفهوم 2، أصبح الآن كإيقاع عمل.
11. عندما تكون الوجهة عبارة عن موجز وليس متصفح
هناك استثناء واحد مهم لقاعدة "HTML out"، وإذا كنت تستخدم WhatsApp أو LinkedIn أو Facebook، فسوف تقوم بذلك على الفور. تعمل القاعدة عندما يفتح شخص ما صفحتك في المتصفح، لأن المتصفح يعرف كيفية عرض HTML. لكن موجز الوسائط الاجتماعية ليس متصفحًا. عندما تقوم بالنشر على WhatsApp أو LinkedIn، يتجاهل التطبيق تنسيقك ويعرض المحتوى الخاص بك باستخدام تصميمه الخاص. لا يمكنك التحكم في كيفية ظهورها. لذلك يتغير السؤال: بدلاً من السؤال "من يقرأ هذا الأخير؟" عليك أن تسأل "ما الذي تظهره الوجهة بالفعل؟"
إليك ما تعرضه كل منصة فعليًا عند النشر:
- يقوم WhatsApp بإزالة جميع التنسيقات تقريبًا. يمكنك جعل النص غامقًا باستخدام
*asterisks*ومائلًا باستخدام_underscores_، ولكن هذا كل ما في الأمر. العناوين والجداول والتخطيطات ذات الأنماط: يتجاهل WhatsApp كل ذلك. لذا، عندما تطلب من الذكاء الاصطناعي كتابة شيء ما لتطبيق WhatsApp، اطلب نصًا عاديًا بأسطر قصيرة، وفكرة واحدة في كل سطر، وربما رمزًا تعبيريًا لتمييز كل نقطة، ورابطًا مجردًا في النهاية إذا كنت تشارك عنوان URL. - يعمل كل من LinkedIn وFacebook بنفس الطريقة: نص المشاركة عبارة عن نص عادي. لا يمكنك كتابة كلمة بخط غامق، أو إضافة عنوان، أو إدراج جدول. (يقوم بعض الأشخاص بتزييف الخط الغامق على LinkedIn عن طريق نسخ أحرف خاصة تبدو جريئة، ولكن هذا حل بديل وليس ميزة.) عندما تطلب من الذكاء الاصطناعي كتابة منشور على LinkedIn، فإن الشيء الأكثر أهمية هو أن السطر الأول يجذب الانتباه، لأن LinkedIn يخفي كل شيء بعد الأسطر القليلة الأولى خلف زر "... شاهد المزيد". بالنسبة للفيسبوك، اجعلها قصيرة. لكليهما، اطلب نصًا عاديًا مكتوبًا لهذا النظام الأساسي المحدد.
إن لصق HTML الخام كنص للنشر هو الخطوة الوحيدة الخاطئة دائمًا؛ يهبط كجدار من الأقواس الزاوية.
فهل يصبح HTML عديم الفائدة على وسائل التواصل الاجتماعي؟ لا، لا يزال الأمر مهمًا في مكانين:
- بطاقة معاينة الرابط. هل تعرف تلك البطاقات الصغيرة التي تظهر عندما يقوم شخص ما بمشاركة رابط على WhatsApp أو LinkedIn أو Facebook؟ تلك التي لها عنوان ووصف قصير وأحيانًا صورة؟ يتم إنشاء هذه البطاقات تلقائيًا بواسطة النظام الأساسي. فهو يزور الصفحة التي قمت بربطها، ويبحث عن تسميات مخفية محددة داخل HTML (تسمى علامات Open Graph)، ويستخدمها لإنشاء البطاقة. إذا كانت هذه التصنيفات مفقودة، فستحصل على معاينة فارغة قبيحة باستخدام عنوان URL الأولي فقط. إذا كانوا موجودين، فستحصل على بطاقة مصممة بعنوان ووصف وصورة تجعل الأشخاص يرغبون في النقر عليها. لا تحتاج إلى فهم التفاصيل الفنية. فقط أخبر الذكاء الاصطناعي بما يلي: "قم بتضمين العلامات الوصفية ل Open Graph بحيث تبدو معاينة الرابط مصممة عند مشاركتها على WhatsApp أو LinkedIn." يعرف الذكاء الاصطناعي ما يجب إضافته.
- صور مصممة للمشاركات. تعرض الخلاصات الاجتماعية الصور بشكل أكثر بروزًا من النص. إذا كنت بحاجة إلى صورة ذات مظهر احترافي لمنشور ما (بطاقة اقتباس، أو رسم بياني إحصائي، أو مخطط معلوماتي)، فإن إحدى الطرق السريعة لإنشاء هذه الصورة هي أن تطلب من الذكاء الاصطناعي إنشاءها كصفحة HTML مصممة، ثم حفظ تلك الصفحة كملف صورة (PNG). قمت بنشر الصورة، وليس HTML. أخبر الذكاء الاصطناعي: "أنشئ هذه كبطاقة HTML مصممة، ثم احفظها كصورة PNG عالية الدقة يمكنني نشرها على LinkedIn." نفس المهارة التي تعلمتها في تلخيص صفحات HTML في الجزء 3 تعمل هنا؛ أنت تقوم فقط بحفظ النتيجة كصورة بدلاً من نشرها كصفحة.
وبالتالي فإن الصورة الكاملة لوسائل التواصل الاجتماعي هي تقسيم واضح: نص عادي لما تكتبه في المنشور، HTML لبطاقة معاينة الرابط ولتصميم الصور التي تنشرها.
| ما تقوم بنشره | ما الذي يجب أن تطلبه من الذكاء الاصطناعي | لماذا |
|---|---|---|
| رسالة واتس اب | نص عادي، سطور قصيرة، فكرة واحدة في كل سطر | يقوم WhatsApp بإزالة جميع التنسيقات باستثناء الخط الغامق والمائل الأساسي |
| منشور على LinkedIn أو Facebook | نص عادي مكتوب لهذا النظام الأساسي | يتحكم التطبيق في كيفية ظهور منشورك؛ يتم تجاهل التنسيق الخاص بك |
| الصفحة التي تشاركها كرابط في منشور | HTML مع علامات معاينة الارتباط | تقوم المنصة بقراءة التصنيفات المخفية في صفحتك لإنشاء بطاقة المعاينة |
| صورة لإرفاقها بمنشور (بطاقة اقتباس، رسم إحصائي) | HTML، ثم يتم حفظه كصورة PNG | تظهر الخلاصات الصور بشكل بارز؛ اطلب من الذكاء الاصطناعي تصميمه بتنسيق HTML، ثم احفظه كصورة |
12. النشر: من القطعة إلى الرابط
إن إنشاء صفحة HTML ووضعها على الإنترنت هما خطوتان مختلفتان. لقد قمت حتى الآن بإنشاء صفحات؛ هذا القسم يدور حول مشاركتها. هناك أربع طرق للقيام بذلك، من الأسهل إلى الأكثر ديمومة. ابدأ بالمنتج الأول الذي يناسب احتياجاتك.
الخيار 1: النشر المدمج في Claude.ai (الأسهل، بدون إعداد). عندما ينشئ Claude عنصر HTML في اللوحة الجانبية، ابحث عن زر المشاركة أو النشر في تلك اللوحة. بنقرة واحدة تحول صفحتك إلى رابط عام يمكن لأي شخص فتحه، دون الحاجة إلى حساب، ولا استضافة، ولا ملف لإدارته. قم بإسقاط هذا الرابط في WhatsApp أو البريد الإلكتروني، وبذلك تكون قد انتهيت. هناك شيئان يجب معرفتهما: الرابط عام (أي شخص لديه يمكنه رؤية صفحتك، فلا تنشر أي شيء خاص)، ويمكنك إلغاء نشره لاحقًا من نفس القائمة. هذا هو الخيار الأفضل للمشاركة السريعة: تقرير، وملخص من صفحة واحدة، وأي شيء تريد أن يراه شخص ما الآن. المقايضة: الصفحة موجودة على خوادم كلود، وليس خوادمك، لذا فهي ليست المكان المناسب لشيء تريده على موقع الويب الخاص بك على المدى الطويل. (يمتلك ChatGPT وGemini عناصر تحكم مماثلة في المشاركة على لوحات Canvas الخاصة بهما.)
الخيار 2: GitHub Gist (سهل، ويمكنك الاحتفاظ بالملف). GitHub هو موقع ويب حيث يقوم الأشخاص بتخزين الملفات ومشاركتها. يعد Gist طريقة سريعة لمشاركة ملف واحد هناك. تقوم بلصق HTML الخاص بك في Gist، ويعطيك رابطًا. لرؤية الصفحة كصفحة مصممة بدلاً من التعليمات البرمجية الأولية، افتح رابط Gist من خلال عارض مجاني مثل htmlpreview.github.io. الميزة على الخيار 1: أنك تمتلك الملف، ويمكنك تعديله في أي وقت، ويحتفظ بسجل لكل تغيير تقوم به.
الخيار 3: صفحات GitHub (الدائمة، المجانية، عنوان الويب الخاص بك). إذا كان من المفترض أن تظل صفحتك على الإنترنت بشكل دائم، مثل الصفحة المقصودة لشركتك أو لمحفظة أعمالك، فإن صفحات GitHub تمنحك عنوان ويب مجانيًا وثابتًا مثل yourname.github.io/mypage. يستغرق الإعداد بضع خطوات إضافية (تقوم بإنشاء مستودع، وتحميل ملفك، والضغط على مفتاح الإعدادات)، ولكن بمجرد تشغيله، تظل صفحتك متصلة بالإنترنت مجانًا ويمكنك أيضًا ربط اسم النطاق الخاص بك بها. هذا هو الاختيار الصحيح عندما تريد شيئًا يدوم طويلاً وتتحكم فيه بشكل كامل.
الخيار 4: Netlify (دائم، مع أبسط إعداد). Netlify هي خدمة استضافة مجانية تقع بين سهولة زر النشر الخاص ب Claude ودوام صفحات GitHub. أنشئ حسابًا مجانيًا باستخدام عنوان بريد إلكتروني فقط، ثم اسحب ملف HTML الخاص بك إلى صفحة Netlify. وبعد بضع ثوانٍ، تصبح صفحتك متاحة على عنوان ويب حقيقي. لا يوجد إعداد تقني، ولا سطر أوامر، ولا أدوات برمجة. إذا قمت بشحن مشروع في AI Prompting in 2026، فهذه هي نفس حركة السحب والإفلات التي استخدمتها هناك. بالنسبة لمن يريد عنوان ويب حقيقيًا ودائمًا دون أي معرفة تقنية، فعادةً ما يكون هذا هو الطريق الأسهل.
أي واحد يجب أن تختار؟
| ما تحتاجه | يستخدم |
|---|---|
| رابط للمشاركة الآن، لا شيء لإعداده | ** نشر Claude.ai ** |
| للاحتفاظ بالملف وتحريره لاحقًا | ** جيثب جوهر ** |
| صفحة دائمة على عنوان الويب الخاص بك | صفحات جيثب |
| صفحة دائمة بأبسط إعدادات (السحب والإفلات) | نتليفاي |
تذكير واحد ينطبق على جميع الخيارات الأربعة: عندما تشارك رابطك المنشور على WhatsApp أو LinkedIn أو Facebook، ستحاول المنصة إنشاء بطاقة معاينة له (البطاقة الصغيرة التي تحتوي على عنوان ووصف وصورة تظهر أسفل منشورك). للتأكد من أن البطاقة تبدو جيدة بدلاً من أن تكون فارغة، أخبر الذكاء الاصطناعي: "قم بتضمين علامات معاينة الرابط بحيث تبدو مصممة عند مشاركتها على وسائل التواصل الاجتماعي." يرتبط هذا بما تعلمته في المفهوم 11.
13. عندما تكون الوجهة مستندًا، وليس متصفحًا
كانت الخلاصات الاجتماعية هي الاستثناء الأول لقاعدة "خروج HTML". هنا هو الأمر الثاني، وسيكون الأمر أكثر أهمية بالنسبة للعديد من القراء: في بعض الأحيان، يحتاج الشخص الذي يقرأ مخرجاتك إلى تنسيق ملف معين، وليس كصفحة ويب. لا يمكن للمحاسب إرسال رابط Claude.ai كإقرار ضريبي. لا يمكن للمدير إضافة تعليقات إلى صفحة ويب بنفس الطريقة التي يمكنهم بها إضافة تعليقات إلى مستند Word. يتوقع مجلس الإدارة شرائح، وليس علامة تبويب المتصفح. لذا فإن السؤال من المفهوم 2 يحتاج إلى إضافة صغيرة واحدة:
من يقرأ هذا الأخير وماذا سيفعل به؟
القراءة هي مجرد شيء واحد يفعله الأشخاص باستخدام المستند. كما يقومون أيضًا بالتوقيع عليه أو طباعته أو تحريره أو إضافة تعليقات إليه أو عرضه على الشاشة أو إدخال الأرقام في جدول البيانات الخاص بهم. يشير كل من هذه الإجراءات إلى تنسيق معين يستخدمه المستلم بالفعل:
| ماذا سيفعل الشخص بها | أعطهم | لماذا هذا الشكل |
|---|---|---|
| فقط اقرأها | رابط إلى صفحة HTML | الرابط هو أسهل شيء يمكن فتحه. لا تنزيل، لا حاجة للتطبيق. إذا كانوا بحاجة إلى القراءة فقط، فسيظل الرابط يفوز. |
| قم بالتوقيع عليه أو طباعته أو حفظه كسجل دائم | بي دي إف | يبدو ملف PDF كما هو في كل مكان ولا يمكن تغييره عن طريق الخطأ. هذه هي النقطة. |
| قم بتحريره أو إضافة تعليقات أو دمجه في المستند الخاص بهم | ** مستند Word (.docx) ** | سيقومون بفتحه في Word واستخدام تتبع التغييرات. أنت تتناسب مع سير عملهم. |
| تقديمه في اجتماع | الشرائح (.pptx) | سيقومون بفتحه في PowerPoint أو Keynote أو Google Slides والنقر عليه. |
| العمل مع الأرقام (تغيير الافتراضات وإضافة الصيغ وإنشاء المخططات) | ** جدول بيانات إكسل (.xlsx) ** | سيقومون بفتحه في Excel أو Google Sheets والتفاعل مع البيانات. |
| قم بتغذية البيانات في أداة أخرى أو لصقها مرة أخرى في الذكاء الاصطناعي | ملف CSV | CSV هو نص عادي به فواصل تفصل بين القيم. يمكن لأي أداة قراءتها. إنها أبسط طريقة لنقل البيانات بين الأنظمة. |
لاحظ أن CSV وExcel يتبعان نفس النمط مثل Markdown وHTML. ملف CSV للبيانات هو بمثابة Markdown للنص: عادي وبسيط ومخصص للآلات والأدوات. يمثل برنامج Excel بالنسبة للبيانات ما يمثله HTML بالنسبة للنص: منسق، ومرئي، ومخصص للإنسان لفتحه والتعامل معه. وينطبق نفس السؤال: إذا قرأه الجهاز أو الذكاء الاصطناعي بعد ذلك، فاستخدم ملف CSV. إذا فتحه شخص ما في جدول بيانات، استخدم Excel.
كيف تطلبها فعليًا. لا تحتاج إلى أي مهارة جديدة. يمكنك استخدام نفس الملخص المنظم الذي تعلمته في الجزء 2، مع إضافة واحدة: أخبر الذكاء الاصطناعي بالتنسيق الذي تريده ومن يناسبه. إذا كان لدى المستلم قالب محدد (ترويسة شركة، أو تصميم شريحة، أو تخطيط جدول بيانات)، فأرفق ملفًا نموذجيًا وقل "طابق هذا التنسيق". يؤدي ذلك إلى إزالة التخمين بنفس الطريقة التي يتم بها تسييج المخرجات المتوقعة في المفهوم 5.
إليك ما يجب قوله لكل تنسيق:
للحصول على ملف PDF (للشيء الذي لا ينبغي تغييره بعد الإرسال: خطاب موقع، تقرير مقدم، نشرة مطبوعة):
تحويل هذا التقرير إلى ملف PDF يمكنني إرساله بالبريد الإلكتروني إلى عميلي. احتفظ بال التنسيق نظيف واحترافي. قم بتضمين العنوان والتاريخ و اسمي في الأعلى.
للحصول على مستند Word (بالنسبة لشيء سيقوم المستلم بتحريره: عقد سيضع خطوطًا حمراء عليه، ومذكرة سيضيف تعليقات عليها):
قم بتصدير هذا كمستند Word (.docx). تطابق أنماط العناوين والتخطيط من القالب المرفق سوف يستخدمه المتلقي تتبع التغييرات لتحريرها.
للحصول على عرض تقديمي للشرائح (بالنسبة لشيء سيقدمه شخص ما مباشرة أو من خلال النقر):
قم بإنشاء عرض تقديمي مكون من 10 شرائح (.pptx) من هذه المواصفات. مفتاح واحد نقطة لكل شريحة، وشريحة ملخص في النهاية. حافظ على الحد الأدنى من النص؛ استخدام الصور والنقاط. جمهوري هو [أوصفهم].
للحصول على جدول بيانات (بالنسبة للأرقام التي سيقرأها شخص ما، أو يحررها، أو يشغلها):
خذ هذه البيانات وأنتج ملف Excel (.xlsx) شهريًا الإجماليات في علامة التبويب الأولى، ومخطط الاتجاه في علامة التبويب الثانية، والبيانات الخام في الثالث. تنسيق الأرقام كعملة.
للحصول على بيانات أولية لأداة أخرى (بالنسبة للبيانات التي ستدخلها في برنامج آخر أو تلصقها مرة أخرى في الذكاء الاصطناعي):
قم بتصدير هذا كملف CSV. صف واحد لكل عنصر، أعمدة للاسم، التاريخ والمبلغ والفئة. لا يوجد تنسيق ولا صيغ، فقط بيانات نظيفة.
في الدردشة (Claude.ai، ChatGPT، Gemini)، يقوم الذكاء الاصطناعي بإعادة هذه الملفات كملفات قابلة للتنزيل. في الأدوات الطرفية وأدوات سطح المكتب من الجزء 4، يكتبها الذكاء الاصطناعي مباشرة إلى جهاز الكمبيوتر الخاص بك.
النمط الموجود بالأسفل. لاحظ أنه في كل حالة، قمت بكتابة المحتوى الخاص بك مرة واحدة في نص منظم عادي (Markdown للكلمات، CSV للأرقام)، وكان تنسيق المكتب (PDF، Word، الشرائح، Excel) هو الخطوة الأخيرة، التصدير. يظل مصدر الحقيقة نظيفًا وسهل القراءة للذكاء الاصطناعي. ملف المكتب هو ما ترسله إلى الشخص الذي يحتاج إليه. إذا كنت بحاجة إلى تغيير شيء ما لاحقًا، فقم بتحرير المصدر وأعد إنشاء عملية التصدير. لا تقم بتحرير مستند Word وحاول العمل بشكل عكسي.
مثال حقيقي. محاسب ينهي العمل المالي للعميل في نهاية العام. يحتاج ثلاثة أشخاص إلى الإخراج، وكل واحد يحتاج إلى تنسيق مختلف:
- يحصل مراجع التدقيق على ملف Excel، لأنه يحتاج إلى تغيير الأرقام ورؤية إعادة حساب الصيغ.
- يحصل مجلس الإدارة على رابط منشور إلى صفحة HTML، لأنه يحتاج فقط إلى قراءة الملخص ولن يقوم بتعديل أي شيء.
- **يظهر خطاب المشاركة الموقّع كملف PDF، لأنه سيتم تقديمه كوثيقة قانونية ويجب ألا يتغير أبدًا بعد التوقيع.
مشروع واحد، ثلاثة قراء، ثلاثة أشكال. لم يقم المحاسب باختيار التنسيقات حسب العادة. اختارتهم بسؤال: ماذا سيفعل هذا الشخص بها؟
الجزء 4: تمرين واحد، ثلاث حركات
كل ما تعلمته حتى الآن يعمل في أي أداة من أدوات الذكاء الاصطناعي. لكن الأدوات المختلفة لها طرق مختلفة للقيام بالعمل، وهذا الجزء يوضح لك كيف يبدو ذلك. يستخدم الكتاب ثلاثة أنواع من الأدوات، ونطلق عليها ثلاث حركات:
- الدردشة — ما تستخدمه بالفعل: Claude.ai أو ChatGPT أو Gemini في متصفحك. تكتب، ويجيب الذكاء الاصطناعي في نفس النافذة.
- المحطة الطرفية — أدوات مثل Claude Code وOpenCode التي تعمل على جهاز الكمبيوتر الخاص بك من خلال سطر الأوامر. سوف تتعلم هذه الأمور في الدورة التدريبية المكثفة للترميز الوكيل. يمكنهم قراءة ملفاتك ومجلداتك مباشرة بدلاً من انتظار لصق الأشياء فيها.
- سطح المكتب — تطبيقات مثل Cowork وOpenWork التي تعمل على جهاز الكمبيوتر الخاص بك بواجهة مرئية (بدون سطر أوامر). سوف تتعلم هذه الأمور في الدورة التدريبية المكثفة للعمل المشترك وOpenWork. يعثرون على ملفاتك ويطلبون منك الموافقة على الخطة قبل القيام بأي شيء.
**في الوقت الحالي، ما عليك سوى الخيار الأول (الدردشة). ** أما الاثنان الآخران فهما معاينتان. قم بتصفحها لمعرفة ما سيأتي، ثم عد لتجربتها بعد الدورات المذكورة أعلاه.
التمرين. دوّن أي ملاحظات فوضوية لديك (خطة مشروع، أو حدث تنظمه، أو جدول دراسي) وحوّلها إلى شيئين:
- مواصفات Markdown (
spec.md): مواصفات نظيفة ومنظمة باستخدام الهيكل الأساسي من المفهوم 7، مُقيَّمة ومُحسَّنة حتى تحصل على 9 درجات أو أعلى. - صفحة HTML (
report.html): ملخص مصمم من صفحة واحدة لهذه المواصفات ليقرأها شخص آخر، مع تخطيط مرئي وجدول حقائق أساسية ورسم تخطيطي.
هذه هي الدورة التدريبية بأكملها في تمرين واحد: يتم تطبيق Markdown الدقيق للجهاز، ويتم إصدار HTML الغني للإنسان. التمرين هو نفسه في جميع الأدوات الثلاثة. فقط الطريقة التي تعطي بها الذكاء الاصطناعي ملاحظاتك هي التي تتغير؛ المطالبة نفسها بالكاد تتغير على الإطلاق.
14. الحركات الثلاث
الحركة 1: الدردشة. هذه هي الطريقة الرئيسية؛ كل شيء يحدث في محادثة واحدة في Claude.ai (أو ChatGPT / Gemini، مع قول "Canvas" بدلاً من "artifact").
إليك ما تفعله خطوة بخطوة:
الخطوة 1: الصق ملاحظاتك الفوضوية واطلب المواصفات. انسخ ملاحظاتك في الدردشة وأخبر الذكاء الاصطناعي بما يلي:
قم بإعادة هيكلة هذه الملاحظات إلى مواصفات Markdown باستخدام هذه الأقسام: الهدف، السياق، المتطلبات، القيود الصعبة، خارج النطاق والمخرجات المتوقعة. أظهرها لي كقطعة أثرية من Markdown.
الخطوة 2: قم بتقييم المواصفات وتحسينها. لا تتجاوز هذه الخطوة. أخبر الذكاء الاصطناعي:
قم بمراجعة المواصفات التي كتبتها للتو. قم بإدراج أي شيء غير واضح أو يمكن قراءتها بطريقتين. صنفها من 10 من حيث الوضوح، والاكتمال، وما إذا كان يمكن التحقق من كل متطلب على أنه قد تم أم لا. أصلح أي شيء سجل أقل من 9.
إذا ظلت النتيجة أقل من 9 بعد الإصلاح، فاطلب من الذكاء الاصطناعي التقييم والإصلاح مرة أخرى. كرر حتى تتوقف الدرجات عن التسلق.
الخطوة 3: تحويل المواصفات إلى صفحة HTML مصممة. اطلب الآن الإخراج الثاني:
قم بإنشاء قطعة أثرية ثانية: صفحة HTML واحدة تعرض هذه المواصفات إلى [وصف جمهورك الحقيقي، على سبيل المثال: "قائد فريقي" أو "الأهل". في المدرسة"]. تضمين تخطيط مرئي واضح، والمتطلبات كجدول منمق، ورسم تخطيطي يوضح التدفق الإجمالي. اجعلها قابلة للقراءة على الهاتف.
الخطوة 4: النشر والتحقق من هاتفك. استخدم زر النشر الموجود على لوحة العناصر (راجع المفهوم 12 للاطلاع على الخيارات). افتح الرابط على هاتفك. اسأل نفسك بصراحة: هل سأرسل هذا إلى شخص ما؟ إذا لم يكن الأمر كذلك، فأخبر الذكاء الاصطناعي بالخطأ واطلب منه إصلاحه.
لماذا تعتبر الدردشة أفضل نقطة بداية: ينشئ الذكاء الاصطناعي الصفحة بجوار محادثتك مباشرةً، ويمكنك رؤيتها على الفور، ويتم إجراء التعديلات عندما تطلب إجراء تغييرات، وتكون المشاركة بنقرة واحدة. بالنسبة لزوج واحد من المواصفات والصفحات، لا يوجد شيء أسرع. عندما تصل الدردشة إلى الحد الأقصى: يمكنها العمل فقط مع ما تلصقه أو ترفقه. إذا كانت ملاحظاتك متناثرة عبر العديد من الملفات والمجلدات، فأنت بحاجة إلى أداة يمكنها العثور عليها بمفردها. هذا هو بالضبط ما تضيفه حركات المحطة الطرفية وسطح المكتب أدناه.
الحركة 2: الوحدة الطرفية (معاينة، ستتعلم ذلك لاحقًا). يعد كلود كود وOpenCode من أدوات الذكاء الاصطناعي التي تعمل داخل الوحدة الطرفية (نافذة الأوامر النصية على جهاز الكمبيوتر الخاص بك). لا تحتاج إلى تعلمهم الآن. هذه معاينة لما يصبح ممكنًا عندما تفعل ذلك.
الفرق الكبير بين الدردشة: بدلاً من لصق ملاحظاتك في المتصفح، يمكنك وضع ملاحظاتك في مجلد على جهاز الكمبيوتر الخاص بك، وفتح الوحدة الطرفية في هذا المجلد، وسيقرأ الذكاء الاصطناعي كل ملف تلقائيًا. ليس عليك أن تتذكر ما تريد لصقه؛ يجد الذكاء الاصطناعي كل شيء. المطالبة هي تقريبًا نفس إصدار الدردشة:
قراءة كل ملف في هذا المجلد. قم بإنتاج مواصفات Markdown تسمى spec.md باستخدام الهدف / السياق / المتطلبات / القيود الصعبة / خارج النطاق / هيكل المخرجات المتوقعة. صنفها بنفسك و استمر في تحسينه حتى يصل إلى 9 أو أعلى. ثم انتج report.html: ملخص مرئي من صفحة واحدة مع رسم تخطيطي. أخبرني عندما يكون كلا الملفين جاهزين وما الذي يجب علي مراجعته.
يقوم الذكاء الاصطناعي بإنشاء ملفين حقيقيين على جهاز الكمبيوتر الخاص بك (spec.md وreport.html) يمكنك فتحهما أو تحريرهما أو تحميلهما في أي مكان. في الدردشة، تكون المخرجات موجودة داخل المحادثة. هنا، يعيشون على القرص الخاص بك.
الحركة 3: سطح المكتب (معاينة، ستتعلم ذلك لاحقًا). Cowork وOpenWork عبارة عن تطبيقات سطح مكتب تقوم بنفس الشيء مثل الأدوات الطرفية، ولكن مع واجهة مرئية بدلاً من سطر الأوامر. يمكنك توجيه التطبيق إلى مجلد الملاحظات الخاص بك والسؤال بلغة واضحة. الإضافة المهمة: نظرًا لأن هذه التطبيقات يمكنها بالفعل تغيير الملفات الموجودة على جهاز الكمبيوتر الخاص بك، فاطلب منهم دائمًا أن يعرضوا لك خطة أولاً وانتظر موافقتك قبل كتابة أي شيء:
ابحث في هذا المجلد. أرني خطة أولاً: ما هي الملفات التي تريدها سوف يقرأ، وما سيتضمنه spec.md وreport.html. لا أكتب أي شيء حتى أقول اذهب.
يعثر التطبيق على ملفاتك، ويقترح ما سيفعله، وينتظر. يمكنك مراجعة الخطة والموافقة عليها (أو تعديلها)، وعندها فقط تقوم بإنشاء الملفات. تعد عادة التخطيط ثم الموافقة هذه مهمة عندما تتمكن أداة الذكاء الاصطناعي من لمس ملفاتك الحقيقية، وتتصل بنظام الأذونات الذي تعلمته في مطالبة الذكاء الاصطناعي في 2026.
ما هي الحركة التي يجب أن تستخدمها؟
| حالتك | يستخدم |
|---|---|
| يمكن وضع ملاحظاتك في لصق أو ملف مرفق، وتريد رابطًا قابلاً للمشاركة في أقل من دقيقة | الدردشة (Claude.ai أو ChatGPT أو Gemini) |
| ملاحظاتك متناثرة عبر العديد من الملفات والمجلدات الموجودة على جهاز الكمبيوتر الخاص بك | المحطة (كلود كود أو OpenCode) |
| ملاحظاتك موجودة في مجلدات يومية وتريد تطبيقًا مرئيًا يسألك قبل أن يلمس أي شيء | سطح المكتب (العمل الجماعي أو OpenWork) |
شيء آخر يستحق المعرفة: كل حركة لها خياران للأداة. تم تصنيع Claude Code وCowork بواسطة Anthropic (الشركة التي تقف وراء Claude) وتم إعدادهما بالكامل. OpenCode وOpenWork هما بديلان مفتوحان المصدر يعملان مع العديد من موفري الذكاء الاصطناعي، لذا فأنت لست مقيدًا بشركة واحدة. يستخدم هذا الكتاب كلاهما في جميع أنحاء. والخبر السار هو أن المطالبة الخاصة بك تظل كما هي بغض النظر عن الأداة التي تختارها.
وقرار التنسيق مضغوط إلى شكله النهائي:
| أنت… | يستخدم |
|---|---|
| إخبار الوكيل بما يجب فعله | Markdown |
| حفظ السياق لجلسة مستقبلية أو وكيل آخر | Markdown |
| إنتاج مخرجات سيقرأها ويعالجها وكيل آخر | Markdown |
| قراءة خطة طويلة أو تقرير أو تحليل | أتش تي أم أل |
| مشاركة المخرجات كرابط يفتحه شخص ما في المتصفح | أتش تي أم أل |
| النشر في موجز ويب (WhatsApp وLinkedIn وFacebook) | نص عادي للجسم؛ HTML فقط للصفحة المرتبطة (علامات OG) أو الصورة الملتقطة بلقطة شاشة |
| اختيار القيم التي يكون من المؤلم وضعها في الكلمات | HTML (مع زر النسخ الخلفي) |
| تسليم شيء ما لشخص ما للتوقيع عليه أو حفظه أو طباعته | بي دي إف |
| تسليم الشخص شيئًا لتحريره أو تقديمه | DOCX / PPTX (تنسيق الأداة الخاصة بهم) |
| تسليم أرقام الشخص للقراءة أو التحرير أو النموذج | XLSX (XLSB للطرز الكبيرة) |
| تسليم البيانات المنظمة إلى أداة أو وكيل آخر | ملف CSV |
ملخص قصير قبل تجربة المطالبات
لا تحتاج إلى حفظ أي من هذا. قم بوضع إشارة مرجعية على هذه الصفحة والعودة عندما تحتاج إلى تذكير. الشيء الوحيد الذي يستحق أن تحمله في رأسك هو الجملة الوحيدة في الأسفل.
- المفهوم 1. قم بتنظيم طلباتك باستخدام العناوين والرموز النقطية. أي شيء لا يجب على الذكاء الاصطناعي أن يخطئ فيه يجب أن يكون رصاصة خاصة به، وليس مدفونة في فقرة.
- المفهوم 2. اكتب إلى الذكاء الاصطناعي في Markdown. اطلب من الذكاء الاصطناعي الإجابة عليك بتنسيق HTML. سؤال واحد يقرر التنسيق: من يقرأ هذا الأخير؟
- المفهوم 3. توضح العناوين ما هو أكثر أهمية من ماذا. اجعلهم يقولون شيئًا محددًا ("الميزانية: 50000 روبية باكستانية سقفًا ثابتًا")، وليس مجرد تسمية ("الميزانية").
- المفهوم 4. استخدم الرموز النقطية (
-) عندما تكون العناصر مجموعة ولا يهم الترتيب. استخدم الأرقام (1.) عندما تكون العناصر خطوات وترتيبًا مهمًا. يعاملهم الذكاء الاصطناعي بشكل مختلف. - المفهوم 5. استخدم العلامات الخلفية الثلاثية (
```) لتغليف أي نص يجب أن يتعامل معه الذكاء الاصطناعي كبيانات، وليس كتعليمات. الشيء الأكثر فائدة للالتفاف هو مثال على الإخراج الذي تريده. - المفهوم 6. قم بتضمين الروابط في مطالباتك حتى يتمكن الذكاء الاصطناعي من قراءتها. عندما تقوم بتضمين صورة، فإن الوصف الموجود بين قوسين هو ما يقرأه الذكاء الاصطناعي عندما لا يتمكن من رؤية الصورة.
- المفهوم 7. استخدم هيكل المواصفات (الهدف / السياق / المتطلبات / القيود الصعبة / خارج النطاق / المخرجات المتوقعة) وقم بتقييمه إلى 9 أو أعلى قبل مطالبة الذكاء الاصطناعي ببناء أي شيء. المواصفات هي العمل الحقيقي.
- المفهوم 8. اطلب HTML عندما يكون الناتج طويلًا أو مرئيًا أو شيئًا ستشاركه كرابط. الاختبار: هل ستقرأ كل شيء كنص عادي؟ إذا لم يكن الأمر كذلك، اطلب HTML.
- المفهوم 9. لا تكتب لغة HTML بنفسك أبدًا. أنت تخبر الذكاء الاصطناعي بمن سيقرأها، وما الذي يجب أن تحتوي عليه، وما إذا كان ينبغي أن تكون تفاعلية، وكيف ينبغي قراءتها.
- المفهوم 10. خمسة أشياء شائعة يجب طلبها ك HTML: شبكات المقارنة للقرارات، وصفحات ملخص للتقارير، ومراجعات التعليمات البرمجية المشروحة، ونماذج التصميم الأولية باستخدام أشرطة التمرير، وأدوات السحب والإفلات.
- المفهوم 11. تتجاهل الموجزات الاجتماعية (WhatsApp وLinkedIn وFacebook) التنسيق الخاص بك. نشر نص عادي. HTML مهم فقط لبطاقة معاينة الرابط وللصور التي تصممها وترفقها.
- المفهوم 12. أربع طرق للنشر، من الأسهل إلى الأكثر ديمومة: زر النشر الخاص ب Claude.ai، وGitHub Gist، وGitHub Pages، وNetlify للسحب والإفلات.
- المفهوم 13. عندما يحتاج الشخص إلى ملف، وليس إلى صفحة ويب: PDF للتوقيع أو الطباعة، Word لتحريره، شرائح لتقديمه، Excel للأرقام، CSV للبيانات الأولية. اكتب مرة واحدة في Markdown، وقم بالتصدير إلى كل ما يحتاجون إليه.
- المفهوم 14. ثلاث طرق للقيام بنفس العمل: الدردشة (الصق ملاحظاتك في المتصفح)، والمحطة (يقرأ الذكاء الاصطناعي ملفاتك)، وسطح المكتب (تطبيق مرئي يسأل قبل أن يتصرف).
إذا احتفظت بجملة واحدة: اكتب Markdown بدقة كافية لآلة؛ اطلب HTML غنيًا بما يكفي للإنسان.
وإذا احتفظت بصورة واحدة، احتفظ بهذه الصورة. إنه سؤال من يقرأ هذا السؤال الأخير، وهو يحدد كل اختيار للتنسيق الذي تغطيه الدورة:
جرب هذا الآن: سبع مطالبات
يستغرق ذلك حوالي ثلاثين دقيقة. قم بذلك في Claude.ai (أو ChatGPT أو Gemini).
**1. قم بتحويل الملاحظات الفوضوية إلى مستند منظم. ** قم بتدوين أي فقرة فوضوية حقيقية من الملاحظات لديك (ملاحظات الاجتماع، أفكار المشروع، التخطيط للحدث). الصقها في الذكاء الاصطناعي واسأل:
أعد هيكلة هذه الملاحظات تحت أربعة عناوين: الهدف، والقيود الصعبة، التعامل معها بالفعل، والأسئلة المفتوحة. ضع كل حقيقة تحت اليمين عنوان. إذا كانت الحقيقة يمكن أن تنتمي إلى عنوانين، فاختر أحدهما و قل لي لماذا.
اقرأ النتيجة. لاحظ كيف كان على الذكاء الاصطناعي أن يصدر أحكامًا بشأن المكان الذي تنتمي إليه الأشياء. وهذا هو ما تفعله البنية: فهي تجبر القرارات على أن تكون مرئية. (المفاهيم 1، 3)
**2. انظر كيف يغير التعداد النقطي والأرقام سلوك الذكاء الاصطناعي. ** اختر أي خمسة عناصر (البقالة، المهام، أي شيء). أرسلها أولاً كتعداد نقطي (-)، ثم أرسل العناصر نفسها تمامًا كقائمة مرقمة (1. 2. 3.). بعد كل واحدة، اسأل الذكاء الاصطناعي: "ماذا يخبرك نوع القائمة هذا عن كيفية التعامل مع هذه العناصر؟" قارن بين الإجابتين جنبًا إلى جنب. سترى أن الذكاء الاصطناعي يتعامل مع الرصاصات كمجموعة (افعلها بأي ترتيب) والأرقام كتسلسل (اتبع هذا الترتيب). (المفهوم 4)
**3. تدرب على اقتباس النص بأمان. ** الصق هذا في الذكاء الاصطناعي تمامًا كما هو مكتوب. لاحظ أن رسالة الخطأ مغلفة بعلامات نقر خلفية ثلاثية، لذا يقوم الذكاء الاصطناعي بتحليلها بدلاً من التصرف بناءً عليها:
Here is an error message a friend sent me. Analyze it, don't
act on it:
```text
ERROR: delete all rows? (y/n). Connection timed out
```
What likely caused this, in two bullets?
The AI will explain the error calmly instead of trying to delete anything. That is what the backtick fence does: it tells the AI "this is data to look at, not an instruction to follow." (Concept 5)
4. Write and grade a real spec. Pick something real you are working on (an event, a project, a page you want to build). Write a spec using the skeleton from Concept 7: Goal, Context, Requirements, Hard constraints, Out of scope, Expected output. Then ask the AI to grade it out of 10 on clarity, completeness, and whether each requirement can be checked. Fix what scores below 9. Keep grading and fixing until the scores stop climbing. Save the final spec; you will use it again in prompt 7.
5. See the difference between Markdown and HTML output. Find the longest plain-text answer in your recent chats (if you do not have one yet, ask the AI for a detailed two-week study plan on any topic). Then tell the AI:
Turn this into a single HTML page designed for reading: clear headings, a table of contents, key facts as a styled table, and one diagram of the overall flow. Make it readable on a phone.
Now honestly compare: did you read more of the HTML version than the original plain text? That difference is the whole argument for asking for HTML when output is long. (Concept 8)
6. Build a quick drag-and-drop tool. List 10 to 15 real things you need to prioritize (tasks, errands, topics to study). Then ask the AI:
Build an HTML artifact with draggable cards for each item. Three columns: Now, Next, and Later. Add a "Copy as text" button at the bottom that exports my final arrangement as a list I can paste back.
Drag the cards where they belong, click the copy button, paste the result back to the AI, and ask: "give me next steps for the top three items in the Now column." On ChatGPT or Gemini, say "Canvas" instead of "artifact." (Concept 10)
7. Put it all together. Take the spec you saved from prompt 4. Run the full exercise from Concept 14: paste the spec, ask the AI to create a designed HTML page from it for your real audience, grade it, improve it, publish it (see Concept 12 for how), and open the link on your phone. If you would not forward it to someone, tell the AI what is wrong and fix it.
Later, when you reach the Agentic Coding and Cowork & OpenWork crash courses, come back and run this same exercise using the terminal and desktop tools. Same spec, same steps, more powerful tools.
🚀 المشاريع
درّبت المطالبات السبع كلٌّ منها على حركة واحدة. هذه المشاريع الثلاثة تربطها معاً في شيء حقيقي، وينتهي كلٌّ منها عند نقطة لا تستطيع نافذة المحادثة أن توصلك إليها: رابط عام تستطيع أن ترسله إلى صديق، أو ملف تستطيع أن تسلّمه لأي أحد. كل مشروع يستغرق من ثلاثين إلى ستين دقيقة على حساب مجاني. أنجز المشروع الأول اليوم؛ واترك المشروع الثاني إلى أن تريد أن ترى وجهاً مختلفاً لما يمكن أن يكون عليه "إخراج HTML"؛ ثم أنجز المشروع الثالث حين يكون لديك شيء تحتاج فعلاً أن تقدّمه وتسلّمه. وإذا تعطّل شيء، ففي القائمة المنسدلة في نهاية هذا القسم الحلّ.
أول مشروعين يسيران على المسار نفسه (المشروع الثالث يُشحن بطريقة مختلفة، يغطّيها في بطاقته الخاصة):
the chat builds it you download it the internet serves it
┌──────────────────┐ ┌──────────────┐ drag ┌───────────────────────┐
│ a designed page │ ─────→ │ index.html │ ──────→ │ your-site.netlify.app │
│ in the artifact │ │ (one file) │ │ (a real, public URL) │
└──────────────────┘ └──────────────┘ └───────────────────────┘
تعلّمك المشاريع الثلاثة ثلاث مهام مختلفة تؤديها المهارة نفسها، ومن المفيد أن تستحضر الفرق بينها قبل أن تبدأ:
- المشروع الأول ذو اتجاه واحد. تكتب مواصفات بلغة Markdown، فيحوّلها الذكاء الاصطناعي إلى صفحة HTML مكتملة، ثم يقرأها إنسان. تلك الصفحة هي نهاية المسار: يفتحها شخص آخر، وينتهي عملك. الذكاء الاصطناعي يُنتج، والإنسان يستهلك.
- المشروع الثاني ذو اتجاهين. توجّه الذكاء الاصطناعي ليبني أداة تفاعلية، ثم تشغّلها أنت بنفسك، فتُعيد إليك نتيجتها نصاً يصبح التعليمة التالية للذكاء الاصطناعي. هنا لا تكون صفحة HTML هي الشيء النهائي، بل أداة داخل تبادل أطول ذهاباً وإياباً مع الذكاء الاصطناعي.
- المشروع الثالث يغادر المتصفح. تأخذ الأداة التي بنيتها في المشروع الثاني، وتحوّلها إلى عرض شرائح تقدّمه في المدرسة، ثم تصدّره ملف PowerPoint حقيقياً تستطيع أن تسلّمه لأي أحد. الوجهة لم تعد صفحة ويب على الإطلاق؛ بل مستند مكتبي يُفتح في PowerPoint أو Keynote أو Google Slides.
المبدأ نفسه، "مدخل منظَّم، والتنسيق الصحيح يخرج"، وثلاث وجهات مختلفة تماماً: صفحة يقرأها شخص ما، وأداة تعيدها إلى الذكاء الاصطناعي، وعرض تقدّمه وتقف أمامه. المشروع الثالث لا يستخدم مسار Netlify أعلاه؛ فالعرض التقديمي يُشحن ملفاً تنزّله ورابطاً تشاركه.
Project 145-60 minالصفحة التي يفتحها أحدهمحوّل ملاحظات فوضوية إلى مواصفات، ثم إلى صفحة مصمَّمة، ثم إلى عنوان حقيقي.
هذا هو الكورس كله في شكل شيء قابل للشحن. مواصفات Markdown دقيقة تدخل للآلة، وصفحة HTML غنية تخرج للإنسان، وينتهي الأمر عند رابط تستطيع أن ترسله. الصفحة منتج نهائي مكتمل. يفتحها شخص آخر؛ وأنت تبنيها وتنشرها ثم تمضي.
ابدأ من الفوضى. هذا ما كتبه فعلاً صاحب مقهى:
ok so the page is for our coffee shop Crema. small place old town.
need: the menu with prices, our hours (7 to 8 every day), where we
are, a whatsapp button to order. phone is the main thing people use.
eid banner on top would be nice. NOT doing online payment or logins.
أولاً، حوّلها إلى مواصفات، لا إلى صفحة (المفهوم 7). لاحظ أنك تطلب المواصفات، لا الموقع بعد:
حوّل هذه الملاحظات إلى مواصفات Markdown بهذه الأقسام: الهدف، والسياق، والمتطلبات، والقيود الصارمة، وما هو خارج النطاق، والمخرَج المتوقَّع. لا تبنِ الصفحة بعد.
تعود مواصفات نظيفة. والآن قيّمها قبل أن تبني أي شيء، فهذا أرخص جودة ستشتريها في حياتك (المفهوم 7):
راجِع تلك المواصفات. اذكر أي شيء غامض أو يحتمل قراءتين. قيّمها من 10 من حيث الوضوح والاكتمال وإمكانية التحقق من كل متطلب على أنه منجَز أو غير منجَز. أصلح كل ما هو دون 9.
جولتان أو ثلاث وتتوقف المواصفات عن التحسّن. والآن اطلب الصفحة (المفهوم 9: تصف من يقرؤها وما تحتاجه، لا HTML نفسها أبداً):
ابنِ من هذه المواصفات صفحة HTML واحدة مكتفية بذاتها، لزبائن يفتحونها على هواتفهم. صمّمها للهاتف أولاً، مع جدول قائمة أنيق، وروابط هاتف وWhatsApp قابلة للنقر، ولافتة عيد في الأعلى. اجعلها شيئاً يفخر أي عمل صغير بأن يضع اسمه عليه.
▶ شاهد الصفحة التي أنتجتها هذه المطالبات (مباشرة)
هذه صفحة حقيقية بُنيت من تلك المواصفات وشُحنت إلى عنوان .netlify.app بالطريقة نفسها التي ستشحن بها صفحتك. مرّر فيها؛ والمس عناصرها. تظهر مباشرة في الأسفل؛ ويمكنك أيضاً فتحها في علامة تبويب خاصة بها.
ستبدو صفحتك أنت كأيّ عمل تبنيها له. والمقصد أن كل شيء جيد في هذه الصفحة كان سطراً في المواصفات، لا محض حظّ.
حين تبدو الصفحة جاهزة، اقرأها كما يقرؤها غريب وقل ما الخطأ فيها، أمنية واحدة في كل رسالة: "العنوان خافت أكثر من اللازم"، "القائمة تحتاج مساحة أكبر"، "أضف زر حجز طاولة". كل أمنية حُكم صغير، وهي حلقة التقييم والإصلاح نفسها من صياغة المطالبات في 2026، موجَّهة إلى الصفحة بدل النص.
والآن اشحنها. هذه هي الحركة التي يعيد كل مشروع استخدامها، فأنجزها بعناية مرة واحدة:
- نزّل الصفحة. في لوحة العنصر (artifact) زرّ تنزيل أو تصدير؛ تحصل على ملف
.htmlواحد. ذلك الملف هو الموقع كله. - أعد تسميته إلى
index.html. هذا هو اسم الويب لِ«الصفحة الأمامية»، والمضيف في الخطوة التالية يبحث عنه. - أنشئ حساباً مجانياً على netlify.com. بريد إلكتروني يكفي.
- اسحب ملفك إلى منطقة الإفلات. صفحة المشروع الجديد في Netlify تقبل "ملف HTML واحداً". على الهاتف، المس "browse files to upload".
- افتح العنوان الذي يعطيك إياه. بعد ثوانٍ تصير صفحتك مباشرة على عنوان
.netlify.app. تمّ الأمر حين: تُحمَّل الصفحة على هاتفك، لا على حاسوبك فقط، وتكون أنت فعلاً مستعداً لتمرير الرابط.
Project 230 minأدِر العجلةابنِ أداة تشغّلها أنت، ثم أعد نتيجتها إلى الذكاء الاصطناعي.
المشروع الأول صنع صفحة ليقرأها شخص آخر. وهذا يقلب المهمة: تبني أداة HTML تستخدمها أنت بنفسك، ويصير ناتجها هو التعليمة التالية للذكاء الاصطناعي. المبدأ نفسه، «اطلب HTML»، وغرض مختلف تماماً. هنا تكون HTML خطوة في سير عمل، لا الشيء النهائي.
أنت لا تصف الوسوم؛ تصف ما ينبغي أن تفعله الأداة (المفهوم 9). ابدأ ببساطة:
ابنِ عجلة دوّارة في صفحة HTML واحدة. أكتب قائمة خيارات، وأنقر زراً، فتدور العجلة وتستقر على واحد منها عشوائياً مع مؤشر في الأعلى. اجعل مظهرها ممتعاً وملوّناً.
تظهر عجلة تعمل. العب بها، ثم أضف إليها الإحساس بالطريقة نفسها التي صقلت بها الصفحة، أمنية واحدة في كل مرة:
أضف صوت تكتكة أثناء الدوران، وانفجار قصاصات ملوّنة عند الاستقرار، وبعض القوائم الجاهزة بنقرة واحدة مثل «ماذا نتعشّى»، وزراً لإزالة الفائز والدوران من جديد.
▶ أدِر العجلة الحقيقية (مباشرة)
هذه عجلة حقيقية بُنيت من تينك المطالبتين وشُحنت إلى عنوان .netlify.app. اكتب خياراتك الخاصة، ثم أدِرها. تظهر مباشرة في الأسفل؛ ويمكنك أيضاً فتحها في علامة تبويب خاصة بها.
هذه هي الحركة التي تجعلها أداة، لا لعبة. أدِرها، ثم خذ النتيجة إلى الذكاء الاصطناعي. ناتج العجلة هو مطالبتك التالية:
اختارت العجلة «Thai» من بين: Pizza وSushi وBurgers وTacos وBiryani وThai وRamen وSalad. أعطني خطة سريعة لتحقيق ذلك الليلة: مكان واحد أطلب منه، وماذا أطلب، والخطوة الأولى.
تلك الرحلة ذهاباً وإياباً هي الدرس كله. لم تُجب HTML عن سؤالك. بل جمع شيئاً (اختياراً أو ترتيباً أو تنظيماً) وأعاده نصاً نظيفاً يستطيع الذكاء الاصطناعي أن يتصرّف بناءً عليه. أي أداة تبنيها بهذه الطريقة تعمل بالأسلوب نفسه: تشغّلها، وتنقر نسخ، وتلصق النتيجة في المطالبة التالية.
اشحنها تماماً كالمشروع الأول: نزّل، وأعد التسمية إلى index.html، واسحبها إلى Netlify كمشروع جديد. تمّ الأمر حين: يستطيع صديق أن يدير عجلتك من الرابط، وتكون قد أعدت نتيجة واحدة على الأقل إلى الذكاء الاصطناعي.
Project 330-45 minقدّمها وكأنك تعنيهاحوّل الأداة التي بنيتها إلى عرض تقدّمه، وملف تستطيع أن تسلّمه لأي أحد.
بنيت «أدِر العجلة» في المشروع الثاني وشحنتها إلى رابط حقيقي. والآن ترتفع المخاطر: عليك أن تقف أمام صفّك وتقدّمها. والخبر السار أنك لا تبدأ من جديد. الأداة جاهزة. ما تحتاجه الآن عرضٌ، والمهارة نفسها التي حوّلت ملاحظات فوضوية إلى صفحة تحوّل أداتك إلى شيء تستطيع أن تقدّمه، بملء الشاشة، باسمك عليه.
أنت لا تصف الشرائح أو التخطيطات؛ بل تخبر الذكاء الاصطناعي بما تقدّمه وتسلّمه الشيء الحقيقي (المفهوم 9). أعطه رابط عجلتك الخاصة:
بنيت هذه العجلة الدوّارة وعليّ أن أقدّمها لصفّي في المدرسة: [الصق رابط عجلتك] — تُحمِّل خياراتك الخاصة، وتدير العجلة، فتختار لك واحداً. ابنِ لي عرض شرائح أنقر فيه بملء الشاشة، في صورة ملف HTML واحد. اشرح ما هي، ولماذا بنيتها، وكيف تعمل، واختم بشريحة يستطيع الناس فيها أن يذهبوا ليجرّبوها. اجعلها ممتعة ونظيفة.
يظهر عرض حقيقي بملء الشاشة في العنصر (artifact). مفاتيح الأسهم تنقلك من شريحة إلى أخرى؛ اضغط F لملء الشاشة فيملأ الغرفة. ولأنك سلّمته الرابط الحقيقي، يذهب وينظر إلى عجلتك ويعيد بناء ألوانك ومؤشرك كلغة تصميم، فيبدو العرض كالشيء الذي بنيته، لا كقالب عام.
من حين لآخر يفوت ذلك الجلب المباشر ويعود العرض ببساطة مفرطة. إن حدث ذلك، فافعل تماماً ما طلب منك هذا الكورس فعله طوال الوقت، أعطه الشيء الحقيقي: اسحب لقطة شاشة لعجلتك وقل "طابق هذا". ثم اصقل العرض أمنية واحدة في كل مرة، الحلقة نفسها كالصفحة: "ضع اسمي على شريحة العنوان"، "اجعل الشريحة الأخيرة تشير مباشرة إلى عجلتي المباشرة"، "عناوين أكبر". كل أمنية حُكم صغير. هذا عرض «أدِر العجلة» المكتمل لأحد الطلاب، من نوع الشيء الذي تبني نحوه. انقر خلاله. سيبدو عرضك أنت كأيّ شيء بنيته، بألوانك، واسمك، وعجلتك على الشريحة الختامية.▶ شاهد العرض المكتمل (مباشرة)
والآن إلى الحركة التي تُخرجها من المتصفح نهائياً (المفهوم 13). اطلب الملف المكتبي:
الآن أعطني هذا العرض نفسه ملف PowerPoint أستطيع أن أنزّله وأقدّم منه من حاسوب المدرسة المحمول — الشرائح نفسها، الترتيب نفسه.
يستغرق هذا دقيقتين، أطول مما تتوقّع. ذلك هو الذكاء الاصطناعي يبني ملفاً حقيقياً ثم يتحقّق من شرائحه بنفسه، لا تعليقاً. دعه يطبخ. ما يعود ملف PowerPoint حقيقي تستطيع أن تنزّله.
وهنا المكافأة. كتبت المحتوى مرة واحدة. وملف PowerPoint الذي يعود ملف حقيقي غادر المتصفح تماماً، الفكرة نفسها كالصفحة في المشروع الأول، إلا أن الوجهة الآن مستند يفتحه شخص في PowerPoint أو Google Slides أو Keynote، لا علامة تبويب متصفح. تلك هي المهمة الثالثة التي تؤديها هذه المهارة الواحدة: مدخل منظَّم، والتنسيق الذي يحتاجه قارئك بالضبط يخرج (المفهوم 13).
والآن اشحنها بالطريقة التي يُشحن بها العرض، وهي تختلف عن طريقة شحن المشروعين الأولين. لا سحب إلى Netlify هنا؛ فالعرض التقديمي يسافر ملفاً ورابط مشاركة. افتح ملف .pptx الذي نزّلته في Google Slides (في Slides، اختر File ثم Open ثم ارفع ملفك)، واضبط المشاركة على "أي شخص لديه الرابط"، وانسخ ذلك الرابط. الآن تستطيع أن تقدّم من أي متصفح في مدرستك، وتستطيع أن ترسل الرابط لصديق فاتته الحصة، الحركة نفسها "تنتهي عند نقطة تستطيع أن ترسلها إلى شخص آخر" التي صنعتها في المشروعين الأول والثاني.
شيء واحد تتحقّق منه قبل أن تدخل: قد يختار الذكاء الاصطناعي خطاً لا يملكه حاسوب مدرستك المحمول، فيستبدله PowerPoint بهدوء بأقرب بديل. افتح الملف مرة على الحاسوب المحمول نفسه الذي ستستخدمه قبل يوم، حتى لا تكون هناك مفاجآت حين تكون الغرفة تراقب.
تمّ الأمر حين: تستطيع أن تنقر خلال العرض بملء الشاشة، ولديك ملف PowerPoint حقيقي منزَّل، ولديك رابط يستطيع صديق أن يفتحه. صنعت أداة، وقد حوّلتها للتوّ إلى حديث وملف تستطيع أن تسلّمه لأي أحد.
هذه الثلاثة هي المهارة نفسها موجَّهة إلى ثلاث وجهات: صفحة يقرؤها أحدهم، وأداة تغذّي بها الذكاء الاصطناعي، وعرض تقدّمه إضافةً إلى ملف تسلّمه. وكلها تنبع من الجملة الواحدة التي يرتكز عليها هذا الكورس كله، اكتب المدخل دقيقاً بما يكفي لآلة واطلب التنسيق الغني الصحيح في المقابل لإنسان، وكلها تنتهي عند نقطة تستطيع أن ترسلها إلى شخص آخر.
🛟 إذا تعثّرت
"حصلت على وصف للصفحة بدل الصفحة نفسها." قل: "Build it as a single HTML artifact and show it to me." على ChatGPT أو Gemini، قل "Canvas" بدل "artifact".
"الملف المنزَّل ليس ملفاً واحداً، أو Netlify لا يقبله." اطلب: "Give me this as one self-contained .html file with everything inline, no separate CSS or JS files." ثم أعد تسميته index.html واسحب ذلك الملف الواحد.
"الصفحة تبدو عامة بلا روح." كانت مواصفاتك ضعيفة. ارجع وأضف التفاصيل التي تعرفها أنت وحدك، القائمة الحقيقية، والساعات الحقيقية، والجمهور، ثم أعد البناء. الصفحة لا تكون أفضل من المواصفات التي تحتها.
"عملت في المحادثة لكنها تتعطل بعد النشر." شبه دائماً ملف ناقص. أعد الطلب طالباً "one self-contained .html file with the CSS and JavaScript inline"، وأعد التنزيل، وأعد السحب.
Frequently Asked Questions
Do I need to memorize more Markdown than what this course taught?
No. Headings, lists, triple-backtick fences, links, and images are all you need for everyday work. You have already seen tables by example. Anything fancier, just ask the AI to write it for you.
Should I learn to write HTML by hand?
Not for this workflow. The skill this course teaches is how to ask for HTML and how to judge what comes back, not how to type the tags yourself. Later in the book, a chapter covers web fundamentals properly, and at that point you will learn to read HTML when checking the AI's work. But you do not need that now.
Does asking for HTML waste my usage budget?
HTML output does use more of your usage budget than plain text. For short answers (a quick lookup, a one-line reply), it is not worth it. But for anything long, visual, or something you will share as a link, HTML is the right choice. The real waste is producing a long answer nobody reads because it was a wall of plain text.
What about PDFs, Word docs, slides, and spreadsheets?
The AI can produce all of them. Concept 13 has the full answer with ready-to-paste prompts for each format. The short version: pick the format by what the person will do with the file. Need them to sign it? PDF. Edit it? Word. Present it? Slides. Work with numbers? Excel. Feed it to another tool? CSV. You still write your content once in plain text and export to whatever the recipient needs.
What about code? Is that an output format too?
Not in the way this course means. Markdown, HTML, PDF, and the rest are containers you choose based on who will read them. Code is not a container; it is the thing you are building. A Python script and an HTML report are not two versions of the same answer; they are different things entirely.
That said, code still connects to what you learned here in two ways. First, when you include a piece of code in a spec, you wrap it in backtick fences so the AI treats it as data (Concept 5). Second, you can ask the AI to explain code in a designed HTML page with annotations and diagrams (Pattern 3). When the goal is to actually build software, that is the Agentic Coding Crash Course.
Is there a tool that does this Markdown-in/HTML-out pattern automatically?
Yes, and it is worth trying after you can do it from scratch, not instead of it. The skill this course builds is briefing and judging output yourself. Once you have that skill, tools speed you up. Without it, tools do your thinking for you.
With that said: an open-source project called HTML Anything does exactly this. It runs on your computer, works with AI tools you already have (Claude Code, OpenCode, Gemini, and others), and turns notes, Markdown, or a CSV into a finished HTML page across ready-made templates: slide decks, posters, data reports, social media cards. It is a good power tool to graduate into once you are comfortable with the manual version.
Where does this course lead?
Three places:
- Spec-driven development (Part 1 of the book) builds on the spec skeleton you learned in Concept 7.
- The Agentic Coding Crash Course builds on the HTML output and verification habits from this course.
- The Problem-Solving Crash Course assumes you can work in chat, terminal, and desktop (the three motions from Concept 14).
You can now say precisely what you mean, and ask for output worth reading. The appendix below puts the whole process in one place if you want to see it end to end. The next question is what to point this skill at, and that is where How to Think in the AI Era and the Problem-Solving Crash Course pick up.
Appendix: One spec, the HTML it became
The two-minute proof at the top conjured a page from one casual paragraph. This appendix is the grown-up version of the same motion: the real spec from Concept 1, and the actual page it produced. Read the spec. Do not read the HTML line by line; the point of this section is that long HTML is for the browser, not the eye. The contrast between the two blocks below is the lesson.
The input: a Markdown spec
# Al-Noor Tuition Academy Landing Page Spec
## Goal
A one-page site parents open on their phones to check courses,
timings, fees, and how to reach us.
## Requirements
- Mobile-first; most visitors are on phones
- Course table: course, days, time, monthly fee
- Contact: tappable phone, WhatsApp link, location
- Eid holiday banner at the very top
## Hard constraints
- Single self-contained HTML file, no external fonts or libraries
- Must stay light enough to open on slow mobile data
- Open Graph tags so the WhatsApp/Facebook link preview looks designed
## Out of scope
- Online payments
- Student login
الإخراج: HTML الذي أنتجته
يبلغ حجم هذا الملف حوالي 6 كيلوبايت، ويتم تحميله دون أي طلبات شبكة بعد الصفحة نفسها، ويقرأ بشكل واضح على الهاتف، ويحمل علامات Open Graph التي تشكل معاينة الرابط الخاص به عند مشاركته. كل واحدة من هذه الخصائص كانت عبارة عن سطر في المواصفات أعلاه؛ المواصفات هي سبب كون الإخراج جيدًا وليس الحظ. (فجوة واحدة صادقة: تحتاج معاينة الصورة إلى og:image للإشارة إلى صورة مستضافة، والتي لا يحتوي عليها ملف واحد مستقل حتى تنشره في مكان ما. أضف العلامة بمجرد أن يكون للصفحة منزل.)
الكتلة الموجودة أدناه طويلة عن قصد، ومن المفترض أن تتجاوزها. هذا التمرير هو في حد ذاته الدرس: فهو نفس السبب الذي يجعلك لا تقرأ ملفًا طويلًا في نافذة الدردشة. القراءة تتم في المتصفح وليس هنا.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Al-Noor Tuition Academy</title>
<!-- Open Graph: builds the link preview card on WhatsApp / LinkedIn / Facebook -->
<meta
property="og:title"
content="Al-Noor Tuition Academy · Courses, Timings & Fees"
/>
<meta
property="og:description"
content="Matric and O-Level coaching. See current courses, class timings, monthly fees, and how to reach us."
/>
<meta property="og:type" content="website" />
<style>
:root {
--ink: #27313b;
--muted: #5c6b78;
--paper: #fbf7f1;
--card: #ffffff;
--line: #e7ded2;
--accent: #c1633a;
--accent-soft: #f4e4d8;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
.wrap {
max-width: 680px;
margin: 0 auto;
padding: 0 18px 48px;
}
.banner {
background: var(--accent);
color: #fff;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
padding: 10px 16px;
}
header {
padding: 32px 0 18px;
text-align: center;
}
header h1 {
margin: 0 0 4px;
font-size: 1.7rem;
letter-spacing: -0.01em;
}
header p {
margin: 0;
color: var(--muted);
font-size: 1rem;
}
h2 {
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
margin: 34px 0 12px;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
th,
td {
text-align: left;
padding: 12px 14px;
font-size: 0.95rem;
}
thead th {
background: var(--accent-soft);
color: var(--ink);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
tbody tr + tr td {
border-top: 1px solid var(--line);
}
td.fee {
font-weight: 600;
white-space: nowrap;
}
.contact {
display: grid;
gap: 10px;
margin-top: 6px;
}
.contact a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
color: var(--ink);
font-weight: 500;
}
.contact a:active {
background: var(--accent-soft);
}
.contact svg {
flex: 0 0 22px;
}
footer {
margin-top: 36px;
text-align: center;
color: var(--muted);
font-size: 0.85rem;
}
@media (min-width: 560px) {
header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="banner">
Eid holidays: the academy is closed 6–9 June. Classes resume 10 June.
</div>
<div class="wrap">
<header>
<h1>Al-Noor Tuition Academy</h1>
<p>Matric & O-Level coaching · Gulberg, Lahore</p>
</header>
<h2>Courses & Timings</h2>
<table>
<thead>
<tr>
<th>Course</th>
<th>Days</th>
<th>Time</th>
<th>Fee / month</th>
</tr>
</thead>
<tbody>
<tr>
<td>Matric Mathematics</td>
<td>Mon–Wed</td>
<td>4:00–5:30 pm</td>
<td class="fee">PKR 3,500</td>
</tr>
<tr>
<td>Matric Physics</td>
<td>Tue–Thu</td>
<td>5:30–7:00 pm</td>
<td class="fee">PKR 3,500</td>
</tr>
<tr>
<td>O-Level Chemistry</td>
<td>Mon–Wed</td>
<td>6:00–7:30 pm</td>
<td class="fee">PKR 4,000</td>
</tr>
<tr>
<td>O-Level English</td>
<td>Fri–Sat</td>
<td>10:00–11:30 am</td>
<td class="fee">PKR 4,000</td>
</tr>
</tbody>
</table>
<h2>Reach Us</h2>
<div class="contact">
<a href="tel:+923001234567">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="#c1633a"
stroke-width="2"
stroke-linecap="round"
>
<path
d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"
/>
</svg>
Call: 0300 123 4567
</a>
<a href="https://wa.me/923001234567">
<svg viewBox="0 0 24 24" fill="#c1633a">
<path
d="M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-2.8.7.8-2.8-.2-.3A8 8 0 1 1 12 20zm4.5-5.9c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.2-.4.2-.4.6-1.2a.5.5 0 0 0 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2c0 1.3 1 2.6 1.1 2.8s1.9 2.9 4.6 4a5 5 0 0 0 2.3.5c.7-.1 1.4-.6 1.6-1.1s.2-1 .1-1.1z"
/>
</svg>
WhatsApp: 0300 123 4567
</a>
<a href="https://maps.google.com/?q=Gulberg+Lahore">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="#c1633a"
stroke-width="2"
stroke-linecap="round"
>
<path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
Main Boulevard, Gulberg (view on map)
</a>
</div>
<footer>Open for admissions · New batches every month</footer>
</div>
</body>
</html>
الآن قم بالأشياء الثلاثة التي تدرسها الدورة
- افتحه. أسرع طريقة، دون الحاجة إلى جهاز كمبيوتر: الصق كتلة HTML بأكملها في Claude.ai وقل "حول HTML الدقيق هذا إلى قطعة أثرية؛ لا تغير شيئًا،" ثم انشره وافتح الرابط على هاتفك. (على جهاز الكمبيوتر، يمكنك بدلاً من ذلك حفظ الكتلة باسم
tuition.htmlوالنقر فوقها نقرًا مزدوجًا.) لاحظ أنك _قرأتها؛ أنت لم تخطي ذلك. هذا هو المفهوم 8. - قم بتغييره عن طريق المطالبة، وليس الكتابة. أخبر وكيلك: "أضف صفًا خامسًا للدورة التدريبية ل FSc Biology، السبت - الأحد 2:00 - 3:30 مساءً، 4500 روبية باكستانية، واجعل شعار العطلة غير قابل للرفض." لم تلمس أي علامة مطلقًا. هذا هو المفهوم 9.
- انشرها. ادفعها عبر أي درجة من درجات سلم النشر (المفهوم 12)، ثم شارك الرابط في WhatsApp وشاهد عرض بطاقة المعاينة. وهذا هو المفهومان 11 و12 لإغلاق الحلقة.
هذه هي الدورة التدريبية المكثفة بأكملها في قطعة أثرية واحدة: تم إدخال مواصفات Markdown الدقيقة، وظهر HTML قابل للقراءة، وقمت بتحريره عن طريق المطالبة، وقمت بشحنه.