Prompt Studioاستوديو التوجيهات
Build your own interactive HTMLابنِ صفحتك التفاعلية
01 — Welcome01 — البداية

Turn an idea into a working interactive page — without writing code. حوّل فكرتك إلى صفحة تفاعلية عاملة، دون كتابة برمجة.

This studio walks you through a short set of questions, then writes a precise instruction (a "prompt") you can paste into Claude or ChatGPT. The AI builds your page. You save it. You open it. Done. يأخذك هذا الاستوديو عبر مجموعة قصيرة من الأسئلة، ثم يصيغ تعليمة دقيقة (تُعرف بـ"التوجيه" أو "البرومبت") يمكنك لصقها في Claude أو ChatGPT. يقوم الذكاء الاصطناعي ببناء صفحتك. تحفظها. تفتحها. وانتهى الأمر.

STEP 01
Understand the basicsافهم الأساسيات
A quick orientation to AI assistants and how they make interactive web pages. مقدمة سريعة لمساعدي الذكاء الاصطناعي وكيف يصنعون صفحات الويب التفاعلية.
STEP 02
Answer a few questionsأجب عن أسئلة قليلة
Describe your purpose, audience, style, and what should be interactive. صِف الغرض، الجمهور، الأسلوب، وما الذي تريده تفاعلياً.
STEP 03
Copy your promptانسخ توجيهك
Get a single ready-made prompt, or a four-step series for better results. احصل على توجيه واحد جاهز، أو سلسلة من أربع خطوات لنتائج أفضل.
STEP 04
Paste, save, openالصق، احفظ، افتح
Send the prompt to your AI, save what it gives back, and open your page. أرسل التوجيه إلى الذكاء الاصطناعي، احفظ ما يعطيك، وافتح صفحتك.
No prior experience neededلا تحتاج خبرة سابقة

If you have never used an AI assistant before, start with section 02. It explains what an AI assistant is, what an interactive HTML page is, and what to expect when the AI replies. You can always come back to this page — your answers are saved in your browser. إذا لم تستخدم مساعد ذكاء اصطناعي من قبل، ابدأ بالقسم 02. يشرح ما هو مساعد الذكاء الاصطناعي، وما هي صفحة HTML التفاعلية، وما الذي تتوقعه عند الرد. يمكنك العودة إلى هذه الصفحة في أي وقت — إجاباتك محفوظة في متصفحك.

02 — AI Basics02 — أساسيات الذكاء الاصطناعي

What you need to know — in five short ideas. ما تحتاج معرفته — في خمس أفكار قصيرة.

Read these before you build your first prompt. They will save you a lot of confusion later. اقرأ هذه قبل إنشاء أول توجيه. ستوفر عليك الكثير من الالتباس لاحقاً.

01 / 05

What is an AI assistant? ما هو مساعد الذكاء الاصطناعي؟

Claude, ChatGPT, and Gemini are conversation tools. You type an instruction (called a prompt); they reply with text, code, or both. They can write essays, summarise documents, translate, and yes — write the full code of an interactive web page. Claude وChatGPT وGemini هي أدوات محادثة. تكتب تعليمة (تُسمى توجيهاً) فترد عليك بنص أو كود أو كليهما. تستطيع كتابة المقالات، وتلخيص الوثائق، والترجمة، ونعم — كتابة الكود الكامل لصفحة ويب تفاعلية.

02 / 05

What is an "interactive HTML page"? ما هي "صفحة HTML تفاعلية"؟

It is a single file that, when opened in a web browser, behaves like a small app. You can click buttons, switch tabs, fill quizzes, open and close sections — all without needing the internet. The file ends in .html. هي ملف واحد يتصرف عند فتحه في متصفح الويب كتطبيق صغير. يمكنك الضغط على الأزرار، وتبديل التبويبات، وملء الاختبارات، وفتح وإغلاق الأقسام — كل ذلك دون الحاجة إلى الإنترنت. ينتهي الملف بـ.html.

03 / 05

What is a prompt? ما هو التوجيه (البرومبت)؟

A prompt is your instruction to the AI. The clearer your prompt, the better your result. A vague prompt ("make me a website about safety") gives a vague answer. A detailed prompt (specifying purpose, audience, style, sections, interactivity) gives a polished answer. This studio writes detailed prompts for you. التوجيه هو تعليمتك للذكاء الاصطناعي. كلما كان توجيهك أوضح، كانت النتيجة أفضل. التوجيه الغامض ("اصنع لي موقعاً عن السلامة") يعطي إجابة غامضة. التوجيه المفصل (الذي يحدد الغرض، الجمهور، الأسلوب، الأقسام، التفاعل) يعطي إجابة متقنة. يكتب لك هذا الاستوديو توجيهات مفصلة.

04 / 05

What will the AI give me back? ماذا سيعطيني الذكاء الاصطناعي؟

It depends on the tool. Claude usually opens a preview window (called an Artifact) where you can see your page working straight away. ChatGPT often opens a similar preview (called Canvas), or gives the code inside a grey box. Either way, you copy the code, save it as a file, and double-click to open it. يعتمد على الأداة. Claude عادةً يفتح نافذة معاينة (تُسمى Artifact) ترى فيها صفحتك تعمل مباشرة. ChatGPT غالباً يفتح معاينة مشابهة (تُسمى Canvas)، أو يعطي الكود داخل صندوق رمادي. في كل الأحوال، تنسخ الكود، تحفظه كملف، وتنقر نقراً مزدوجاً لفتحه.

05 / 05

It will not be perfect first time لن تكون النتيجة مثالية من المرة الأولى

Expect to refine. The first reply is your draft. You ask for changes — bigger fonts, different colour, fix this button, add that section — and the AI rewrites it. This is normal and expected. Section 06 gives you ready-to-paste refinement prompts. توقع التعديل. الرد الأول هو المسودة. تطلب تغييرات — خط أكبر، لون مختلف، أصلح هذا الزر، أضف ذلك القسم — ويعيد الذكاء الاصطناعي الكتابة. هذا أمر طبيعي ومتوقع. القسم 06 يعطيك توجيهات تحسين جاهزة للصق.

A note on languageملاحظة حول اللغة All three major AI tools work in Arabic and English. For building code, English prompts tend to produce slightly cleaner results — but you can ask in Arabic and request the final page in Arabic, English, or both. This studio gives you the prompt in English by default, with a note explaining it. جميع أدوات الذكاء الاصطناعي الثلاث الكبرى تعمل بالعربية والإنجليزية. لبناء الكود، التوجيهات الإنجليزية تنتج عادةً نتائج أنظف قليلاً — لكن يمكنك السؤال بالعربية وطلب الصفحة النهائية بالعربية أو الإنجليزية أو كليهما. يقدم هذا الاستوديو التوجيه بالإنجليزية افتراضياً، مع ملاحظة توضح ذلك.
03 — Prompt Builder03 — منشئ التوجيه

Answer eight questions. We write the prompt. أجب عن ثمانية أسئلة، ونحن نكتب التوجيه.

There are no wrong answers. The more specific you are, the better your result. You can come back and edit anything later. لا توجد إجابات خاطئة. كلما كنت أكثر تحديداً، كانت النتيجة أفضل. يمكنك العودة وتعديل أي شيء لاحقاً.

PROGRESSالتقدم
1 / 8
QUESTION 01 / 08

What is the purpose of your page? ما الغرض من صفحتك؟

In one sentence, describe what the page is for. Pick a starting point below, then refine. في جملة واحدة، صِف الغرض من الصفحة. اختر نقطة بداية أدناه، ثم حسّن.

QUESTION 02 / 08

Who is it for? لمن هي موجهة؟

Knowing your audience shapes the tone, depth, and language. معرفة جمهورك تشكّل النبرة، والعمق، واللغة.

QUESTION 03 / 08

What are the main sections? ما هي الأقسام الرئيسية؟

List the chapters or sections your page should cover. Aim for 3 to 7. Add one at a time. عدّد الفصول أو الأقسام التي ينبغي أن تغطيها صفحتك. استهدف من 3 إلى 7. أضف واحداً في كل مرة.

Empty list is OK — the AI will propose its own structure. القائمة الفارغة مقبولة — سيقترح الذكاء الاصطناعي هيكله الخاص.

QUESTION 04 / 08

Pick a visual style اختر أسلوباً بصرياً

Or describe your own at the bottom. These presets are starting points the AI will interpret. أو صف أسلوبك في الأسفل. هذه القوالب نقاط بداية يفسرها الذكاء الاصطناعي.

If you fill this in, it overrides the preset. Be specific about colours and fonts. إذا ملأت هذا، فإنه يلغي القالب. كن محدداً بشأن الألوان والخطوط.

QUESTION 05 / 08

What language should the page be in? بأي لغة تكون الصفحة؟

This is the language of the final page you build, not the prompt itself. هذه لغة الصفحة النهائية التي تبنيها، وليست لغة التوجيه نفسه.

If bilingualإذا كانت ثنائية The AI will be asked to provide both languages with a working toggle button, with Arabic shown right-to-left using Noto Sans Arabic. سيُطلب من الذكاء الاصطناعي تقديم اللغتين مع زر تبديل عامل، مع عرض العربية من اليمين إلى اليسار باستخدام خط Noto Sans Arabic.
QUESTION 06 / 08

What kind of interactivity do you want? أي نوع من التفاعل تريد؟

Tick all that apply. Two or three is a good number — too many and the page gets cluttered. أشّر على كل ما ينطبق. اثنان أو ثلاثة عدد جيد — أكثر من ذلك تصبح الصفحة مزدحمة.

QUESTION 07 / 08

How long should the page be? ما طول الصفحة؟

Longer means deeper, but slower to generate and review. الأطول يعني أعمق، لكنه أبطأ في التوليد والمراجعة.

QUESTION 08 / 08

Anything else the AI should know? أي شيء آخر ينبغي للذكاء الاصطناعي معرفته؟

Mention any reference material, data, specific facts, or constraints. If you have images, describe them — you will attach them yourself in the AI tool. Leave blank if not needed. اذكر أي مواد مرجعية أو بيانات أو حقائق محددة أو قيود. إذا كانت لديك صور، صفها — وستُرفقها بنفسك في أداة الذكاء الاصطناعي. اتركها فارغة إن لم تكن مطلوبة.

04 — Your Prompt04 — توجيهك

Ready to copy and paste. جاهز للنسخ واللصق.

Pick a mode. One-shot is faster but less polished. Staged uses four short prompts in sequence and usually gives a much better result. اختر طريقة. توجيه واحد أسرع لكنه أقل صقلاً. متدرج يستخدم أربعة توجيهات قصيرة بالتسلسل ويعطي عادةً نتيجة أفضل بكثير.

Where to pasteأين تلصق Paste into a new conversation in Claude (claude.ai) or ChatGPT (chatgpt.com). Do not paste it into an old conversation — it confuses the AI with previous context. الصقها في محادثة جديدة في Claude (claude.ai) أو ChatGPT (chatgpt.com). لا تلصقها في محادثة قديمة — هذا يربك الذكاء الاصطناعي بسياق سابق.
Complete promptالتوجيه الكامل
Fill in the builder first. Your prompt will appear here. املأ المنشئ أولاً. سيظهر توجيهك هنا.

Send these one at a time. Wait for the AI's reply before sending the next. This produces noticeably better results. أرسلها واحداً تلو الآخر. انتظر رد الذكاء الاصطناعي قبل إرسال التالي. هذا ينتج نتائج أفضل بشكل ملحوظ.

05 — Save & Open05 — الحفظ والفتح

Turn the AI's reply into a working file. حوّل رد الذكاء الاصطناعي إلى ملف عامل.

Both tools work slightly differently. Follow the column for the one you used. الأداتان تعملان بطريقة مختلفة قليلاً. اتبع العمود الخاص بالأداة التي استخدمتها.

ClaudeClaude

claude.ai
If you see a preview (Artifact)إذا رأيت معاينة (Artifact)
  1. Look at the right side of the chat — there should be a preview window showing your page running. انظر إلى الجانب الأيمن من المحادثة — ينبغي أن تكون هناك نافذة معاينة تعرض صفحتك وهي تعمل.
  2. At the top-right of the preview, look for a download icon or the menu (three dots). Click it and choose Download or Copy code. في الجانب الأيمن العلوي من المعاينة، ابحث عن أيقونة تنزيل أو القائمة (ثلاث نقاط). انقرها واختر تنزيل أو نسخ الكود.
  3. If you downloaded: the file is already .html — double-click to open in your browser. Done. إذا نزّلت: الملف بالفعل .html — انقر مرتين لفتحه في متصفحك. انتهى.
  4. If you copied the code: follow the manual save steps below. إذا نسخت الكود: اتبع خطوات الحفظ اليدوي أدناه.
If you only see a code blockإذا رأيت صندوق كود فقط
  1. In the top-right of the grey code box, click Copy. في الجانب الأيمن العلوي من صندوق الكود الرمادي، انقر نسخ.
  2. Follow the manual save steps below. اتبع خطوات الحفظ اليدوي أدناه.

ChatGPTChatGPT

chatgpt.com
If you see a Canvas previewإذا رأيت معاينة Canvas
  1. A Canvas window opens on the right of the chat with your page. تفتح نافذة Canvas على يمين المحادثة بصفحتك.
  2. Click the download icon (top-right of the canvas). It usually saves the file directly as .html. انقر أيقونة التنزيل (أعلى يمين canvas). عادةً يحفظ الملف مباشرة كـ.html.
  3. Double-click the downloaded file to open it in your browser. انقر مرتين على الملف المنزّل لفتحه في متصفحك.
If you only see a code blockإذا رأيت صندوق كود فقط
  1. In the top-right of the grey code box, click Copy code. في الجانب الأيمن العلوي من صندوق الكود الرمادي، انقر نسخ الكود.
  2. Follow the manual save steps below. اتبع خطوات الحفظ اليدوي أدناه.

Manual save — works for any tool الحفظ اليدوي — يعمل مع أي أداة

On Windowsعلى Windows

notepad
  1. Press the Windows key, type Notepad, press Enter. اضغط على مفتاح Windows، اكتب Notepad، اضغط Enter.
  2. Click into the empty window. Press Ctrl + V to paste the copied code. انقر في النافذة الفارغة. اضغط Ctrl + V للصق الكود المنسوخ.
  3. Press Ctrl + S. The save window appears. اضغط Ctrl + S. تظهر نافذة الحفظ.
  4. In the File name field, type a name ending in .html, for example my-guide.html. في حقل اسم الملف، اكتب اسماً ينتهي بـ.html، مثلاً my-guide.html.
  5. In the Save as type dropdown, choose All Files (very important — otherwise Windows will add .txt automatically). في القائمة المنسدلة Save as type، اختر All Files (مهم جداً — وإلا سيضيف Windows .txt تلقائياً).
  6. Click Save. Find the file on your Desktop or in Documents. Double-click it — your page opens in the browser. انقر Save. اعثر على الملف على سطح المكتب أو في المستندات. انقر مرتين عليه — تفتح صفحتك في المتصفح.
Common mistakeخطأ شائع If your file is called my-guide.html.txt instead of my-guide.html, you forgot to choose "All Files". Right-click the file → Rename → remove the .txt at the end. إذا كان ملفك يُدعى my-guide.html.txt بدلاً من my-guide.html، فقد نسيت اختيار "All Files". انقر بالزر الأيمن على الملف → Rename → احذف .txt من النهاية.

On Macعلى Mac

textedit
  1. Press Cmd + Space, type TextEdit, press Return. اضغط Cmd + Space، اكتب TextEdit، اضغط Return.
  2. In the menu bar, click Format → Make Plain Text. This is essential. في شريط القوائم، انقر Format → Make Plain Text. هذا ضروري.
  3. Click into the document. Press Cmd + V to paste. انقر في الوثيقة. اضغط Cmd + V للصق.
  4. Press Cmd + S. Type the file name ending in .html. اضغط Cmd + S. اكتب اسم الملف ينتهي بـ.html.
  5. If a window asks "Use .html?" or "Append .txt?", choose Use .html. إذا سألت نافذة "Use .html?" أو "Append .txt?"، اختر Use .html.
  6. Find the file in Finder, double-click — it opens in Safari or Chrome. اعثر على الملف في Finder، انقر مرتين — يفتح في Safari أو Chrome.
Common mistakeخطأ شائع If you forget Format → Make Plain Text, TextEdit will save fancy quotation marks instead of the code's real ones and the page will break. Always check. إذا نسيت Format → Make Plain Text، فإن TextEdit سيحفظ علامات اقتباس مزخرفة بدلاً من علامات الكود الحقيقية وستتعطل الصفحة. تحقق دائماً.
Sharing with othersالمشاركة مع الآخرين Your .html file is a single self-contained file. You can email it as an attachment, share it on Teams, or put it on a USB. Anyone can open it by double-clicking — no software needed beyond a web browser. ملف .html الخاص بك ملف واحد مكتفٍ بذاته. يمكنك إرساله بالبريد الإلكتروني كمرفق، أو مشاركته عبر Teams، أو وضعه على USB. يستطيع أي شخص فتحه بالنقر المزدوج — لا يلزم أي برنامج غير متصفح الويب.
06 — Refine & Fix06 — التحسين والإصلاح

Make it better. Or fix what is broken. اجعلها أفضل. أو أصلح ما هو معطّل.

Two parts: ready-to-paste refinement prompts, and troubleshooting for common problems. جزءان: توجيهات تحسين جاهزة للصق، وإصلاح المشكلات الشائعة.

Part A — Refinement prompts الجزء أ — توجيهات التحسين

After the AI gives you the first version, paste any of these into the same conversation to refine. بعد أن يعطيك الذكاء الاصطناعي النسخة الأولى، الصق أياً من هذه في نفس المحادثة للتحسين.

Make the styling more refinedاجعل التصميم أكثر صقلاً

When the first result looks generic or "AI-made". عندما تبدو النتيجة الأولى عامة أو "آلية".

Please refine the visual design. Specifically: - Reduce visual noise — remove unnecessary borders, shadows, and decorative elements - Use more whitespace between sections - Make headings cleaner with tighter letter-spacing - Use one accent colour sparingly, not on every element - Replace any emoji or cartoon icons with clean text labels or simple geometric shapes - The overall feel should be calm, executive, and document-like

Add a new sectionأضف قسماً جديداً

When you want to extend the page with extra content. عندما تريد توسيع الصفحة بمحتوى إضافي.

Please add a new section titled "[YOUR TITLE HERE]" after [SECTION NAME]. The section should: - Cover: [DESCRIBE WHAT IT SHOULD EXPLAIN] - Be roughly the same depth as the other sections - Use the same styling and interactivity patterns as the rest of the page - Be available in all languages already supported

Fix something that does not workأصلح شيئاً لا يعمل

When a button, tab, or interaction is broken. عندما يكون زر أو تبويب أو تفاعل معطلاً.

There is a bug. When I [DESCRIBE WHAT YOU DO — e.g. "click the second tab"], [DESCRIBE WHAT HAPPENS — e.g. "nothing happens" or "the page goes blank"]. Please find the cause and fix it. Keep all other code unchanged. Return the full corrected file.

Improve the Arabic versionحسّن النسخة العربية

When Arabic text reads awkwardly or the layout breaks in RTL. عندما يقرأ النص العربي بشكل غير سلس أو ينكسر التخطيط في الاتجاه من اليمين إلى اليسار.

Please review the Arabic content of this page. Specifically: - Translate any English phrases that were left untranslated - Improve any awkward or literal translations into natural Arabic suitable for professional readers - Make sure when the Arabic toggle is on, the whole layout flips to right-to-left correctly, including buttons, icons, lists, and tables - Use Noto Sans Arabic font for Arabic text - Use Eastern Arabic numerals (١٢٣) or Western (123) consistently — pick whichever suits the audience

Make it work on mobileاجعلها تعمل على الجوال

When the layout breaks on phone screens. عندما ينكسر التخطيط على شاشات الهواتف.

The layout breaks on a phone screen. Please make the page fully responsive: - Use a single-column layout below 720px width - Make text readable without zooming (minimum 14px body) - Make tap targets at least 44px tall - Make any tables scroll horizontally on small screens - Test all interactive elements work on touch

Change the colour schemeغيّر مخطط الألوان

When the palette is wrong or not branded. عندما تكون لوحة الألوان خاطئة أو غير متوافقة مع العلامة.

Please change the colour palette of the entire page to the following exact colours: - Primary background: [HEX e.g. #fafaf8] - Primary text: [HEX e.g. #1a1a1a] - Accent colour: [HEX e.g. #1f4960] - Borders and lines: [HEX e.g. #e5e3dd] Apply consistently to all sections, buttons, headers, and active states. Keep all other code unchanged.

Part B — Troubleshooting الجزء ب — حل المشكلات

Tap any problem to see the fix. انقر أي مشكلة لرؤية الحل.

Go to section 05 (Save & Open). Follow the column for the tool you used. The short version: copy the code, open Notepad (Windows) or TextEdit (Mac), paste, save with a name ending in .html, double-click to open. انتقل إلى القسم 05 (الحفظ والفتح). اتبع العمود الخاص بالأداة التي استخدمتها. النسخة المختصرة: انسخ الكود، افتح Notepad (Windows) أو TextEdit (Mac)، الصق، احفظ باسم ينتهي بـ.html، انقر مرتين لفتحه.

Almost always one of three causes: دائماً تقريباً واحد من ثلاثة أسباب:

  • The code was cut off mid-way. The AI's reply has a limit. Ask: "The file was cut off. Please continue from where you stopped." الكود قُطع في المنتصف. لرد الذكاء الاصطناعي حد. اطلب: "الملف قُطع. من فضلك تابع من حيث توقفت."
  • A quotation mark got changed by your text editor (especially TextEdit on Mac in Rich Text mode). Re-do the save with Plain Text turned on. علامة اقتباس تغيّرت بسبب محرر النصوص (خاصة TextEdit على Mac في وضع Rich Text). أعد الحفظ مع تفعيل Plain Text.
  • There is a real bug. Paste this into the chat: "The interactive elements don't work when I open the file. Please find and fix the JavaScript error." يوجد خلل حقيقي. الصق هذا في المحادثة: "العناصر التفاعلية لا تعمل عند فتح الملف. من فضلك ابحث عن خطأ JavaScript وأصلحه."

Three things to check: ثلاثة أمور للتحقق منها:

  • Font — ask the AI to use Noto Sans Arabic from Google Fonts. Some default fonts don't include Arabic. الخط — اطلب من الذكاء الاصطناعي استخدام Noto Sans Arabic من Google Fonts. بعض الخطوط الافتراضية لا تتضمن العربية.
  • Direction — ask: "When Arabic is active, make sure the whole body has dir='rtl' and the layout flips correctly." الاتجاه — اطلب: "عند تفعيل العربية، تأكد من أن كامل body له dir='rtl' وأن التخطيط ينقلب بشكل صحيح."
  • Encoding — make sure the file starts with <meta charset="UTF-8">. Almost always already present, but worth checking. الترميز — تأكد من أن الملف يبدأ بـ<meta charset="UTF-8">. عادةً موجود، لكن جدير بالتحقق.

Type back: "Please continue from where you stopped. Pick up at the exact line you ended on, do not repeat earlier code." Then concatenate both replies into one file before saving. اكتب: "من فضلك تابع من حيث توقفت. ابدأ من السطر الذي انتهيت عنده بالضبط، لا تكرر الكود السابق." ثم اجمع الردين في ملف واحد قبل الحفظ.

Better: ask first time around for "the most compact version possible — minimise whitespace and comments". This helps the file fit in one reply. الأفضل: اطلب من المرة الأولى "النسخة الأكثر إحكاماً الممكنة — قلّل المسافات والتعليقات". هذا يساعد على احتواء الملف في رد واحد.

Use the "Make styling more refined" prompt in Part A above. Be specific. Tell it the feel you want — "newspaper editorial", "executive briefing", "luxury minimal". Name fonts you like. Give exact hex colours. The AI will follow precise instructions; vague ones produce generic results. استخدم توجيه "اجعل التصميم أكثر صقلاً" في الجزء أ أعلاه. كن محدداً. أخبرها بالإحساس الذي تريده — "تحريري صحفي"، "عرض تنفيذي موجز"، "مبسط فاخر". سمِّ الخطوط التي تحبها. أعطِ ألواناً hex دقيقة. الذكاء الاصطناعي يتبع التعليمات الدقيقة؛ الغامضة منها تنتج نتائج عامة.

Use the "Make it work on mobile" prompt in Part A. Then re-test on your phone. To open the file on your phone, email it to yourself or upload to OneDrive/Google Drive and open from there. استخدم توجيه "اجعلها تعمل على الجوال" في الجزء أ. ثم اختبرها مجدداً على هاتفك. لفتح الملف على هاتفك، أرسله بالبريد إلى نفسك أو ارفعه إلى OneDrive/Google Drive وافتحه من هناك.

Two safe rules: قاعدتان آمنتان:

  • Always keep a backup. Before any change, save a copy of the file (e.g. my-guide-v2.html). If the AI's change breaks it, go back to the previous version. احتفظ دائماً بنسخة احتياطية. قبل أي تغيير، احفظ نسخة من الملف (مثلاً my-guide-v2.html). إذا أعطب التغيير الصفحة، عُد إلى النسخة السابقة.
  • Ask for the full file back, not just a patch. Say: "Please return the full corrected file in one code block, do not give me only the changed parts." اطلب الملف الكامل، لا الجزء المعدّل فقط. قل: "من فضلك أعد الملف الكامل المصحح في صندوق كود واحد، لا تعطني الأجزاء المعدلة فقط."

Rare for HTML tasks. If it happens: rephrase to make the purpose obvious ("this is a training reference for new staff"), break the request into smaller pieces, or try the other tool. Refusals between Claude and ChatGPT rarely overlap. نادر بالنسبة لمهام HTML. إذا حدث: أعد الصياغة لجعل الغرض واضحاً ("هذا مرجع تدريبي للموظفين الجدد")، قسّم الطلب إلى أجزاء أصغر، أو جرّب الأداة الأخرى. نادراً ما يتطابق رفض Claude مع رفض ChatGPT.

Most pages load fine even at hundreds of KB. If yours genuinely lags: "Please simplify the page. Remove unused CSS, simplify any heavy animations, and shrink any large inline images to roughly the size they are displayed at." معظم الصفحات تُحمَّل بشكل جيد حتى عند مئات الكيلوبايتات. إذا كانت صفحتك بطيئة فعلاً: "من فضلك بسّط الصفحة. احذف CSS غير المستخدم، بسّط الرسوم المتحركة الثقيلة، وقلّص الصور المضمّنة الكبيرة إلى الحجم الذي تُعرض به تقريباً."

In your AI conversation, attach the image directly (drag it in, or use the attachment button). Then say: "Please use this image in the page — embed it inline as base64 so the file stays self-contained, and place it in [SECTION NAME]." في محادثتك مع الذكاء الاصطناعي، أرفق الصورة مباشرة (اسحبها، أو استخدم زر الإرفاق). ثم قل: "من فضلك استخدم هذه الصورة في الصفحة — ضمّنها مباشرة بصيغة base64 ليبقى الملف مكتفياً بذاته، وضعها في [اسم القسم]."

07 — Share Online07 — النشر عبر الإنترنت

Put your page on the internet — free, no coding. انشر صفحتك على الإنترنت — مجاناً، دون برمجة.

Netlify Drop lets you publish any HTML file online by dragging it into a webpage. It takes about thirty seconds. You get a real URL anyone can open on any device, from anywhere. يتيح لك Netlify Drop نشر أي ملف HTML على الإنترنت عبر سحبه إلى صفحة ويب. يستغرق الأمر حوالي ثلاثين ثانية. تحصل على رابط حقيقي يمكن لأي شخص فتحه على أي جهاز، من أي مكان.

Before you startقبل أن تبدأ Your file must be named exactly index.html. If yours is called something else (like my-guide.html), rename it first: right-click the file → Rename → change it to index.html. This is the single most common mistake. يجب أن يكون اسم ملفك بالضبط index.html. إذا كان اسمه شيئاً آخر (مثل my-guide.html)، أعد تسميته أولاً: انقر بالزر الأيمن على الملف ← Rename ← غيّره إلى index.html. هذا أكثر الأخطاء شيوعاً.

Part A — Publish your page الجزء أ — انشر صفحتك

Drag, drop, doneاسحب، أفلت، انتهيت

netlify drop
  1. Open your web browser. Go to app.netlify.com/drop. افتح متصفح الويب. انتقل إلى app.netlify.com/drop.
  2. If you don't have a Netlify account, click Sign up. Easiest is "Continue with Google" or "Continue with Email". It's free and no credit card is needed. إذا لم يكن لديك حساب Netlify، انقر Sign up. الأسهل هو "Continue with Google" أو "Continue with Email". الخدمة مجانية ولا تحتاج بطاقة ائتمان.
  3. Once signed in, you'll see a large rectangular drop zone with the text "Drag and drop your site folder here". بعد تسجيل الدخول، سترى منطقة إفلات مستطيلة كبيرة عليها نص "Drag and drop your site folder here".
  4. Drag your index.html file from your computer onto that zone. Hold the file with your mouse, drag it over the browser window, release it inside the drop zone. اسحب ملف index.html من حاسوبك إلى تلك المنطقة. أمسك الملف بالفأرة، اسحبه فوق نافذة المتصفح، ثم أفلته داخل منطقة الإفلات.
  5. Wait 10–30 seconds while Netlify uploads and publishes your page. انتظر من 10 إلى 30 ثانية بينما يقوم Netlify برفع صفحتك ونشرها.
  6. You land on a site dashboard with a URL like https://wondrous-marigold-a1b2c3.netlify.app. Click it. Your page is live on the internet. ستصل إلى لوحة موقع مع رابط مثل https://wondrous-marigold-a1b2c3.netlify.app. انقر عليه. صفحتك الآن منشورة على الإنترنت.
Trouble?مشكلة؟ If the published page shows "Page not found", your file probably isn't named index.html. Go back, check the filename exactly (lowercase, no extra extension), rename it, and re-drag. إذا أظهرت الصفحة المنشورة "Page not found"، فالأرجح أن ملفك ليس باسم index.html. ارجع، تحقق من الاسم بدقة (أحرف صغيرة، بدون امتداد إضافي)، أعد تسميته، وأعد السحب.

Part B — Give it a better URL الجزء ب — أعطها رابطاً أفضل

The random URL Netlify generates (e.g. wondrous-marigold-a1b2c3) is fine but not memorable. You can change it to something meaningful — and you can do it in under a minute. الرابط العشوائي الذي ينشئه Netlify (مثل wondrous-marigold-a1b2c3) عملي لكنه غير قابل للتذكر. يمكنك تغييره إلى شيء ذي معنى — وفي أقل من دقيقة.

Rename in five stepsإعادة التسمية في خمس خطوات

site settings
  1. From your site's dashboard page, look in the left sidebar for Site configuration (sometimes labelled "Site settings"). Click it. من صفحة لوحة الموقع، ابحث في الشريط الجانبي الأيسر عن Site configuration (أحياناً "Site settings"). انقر عليه.
  2. Click Site details (usually the first option in the settings menu). انقر Site details (عادةً الخيار الأول في قائمة الإعدادات).
  3. Find the section called Site information. Next to your current site name, you'll see a Change site name button. Click it. ابحث عن قسم Site information. بجانب اسم موقعك الحالي، سترى زر Change site name. انقر عليه.
  4. Type your desired name. Only lowercase letters, numbers, and hyphens are allowed — no spaces, no capitals, no special characters. Example: pes-promptstudio or moi-leadership-guide. اكتب الاسم الذي تريده. مسموح فقط بـالأحرف الصغيرة والأرقام والشرطات — لا مسافات، لا أحرف كبيرة، لا رموز خاصة. مثال: pes-promptstudio أو moi-leadership-guide.
  5. Click Save. Your new URL is https://your-chosen-name.netlify.app. The old random URL still works as a fallback, but anyone you share the new URL with goes straight there. انقر Save. رابطك الجديد هو https://your-chosen-name.netlify.app. الرابط العشوائي القديم سيظل يعمل احتياطياً، لكن من يحصل على الرابط الجديد سيصل مباشرة.
Name already taken?الاسم محجوز؟ Site names must be unique across all of Netlify — millions of people use it, so common names are gone. If yours is taken, add a short prefix that identifies you, your team, or your project. Examples: pes- (initials), moi-training-, or your name. يجب أن تكون أسماء المواقع فريدة عبر Netlify بأكمله — يستخدمه ملايين الأشخاص، لذا الأسماء الشائعة محجوزة. إذا كان اسمك محجوزاً، أضف بادئة قصيرة تميّزك أو فريقك أو مشروعك. أمثلة: pes- (الأحرف الأولى)، moi-training-، أو اسمك.

Part C — Updating the page later الجزء ج — تحديث الصفحة لاحقاً

Made changes to your file? Push the new version up the same way. أجريت تغييرات على ملفك؟ ارفع النسخة الجديدة بنفس الطريقة.

  1. Open your site's dashboard on Netlify (you can bookmark this page for easy return). افتح لوحة موقعك على Netlify (يمكنك حفظ هذه الصفحة كإشارة مرجعية للعودة بسهولة).
  2. In the left sidebar, click Deploys. في الشريط الجانبي الأيسر، انقر Deploys.
  3. Scroll to the bottom of the Deploys page. You'll see a "Need to update your site?" drop zone — identical to the one on app.netlify.com/drop. انزل إلى أسفل صفحة Deploys. سترى منطقة إفلات بعنوان "Need to update your site?" — مطابقة لتلك الموجودة في app.netlify.com/drop.
  4. Drag your updated index.html onto it. Wait. The same URL now serves your new version. اسحب ملف index.html المحدّث إليها. انتظر. الرابط نفسه يقدم الآن النسخة الجديدة.
Old versions are keptالنسخ القديمة محفوظة Every time you redeploy, Netlify keeps a history of previous versions in the Deploys list. If a new version breaks something, click the previous deploy and choose "Publish deploy" to roll back instantly. في كل مرة تعيد فيها النشر، يحتفظ Netlify بسجل للنسخ السابقة في قائمة Deploys. إذا تسببت نسخة جديدة في مشكلة، انقر على النشر السابق واختر "Publish deploy" للتراجع فوراً.

What does it cost?كم تكلف؟

Nothing, for normal use. Netlify's free tier includes 100 GB of bandwidth and 300 build minutes per month — far more than a training page, briefing, or internal reference needs. No credit card needed to start. لا شيء، للاستخدام العادي. تتضمن الفئة المجانية من Netlify 100 جيجابايت من النطاق الترددي و300 دقيقة بناء شهرياً — أكثر بكثير مما تحتاجه صفحة تدريبية أو موجز أو مرجع داخلي. لا تحتاج بطاقة ائتمان للبدء.

Sharing the URLمشاركة الرابط

Send it by email, WhatsApp, Teams, SMS — any channel that handles links. Opens on phones, tablets, laptops, anywhere with internet. For posters and printed material, generate a QR code from the URL (free tools online) so people can scan straight to the page. أرسله بالبريد الإلكتروني، WhatsApp، Teams، SMS — أي قناة تتعامل مع الروابط. يفتح على الهواتف والأجهزة اللوحية والحواسيب المحمولة، في أي مكان به إنترنت. للملصقات والمواد المطبوعة، أنشئ رمز QR من الرابط (أدوات مجانية على الإنترنت) ليتمكن الناس من المسح للوصول مباشرة.

A note on mobileملاحظة حول الهاتف Netlify Drop is designed for desktop or laptop computers — drag-and-drop is awkward on phones. If you only have a phone, you can still publish via the Netlify dashboard's standard upload (not drop), but doing the initial publish from a computer is much simpler. Netlify Drop مصمم للحواسيب المكتبية والمحمولة — السحب والإفلات صعب على الهواتف. إذا كان لديك هاتف فقط، لا يزال بإمكانك النشر عبر الرفع القياسي من لوحة Netlify (وليس السحب)، لكن إجراء النشر الأول من حاسوب أسهل بكثير.
08 — Examples08 — أمثلة جاهزة

Start from a worked example. ابدأ من مثال جاهز.

Each example loads a complete set of answers into the builder. You can then tweak and generate your prompt. كل مثال يحمّل مجموعة كاملة من الإجابات في المنشئ. يمكنك بعدها التعديل وإنشاء توجيهك.