مصنوع بعناية، لا مولد آليا: دورة مكثفة في تصميم المواقع

15 مفهوما · أول بناء حقيقي لك

الموقع على اليمين لمصممة ديكور داخلي، وهو هنا فقط لإظهار الفرق. أما العميلة التي سنبني لها لاحقا في هذه الدورة فهي شخص آخر: عائشة رحمن (Ayesha Rehman)، محاسبة في لاهور.

اطلب من الذكاء الاصطناعي أن يبني لك موقعا، وستحصل على واحد. سيعمل، ويمكن تمريره، لكنه سيبدو مثل كل موقع آخر أنشأه الذكاء الاصطناعي.

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

تبدو معظم مواقع الذكاء الاصطناعي هكذا. ليست معطلة، بل تعاني شيئا أسوأ: كلها متشابهة.

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

تعلمك هذه الدورة بناء المواقع المصنوعة بعناية.

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

إليك الفكرة الوحيدة التي تسهل فهم بقية الدورة. كان التصميم الجيد حبيس أدوات باهظة أو خبرة أشخاص موهوبين، ولم يعد كذلك. يمكن كتابة القواعد التي تفصل «المصنوع» عن «المولد» في ملف. يستطيع أي ذكاء اصطناعي قراءة ذلك الملف واتباع قواعده.

إذن يمكن تلخيص الدورة في سطر واحد:

الذوق أصبح ملفا.

الذوق هو معرفة ما يبدو جيدا، والملف مجرد مستند على حاسوبك. اجمعهما فتحصل على الفكرة كاملة: يمكن حفظ معرفة ما يبدو جيدا في مستند يقرأه الذكاء الاصطناعي قبل أن يبدأ البناء.

اقرأ هذا أولا

Claude Code وOpenCode: دورة مكثفة. علمتك تلك الدورة الأدوات، وتستخدمها هذه الدورة لبناء شيء حقيقي. إذا كانت مصطلحات مثل المهارة أو وضع الخطة أو ملف القواعد جديدة عليك، فاقرأ تلك الدورة أولا. ستصبح هذه الدورة أسهل كثيرا بعدها.

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

هذا الترتيب مقصود. تصبح المواصفات والحلقات وأدوات التحقق أوضح كثيرا بعد أن تنشر موقعا وتختبر بنفسك مواضع تعطل العمل فعليا.

كلمات ستقابلها في هذه الصفحة

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

الكلمة	معناها هنا
النموذج	الذكاء الاصطناعي نفسه: ما يكتب الكلمات والكود. يعد Claude وKimi K3 نموذجين.
الأداة (وتسمى أيضا هارنس)	البرنامج الذي يتيح للذكاء الاصطناعي العمل على حاسوبك: فتح الملفات وتغييرها وتشغيل الأوامر. أداتا هذه الدورة هما Claude Code وOpenCode.
المهارة	ملف تعليمات تحفظه مرة واحدة، ثم يقرأه الذكاء الاصطناعي ويتبعه، مثل بطاقة وصفة أو دليل الموظف.
التعليمة (prompt)	ما تكتبه للذكاء الاصطناعي.
السياق	كل ما يستطيع الذكاء الاصطناعي رؤيته الآن: رسائلك والملفات التي فتحها. له حد، كمكتب ذي مساحة محدودة.
رتابة AI	تصميم يبدو مولدا لا مصنوعا؛ المظهر العادي المتوسط الذي يقع فيه كل ذكاء اصطناعي.
الكود	التعليمات التي يكتب بها الموقع. لن تكتبها أنت؛ يكتبها الذكاء الاصطناعي وتتحقق أنت من النتيجة.
النشر	وضع موقعك على الإنترنت ليتمكن الآخرون من فتحه.
واجهة سطر الأوامر (CLI)	برنامج تشغله بكتابة أمر بدلا من النقر على الأزرار.
واجهة برمجة التطبيقات (API)	طريقة تتيح لبرنامج أن يتواصل تلقائيا مع برنامج آخر.
أداة التحقق (أو hook)	برنامج صغير يجيب بنعم أو لا عن عملك، ويوقفك إذا كانت الإجابة لا.
النطاق	عنوان ويب يملكه شخص، مثل ayesharehman.pk.
نظام DNS	النظام الذي يربط عنوان الويب بالمكان الذي يعيش فيه موقعك فعليا.
بطاقة المشاركة (صورة OG)	الصورة والعنوان اللذان يظهران عندما تلصق رابطك في WhatsApp أو تطبيق اجتماعي.
:::

ثلاثة أمور يجب أن تؤمن بها قبل تصميم أي شيء

تسند ثلاث أفكار كل ما تبقى في هذه الصفحة. تعلمها وستفهم البقية.

1. لكل ذكاء اصطناعي مظهر مفضل.

تعلم الذكاء الاصطناعي من ملايين المواقع. لذلك عندما تقول «اجعله يبدو جيدا»، يمنحك الإجابة الأكثر شيوعا التي رآها: الألوان الأكثر شيوعا، والتخطيط الأكثر شيوعا، والخط الأكثر شيوعا.

لا يعني هذا أن الذكاء الاصطناعي كسول، بل إنه يقدم المتوسط لأن المتوسط هو ما تعلمه. ولدى المجتمع اسم لهذه النتيجة: رتابة AI.

إليك دليلا على أن الأمر حقيقي. تنشر Anthropic إضافة frontend-design رسمية لأداة Claude Code. يسرد ذلك الملف المظاهر الثلاثة التي يقع فيها Claude عندما لا يوقفه أحد، ويطلب منه ألا يستخدمها. كتبت الشركة التي صنعت الذكاء الاصطناعي ملفا ليعارض عادات ذكائها الاصطناعي نفسه. وإذا اضطرت إلى ذلك، فهذه العادات حقيقية.

(هذه إضافة تثبتها مرة واحدة عبر نظام إضافات Claude Code، وبعدها يستدعيها Claude تلقائيا في أعمال التصميم.)

2. تتحقق من التصميم بالنظر إليه.

علمتك الدورة المكثفة في البرمجة الوكيلة أهم قاعدة في هذا الكتاب: ثق بالذكاء الاصطناعي بقدر ما تستطيع التحقق من عمله.

يسهل التحقق من الكود، لأنك تستطيع تشغيل اختبار فينجح أو يفشل. أما التصميم فيبدو أصعب؛ فسؤال «هل يبدو هذا جيدا؟» ليس مما يجيب عنه الحاسوب بسهولة.

لذلك تحول هذه الدورة النظر إلى تحقق. نلتقط صورة للصفحة وندع الذكاء الاصطناعي ينظر إليها، ثم نفحصها بقائمة من العادات السيئة المعروفة، ونطلب من ذكاء اصطناعي ثان مراجعتها. ما إن يصبح سؤال «هل يبدو صحيحا؟» قابلا للاختبار فعليا، يستطيع الذكاء الاصطناعي إصلاح عمله بنفسه، كما يصلح الكود.

3. ينتقل الذوق من ذكاء اصطناعي إلى آخر في صورة ملف.

يعرف الذكاء الاصطناعي بالفعل كيف يبني صفحة ويب. ما لا يعرفه هو حكمك أنت: أي التخطيطات ممل، وأي الخطوط ينسجم معا، ومتى تكتمل الصفحة.

ضع ذلك الحكم في ملف، وسيتمكن أي ذكاء اصطناعي من قراءته. يعمل الملف نفسه اليوم مع Claude وKimi K3، وسيعمل مع أي ذكاء اصطناعي يظهر العام المقبل. يتغير الذكاء الاصطناعي ويبقى ملفك.

لهذا ستظل هذه الدورة مفيدة بعد تغير أسماء هذه الأدوات بوقت طويل.

الأدوات الثلاث التي ستستخدمها

تعرف اثنتين منها بالفعل، أما الثالثة فجديدة:

	Claude Code	OpenCode	Kimi K3
ما هي	أداة من Anthropic تتيح للذكاء الاصطناعي العمل على حاسوبك	أداة من النوع نفسه، لكنها مفتوحة المصدر وتعمل مع أي ذكاء اصطناعي	نموذج ذكاء اصطناعي من شركة Moonshot AI
مهمتها هنا	تشغل العمل	تشغل العمل مع خيارات أكثر للنماذج	ذكاء اصطناعي متفوق خصوصا في التصميم
سبب استخدامها	تعمل بأفضل صورة مع Claude	أرخص طريقة لاستخدام نماذج ذكاء اصطناعي أخرى	الأفضل حاليا في تصميم صفحات الويب، وتكلفته معقولة

فكر في الأمر هكذا: تمثل أداتا Claude Code وOpenCode ورشة العمل، ويمثل Kimi K3 عاملا يمكنك إحضاره إلى أي من الورشتين. تبقى الورشة كما هي، ويمكنك تغيير العامل.

لماذا نستخدم Kimi K3 للتصميم؟ اختبر أشخاص نماذج ذكاء اصطناعي كثيرة بعرض صفحات ويب على مطورين حقيقيين دون إخبارهم بالنموذج الذي صنع كل صفحة. اختار المطورون صفحات Kimi K3 أكثر من غيرها. ويفسر ذلك سببان:

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

تحذير قبل أن تتعلق به. يتغير الذكاء الاصطناعي «الأفضل» كل بضعة أشهر، وسيتفوق نموذج آخر على Kimi K3 قريبا. لذلك لا تحفظ الاسم، بل احفظ العادة: تحقق من أفضل ذكاء اصطناعي للتصميم حاليا، واستخدمه في أعمال التصميم. اليوم هو Kimi K3، ولذلك تستخدمه هذه الدورة.

note

هذه المعلومات محدثة حتى يوليو 2026. تتغير النماذج والأسعار وتصنيفات الساحة كثيرا. تحقق من LMArena وصفحات الأسعار المباشرة لدى مقدمي الخدمة قبل وضع أي ميزانية.

شغلنا كل أمر في هذه الصفحة قبل نشرها

نُفذت أوامر التثبيت وخيارات CLI ومسارات الملفات وبنى المجلدات الموضحة هنا على جهاز نظيف، ولم تنسخ من الوثائق. عندما خالفت الأدوات الفعلية صفحاتها التسويقية، اتبعت الدورة سلوك الأدوات. يظل أمران عرضة للتغير: أرقام الإصدارات والأسعار. إذا تصرف أمر بطريقة مختلفة عما تقرأه هنا، فثق بطرفيتك وراجع الوثائق الحالية للأداة.

اختر أداتك وستتبعها الصفحة

كما في الدورة المكثفة في البرمجة الوكيلة، تحتوي الأقسام التي تختلف بين Claude Code وOpenCode على مبدل. اختر أداة واحدة وستتبعها جميع المبدلات في الصفحة.

ما تغطيه هذه الدورة

الجزء	الموضوع	ما ستتعلمه
1	الأساسيات	لماذا تتشابه مواقع الذكاء الاصطناعي، والمكدس رباعي الأجزاء، واختيار نموذج التصميم وربطه
2	الذوق كمهارة	مهارة Hallmark، والتعلم من المواقع التي تعجبك، وضبط هوية العميل التجارية
3	البناء	قصة واحدة وتمرير واحد، ومسار الوسائط من المجاني إلى المدفوع، والهاتف أولا، والمواقع متعددة الصفحات والتوجيه
4	التحقق من التصميم	كيفية التحقق من جودة التصميم والحصول على رأي ثان
5	النشر	وضع الموقع على الإنترنت، والعمل مع العملاء، وخفض التكاليف
6	مثال عملي كامل	موقع مكتب عائشة، من البداية إلى رابط مباشر، باستخدام الأداتين

تفضل التعلم بالممارسة؟ انتقل أولا إلى الجزء 6، ثم عد إلى هنا.

---

📚 وسيلة تعليمية

افتح عرض الشرائح الكامل

اعرض العرض التقديمي كاملا — دورة مكثفة في تصميم المواقع

---

الجزء 1: الأساسيات

1. لماذا تبدو جميع مواقع الذكاء الاصطناعي متشابهة

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

ليست قبيحة، وهذا ما يربكك. إنها ببساطة متوسط كل صفحات الويب التي رآها الذكاء الاصطناعي، والمتوسطات بلا شخصية.

لماذا يحدث ذلك؟ لا يختار الذكاء الاصطناعي، بل يتنبأ. عندما تطرح سؤالا مفتوحا مثل «أنشئ لي موقعا جميلا»، يجيب بما هو أرجح، أي بما هو أكثر شيوعا في كل ما تعلمه. يفعل ذلك في كل مرة ولكل شخص يسأل. لهذا تتشابه مواقع ذكاء اصطناعي كثيرة؛ إذ يتلقى ملايين الأشخاص المتوسط نفسه.

رأيت السلوك نفسه في دورة البرمجة المكثفة. اطلب من الذكاء الاصطناعي «تنظيف هذا النص المنسوخ» خمس مرات، وستحصل على خمس طرق مختلفة قليلا، لذلك تحفظ ملف مهارة لتثبيت الطريقة. يعمل التصميم بالطريقة نفسها تماما، لكن الجميع يستطيع رؤية المشكلة في التصميم.

الدليل: تعترف شركات الذكاء الاصطناعي بذلك. تنشر Anthropic إضافة تصميم رسمية لأداة Claude Code، ويسرد ملفها المظاهر الثلاثة التي يقع فيها تصميم الذكاء الاصطناعي عندما لا يوقفه أحد. وهو محدد لدرجة ذكر درجة اللون الكريمي نفسها (#F4F1EA):

1. خلفية كريمية ناعمة، وعنوان serif كبير مزخرف، وزر برتقالي بني.
2. خلفية تكاد تكون سوداء مع لمسة واحدة فاقعة بالأخضر الحمضي أو الأحمر.
3. مظهر صحيفة: خطوط رفيعة، وزوايا مربعة، وأعمدة نصية كثيفة.

تسمي المهارة هذه المظاهر «إعدادات افتراضية لا اختيارات»، وتطلب من النموذج ألا يستخدمها إلا إذا طلب موجز المشروع ذلك المظهر فعلا.

اقرأ ذلك مرة أخرى. كتبت الشركة التي بنت الذكاء الاصطناعي ملفا ليعارض ذكاءها الاصطناعي نفسه. هذا الملف هو نقطة انطلاق الدورة كلها.

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

ينتج عن ذلك أمران يشكلان كل ما يلي:

• تنتقل العادات بين نماذج الذكاء الاصطناعي، لذلك لا يعني الرأي الثاني تلقائيا عينا ثانية. يصف ملف Anthropic المظاهر الثلاثة بأنها وجهة تصميم الذكاء الاصطناعي عموما، لا وجهة نموذجها وحده. تتدرب الشركات المختلفة على ويب متشابه، فتنحرف نحو متوسط متشابه. يهم هذا لاحقا: عندما تطلب من ذكاء اصطناعي ثان مراجعة عمل الأول في المفهوم 12، فأنت تأمل ألا يشارك النقطة العمياء نفسها. وكلما زاد اختلافهما كان الرهان أفضل. لا يكسر هذه السلسلة بثبات إلا ملف قواعد.
• الحل ليس أبدا «اكتب تعليمة أقوى». طلب «اجعله فريدا» شائع جدا بدوره، فيحصل على إجابة شائعة. الحل بنيوي: ملف ذوق يمنع أنماطا محددة، ويفرض تنوعا بنيويا، ويفحص الناتج عبر بوابات قبل تسليمه. وهذا موضوع الجزء 2.

2. المكدس رباعي الأجزاء

يبنى كل موقع في هذه الدورة من أربعة أجزاء. تعلمها وسيصبح لكل ما تبقى مكان واضح:

الجزء	ما يفعله	ما نستخدمه
النموذج	يكتب الكود الذي يصنع الصفحة	Kimi K3 للتصميم، وClaude للمراجعة
الذوق	يمنع الذكاء الاصطناعي من استخدام مظهره الافتراضي الممل	ملف مهارة Hallmark، وإضافة frontend-design من Anthropic
الوسائط	صور وفيديو حقيقيان، لأن المربعات والنصوص ليست هوية تجارية	أربعة مسارات من الصور المجانية إلى الفيديو المدفوع (المفهوم 9)
الاستضافة	تضع الصفحة على الإنترنت في عنوان ويب حقيقي	Vercel، ويمكن للذكاء الاصطناعي التحكم فيها بنفسه

لاحظ ما لا تتضمنه القائمة: لا منشئ مواقع، ولا متجر قوالب، ولا محرر سحب وإفلات. تنجز الأداة التي تعرفها كل ذلك.

قد يفيد هذا التشبيه: تخيل ورشة صغيرة. النموذج هو العامل، وملف الذوق هو الدليل الذي تسلمه للعامل، والوسائط هي خزانة الإمدادات، والاستضافة هي الباب الذي يخرج منه العمل المكتمل.

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

أربعة مربعات، وأربعة أسطر في فاتورتك.

3. اختيار نموذج التصميم

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

العمل	استخدم
التخطيط والبنية وتصحيح أمر محير	أقوى نموذج متاح لديك
اتباع خطة معتمدة: تعديلات روتينية وتنسيق واختبارات	نموذجا أرخص أو مجانيا
التصميم البصري وصقل الواجهة الأمامية	النموذج المتصدر في ساحة التصميم هذا الربع

لماذا يحتاج التصميم إلى صف خاص؟ لأن التفوق في التصميم لا يأتي من الذكاء العام، بل من أمرين آخرين:

• الممارسة. تدرب بعض شركات الذكاء الاصطناعي نموذجها على أعمال تصميم ويب أكثر مما تفعله شركات أخرى.
• القدرة على الرؤية. يفعل الذكاء الاصطناعي الذي ينظر إلى صورة صفحته ما يفعله المصمم البشري: يبني وينظر ويصلح. أما الذي يقرأ كوده فقط فيصمم أعمى. يستطيع Kimi K3 الرؤية، وهذا أهم سبب لتفضيل الناس صفحاته.

تحميك ثلاث عادات من الانسياق وراء الضجيج:

• ثق بالاختبارات العمياء، لا بالإعلانات. في مواقع مثل LMArena، يقارن أشخاص حقيقيون صفحات صنعتها نماذج مختلفة دون معرفة صانع كل صفحة، ثم يصوتون. هذا دليل أفضل كثيرا من مدح شركة لمنتجها. في يوليو 2026، احتل Kimi K3 المركز الأول في تصميم الويب مع ترتيبه دون Claude وGPT إجمالا. هذا الفرق هو الدرس: التفوق في التصميم والتفوق العام منافستان مختلفتان.
• دع ذكاء اصطناعيا يبني وآخر يحكم. يبني Kimi K3 الصفحة ويراجعها Claude. يوضح المفهوم 12 الطريقة.
• توقع تغير المتصدر، ولاحظ ضآلة تكلفة ذلك عليك. سلم ملف الذوق نفسه إلى أي نموذج قوي يتصدر الربع المقبل، وستحصل منه على عمل بجودة مماثلة، لأن معظم ما يفصل الصفحة المصنوعة عن المولدة أصبح في الملف لا في النموذج. هذه حجة الدورة كلها، وهي أيضا بوليصة تأمينك. اسم المتصدر هو الجزء الأقل ارتباطا به.

عيبان صريحان في Kimi K3. يفكر بعمق افتراضيا، لذلك هو أبطأ وأكثر إسهابا مما تتوقع. يناسب ذلك التصميم لكنه يزعج في المهام الصغيرة. كما يعتمد سعره المنخفض على خصم لا ينطبق إلا عندما تبقى محادثتك مرتبة، وهو ما يشرحه المفهوم 15.

4. أي نموذج داخل أداتك

أوضحت دورة البرمجة المكثفة كيفية تشغيل ذكاء اصطناعي مختلف داخل أداتك. ستفعل الشيء نفسه مع Kimi K3. هذا من المواضع القليلة التي يختلف فيها Claude Code وOpenCode فعلا، لذا اختر لسانك.

قبل الإعداد، افهم ما تفعله في جملة واحدة. ترسل أداتك أسئلتها عادة إلى ذكاء اصطناعي تابع لشركة واحدة. أنت تغير العنوان الذي ترسل إليه، فتذهب الأسئلة إلى Kimi K3 بدلا منه. لا يتغير شيء آخر في الأداة.

يتحدث Claude Code إلى Claude افتراضيا. لكن Moonshot بنت خدمتها لتقبل الرسائل بالتنسيق نفسه الذي يرسله Claude Code، ولذلك يستطيع Claude Code التحدث إلى Kimi K3 بلا برمجيات إضافية.

تحتاج إلى مفتاح من platform.kimi.ai. يشبه المفتاح كلمة مرور تتيح لحاسوبك استخدام ذكائهم الاصطناعي، ويرتبط بحسابك. اعرف أمرين قبل البدء:

• أضف أولا مبلغا صغيرا إلى الحساب، فالمفتاح لا يعمل مع حساب فارغ.
• يسمح أدنى مستوى مدفوع بعدد قليل جدا من الرسائل في الدقيقة، فيبدو الذكاء الاصطناعي معطلا لا بطيئا. أضف ما يكفي لتجاوز المستوى الأول قبل الحكم عليه.

الآن الصق التالي في .claude/settings.json داخل مجلد المشروع الذي تريد استخدام Kimi K3 فيه. (احتفظ به في مجلد منفصل عن عملك المعتاد كي تواصل مشاريعك الأخرى استخدام Claude.)

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.moonshot.ai/anthropic",
    "ANTHROPIC_AUTH_TOKEN": "YOUR_MOONSHOT_API_KEY",
    "ANTHROPIC_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_FABLE_MODEL": "kimi-k3[1m]",
    "CLAUDE_CODE_SUBAGENT_MODEL": "kimi-k3[1m]",
    "CLAUDE_CODE_AUTO_COMPACT_WINDOW": "1048576",
    "ENABLE_TOOL_SEARCH": "false"
  }
}

تبدو هذه الكتلة كبيرة، لكنها لا تقول إلا ثلاثة أمور: أين ترسل الرسائل، و_أي كلمة مرور_ تستخدم، و_أي ذكاء اصطناعي_ تختار. إليك خمسة تحذيرات تعلمناها بالطريقة الصعبة:

• اضبط كل سطر للنموذج، لا الأول فقط. يستخدم Claude Code بهدوء نماذج مختلفة لوظائف صغيرة متنوعة في الخلفية. إذا غيرت النموذج الرئيسي وحده، فستظل تلك الوظائف تطلب نموذج Claude غير موجود لدى Moonshot، وستفشل الأمور بطرق محيرة. لهذا توجد جميع أسطر ANTHROPIC_DEFAULT_*، ومنها سطر Fable الذي ينساه الناس.
• إذا استخدمت Claude Code من قبل، فاحذف ANTHROPIC_API_KEY. يتعارض المفتاح القديم المتروك مع ANTHROPIC_AUTH_TOKEN أعلاه، ولن تخبرك رسالة الخطأ بذلك. وهذا أكثر أسباب فشل الإعداد شيوعا لمن لا يبدأون من جهاز نظيف.
• تحقق من إعدادك باستخدام /status لا /model. لا تعرض قائمة /model إلا نماذج Claude نفسها. لن يظهر Kimi فيها أبدا، وهذا طبيعي وليس خطأ. اكتب /status بدلا منها؛ يجب أن ترى kimi-k3 وعنوان Moonshot.
• مفتاحك موجود الآن كنص عادي داخل ملف. لا ترفع ذلك الملف أبدا إلى مكان عام. أضف .claude/settings.json إلى ملف .gitignore حتى لا يشارك بالخطأ.
• يتوقف جلب صفحات الويب عبر هذا المسار. لا تدعمه نقطة نهاية Moonshot حتى الآن، بينما تعمل بقية الميزات.

يستحق الإعداد الأخير CLAUDE_CODE_AUTO_COMPACT_WINDOW الفهم بدلا من النسخ فقط. يرتب Claude Code محادثتك تلقائيا عندما تقترب من الامتلاء، لكنه لا يعرف متى يفعل ذلك إلا إذا أخبرته بحجم «الامتلاء». يمثل 1048576 نافذة Kimi K3 ذات المليون رمز مكتوبة كاملة. إذا حذفته فسيبدأ الترتيب مبكرا جدا أو لن يبدأ إطلاقا.

ملاحظة صريحة: تدعم Moonshot هذا الإعداد، لكن Anthropic لا تدعمه. أوضحت Anthropic أنها لا تختبر ولا تدعم إرسال رسائل Claude Code إلى نماذج ذكاء اصطناعي من شركات أخرى. لذلك إذا تسبب تحديث Claude Code في تعطله، فلم يعد أحد بإصلاحه. أنت تستبدل الدعم الرسمي بحرية اختيار ذكائك الاصطناعي. إنها مقايضة عادلة ما دمت تدركها.

بني OpenCode للعمل مع أي ذكاء اصطناعي، لذلك هذا هو المسار الأسهل. وهنا أيضا يقدم OpenRouter أكبر فائدة.

يمثل OpenRouter خدمة واحدة تصلك بمعظم نماذج الذكاء الاصطناعي، ومنها Kimi K3 وGPT وGemini ونماذج مجانية كثيرة. بدلا من إنشاء حساب لدى كل شركة، تنشئ حسابا واحدا وتدفع فاتورة واحدة. اعتبره مفتاحا واحدا يفتح أبوابا كثيرة.

يستغرق الإعداد نحو دقيقة:

1. أنشئ مفتاحا في openrouter.ai/keys وأضف رصيدا صغيرا مدفوعا مسبقا.
2. شغل opencode، واكتب /connect، واختر openrouter، ثم الصق المفتاح.
3. اكتب /models واختر moonshotai/kimi-k3 (المعرف الدقيق كما يظهر في أداة الاختيار؛ تتغير المعرفات، لذا ثق بالقائمة).

هذا كل شيء. يستمر كل ما تعرفه في العمل، ويصبح Kimi K3 مجرد خيار إضافي في القائمة.

إعداد مناسب لهذه الدورة هو Kimi K3 لبناء التصميم، ونموذج رخيص للمهام الصغيرة، مع ربط Claude أو GPT أيضا كي يتوفر رأي ثان في خطوة المراجعة ضمن المفهوم 12.

راقب أمرين. يتقاضى OpenRouter مبلغا أعلى قليلا من التعامل المباشر مع Moonshot لأنه يتولى الربط نيابة عنك، وهذا مقبول أثناء التعلم. كما يكتب Kimi K3 إجابات طويلة، لذا راقب رقم الاستخدام الذي تعرضه أداتك؛ فالإجابات الطويلة تكلف أكثر.

قاعدة التاج المستعار

أيا كان المسار الذي تختاره، ابن عاداتك حول أداتك وملفاتك، لا حول نموذج ذكاء اصطناعي واحد. يرتدي متصدر التصنيف تاجا مستعارا سيسلم إلى غيره، أما ملفاتك فتبقى.

---

الجزء 2: الذوق كمهارة

5. Hallmark: ملف ذوق صارم

وصف الجزء 1 المشكلة. ويصلح ملف مجاني واحد معظمها.

Hallmark مهارة تصميم أنشأها حسن المغاري ونشرت تحت مظلة Together AI. هي مجانية ومتاحة للجميع، وأصبحت من أشهر ملفات المهارات في 2026. تصف مهمتها في جملة واحدة: اجعل الصفحات التي يبنيها الذكاء الاصطناعي تبدو مصنوعة بعناية لا مولدة.

وهي أيضا أوضح مثال في الكتاب كله لما يستطيع ملف المهارة فعله. تذكر وعد دورة البرمجة المكثفة: يجلب الذكاء الاصطناعي المعرفة العامة، وتجلب المهارة حكمك المحدد. تجسد Hallmark ذلك الوعد؛ بناها خبراء وقدموها لك مجانا.

ثبتها بالطريقة الحديثة في أي من الأداتين:

npx skills add Nutlope/hallmark

يفتح الأمر أداة اختيار تفاعلية: تعثر على المهارة، وتسرد الوكلاء المثبتين على جهازك، وتسألك أين تثبتها. تكون Claude Code وOpenCode وCodex محددة مسبقا عادة، ولذلك يكفي معظم القراء الضغط على Enter. يفيد خياران عند الرغبة في تجنب الأسئلة تماما: يثبت -g المهارة عالميا على مستوى المستخدم لتتاح في كل مشروع، ويتجاوز -y التأكيدات. لذلك تمثل npx skills add Nutlope/hallmark -g -a claude-code -y النسخة ذات السطر الواحد. أعد تشغيل الأمر في أي وقت للتحديث، ويعرض npx skills list ما لديك.

تصل الملفات إلى مجلد باسم ~/.claude/skills/hallmark/. يقرأ OpenCode المجلد نفسه، ولذلك يخدم تثبيت واحد الأداتين.

افتح المجلد مرة وانظر داخله. طريقة تنظيمه درس بحد ذاتها. يوجد ملف رئيسي قصير واحد هو SKILL.md، وإلى جواره مجلد references الذي يحمل كل شيء آخر: قائمة من 58 فحصا، وملفا عن الخطوط، وملفا عن الألوان، وملفا عن التباعد، وأشكال الصفحات البالغ عددها 21، والسمات.

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

يعلمك التثبيت نفسه ملاحظة صريحة: تطبع الأداة تذكيرا بأن المهارات تعمل بصلاحيات الوكيل الكاملة ويجب مراجعتها قبل الاستخدام. وهذا صحيح ويجب أخذه حرفيا؛ فالمهارة تعليمات سيتبعها وكيلك. اقرأ SKILL.md لأي شيء تثبته، سواء من هذه الدورة أو من أي مكان آخر.

ما داخل الملف. ليست Hallmark مجموعة صور جميلة، بل مجموعة أجزاء عاملة:

• تختار شكل الصفحة أولا. قبل اختيار أي لون، تختار بنية للصفحة من قائمة تضم 21 شكلا مختلفا. هذا ما يميز Hallmark. لا تغير معظم محاولات «اجعله مختلفا» إلا الألوان، بينما تغير Hallmark الهيكل العظمي. يجب ألا تحمل صفحتان تبنيهما لعميلين مختلفين ترتيب الأقسام نفسه. إن طلاء الهيكل نفسه بلون جديد هو المشكلة التي وجدت المهارة لحلها.
• عشرون سمة مسماة، إضافة إلى Custom. تمثل كل سمة هوية متماسكة: لوحة ألوان، واقتران خطوط، وطابع تباعد (يتضمن الدليل Specimen وAtelier وBrutal وNewsprint وStudio وManifesto وTerminal وMidnight وAlmanac وGarden وRiso وSport وBloom وCoral وCobalt وAurora وEditorial وCarnival وLumen وHum). لا تختار بحرية؛ تمنعها قاعدة تناوب من الاستقرار على سمة واحدة عبر مشاريعك ضمن نوع الموجز. عندما يحمل الموجز نية إبداعية لا تناسبها أي سمة، تنتقل إلى Custom وتبني لوحة ألوان واقتران خطوط مخصصين من الصفر، بالبوابات نفسها ودون قالب تحتهما. يبقى هذا التفرع خفيا في الموجزات العادية؛ فلا ترى كلمتي catalog أو custom.
• قائمة تحقق طويلة قبل تسليم العمل. تختبر المهارة الصفحة النهائية بقائمة من العادات السيئة المعروفة، ثم تنتقد عملها مرة أخرى قبل أن تعرض عليك شيئا. (تفصيل صغير يعلمك أمرا: تقول صفحة المشروع الرئيسية إن هناك 57 فحصا، بينما يحمل ملف قائمة التحقق المثبت عنوان 58. تنحرف الأرقام في الوثائق. إذا اختلفت صفحة وأداة، فصدق الأداة.) هذا درس دورة البرمجة المكثفة في ثوب جديد: قائمة تحقق صارمة تحفظها مرة تتفوق على طلب كسول تكتبه وأنت متعب.
• قاعدة أمان. إذا وجهتها إلى موقع موجود، فلن تحذف Hallmark ملفات أو تقتلع أقساما دون إخبارك والحصول على موافقتك. مهارة التصميم ليست إذنا بتدمير موقع شخص آخر.

الأوضاع الأربعة. تستطيع Hallmark أداء أربع وظائف مختلفة. الأولى هي ما تفعله عندما تطلب صفحة جديدة، أما الثلاث الأخرى فتسميها صراحة. يشكل تعلم اختيار الوضع المناسب معظم تعلم المهارة:

الأمر	ما يفعله	متى تستخدمه
default	يبني صفحة جديدة: يختار شكلا ويطبق القواعد ويشغل الفحوص البالغ عددها 58	عندما تبدأ شيئا جديدا
audit	ينظر إلى صفحة موجودة ويسرد أخطاءها دون تغيير شيء	عندما تريد مراجعة صريحة (المفهوم 11)
redesign	يتخلص من الشكل القديم ويحفظ الكلمات والهوية ثم يعيد البناء بطريقة مختلفة	عندما تعمل الصفحة لكنها تبدو مولدة
study	يدرس موقعا يعجبك ويسجل أسباب نجاحه	عندما تريد التعلم من موقع جيد (المفهوم 6)

الأصل: مهارة frontend-design من Anthropic

لم تظهر Hallmark من العدم. يذكر ملفها مصادر أفكارها، ومن بينها إضافة frontend-design من Anthropic لأداة Claude Code.

تستحق مقارنة الملفين، لأنهما يحلان المشكلة نفسها بطريقتين مختلفتين.

تعلم مهارة Anthropic الحكم. تقول مثلا: اعمل كمصمم في استوديو صغير. اجعل أعلى الصفحة يقول شيئا حقيقيا. دع الخطوط تحمل الشخصية. كن جريئا في موضع واحد وهادئا في كل ما عداه. وانظر إلى صورة عملك قبل أن تعتبره منتهيا.

توفر Hallmark الآلية: قوائم أشكال الصفحات، وسمات مسماة، وفحوصا مرقمة، ومراجعة ذاتية إلزامية.

كلتاهما مفيدة وتعملان معا. ثبت إضافة Anthropic فتساعد تلقائيا في أعمال التصميم اليومية. واستدع Hallmark بالاسم عندما تريد المعالجة الكاملة. تحذير واحد: مع نموذج غير Claude مثل Kimi K3 تقل موثوقية التقاط المهارات تلقائيا، لذلك اكتب اسم Hallmark كل مرة بدلا من الاكتفاء بالأمل.

هل تجعل المهارة الذكاء الاصطناعي ينتج الصفحة نفسها كل مرة؟ لا. يبقى في الذكاء الاصطناعي قدر من العشوائية، وتضيق المهارة نطاق ما يفعله بدلا من إزالة العشوائية. تمنعه Hallmark من اللجوء إلى الشكل المرهق نفسه، لكنها لا تجعل محاولتين متطابقتين. تحتاج الأمور التي يجب أن تتحقق في كل مرة بلا استثناء إلى قاعدة لا يستطيع تجاهلها، ويوضح المفهوم 11 كيفية بنائها.

6. ادرس ولا تستنسخ

أسرع طريقة لتحسين تصميم هي الإشارة إلى تصميم يعجبك والقول: «اجعله يمنح إحساس ذلك التصميم».

وأسرع طريقة لتدمير سمعتك هي نسخ ذلك الموقع حرفيا.

يتعامل أمر study في Hallmark مع ذلك جيدا، وستعلمك طريقة عمله الكثير عن التصميم.

اعرض على study موقعا يعجبك، أو حتى لقطة شاشة له، فيسجل أسباب نجاحه: شكل الصفحة، والخطوط المنسجمة، واللون الرئيسي، ومقدار المساحة الفارغة. يحفظ كل ذلك في ملف باسم design.md.

أما ما لن يفعله فهو نسخ الموقع. يأخذ الأفكار لا البكسلات. يستطيع موقعان مشاركة الأفكار كما يشترك طالبان في معلم واحد؛ ترى صلة بينهما، لكنهما ليسا الشخص نفسه.

النسخ خطأ وقد يسبب مشكلات قانونية أيضا. وهناك ثلاثة أسباب عملية لا تقل أهمية:

• الملف ينتقل. يمثل design.md ذوقك مكتوبا. سلمه إلى ذكاء اصطناعي آخر أو أداة أخرى أو زميل أو العميل للموافقة، وسيبقى اتجاه التصميم بعد التسليم.
• يدرب عينك. اقرأ ثلاثة من هذه الملفات لثلاثة مواقع تحبها، وستبدأ بملاحظة البنية والخطوط أينما نظرت. تعلمك المهارة أثناء عملها.
• يحل أصعب مشكلة للمبتدئين. لا يستطيع معظم الناس وصف المظهر المطلوب، لكن الجميع يستطيع الإشارة إلى موقع يعجبه. يحول study الإشارة إلى تعليمات.

قاعدة جديرة بالاتباع: ادرس موقعين أو ثلاثة لكل مشروع، ولا تكتف بموقع واحد أبدا.

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

7. استخراج الهوية التجارية: حمض العميل النووي موجود على الإنترنت

تناول المفهوم 6 المواقع التي تعجبك. أما عمل العميل فهو العكس. التصميم الذي يجب احترامه موجود بالفعل، لأنه هوية العميل: شعاره وألوانه وخطوطه وطريقة حديثه. إذا أخطأت فيها فلن يهم العميل أي شيء آخر تبنيه.

الفكرة الرئيسية هنا: اطلب أشياء محددة، لا كل شيء.

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

المسار 1: اسأل ذكاءك الاصطناعي بدقة (مجاني). اطلب منه فتح موقع العميل واستخراج أمور محددة مع دليل:

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

الجملة الأخيرة هي المهمة. رمز اللون وحده تخمين، أما رمز اللون مع السطر الذي جاء منه فيمكنك التحقق منه بنفسك. اطلب الإيصال دائما.

المسار 2: استخدم أداة مخصصة (مدفوع وأنظف). وجدت خدمات مثل Firecrawl لتحويل صفحات الويب الفوضوية إلى معلومات نظيفة ومنظمة للذكاء الاصطناعي. يعيد بعضها شعار الهوية وألوانها وخطوطها مباشرة. يكفي المسار 1 لعميل واحد، أما إذا كررت العمل أسبوعيا فتزيل أداة مدفوعة فئة كاملة من الأخطاء وتغطي تكلفتها. (من المهم أن تعرف أن مقاطع الفيديو التي استندت إليها الدورة تلقت مقابلا للترويج لأدوات كهذه. الفكرة سليمة، أما العلامة المحددة فاختيارك وفقا لأسعار اليوم.)

المسار 3: اسأل العميل مباشرة. لا تتجاوز هذا أبدا. لدى الشركات الحقيقية ملفات حقيقية: الشعار الصحيح، والألوان الرسمية، وأحيانا دليل الهوية. كل ما سبق للمسودة الأولى. قبل نشر أي شيء اطلب الملفات الحقيقية. سيلاحظ شخص ما في النهاية شعارا أعدت بناءه بالعين، وسيكون الموقف محرجا.

أيا كانت طريقة الحصول عليها، تدخل الإجابات في الملف نفسه: design.md. لكن صنفها بوضوح على أنها قواعد لا اقتراحات.

هناك فرق حقيقي. المواقع التي أعجبتك في المفهوم 6 هي اتجاه: أفكار تستعيرها. أما ألوان هوية العميل فهي قواعد: لا يجوز تغييرها لأنك وجدت شيئا أجمل. تصمم مهارة الذوق داخل هذه القواعد.

---

الجزء 3: البناء

8. قصة واحدة وتمرير واحد

افتح أفضل المواقع التي تعرفها ولاحظ ما تشترك فيه. الصفحة ليست كومة أقسام مكدسة، بل قصة تروى بترتيب التمرير.

فكرة واحدة في كل شاشة. تجعلك كل شاشة ترغب في التالية، ويحرك التمرير القصة.

هذه أقوى فكرة في الدورة لجعل الصفحة تبدو مقصودة، ويسهل التخطيط لها:

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

العمود الفقري للقصة هو أيضا عقد التجاوب وقائمة لقطات الوسائط. احتفظ به: يولد المفهوم 9 الصور لكل نبضة، ويعيد المفهوم 10 تصوير العمود نفسه لشكل شاشة مختلف. أثر واحد يؤدي ثلاث وظائف؛ ولهذا يكتب بدلا من بقائه في رأسك.

يجب أن تفعل النبضة الأخيرة شيئا فعليا. تنتهي كل قصة بإجراء واحد: حجز أو شراء أو مراسلة أو اشتراك.

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

الخيار 1: رابط WhatsApp. لا يحتاج إلى أي شيء إضافي، وهو أفضل إجابة لمعظم المشاريع الصغيرة. رابط مثل التالي:

https://wa.me/923001234567?text=Hello,%20I%20would%20like%20to%20book%20a%20consultation

يفتح WhatsApp والرسالة مكتوبة مسبقا. لا نظام يجب بناؤه ولا نموذج ولا شيء يجب فحصه. والأفضل أن الرسالة تصل إلى المكان الذي يجيب فيه المالك عملاءه طوال اليوم. تأتي معظم قوالب المواقع بنموذج اتصال لا يراجعه أحد، ويتفوق عليه زر WhatsApp بسهولة.

الخيار 2: خدمة نماذج. تتيح شركات مثل Formspree وضع نموذج عادي في صفحتك، ثم ترسل بالبريد كل ما يدخله الناس. تكفي خططها المجانية لمشروع صغير. استخدمها عندما يريد العميل نموذجا فعلا.

الخيار 3: برنامج صغير على الخادم. تستطيع Vercel في المفهوم 13 تشغيل برامج صغيرة بجوار موقعك، فيبني ذكاؤك الاصطناعي نظاما كاملا عندما يكبر المشروع بما يكفي للحاجة إليه. هذه وجهة نمو الخيارين الأولين، وليست نقطة البداية.

أيا كان اختيارك، اكتبه في القصة وقت التخطيط. يمثل سطر «النبضة 6: حجز استشارة، رابط WhatsApp إلى +92 300...» شيئا يمكنك التخطيط حوله وفحصه لاحقا. وستفحصه فعلا؛ إذ يوضح المفهوم 11 كيفية التأكد من أن الصفحة المنشورة النهائية تحتوي رابطا يعمل حقا.

القصة التي تنتهي بزر لا يفعل شيئا ليست موقعا، بل ملصق.

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

9. مسار الوسائط

إليك السر الصريح خلف كل موقع جعلك تتوقف وتنظر: تؤدي الصور نصف العمل.

ترفعك الخطوط الجيدة والبنية الجيدة فوق المتوسط، لكن الصفحة المكونة من مربعات ملونة ونص فقط تظل أشبه بمستند لا بمكان. الصور والفيديو الحقيقيان يجعلان الصفحة تبدو مكانا وصلت إليه.

لهذا تعد الصور جزءا إلزاميا من الدورة، لا زينة تضاف في النهاية.

وهذا أيضا الجزء الوحيد الذي يغير فيه المال ما تستطيع فعله فعلا. لذلك نعلمه في أربعة مسارات من المجاني إلى المكلف. يستطيع كل مسار إنتاج موقع حقيقي جيد. اختر مسارك لكل مشروع واعرف بدقة ما يمنحك إياه.

المسار 1: صور حقيقية (مجانية دائما). لدى Unsplash وPexels مكتبتان ضخمتان من الصور الاحترافية التي يمكنك استخدامها مجانا، حتى للعملاء الذين يدفعون. (اقرأ صفحة قواعدهما: يجوز استخدام الصور، ولا يجوز إعادة بيع الصور نفسها.)

تمنع عادتان الصور المجانية من أن تبدو مجانية:

• طابق الإضاءة. اختر صورا تشترك في نوع الضوء والمزاج نفسيهما عبر الصفحة كلها. الإضاءة المختلطة تجعل الصفحة تبدو مجمعة من صور غرباء.
• اقتص باختيار مقصود. لا تقبل الصورة كما وجدتها، بل اقتصها لتظهر ما تريد.

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

المسار 2: صور يصنعها الذكاء الاصطناعي مجانا (مع قيد واحد). أحيانا لا توجد الصورة التي تحتاج إليها في أي مكان: أسلوب رسم غير مألوف أو منتج لم يصور بعد. يستطيع الذكاء الاصطناعي صنعها.

لكن هذا هو القيد الذي يشكل المسار كله: عندما يكون مجانيا، تحصل على الجودة أو الراحة، لا كليهما.

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

2أ. يدويا مع أفضل ذكاء اصطناعي: خطة ChatGPT المجانية. يعد ذكاء الصور من OpenAI حاليا من أقوى الخيارات واسعة الانتشار. يتبع التعليمات بدقة، ويضع نصا مقروءا داخل الصورة (وهو ما تعجز عنه معظم النماذج)، ويحافظ على أسلوب متسق عبر مجموعة صور، فتبدو صور الصفحة كلها منسجمة.

هو مجاني على chatgpt.com مع عدد محدود من الصور يوميا. لا تنشر OpenAI عددا ثابتا وهو يتغير، لذا تحقق مما يعرضه حسابك. لا توجد نسخة آلية مجانية، ولهذا ينفذ هذا المسار يدويا.

إليك سير العمل الذي يجعل التنفيذ اليدوي ميزة لا عبئا: يكتب ذكاؤك الاصطناعي التعليمات، وتضغط أنت الزر.

تحتوي لوحتك القصصية وصفا لكل نبضة. اطلب من ذكائك الاصطناعي صقل الأوصاف، والصق كل واحد بنفسك في chatgpt.com، واحفظ النتائج في مجلد assets/ بأسماء مثل 01-shoebox.png، ثم يضعها ذكاؤك الاصطناعي في الصفحة. تمنحك عشر دقائق من النسخ واللصق أفضل جودة صور متاحة بلا تكلفة.

حتى الحد اليومي يساعدك. بضع صور يوميا تقارب وتيرة بناء مخطط، وتمنعك من الوقوع في عادة توليد أربعين صورة والأمل في نجاح واحدة.

2ب. آلي لكنه أضعف: خدمات مجانية يستدعيها ذكاؤك الاصطناعي بنفسه. عندما تريد استمرار العمل دونك، مثل المسودات الأولية والصور المؤقتة ومشاريع الصف، توجد ثلاثة خيارات. يعد Pollinations.ai أقرب خدمة إلى الصور الآلية المجانية حقا ولا يحتاج إلى حساب. ويتضمن Cloudflare Workers AI حصة مجانية حقيقية يوميا. كما قدمت خطة Google المجانية صورا مجانية في أوقات مختلفة.

يحمل الخيار الأخير درسا. في 2026 وحده غيرت Google أكثر من مرة حالة مجانية ذكاء الصور الحالي لديها. لذلك لا تتذكر اسم شركة، بل تذكر: الخطط المجانية كالطقس. افحص صفحة اليوم في يوم البناء، ولا تعد عميلا أبدا بشيء يعتمد على حصة مجانية قد تختفي الشهر المقبل.

طريقة جيدة للجمع بينهما: اصنع مسودات أولية باستخدام 2ب لتحديد أماكن العناصر، ثم أعد صنع الصور المعتمدة بإتقان باستخدام 2أ. اجعل المسودة رخيصة والنهاية جيدة.

المسار 3: ادفع بضعة سنتات لكل صورة. ما إن يمتلك المشروع ميزانية صغيرة حتى يختفي قيد المسار 2.

يمكن أيضا استخدام ذكاء الصور الممتاز نفسه من 2أ تلقائيا، وتدفع لكل صورة: نحو نصف سنت للجودة المنخفضة، وبضعة سنتات للمتوسطة، ونحو عشرين سنتا للعالية. (تتغير الأسعار، فتحقق منها.)

بهذه الأسعار تحصل على الجودة والراحة معا. يصنع ذكاؤك الاصطناعي كل صورة في لوحتك القصصية بنفسه وبأعلى جودة، وتكلف صور الموقع كله أقل من دولار. هنا يحدث معظم عمل العملاء الحقيقي.

تؤدي خدمات مثل fal.ai وReplicate العمل نفسه عبر ذكاء الصور لدى شركات كثيرة باستخدام حساب واحد، تماما كما فعل OpenRouter للنص في المفهوم 4.

العادة التي تبقي التكلفة منخفضة مألوفة لديك: أنشئ المسودات بجودة منخفضة، ولا تدفع للجودة العالية إلا بعد اتفاق الجميع على الصورة.

المسار 4: فيديو مدفوع بالأرصدة (العنصر المبهر). تأتي من هذا المسار قطرة العسل التي تنساب عبر الشاشة أثناء التمرير. تكلف مالا حقيقيا، وتستحقه عند حسن استخدامها.

Higgsfield خدمة تمنحك عبر حساب واحد وصولا إلى أكثر من 30 نموذجا مختلفا للصور والفيديو والصوت، ومنها Gemini Omni Flash وSeedance وVeo وKling. تهمنا فيها ثلاثة أمور:

• يستطيع ذكاؤك الاصطناعي استخدامها مباشرة. ثبتها مرة باستخدام npm install -g @higgsfield/cli وسجل الدخول مرة باستخدام higgsfield auth login. بعد ذلك يصبح صنع الفيديو عملا يؤديه ذكاؤك الاصطناعي داخل جلستك المعتادة كما يعدل ملفا؛ يرسل المهمة وينتظرها ويعيد النتيجة.

• لا تضطر إلى اختيار النموذج. صف اللقطة المطلوبة، مثل «لقطة مقربة لعسل يقطر على زجاج، وضوء دافئ من الخلف، وشكل طويل للهواتف، وأربع ثوان»، فتختار الخدمة أفضل نموذج من أكثر من 30. وهذا شيء أقل يجب تعلمه.

• يمكنك فحص السعر قبل الإنفاق. يخبرك الأمر higgsfield generate cost بتكلفة الفيديو المحتملة دون صنعه. تصف اللقطة بالطريقة نفسها المستخدمة لصنعها، لذلك يبدو أمر حقيقي هكذا:

  higgsfield generate cost workflow draw_to_video --duration 8.2 --resolution 720p

  هذا أكثر أمر فائدة في قسم الوسائط كله، لأنه يحول «خطط قبل الإنفاق» من نصيحة إلى إجراء فعلي: سعر كل لقطة في لوحتك القصصية، واجمع التكاليف، وقرر، ثم أنشئ. علم ذكاءك الاصطناعي تقديم السعر قبل التصوير.

Higgsfield شركة من عدة شركات؛ تقدم fal.ai وReplicate وشركات الذكاء الاصطناعي نفسها خدمات مشابهة. نعرض هذه لأنها تتصل حاليا بأدواتك بسهولة أكبر، وبالصراحة نفسها، فقد دفعت مقابل كثير من مقاطع الفيديو التي نشرت سير العمل هذا. تعلم الفكرة: صنع الفيديو كخطوة عادية داخل جلسة ذكائك الاصطناعي. أما الشركة فقابلة للاستبدال.

أي ذكاء فيديو تطلب؟ تستطيع الخدمة الاختيار نيابة عنك، لكن نموذجين يغطيان معظم أعمال المواقع ويؤديان وظيفتين مختلفتين:

• يأتي Gemini Omni Flash من Google، وهو حاليا نموذج معاينة قد يتغير أو ينتقل دون إشعار، ويتولى العثور على اللقطة. يمكنك التحدث إليه كشخص: تحسن عبارة «المشهد نفسه، سكب أبطأ، ضوء أدفأ» الفيديو السابق بدلا من البدء من الصفر، ويحافظ على اتساق الإضاءة والمشهد أثناء الصقل. استخدمه وأنت ما زلت تقرر شكل اللقطة.
• يأتي Seedance 2.0 من ByteDance، وستراه باسم seedance_2_0، ويتولى تثبيت اللقطة. يمكنك منحه حتى تسع صور مرجعية، مثل صور الهوية والصور المعتمدة والشعار، وهو الأكثر ثباتا في الحركة السلسة. الثبات مهم هنا: يجب ألا يومض الفيديو المرتبط بالتمرير أو يهتز عند تكراره. استخدمه للنسخة النهائية.

تجمعهما عادة واحدة: اعثر عليها بالأول وثبتها بالثاني. ولاحظ أن مستوى الجودة ليس جزءا من اسم النموذج، بل إعداد --resolution منفصل تمرره كما في أمر التسعير أعلاه. هذا مفتاح التحكم في ميزانيتك وهو نفسه في الموضعين: سعر اللقطة بدقة 720p، واعرض على العميل مسودة 720p، ولا تدفع للجودة الكاملة إلا بعد موافقته.

تحذير دائم: يتغير ذكاء الفيديو أسرع من أي شيء آخر في الدورة. هذه أفضل نماذج يوليو 2026؛ فتحقق من الأفضل في يوم البناء.

قاعدة واحدة لكل مسار: أنشئ صورك من القصة، صورة لكل نبضة، واحفظها في مجلد assets/ بأسماء واضحة، قبل بناء التخطيط النهائي.

تبدو الصور المضافة في النهاية لملء الفراغ دائما كما هي: صور أضيفت في النهاية لملء الفراغ.

نصيحة عملية: عندما تحتاج إلى البحث في صور كثيرة، أرسل ذكاء اصطناعيا مساعدا لينفذ ذلك في محادثة منفصلة ويعيد أفضل القليل فقط. ستسد أربعون صورة محملة في محادثتك الرئيسية السياق، تماما كما حذرت دورة البرمجة المكثفة.

ملاحظة قصيرة عن الإذن، لأن العمل لعميل استخدام تجاري.

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

تظل أمور قليلة محظورة في كل مكان تقريبا: وجوه أشخاص حقيقيين، وشعارات شركات أخرى، ونسخ أسلوب فنان حي بالاسم.

تحافظ أربع عادات بسيطة على سلامتك:

1. اقرأ القواعد الحالية للخدمة التي تستخدمها للصور النهائية.
2. احتفظ بسجل لما صنعته: الوصف المستخدم والخدمة والتاريخ. تحتوي لوحتك القصصية معظم ذلك بالفعل.
3. لا تضع شخصا حقيقيا يمكن التعرف إليه أو شعار شركة أخرى في عمل عميل.
4. أخبر العميل بالصور التي صنعها الذكاء الاصطناعي. تمنع جملة واحدة في مذكرة التسليم كل محادثة محرجة لاحقا.

هذه ليست استشارة قانونية. يحتاج العميل في قطاع منظم إلى محامين حقيقيين. لكن العادات الأربع معيار طبيعي للعمل المهني.

10. الهاتف هو الجهاز الأساسي

سجل كل عرض لموقع ذكاء اصطناعي شاهدته على شاشة حاسوب عريضة. لكن معظم زوار موقعك سيمسكون هاتفا بيد واحدة.

بالنسبة إلى معظم من كتب لهم هذا الكتاب، الهاتف ليس الشاشة الثانية، بل هو الشاشة. الموقع الذي يبدو جيدا على الحاسوب المحمول فقط لا يبهر إلا من بناه.

تبسط فكرة واحدة التصميم للشاشتين:

القصة نفسها، مصورة من جديد لشكل مختلف.

لا يكتب مخرج الفيلم قصة جديدة عندما يصنع نسخة للهواتف. تبقى المشاهد ويتغير تأطير كل مشهد. وهذا معناه عمليا:

• لا تتغير القصة. صندوق الأحذية، والفرز، والتوازن، والوضوح، والشخص، وحجز الاجتماع؛ تظهر النبضات الست على كل جهاز. وإليك اختبارا مفيدا: إذا أمكن حذف نبضة على الهاتف، فهي زينة لا قصة. احذفها من نسخة الحاسوب أيضا.
• تعاد صناعة الصور. يصبح الفيديو العريض فيديو طويلا للموضوع نفسه، لا نسخة عريضة مضغوطة. يعني ذلك في المسارات المدفوعة صنع الشكلين والدفع لكليهما، فأدخلهما في الميزانية. وفي المسارات المجانية يعني اختيار الشكلين منذ البداية.
• حدد موضع تغير التخطيط عمدا. قل لذكائك الاصطناعي بوضوح: «على الشاشات الأضيق من 768 بكسلا، استخدم الفيديو الطويل، واجعل كل قسم بعرض كامل، وكبر حركة التوازن كثيرا لأنها العرض كله على الهاتف». ثم اختبر ذلك: اسحب نافذة المتصفح لتضيق وتتسع وراقب لحظة التبديل. تستطيع رؤية السلاسة أو القبح، ولذلك فهي مهمة للمفهوم 11.
• الإبهام ليس مؤشر فأرة. يجب أن تكبر الأزرار بما يكفي للإبهام. يجب ألا يتطلب أي شيء مهم تمرير المؤشر فوقه، لأن الهاتف لا يملك هذا التفاعل. ويجب قراءة النص دون قرص الشاشة للتكبير. فشل أي منها ليس مشكلة أسلوب، بل موقع معطل لمعظم الزوار.

ملاحظة عملية عن وقت صنع نسخة الهاتف: أنجزها في جلسة العمل نفسها بعد نسخة الحاسوب مباشرة، بينما يتذكر الذكاء الاصطناعي كل قرار. لا تؤجلها إلى يوم آخر أو بعد أسبوع من أعمال أخرى. تنتج جلستان منفصلتان موقعين مختلفين قليلا، ولن تلاحظ حتى يلاحظ العميل.

أين تقع ضمن البناء الكامل؟ مباشرة بعد استقرار التصميم وقبل بدء التحقق:

computer version → phone version → screenshots at both widths → audit → second opinion → publish

سبب الترتيب بسيط: يجب أن تفحص خطوات التحقق النسختين. إذا أجلت نسخة الهاتف إلى ما بعد المراجعة، فقد راجعت نصف موقعك فقط.

من صفحة واحدة إلى صفحات كثيرة: المواقع متعددة الصفحات والتوجيه

تعمدنا تعليم كل ما سبق على صفحة واحدة، لأنها أسهل مكان لتعلم هذه العادات.

لكن عمل العميل الحقيقي ينمو. سترغب عائشة لاحقا في صفحة خدمات وقسم مقالات وربما صفحة لكل تخصص لديها.

الخبر الجيد أن ما تعلمته لا يتغير. الموقع متعدد الصفحات ليس نوعا جديدا، بل العمل نفسه ينفذ مرة لكل صفحة مع ثلاث قواعد جديدة.

القاعدة 1: تحتاج كل صفحة إلى سبب خاص لوجودها وقصة خاصة بها.

الطريقة الخاطئة لإضافة الصفحات هي تفتيت قصة واحدة، فتنتهي بصفحة «من نحن» تحمل فقرتين وحيدتين كان موضعهما ضمن التمرير.

تستخدم الطريقة الصحيحة اختبار «فكرة واحدة لكل شاشة» على مستوى أعلى. توجد صفحة جديدة عندما تكون لدى الزائر مهمة مختلفة. مقارنة الخدمات بالتفصيل، وقراءة مقالاتها، والعثور على المكتب ثلاث مهام مختلفة، ولذلك يمكن أن تكون ثلاث صفحات.

تحصل كل صفحة تجتاز الاختبار على قصة خاصة تكتب وتعتمد كما في المفهوم 8 وتنتهي بإجراء خاص بها.

اكتب ذلك كله أولا في خطة واحدة: كل صفحة ومهمتها ونبضاتها. اعتمد الخطة قبل بناء الصفحة الثانية.

تنبثق قائمتك مباشرة من الخطة بدلا من اختراعها كزينة. اجعلها قصيرة، وسم عناصرها حسب ما يريد الزوار فعله، وحافظ على تطابقها في كل صفحة.

هناك تفصيل صغير آخر يفصل العمل الدقيق عن المهمل: صمم شاشة «الصفحة غير موجودة» أيضا. إنها صفحة وتستحق العناية نفسها.

القاعدة 2: مظهر واحد عبر الموقع كله.

هنا تنقلب فكرة Hallmark الرئيسية، وهذا يربك الناس، فاقرأ ببطء.

بين العملاء المختلفين تحارب المهارة التشابه. يجب ألا يشترك موقعا عميلين في الهيكل نفسه.

داخل موقع عميل واحد يكون التشابه ما تريده تماما. يجب أن تبدو خمس صفحات كخمس غرف في مبنى واحد: الألوان والخطوط والتباعد نفسها، ويحكمها ملف design.md واحد.

تبقى لحظتك الجريئة مميزة وتعيش في الصفحة الرئيسية. إذا كررتها بكامل قوتها في كل صفحة، تفقد تميزها وتتحول إلى ورق جدران.

عمليا، ابن الصفحة الرئيسية أولا لتثبيت المظهر. ثم اطلب كل صفحة أخرى بالطريقة نفسها: «ملف التصميم نفسه، والمظهر نفسه، وقصة جديدة».

وعندما يراجع ذكاء اصطناعي ثان الموقع في المفهوم 12، اطلب منه تحديدا فحص اتساق الصفحات. الفروق الصغيرة بينها هي ما يعجز الباني عن ملاحظته من داخل العمل.

القاعدة 3: عناوين الويب مجرد ملفات، حتى يصبح النسخ مشكلة.

إليك أمرا يبدو معقدا وليس كذلك. في الموقع البسيط، الملف هو العنوان:

• الملف index.html هو صفحتك الرئيسية
• يوجد services.html في /services.html
• يوجد articles/index.html في /articles

تربطها الروابط، وتضع الاستضافة المجلد على الإنترنت كما هو. لا يوجد نظام يجب تعلمه. ابدأ هنا دائما.

إعداد ترتيب صغير يستحق المعرفة: إذا فضلت /services على /services.html، فأضف ملفا باسم vercel.json بجوار صفحاتك يحتوي { "cleanUrls": true }. تحذف Vercel حينها .html من عناوينك. الإعداد معطل افتراضيا، فلا يتعطل شيء إذا لم تلمسه.

الصعوبة الحقيقية في كثرة الصفحات ليست العناوين، بل النسخ. توجد قائمتك وتذييلك الآن كنسخ داخل كل ملف. خمس نسخ من قائمة واحدة تعني خمس فرص لاختلافها قليلا، وسيحمل ملف ما يوما رابطا قديما لم يلاحظه أحد.

تعرف هذا الشعور من دورة البرمجة المكثفة: عندما تشرح الشيء نفسه للمرة الثالثة، تريد المعرفة أن تعيش في مكان واحد.

هناك إجابتان من الخفيفة إلى الثقيلة:

• الإجابة الخفيفة: احتفظ بالملفات البسيطة وأضف فحصا آليا يرفض حفظ عملك إذا لم تتطابق القوائم بين الصفحات. يصبح الانحراف مستحيلا بدلا من كونه غير مرجح فقط.
• الإجابة الأثقل: عندما يتجاوز الموقع بضع صفحات أو يضيف مقالات جديدة بانتظام، انتقل إلى نظام يكتب القائمة مرة ويعيد استخدامها. يناسب Astro هذا النوع من المواقع، ويستطيع ذكاؤك الاصطناعي إعداده ونقل صفحاتك الحالية إليه بتعليمة واحدة.

الحكم هو نفسه الذي علمته دورة البرمجة المكثفة عن الأدوات عموما: تبن النظام الأثقل عندما تستحقه مشكلة حقيقية، لا قبل ذلك.

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

---

الجزء 4: التحقق من التصميم

11. حلقة التحقق البصري

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

في الدورة المكثفة للبرمجة، كان الاختبار هو أداة التحقق. وقد بدا التصميم دائما مستحيلا للتحقق بهذه الطريقة، لأن عبارة «يبدو صحيحا» ليست شيئا يستطيع الحاسوب الحكم عليه بالنجاح أو الفشل.

يحل هذا المفهوم المشكلة. إليك ثلاث أدوات تحقق، من الأكثر مرونة إلى الأكثر صرامة:

أداة التحقق 1: لقطة الشاشة. امنح الذكاء الاصطناعي عينين.

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

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

تكشف نظرة واحدة إلى الصورة المشكلات الأربع فورا.

لهذا السبب بالضبط يتفوق Kimi K3 في مقارنات التصميم، وتلخص مهارة التصميم لدى Anthropic الفكرة في عبارة تستحق الاقتباس: «الصورة تساوي 1000 رمز». الرموز هي ما يدفعه الذكاء الاصطناعي لقراءة شيء ما. لذلك ليست هذه العبارة مثلا، بل تأكيد على أن النظر أقل كلفة من قراءة الشفرة، إلى جانب كونه أفضل.

اجعل الأمر تلقائيا بوضعه في ملف القواعد:

بعد كل تغيير مهم، التقط صورة للصفحة بعرض 1440 بكسل وأخرى بعرض 390 بكسل، وانظر إلى كلتيهما قبل أن تقول إنك انتهيت.

تستطيع الأداتان فعل ذلك. اطلب من أداتك إعداد برنامج اسمه Playwright وسيتولى المهمة. لا يتطلب الأمر كله سوى نحو اثني عشر سطرا من الشفرة تكتبها الأداة مرة واحدة: فتح متصفح، وتحميل الصفحة بكل عرض، وحفظ الصورة، ثم الإغلاق.

هناك تفصيلان يجعلان الصور مفيدة فعلا. التقط الصفحة كاملة، لا الجزء الذي تراه أولا فقط، لأن قصة التمرير تمتد أسفله. وبعد نشر موقعك على الإنترنت (المفهوم 13)، التقط صور الصفحة المنشورة، لا النسخة الموجودة على حاسوبك.

أداة التحقق 2: التدقيق. حوّل الذوق إلى قائمة.

يقرأ الأمر audit في Hallmark صفحتك ويعيد قائمة بمشكلات محددة. لا يغير شيئا، بل يخبرك بها فقط.

القائمة هي ما تحتاج إليه الحلقة بالضبط، لأن كل عنصر فيها يصبح تعليمة تالية. ابنِ، ودقق، وأصلح ما في القائمة، ثم دقق مجددا حتى تفرغ القائمة.

لاحظ ما حدث للتو. عبارة «اجعله أقل عمومية» تعليمة لا يمكن أن تفشل، ولذلك لا يمكنها توجيه شيء. أما «أصلح هذه المشكلات السبع المحددة» فيمكن إتمامها والتحقق منها. والحيلة كلها هي تحويل النوع الأول من العبارات إلى النوع الثاني.

أداة التحقق 3: القاعدة التلقائية. اضمن الأمور التي يجب أن تكون صحيحة دائما.

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

ومن القواعد الأساسية لموقع ويب:

• لكل صورة وصف نصي مرفق، حتى يعرف مستخدمو قارئات الشاشة ما تعرضه
• لا يتجاوز أي ملف حد الحجم الذي وضعته
• يُبنى الموقع من دون أخطاء قبل حفظ أي شيء

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

هنا يخدع كثير من الناس أنفسهم، لذا اقرأ هذا الجزء بعناية. كتابة «يجب أن يكون لكل صورة وصف» في ملف القواعد هي تعليمة يتبعها الذكاء الاصطناعي غالبا. لكنها ليست قاعدة لا يستطيع مخالفتها. ولا يظهر الفرق إلا يوم ينساها.

التحقق الحقيقي برنامج صغير يجيب بنعم أو لا. احفظ هذا باسم check-site.mjs في مشروعك. إنه مكتوب باستخدام Node.js، المتوفر لديك أصلا لأن npx وVercel يحتاجان إليه، ولذلك يعمل بالطريقة نفسها على Windows وmacOS وLinux:

import { readdirSync, statSync, readFileSync } from "fs";
import { join, extname } from "path";

const MAX = 500 * 1024; // 500KB
const MEDIA = [
  ".png",
  ".jpg",
  ".jpeg",
  ".webp",
  ".avif",
  ".svg",
  ".gif",
  ".mp4",
  ".webm",
];
const problems = [];

function walk(dir) {
  // look in every folder, not just this one
  let out = [];
  for (const name of readdirSync(dir)) {
    if (name === "node_modules" || name.startsWith(".")) continue;
    const full = join(dir, name);
    out = statSync(full).isDirectory()
      ? out.concat(walk(full))
      : out.concat(full);
  }
  return out;
}
const files = ["site", "assets"].flatMap(walk); // only what actually publishes

for (const f of files.filter((f) => extname(f) === ".html")) {
  const html = readFileSync(f, "utf8");
  for (const tag of html.match(/<img\b[\s\S]*?>/gi) || []) {
    // even across line breaks
    if (!/\balt\s*=/i.test(tag)) problems.push(`MISSING DESCRIPTION  ${f}`);
  }
}
for (const f of files.filter((f) => MEDIA.includes(extname(f).toLowerCase()))) {
  if (statSync(f).size > MAX)
    problems.push(`TOO BIG  ${f}  ${Math.round(statSync(f).size / 1024)}KB`);
}

if (problems.length) {
  console.error(problems.join("\n"));
  process.exit(1);
}
console.log("All checks passed.");

شغّله باستخدام node check-site.mjs. إذا كان هناك خطأ، فسيطبع اسم الملف ويتوقف معلنا الفشل. وإذا كان كل شيء سليما، فسيخبرك بذلك.

جرّبه في الحالتين، لأن رؤية الفشل هي المقصود. شغّله على صفحة سليمة وسيقول All checks passed. ثم احذف إحدى سمات alt="..." وشغّله مجددا:

MISSING DESCRIPTION  site/index.html

ذلك الفشل هو ما يجعل الحلقة تعمل. يشغّل الذكاء الاصطناعي البرنامج، ويقرأ MISSING DESCRIPTION: services.html، ويصلح ذلك الملف تحديدا، ثم يشغّله مرة أخرى. لم يحتج أحد إلى ملاحظة المشكلة أو تذكرها.

لا تحتاج إلى فهم كل سطر في هذا البرنامج. تحتاج إلى فهم الفرق الذي يوضحه: ملف القواعد يطلب، والبرنامج يقرر.

أضف مزيدا من القواعد كلما اكتشفت مواضع الخطأ في عملك. قاعدة تضمن تطابق القائمة في كل صفحة. وقاعدة تضمن وجود رابط تواصل يعمل فعلا. وقاعدة تضمن ألا يظل العنوان «Home». تحتوي النسخة الموجودة في حزمة التنزيل على ست قواعد، وسبب وجود كل واحدة منها أن خطأ ما حدث مرة.

واعرف أيضا ما لا يستطيع هذا اكتشافه. في مشروع عائشة المكتمل، بلغ مجموع دفتر الحسابات في المشهد 3 مقدار PKR 217,950، بينما عرض المشهد 4 مقدار PKR 217,930. وحدث ذلك في موقع محاسِبة. لم يكتشفه التدقيق، ولا الذكاء الاصطناعي المراجع، ولا لقطات الشاشة، لأن جميعها كانت تتحقق مما إذا كانت الصفحة تبدو صحيحة، وكانت كذلك. اكتشفه شخص جمع ثلاثة أرقام.

لذلك أتمت كل ما يمكن التحقق منه، وأنفق الانتباه الذي توفره على الجزء الذي لا يمكن أتمتته. ليس ذلك حلا تعويضيا، بل هو جوهر العمل.

مجموعتان من القواعد تستحقان أن تكونا في أول عملية بناء لك.

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

المجموعة الثانية: الصفحة خفيفة بما يكفي للتحميل. يستخدم كثير من الزوار في معظم أنحاء العالم، وبالتأكيد في باكستان، هواتف متوسطة المواصفات ويدفعون ثمن بياناتهم بالميغابايت. لن يبهرهم مقطع فيديو جميل بحجم 40 ميغابايت، بل سيمنحهم سببا للمغادرة.

لذلك ضع حدودا وافرضها تلقائيا:

• ينبغي أن تُحمّل الشاشة الأولى في نطاق أقل من 1 ميغابايت تقريبا، قبل وصول أي فيديو
• لكل فيديو صورة ثابتة خلفه، حتى تبدو الصفحة جيدة قبل تحميل الفيديو
• لا تُحمّل الصور الموجودة أسفل الصفحة إلا عندما يمرر الزائر إليها
• يجب أن يكون أي فيديو يعمل تلقائيا صامتا، لأن الصوت المفاجئ يدفع الناس إلى إغلاق علامة التبويب

الموقع الذي يبدو مذهلا على اتصالك السريع ويفشل على هاتف زائرك يكون قد خذل معظم جمهوره. وعلى خلاف الذوق، يستطيع الحاسوب التحقق من كل واحد من هذه الأمور.

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

12. مراجعة التصميم عبر نماذج مختلفة

قدمت لك الدورة المكثفة للبرمجة هذه القاعدة: الذكاء الاصطناعي الذي صنع شيئا هو أسوأ من يراجعه.

يجعل التصميم هذه القاعدة أشد أهمية، ويوضح المفهوم 1 السبب: لا يستطيع الذكاء الاصطناعي رؤية عاداته. من الداخل، لا يبدو مظهره المفضل عادة على الإطلاق، بل يبدو له أنه «الشكل الطبيعي لمواقع الويب». أما ذكاء اصطناعي آخر تعلّم بطريقة مختلفة فيكتشف تلك العادات فورا.

إليك كيفية إعداد ذلك:

1. يبني ذكاء اصطناعي واحد. ينشئ Kimi K3 (أو Claude) الصفحة.
2. يراجعها ذكاء اصطناعي من شركة مختلفة. لا تستخدم الذكاء الاصطناعي نفسه مرتين، ولا نموذجا شقيقا من الشركة نفسها، بل نموذجا مختلفا فعلا. أعط المراجع ثلاثة أشياء: الموجز الأصلي، وdesign.md، ولقطات الشاشة. لقطات الشاشة مهمة، لأن مراجعة التصميم التي تقرأ الشفرة فقط مجرد استعراض. ثم اطرح أسئلة صارمة مثل: قارن هذه الصفحة بالموجز، وحدد ثلاثة مواضع تبدو فيها من صنع الذكاء الاصطناعي واشرح السبب، وتحقق من أن القصة ما زالت تعمل في نسخة الهاتف، وتحقق من مطابقة الألوان والخطوط لما في design.md تماما، واكتب النتائج في ملف، ولا تغير شيئا.
3. يقرأ النموذج الباني النتائج ويصلحها. وإذا اختلف نموذجا الذكاء الاصطناعي، فأنت تقرر.

لماذا الإصرار على شركة مختلفة؟ بسبب الاختبار المذكور في المفهوم 1: أظهرت صفحات Kimi K3 عادات تشبه عادات ذكاء اصطناعي آخر، ويرجح أنه تعلّمها منه. يمكن لنموذجين أن يتشاركا النقطة العمياء نفسها من دون أن يكونا من الشركة نفسها. والمراجع القادم من جهة أخرى هو أقل الطرق كلفة لاكتشاف ما لا يستطيع أي نموذج بانٍ رؤيته في نفسه.

وهناك فائدة إضافية: لأن المراجعة محفوظة في ملف، يمكنك عرضها على عميلك. من المفيد جدا أن تستطيع القول: «اكتشفت مراجعة مستقلة هذه المشكلات الخمس، وقد أُصلحت كلها».

---

الجزء 5: النشر

13. النشر: من مجلد إلى عنوان URL

موقع الويب الموجود في مجلد على حاسوبك مجرد تدريب. يبدأ العرض الحقيقي عندما يستطيع شخص في مدينة أخرى فتحه على هاتفه.

كان نشر موقع على الإنترنت يتطلب دورة كاملة في حد ذاته: خوادم، وعناوين، وشهادات أمان. واليوم يستطيع ذكاؤك الاصطناعي فعل ذلك نيابة عنك.

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

Connect to Vercel via the CLI and deploy this project.

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

هناك أمران مهمان، والفرق بينهما هو الفرق بين التدريب والعرض الحقيقي:

• ينشئ vercel معاينة: عنوان ويب مؤقتا، مثاليا لإرساله إلى العميل مع عبارة «ألق نظرة على هذا».
• يضع vercel --prod الموقع على العنوان الحقيقي الذي يخص النشاط التجاري.

في كل مرة تجري تغييرات، تحصل على معاينة جديدة. وهكذا يصبح العمل مع العميل إيقاعا مريحا: ابنِ، وأرسل المعاينة، وتلق الملاحظات، وابنِ مجددا، ثم أرسل معاينة جديدة. ويظل الموقع الحقيقي بلا تغيير حتى يوافق العميل.

تكفيك ثلاث عادات:

• المعاينات لتغيير الأشياء، والعنوان الحقيقي للأشياء المكتملة. لا تعرض أبدا عملا قيد التنفيذ من العنوان الحقيقي، ولا تترك العميل ينظر إلى معاينة قديمة.
• أجر عمليات التحقق النهائية على الصفحة المنشورة، لا على حاسوبك. تجد الخطوط ومقاطع الفيديو والروابط طرقا جديدة للفشل بعد نشر الموقع. وجّه أداة التقاط الصور في المفهوم 11 إلى عنوان المعاينة المنشورة، وبكلا العرضين، قبل أن ينظر إليها أي شخص.
• تؤدي خدمات أخرى المهمة نفسها. تعمل Netlify وCloudflare Pages وGitHub Pages بالطريقة نفسها. المهارة التي تتعلمها هي جعل ذكائك الاصطناعي ينشر نيابة عنك، أما الشركة فمجرد تفضيل.

عنوان الويب الخاص بك هو خط النهاية الحقيقي.

لن يرى أي عميل أن الموقع مكتمل ما دام عنوانه ينتهي بالامتداد .vercel.app، وهو محق. فالعنوان جزء من العلامة التجارية.

الحصول على عنوان مهمة قصيرة:

1. اشتر العنوان من أي بائع. في باكستان، تحصل على عنوان .pk من PKNIC، وعلى .com من أي بائع دولي.
2. أضفه في إعدادات مشروعك على Vercel.
3. يعرض لك Vercel قيمتين أو ثلاثا لنسخها إلى صفحة إعدادات البائع. انسخها، ويمكن لذكائك الاصطناعي إرشادك عبر الشاشات.

قد يستغرق بدء عمله من بضع دقائق إلى بضع ساعات.

ترتبط بذلك عادتان مهنيتان. اشتر العنوان باسم العميل، في حساب يتحكم فيه. المستقل الذي يملك عنوان ويب عميله يكون قد احتجز أصلا يخص العميل من غير قصد، حتى مع أفضل النيات. كما أن القفل الذي يجعل الموقع آمنا يُضاف تلقائيا هنا، فإذا حذر المتصفح من الأمان فالمشكلة في إعدادات العنوان، لا في الموقع.

تأكد من أن الناس يستطيعون العثور عليه. الموقع الذي لا يعثر عليه أحد يفشل بصمت. تغطي مراجعة قصيرة واحدة الأساسيات، وتظل فائدتها مستمرة:

• عنوان حقيقي للصفحة. «عائشة رحمن، محاسبة قانونية، لاهور»، لا «Home». فهذا ما يظهر في نتائج البحث وعلامات تبويب المتصفح.
• جملة واحدة تصف الصفحة، مكتوبة لشخص يتصفح قائمة نتائج البحث.
• صورة للمشاركة. تتجاهلها معظم الدروس، لكنها الأهم هنا. عندما يشارك شخص رابطك على WhatsApp، تظهر بطاقة صغيرة فيها صورة وعنوان. يُفتح الرابط الذي يتحول إلى بطاقة جذابة، على خلاف رابط رمادي مجرد. هذه الصورة مجرد مهمة أخرى لمسار إنتاج الوسائط: صدّر أعلى صفحتك بمقاس 1200 في 630 بكسل واحفظه باسم og.png.
• قائمة بصفحاتك لمحركات البحث، ينشئها ذكاؤك الاصطناعي في ثوان، إلى جانب تسجيل الموقع لدى Google من حساب العميل نفسه.

اختبر بطاقة المشاركة بالطريقة الصادقة: الصق رابط المعاينة في محادثة WhatsApp وانظر إلى ما يظهر.

14. سير العمل مع العميل

حتى الآن، كنت تبني لنفسك. وحين يدفع لك شخص مقابل العمل، يحتاج العمل نفسه إلى مجموعة من العادات المهنية المحيطة به.

يعرض هذا المفهوم تلك العادات من خلال المشروع الذي نبنيه في الجزء 6: عائشة رحمن، محاسبة في لاهور، تطلق موقعا لمكتبها.

ست خطوات:

1. اتفق كتابيا قبل أن تبني. تكفي صفحة واحدة: لمن الموقع، وما الإجراء الوحيد الذي ينبغي للزائر اتخاذه، ومشاهد القصة التي اتفقتما عليها، وما الذي يشمله «الاكتمال»: عدد الصفحات، وهل تشمل نسخة الهاتف، وأين سيُنشر الموقع، ومن يوفر الصور. بعد ستة أسابيع، عندما يتذكر أحدكما الاتفاق بصورة مختلفة، تحسم هذه الصفحة الأمر. الذاكرة ليست عقدا.
2. اكتشف العلامة التجارية، ثم أكدها. استخدم المفهوم 7، وتذكر قاعدته: ما تجده على الإنترنت مسودة، وما يرسله العميل نهائي. يمنحك موقع عائشة القديم ألوانها، لكن المكالمة الهاتفية تكشف أنها بصدد تغيير شعارها. وفرت عليك تلك المكالمة بناء النسخة الأولى كلها بطريقة خاطئة.
3. بع القصة، لا صورة للصفحة المكتملة. قبل بناء أي شيء، أرسل المشاهد الستة، في سطر لكل منها. العميل الذي يوافق على القصة يعطيك ملاحظات عن الجوهر. أما العميل الذي يرى تصميما مكتملا أولا فيعطيك ملاحظات عن درجة الأزرق الدقيقة. ترتيب عرض الأشياء من أكثر أدواتك التي يُستهان بقيمتها.
4. اطلب منهم المراجعة على هواتفهم. لا تستخدم لقطات شاشة ملصقة في محادثة. أرسل رابط المعاينة وقل: «افتح هذا على هاتفك». فهذا هو الجهاز الذي يستخدمه عملاؤهم، وهي أيضا اللحظة التي يثبت فيها كل عملك على نسخة الهاتف قيمته بهدوء.
5. سعّر العمل باستخدام الصناديق الأربعة. النموذج: يكلف القليل جدا، لذا استوعب تكلفته بدلا من إدراج مبالغ ضئيلة في الفاتورة. الذوق: هذا وقتك، وهو بندك الرئيس. الوسائط: هنا تجري المحادثة الصريحة: «الصور الجاهزة مشمولة، ويكلف فيديو مخصص مثل هذا المثال مبلغا إضافيا قدره X». ولأنك تستطيع التحقق من الأسعار قبل التوليد، يصبح X رقما تقوله بثقة بدلا من التخمين. الاستضافة: مجانية الآن، وتنتقل إلى حساب العميل وعنوان الويب الخاص به عند التسليم.
6. سلّم العمل على نحو صحيح. أعطهم كل شيء: الملفات، والموقع المنشور تحت حساب يتحكمون فيه، وعنوان الويب باسمهم، وdesign.md، وإحصاءات بسيطة عن الزوار إذا أرادوها.

أضف شيئا آخر: صفحة واحدة تشرح كيفية مطالبة الذكاء الاصطناعي بإجراء تغييرات صغيرة على الموقع.

ذلك العنصر الأخير جديد في هذا العصر، ويتذكره العملاء. أنت لا تسلّم موقعا فحسب، بل تسلّم القدرة على العناية به.

الخطوة التي تتراكم فائدتها: بعد عميلك الأول، احفظ العملية كلها في ملف مهارة: قالب الاتفاق، وكيفية اكتشاف العلامة التجارية، وتنسيق القصة، وأسئلة المراجعة، وخطوات النشر، وقائمة التسليم. عندئذ يتطلب عميلك الثاني نصف جهد الأول، وبحلول العميل الخامس ينفذ الملف معظم العمل.

هذه هي الفكرة المركزية لهذا الكتاب بحجم عمل مستقل واحد: الشيء الذي يدوم ليس موقع الويب قط، بل النظام الذي يصنع مواقع الويب.

15. الانضباط في التكاليف

علّمتك الدورة المكثفة للبرمجة كيف تخفض تكلفة محادثات الذكاء الاصطناعي. تضيف مواقع الويب تكلفتين جديدتين: تُسعّر الصور لكل صورة، ويغير استخدام ذكاء اصطناعي من شركة مختلفة الخصومات التي تحصل عليها. تعالج ثلاث عادات ذلك.

سعّر الصور قبل إنشائها.

إليك المفاجأة: عند البناء باستخدام Kimi K3، تكلف كل شفرة موقع كامل أقل من كوب شاي. وقد يكلف فيديو مخصص واحد أكثر من كل شيء آخر مجتمعا. الصور هي بند الميزانية، لا الذكاء الاصطناعي.

لحسن الحظ، تستطيع التحقق من الأسعار قبل الإنفاق. يخبرك الأمر higgsfield generate cost بتكلفة الفيديو من دون إنشائه. وهكذا تصبح لوحة قصتك عرض سعر: ستة مشاهد، وستة أسعار، ومجموع واحد يُحدد قبل أن تنفق شيئا.

ضع ذلك في ملف القواعد حتى لا تنساه أبدا:

قبل إنشاء أي صورة أو فيديو، قدّر تكلفة كل لقطة مخطط لها وأخبرني بالمجموع.

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

يعيد استخدام ذكاء اصطناعي من شركة أخرى تكاليف المحادثة إلى الصورة. يتقاضى Kimi K3 عن النص الذي سبق أن رآه أقل بنحو عشر مرات مما يتقاضاه عن النص الذي يقرأه أول مرة. هذا الخصم هو سبب انخفاض تكلفته، ولا ينطبق إلا ما دامت بداية محادثتك بلا تغيير. إذا أعدت بدء المحادثة أو عدّلت شيئا قرب بدايتها، فستعود إلى دفع السعر الكامل لكل شيء.

تنتج عن ذلك عادتان. اضبط CLAUDE_CODE_AUTO_COMPACT_WINDOW كما أوضح المفهوم 4، حتى تعرف عملية الترتيب التلقائي حجم ذاكرة هذا النموذج فعلا. واستمر في تطبيق ما تعلمته: راقب رقم الاستخدام، ورتب عند نقاط التوقف الطبيعية، واحفظ الحقائق المهمة في ملفات أولا، لأن الترتيب لا يزيل الملفات.

اعرف التكلفة الفعلية لمشروع واحد.

بعد أول موقع ويب مكتمل، دوّن الأرقام الحقيقية: ما أنفقته على الذكاء الاصطناعي، وما أنفقته على الصور، وعدد الساعات التي عملتها.

يكلف موقع عائشة في الجزء 6 بضعة دولارات من وقت الذكاء الاصطناعي، إلى جانب ميزانية صور تكون إما صفرا، أو أقل من دولار، أو سعر فيديو تحققت منه مسبقا.

يغير ذلك الرقم كل شيء. فهو يحول سؤال «هل أستطيع تحمل تكلفة التدريب على هذا؟» إلى «نعم، كل أسبوع». وعندما يسأل عميل عن تكلفة موقع ويب، ستذكر رقما بدلا من التخمين.

---

الجزء 6: مثال عملي كامل، مرتين

الآن نجمع كل شيء. سننشئ موقع ويب حقيقيا واحدا، من مجلد فارغ إلى عنوان ويب منشور، مرة في Claude Code ومرة في OpenCode. وسنشير إلى مواضع الاختلاف بين الأداتين.

نزّل المشروع المكتمل

كل ما يرد أدناه موجود في ملفات حقيقية، لا في وصف لملفات: موقع الويب العامل وصفحة 404 المصممة له، وبطاقة المشاركة، والصورتان، ومحور القصة المكون من ستة مشاهد، وملف design.md الذي يحتوي قواعد علامتها التجارية، وملف القواعد، وتدقيق Hallmark (سبع نتائج ثم صفر)، والمراجعة المستقلة من ذكاء اصطناعي لشركة مختلفة، وسجل التكلفة، وأداة التحقق، وبرنامج لقطات الشاشة، ولقطات للصفحة كاملة بكلا العرضين مأخوذة من الصفحة الفعلية.

نزّل مشروع عائشة · فك الضغط، ثم شغّل npm run check. احذف إحدى سمات alt="..." وشغّله مجددا لترى فشله.

اقرأ docs/defect-log.md أولا. يسرد العيوب الثمانية التي نُشر بها هذا المشروع في مرحلة ما، ويحدد ما اكتشف كل عيب. أما أخطرها، وهو دفتر حسابات لم تتطابق أرقامه، فلم يكتشفه أي تحقق تلقائي، بل اكتشفه شخص أجرى عملية حسابية. وهذه هي النسبة التي تدافع عنها الدورة كلها.

عملية البناء

العميلة: عائشة رحمن، محاسبة في لاهور. تعيد إطلاق مكتبها باستخدام أدوات الذكاء الاصطناعي، وموقعها الحالي صفحة قديمة واحدة تحمل شعارا قديما.

تريد من الزوار، وهم أصحاب المشروعات الصغيرة في مدينتها، أن يشعروا بأمرين أثناء التمرير: هذه المحاسبة تفهم فوضاي، و_لقد حلت هذه المشكلة من قبل_.

محور القصة المتفق عليه (المفهوم 8، صيغ مع عائشة، ستة مشاهد):

1. صندوق الأحذية: إيصالات، السر الذي يشعر الجميع بالذنب تجاهه، مصور بدفء ولمسة إنسانية
2. الفرز: تتحول الفوضى إلى فئات
3. دفتر الحسابات الذي يطابق نفسه: اللحظة الجريئة، سطر متحرك يتوازن أثناء التمرير
4. الوضوح الشهري: كشف مرتب واحد، ورقم هادئ واحد
5. الشخص: عائشة، ومكتبها، ومؤهلاتها، وضوء لاهور الحقيقي
6. احجز استشارة: إجراء واحد، وزر واحد

ما ستسلّمه:

• نسخة للحاسوب ونسخة للهاتف من القصة نفسها
• استخدام دقيق لألوان علامتها التجارية وخطوطها
• ربط المشهد 6 برابط WhatsApp حقيقي، مع رسالة مكتوبة مسبقا
• إكمال أساسيات إمكانية العثور على الموقع: عنوان الصفحة، والوصف، وبطاقة مشاركة تبدو جيدة عندما ترسل الرابط عبر WhatsApp
• رابط معاينة للحصول على موافقتها، ثم عنوان ويب خاص بها ينتهي بالامتداد .pk عند التسليم

الصور: المسار 1 للمشاهد 1 و2 و4 و5، أي صور فوتوغرافية حقيقية. تأتي صور المشاهد 1 و2 و4 من مكتبة مجانية. أما المشهد 5 فيضم صورتين ملتقطتين بهاتف في مكتبها الفعلي. ويُبنى التحريك الذي يوازن الحسابات في المشهد 3 بالشفرة، لا بالفيديو. ويُعرض فيديو افتتاحي مخصص من المسار 4 كإضافة اختيارية، بعد التحقق من سعره مسبقا، ويُترك القرار لها. هذا هو درس المفهوم 14 مطبقا: ميزانية الصور محادثة مع العميل، وليست قرارا تتخذه وحدك.

الخطوات الثماني

الخطوة 1: ملف القواعد لمشروع ويب

في Claude Code: شغّل /init، ثم اختصر الملف الناتج إلى ما لا يستطيع النموذج استنتاجه بالنظر:

# ayesha-practice-site

## Layout

- `site/`: the website source. Single HTML file with embedded CSS/JS until told otherwise.
- `assets/`: all media, named by story beat (e.g. `03-ledger-*`), optimized before use.
- `design.md`: brand constraints and design direction. Read before any design work.
- `docs/plans/story-spine.md`: the approved six-beat spine. The build implements this.

## Critical rules

- Brand constraints in design.md are a spec, not a mood. Never substitute colors or fonts.
- Every image ships with an alt attribute. No asset over 500KB.
- After significant changes, screenshot at 1440px and 390px and review both before reporting done.
- The story spine's beats may not be reordered or dropped without asking.

سبب أهمية ذلك: تعني قاعدة لقطة الشاشة أن الذكاء الاصطناعي يتحقق من عمله في كل مرة، بدلا من فعل ذلك حين تتذكر أن تطلب فقط. وتعني قاعدة design.md أن ألوان العلامة التجارية ليست شيئا يستطيع الذكاء الاصطناعي «تحسينه» بصمت.

في OpenCode: محتوى مطابق في AGENTS.md.

الخطوة 2: تثبيت طبقة الذوق

بالطريقة نفسها في الأداتين:

npx skills add Nutlope/hallmark

في Claude Code، ثبّت أيضا إضافة frontend-design من Anthropic عبر نظام الإضافات. وعندئذ تساعد تلقائيا في أعمال التصميم. أما Hallmark فتطلبه بالاسم عندما تريد المعالجة الكاملة. وتعمل الأداتان معا.

إذا كنت تستخدم Kimi K3، فتذكر تحذير المفهوم 5: نماذج الذكاء الاصطناعي التابعة لشركات أخرى أقل موثوقية في اكتشاف المهارات تلقائيا. لذلك اذكر Hallmark بالاسم في كل خطوة تصميم بدلا من الاعتماد على الأمل.

الخطوة 3: استخراج العلامة التجارية ودراسة الاتجاه

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

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

ثم طبّق المفهوم 6: شغّل study في Hallmark على موقعين يعجبانها. وباحتساب علامتها التجارية يصبح لديك ثلاثة مراجع، وهو العدد الذي يجبرك على الدمج بدلا من النسخ.

يوضع كل شيء في design.md، مع تمييز علامتها التجارية بوضوح كقواعد لا اقتراحات.

متطابق في الأداتين.

الخطوة 4: وضع الخطة، من المحور إلى البنية

انتقل إلى وضع الخطة، حيث يستطيع الذكاء الاصطناعي النظر من دون تغيير أي شيء (Shift+Tab مرتين في Claude Code، وTab في OpenCode). صف المهمة: المشاهد الستة، وdesign.md، وأن الهواتف هي الأهم، وأي لحظة ستكون الجريئة.

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

لذلك تعترض:

التمرير هو القصة. مشهد واحد لكل شاشة. يحصل تحريك الموازنة على شاشة كاملة. لا أريد صفوفا من صناديق الميزات في أي مكان.

يحدّث الخطة. والآن توافق عليها وتحفظها في ملف.

الخطوة 5: البناء باستخدام نموذج التصميم

في Claude Code: تشير إعدادات هذا المجلد إلى Kimi K3 من المفهوم 4. تحقق باستخدام /status، لا /model. ثم اخرج من وضع الخطة ودعه يبني، مع ذكر Hallmark أثناء العمل. راقب الاستخدام من حين إلى آخر: يكتب K3 بإسهاب، وهذه أطول خطوة في البناء.

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

في OpenCode: اكتب /models، واختر Kimi K3 عبر OpenRouter، وابدأ البناء. اذكر Hallmark بالطريقة نفسها، وراقب الاستخدام كذلك.

يفكر Kimi K3 بعمق، لذلك تكون العملية أبطأ وأكثر إسهابا من جلسة Claude. لكن الناتج بعيد بوضوح عن المعتاد. يرسم سطر الحسابات نفسه أثناء التمرير، ولا يوجد صف واحد من صناديق الميزات في أي مكان.

الخطوة 6: جولة الوسائط

باتباع لوحة القصة، يبحث ذكاء اصطناعي مساعد في مكتبات الصور المجانية عن صور للمشاهد 1 و2 و4، ويلتزم بنوع واحد من الإضاءة ومزاج واحد. (ينفذ مساعد ذلك في محادثة منفصلة، لأن أربعين صورة مصغرة ستملأ محادثتك الرئيسة.) توضع صورتا المكتب الملتقطتان بهاتف في assets/ للمشهد 5. ويُسمى كل ملف باسم مشهده ويظل دون حد الحجم.

لو احتاج أحد المشاهد إلى صورة مصطنعة، لأنشأتها في المسار 3 مقابل بضعة سنتات، أو مجانا على chatgpt.com.

ولو وافقت عائشة على الفيديو، فهذا هو موضع إنشائه. اعثر على اللقطة عبر الحديث إلى Gemini Omni Flash. وثبّت النسخة النهائية على Seedance بدقة 720p لتراجعها. وبعد موافقتها، ادفع مقابل الجودة الكاملة بالشكلين العريض والطويل وبالسعر الذي قدمته مسبقا.

متطابق في الأداتين.

الخطوة 7: التحقق، لقطات الشاشة والتدقيق والمراجعة عبر النماذج

أدوات التحقق الثلاث من المفهوم 11، بالترتيب.

كانت قاعدة لقطة الشاشة تعمل بهدوء طوال الوقت. شغّل الآن audit في Hallmark. يجد التشغيل الأول سبع مشكلات، بينها شيء لا يعمل إلا عند تمرير مؤشر الفأرة فوقه، ولذلك يفشل تماما على الهاتف. أصلح القائمة وشغّل التدقيق مجددا حتى تفرغ.

ثم طبّق المفهوم 12: أعط ذكاء اصطناعيا من شركة مختلفة الموجز وdesign.md ولقطات الشاشة. هنا يراجع Claude عمل Kimi K3. يكتب النتائج في ملف ولا يغير شيئا.

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

يصلح النموذج الباني الأمرين. لم تحتج هذه المرة إلى حسم أي خلاف، لكنك تقرأ كل شيء لأن الحكم النهائي لا يزال لك.

في Claude Code: يعمل المراجع في شجرة عمل ثانية كما أوضحت الدورة المكثفة للبرمجة. في OpenCode: يكون المراجع مزودا ثانيا متصلا في المشروع نفسه.

الخطوة 8: النشر وحفظ العملية

بُنيت نسخة الهاتف في الخطوة 5، مباشرة بعد نسخة الحاسوب وفي الجلسة نفسها، كما يتطلب المفهوم 10 تماما. ولهذا غطى التحقق في الخطوة 7 كلا العرضين.

المتبقي هنا هو النشر. والآن ينجز عمل قابلية العثور على الموقع: العنوان، والوصف، وقائمة الصفحات، وبطاقة المشاركة. اختبر البطاقة بالطريقة الصادقة: الصق رابط المعاينة في محادثة WhatsApp وانظر إلى ما يظهر.

ثم شغّل vercel للحصول على عنوان معاينة، والتقط الصور النهائية للصفحة المنشورة بكلا العرضين، وأرسل الرابط إلى عائشة مع ثلاث كلمات: «افتحيه على هاتفك».

بعد موافقتها: شغّل vercel --prod، واربط عنوانها الخاص الذي ينتهي بالامتداد .pk من حسابها، وسجل الموقع لدى Google من حسابها، وسلّم الحزمة الواردة في المفهوم 14.

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

يدير قريب عائشة شركة لتصدير المنسوجات. يبدأ موقعك الثاني غدا، وسيستغرق نصف الوقت.

ما الذي حدث للتو؟

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

والآن احص ما كان جديدا هنا: ملف ذوق، وطريقة للحصول على الصور، ولقطة شاشة تُستخدم كاختبار، وعنوان ويب منشور بوصفه المنتج المكتمل.

هذه النسبة هي الفكرة كلها. لم تصبح مصمما، بل وجّهت آلة تحقق إلى نوع جديد من العمل، وتولت الآلة، مع ملف واحد من الذوق الجيد، بقية المهمة.

وكانت الاختلافات بين الأداتين ضئيلة مجددا: إعداد مختلف للوصول إلى Kimi K3، ومفتاح مختلف لدخول وضع الخطة، وموضع مختلف يعمل فيه المراجع. أما التفكير فكان متطابقا.

التفكير هو الأداة الحقيقية، والإعدادات مجرد تفاصيل جانبية.

---

كيف تتقن هذا فعلا؟

تنطبق قاعدة الدورة المكثفة للبرمجة نفسها: قراءة هذه الصفحة تحقق القليل، والبناء يحقق كل شيء تقريبا.

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

المشكلة التي تواجهها	ما ينبغي إصلاحه
«كل موقع أنشئه يبدو مثل الآخر»	لم تحمّل ملف ذوق، أو لا تذكره بالاسم (المفهوم 5)
«تجاهل الذكاء الاصطناعي ألوان العلامة التجارية»	لا يوجد design.md، أو لم تُحدد الألوان بوضوح كقواعد (المفهوم 7)
«يبدو رائعا على حاسوبي ومعطلا على هاتفي»	بنيت نسخة واحدة وضغطتها. صوّر القصة من جديد (المفهوم 10)
«الصفحة جميلة، لكن لا أحد يعرف ما ينبغي فعله فيها»	لا توجد قصة، أو تتصارع فكرتان على شاشة واحدة (المفهوم 8)
«أواصل قول: اجعله أقل عمومية، ولا يتغير شيء»	لا يمكن لهذه التعليمة أن تفشل، ولذلك لا تغير شيئا. شغّل التدقيق وأصلح القائمة بدلا منها (المفهوم 11)
«فاجأتني فاتورة الصور»	بدأت إنشاء الصور قبل التخطيط لها (المفهومان 9 و15)
«فاتتني أنا وذكائي الاصطناعي غلطة واضحة»	تحتاج إلى ذكاء اصطناعي من شركة مختلفة لينظر إليه (المفهوم 12)
«يصاب Kimi K3 بالارتباك وترتفع تكلفته في وقت متأخر من اليوم»	لا يرتب المحادثة في ذلك المسار سواك (المفهومان 4 و15)
«الموقع منشور، لكن الزر لا يفعل شيئا»	لم يُربط المشهد الأخير بأي شيء (المفهومان 8 و11)
«إنه جميل على حاسوبي، لكنه ثقيل جدا على أجهزة زواري»	ضع حدا للحجم، وأضف صورة ثابتة خلف مقاطع الفيديو، وحمّل الصور لاحقا (المفهوم 11)
«تبدو صفحاتي الخمس كأنها خمسة مواقع مختلفة»	يجب أن يحكمها كلها ملف design.md واحد (قسم المواقع متعددة الصفحات)

موقع ويب واحد أسبوعيا أفضل من ثمانية مفاهيم يوميا.

اختر شيئا حقيقيا. سيرتك الذاتية في صفحة. متجر صديق. مشروع عائلتك. نادي مدرستك. نفّذ الخطوات الثماني كلها، ودوّن ما كلفك ذلك.

بحلول الموقع الثالث، تتوقف الخطوات عن الشعور بأنها خطوات، وتصبح ببساطة طريقتك في العمل.

موضعك على السلم: المراحل الثماني لإتقان هذا (انقر للفتح)

تنمو المهارة هنا على مراحل. ومعرفة مرحلتك تخبرك بما ينبغي التدرب عليه تاليا.

المرحلة	كيف تبدو؟	أين تُدرّس؟
0. العقلية	تفهم أن للذكاء الاصطناعي عادات تصميم، وأنك تتحقق من التصميم بالنظر، وأن الذوق يمكن أن يعيش في ملف.	الأفكار الثلاث في بداية الدورة
1. أول موقع على الإنترنت	صفحة حقيقية واحدة، وصور مجانية، ومنشورة على عنوان فتحه شخص آخر على هاتفه.	المفاهيم 2 و9 و10 و13
2. تحميل الذوق	ثبّت Hallmark، وقرأت قائمة بمشكلات صفحتك وأصلحتها كلها.	المفهومان 5 و11
3. القصة أولا، في كل مرة	لا تبدأ البناء أبدا قبل كتابة القصة والاتفاق عليها، بما في ذلك الإجراء النهائي.	المفهوم 8
4. التحقق يعمل تلقائيا	تعمل أدوات التحقق الثلاث في كل عملية بناء: لقطات الشاشة، والتدقيق، والقواعد التلقائية.	المفهوم 11
5. البناء للآخرين	تكتشف علامة تجارية وتؤكدها، وتحصل على رأي ثان، وتراجع على هاتف العميل، وتسعّر بالصناديق الأربعة.	المفاهيم 7 و12 و14
6. عمليتك ملف	حُفظت العملية كلها كمهارة، ويحتاج العميل الثاني فعلا إلى نصف الوقت.	المفهوم 14 والجزء 6، الخطوة 8
7. عمليتك نشاط تجاري	يأتي العملاء، ويُسعّر العمل بالصناديق الأربعة، وتُبنى مواقع متعددة الصفحات من نظام تصميم واحد، وتصل الإحالات.	المفهومان 2 و14، إضافة إلى قسم المواقع متعددة الصفحات

يتعثر معظم الناس بين المرحلتين 1 و2. ينشرون صفحات تعمل ويجمعون عبارات ذكية لكتابتها، بدلا من تحميل ملف ذوق مرة واحدة وتركه يؤدي العمل دائما.

إذا صعدت مرحلة واحدة فقط من موضعك اليوم، فقد حققت هذه الدورة قيمتها.

---

مرجع سريع

المفاهيم الخمسة عشر في سطر لكل منها

1. رداءة الذكاء الاصطناعي مسألة رياضيات، لا كسل. لكل ذكاء اصطناعي مظهر مفضل، لأنه يجيب بأكثر ما تعلّمه شيوعا. حتى Anthropic كتبت ملفا يطلب من Claude تجنب عاداته.
2. تبني أربعة أجزاء كل موقع. النموذج، والذوق، والوسائط، والاستضافة. يندرج كل قرار في صندوق، وتستخدم الصناديق أيضا لتسعير العمل.
3. أفضل ذكاء اصطناعي للتصميم ليس الأفضل إجمالا. إنهما منافستان مختلفتان. تحقق من موقع مقارنة عمياء، ثم أرسل عمل التصميم إلى المتصدر.
4. يمكن تشغيل أي ذكاء اصطناعي داخل أداتك. غيّر العنوان في إعدادات Claude Code، أو اختر من القائمة في OpenCode. تحقق باستخدام /status، وليس /model أبدا. أفضل ذكاء اصطناعي تاج مستأجر، أما أداتك وملفاتك فهما ما تملكه.
5. Hallmark هو الذوق في ملف. أربعة أوامر (build وaudit وredesign وstudy)، و58 تحققا، وشكل صفحة مختلف في كل مرة. وهو مجاني للجميع.
6. تعلّم من المواقع ولا تنسخها. يكتب study ما يجعل الموقع ناجحا في design.md. استخدم ثلاثة مراجع، لأن مرجعا واحدا يغريك بنسخه.
7. أتقن العلامة التجارية أولا. اطلب الألوان والخطوط الدقيقة مع دليل مصدر كل منها، ثم أكدها بملفات العميل الحقيقية. ألوان العلامة التجارية قواعد، لا اقتراحات.
8. قصة واحدة وتمرير واحد. اكتب القصة قبل البناء، وفكرة واحدة لكل شاشة، وأظهر الشيء الحقيقي في الأعلى، وكن جريئا في موضع واحد بالضبط. ويجب أن يعمل المشهد الأخير فعلا: رابط WhatsApp، أو نموذج، أو برنامج صغير. لا تستخدم زرا معطلا قط.
9. أربع طرق للحصول على الصور. صور فوتوغرافية حقيقية (مجانية)، وصور ذكاء اصطناعي مجانية (جودة يدوية أو راحة تلقائية، لا الاثنان معا)، وصور ذكاء اصطناعي مقابل سنتات (كلاهما)، وفيديو مقابل تكلفة حقيقية. قصتك هي قائمة اللقطات.
10. الهاتف هو الشاشة الرئيسة. القصة نفسها مصورة من جديد لشكل طويل. قرر عن قصد أين يتغير التخطيط.
11. ثلاث أدوات تحقق تجعل التصميم قابلا للاختبار. تمنح لقطات الشاشة الذكاء الاصطناعي عينين، ويحول التدقيق الذوق إلى قائمة، وتضمن القواعد التلقائية الأساسيات: تباين مقروء، واستخدام لوحة المفاتيح، وصفحة خفيفة بما يكفي للتحميل عبر بيانات الهاتف.
12. احصل على رأي ثان من ذكاء اصطناعي لشركة مختلفة. لا يستطيع الذكاء الاصطناعي رؤية عاداته. أرسل الموجز، وملف التصميم، ولقطات الشاشة. وتوضع النتائج في ملف.
13. النشر أمران. ينشئ vercel معاينة للمشاركة، ويجعلها vercel --prod حقيقية. ثم يأتي عنوان الويب الخاص بالعميل وأساسيات إمكانية العثور: العنوان، والوصف، والبطاقة التي تظهر عند مشاركة الرابط. تحقق من الصفحة المنشورة، لا من حاسوبك.
14. للعمل مع العملاء ست خطوات. اتفق كتابيا، واكتشف العلامة التجارية وأكدها، وبع القصة قبل الصور، وراجع على هاتف العميل، وسعّر بالصناديق الأربعة، وسلّم القدرة على العناية بالموقع.
15. اعرف تكلفة الأشياء. سعّر الصور قبل إنشائها، وحافظ على ترتيب المحادثات، واعرف تكلفة مشروع كامل عليك.

مرجع سريع للإعداد (انقر للفتح)

تريد أن...	Claude Code	OpenCode
تشغّل Kimi K3	كتلة بيئة Moonshot في .claude/settings.json، ثم التحقق باستخدام /status	/connect openrouter → /models → K3
تثبت طبقة الذوق	npx skills add Nutlope/hallmark، إضافة إلى مكوّن frontend-design من Anthropic	npx skills add Nutlope/hallmark
تولّد الوسائط في الجلسة	Higgsfield CLI/MCP، أو المساران 1 و2 عبر الجلب وواجهات API	نفسه
تلتقط صورة للعرض	اطلب منه إعداد لقطات شاشة Playwright	نفسه
تنشر	«Connect to Vercel via the CLI and deploy»	نفسه
تراقب السياق على K3	اضبط CLAUDE_CODE_AUTO_COMPACT_WINDOW على 1048576، ثم راقبه بنفسك	قراءة الرموز في واجهة TUI

عملية البناء في شجرة قرار واحدة

New page or site?
    → Spine first (plan mode) → Hallmark default → media per beat → verify

Page exists but looks generated?
    → Hallmark audit → fix the list → if the skeleton itself is slop, redesign

Client has a brand?
    → Extract with quoted sources → confirm real assets → design.md as constraints

Admire a site?
    → Hallmark study → design.md as direction (never a clone)

Site outgrown one page?
    → A spine per page, one design.md for all → files as routes →
      framework with layouts only when repetition earns it

Before anyone sees it?
    → Screenshot both widths on the deployed URL → cross-family review → then the human

---

وسيلة دراسة بالبطاقات التعليمية

---

اختبار: 42 سؤالا حول المفاهيم الخمسة عشر

اختبر ما تعلمته. تعرض كل جلسة مجموعة جديدة من 15 سؤالا.

Checking access...