أسهل طريقة تقول بيها «عايز حاجة شبه كده» إنك توريها، مش توصفها. هتصوّر صفحة عاجبك، وClaude يفهم ترتيبها ومسافاتها، ويعمل صفحة جديدة على نفس الفكرة بمحتواك انت.
نصيحةخد الإلهام: الترتيب والمسافات والإحساس العام. وسيب اللوجو والكلام والصور واسم البراند، دول بتوع أصحابهم. وصفحتك أصلًا هتبقى أحلى لما تبقى شبهك.
قبل ما تبدأ
- حساب على claude.ai (ببلاش).
- 2 أو 3 سكرين شوت للصفحة اللي عاجباك: أول الصفحة، والنص، والآخر. الصورة الواضحة أحسن من صورة طويلة صغيرة.
- كلامك جاهز: اسمك، بتقدّم إيه، الخدمات، المميزات، والتواصل (لو مش جاهز، شوف ملف «صفحتك الشخصية في دقيقة»).
خليه يوصف اللي شايفه الأول
ارفع الصور في شات جديد، والصق:
بص على الصور دي. دي صفحة عاجبني تصميمها. قبل ما تعمل أي حاجة، اوصفلي اللي شايفه: 1) الأقسام من فوق لتحت، وكل قسم فيه إيه (عنوان، صورة، كروت، زرار…). 2) التقسيمة: كام عمود، والحاجات جنب بعض ولا تحت بعض. 3) المسافات: واسعة ومريحة ولا مزحومة؟ 4) الخطوط: العناوين كبيرة وتقيلة ولا رفيعة؟ والفرق بين حجم العنوان والكلام قد إيه؟ 5) الألوان: كام لون، وإيه الإحساس العام. 6) إيه اللي بيخلي التصميم ده حلو في رأيك. متكتبش كود لسه.
ليه شغال؟لما يوصف الأول، بتتأكد إنه شايف نفس اللي انت شايفه، وتصلّح الفهم قبل ما يبني.
هتشوفهيطلعلك وصف بالأقسام. لو غلط في حاجة صحّحها: «القسم التاني مش 3 كروت، دول 4 جنب بعض».
ابني بنفس التقسيمة وبكلامك انت
تمام. دلوقتي اعمللي صفحة ويب (ملف HTML واحد) كـ Artifact. خُد من الصور دول بس: - ترتيب الأقسام والتقسيمة. - المسافات ونسب الأحجام (العنوان كبير قد إيه جنب الكلام، الصور واخدة قد إيه من العرض). - الإحساس العام: [هادي / فخم / مرح]. وغيّر دول: - الكلام كله: استخدم كلامي اللي تحت بس. - الألوان: [لوني الأساسي] و[لون تاني]، بنفس هدوء الألوان اللي في الصورة. - متحطش أي لوجو أو اسم أو صورة أو جملة من الصفحة الأصلية. مكان الصور حط مربعات مكتوب عليها «صورة [إيه]». كلامي: [اسمي أو اسم شغلي، بقدّم إيه، الخدمات، المميزات، التواصل] عربي من اليمين للشمال (RTL)، ومظبوط على الموبايل: لو فيه أعمدة جنب بعض، خليها تحت بعض على الشاشة الصغيرة.
ليه شغال؟تقسيم الطلب لـ «خد دول» و«غيّر دول» بيخليه ياخد الهيكل بس، ويسيب البراند الأصلي في حاله.
هتشوفهتظهر صفحة جنب الشات، ترتيبها شبه الصورة، بس الكلام والألوان بتوعك.
قرّبها أكتر للتصميم
خد سكرين شوت للصفحة اللي Claude عملها، وارفعها هي والصورة الأصلية مع بعض:
الصورة الأولى: الصفحة اللي عاجباني. التانية: الصفحة اللي انت عملتها. اذكرلي 5 فروق في التقسيمة أو المسافات أو أحجام الخطوط، من الأهم للأقل. وبعدين صلّحهم في الصفحة. الكلام والألوان يفضلوا بتوعي زي ما هما.
ليه شغال؟لما يشوف الاتنين جنب بعض، بيلاحظ فروق صعب انت توصفها بالكلام.
ولو عايز تعدّل بنفسك، اوصف بالنِسَب مش بالإحساس:
- «العنوان الكبير يبقى حوالي ضعف حجم الكلام العادي.»
- «الصورة اللي فوق تاخد نص الشاشة على اللابتوب.»
- «المسافة بين كل قسم والتاني أوسع، زي الصورة.»
- «الكروت 3 جنب بعض على اللابتوب، وواحد تحت التاني على الموبايل.»
- كلمات بتفرق: أوسع، أهدى، أتقل، أرفع، أفضى.
مثال كامل
رفعت 3 صور لصفحة استوديو يوجا عاجبها هدوءها، وطلبت الوصف. وبعدين «البناء» بكلامها: الاسم: Miss Nada · English بتقدّم: دروس إنجليزي لإعدادي وثانوي، أونلاين وفي طنطا المميزات: مجموعات صغيرة، متابعة أسبوعية مع ولي الأمر، مذكرات مبسّطة الألوان: أزرق بحري وأبيض
الوصف (مختصر): «4 أقسام. فوق: صورة عريضة وعليها جملة واحدة كبيرة وزرار. بعدها 3 كروت جنب بعض بأيقونات بسيطة. مسافات واسعة جدًا، خط العناوين رفيع وكبير، لونين بس…» الصفحة: نفس الهدوء والمسافات، بس فوق «إنجليزي مفهوم، خطوة خطوة» وزرار «احجزي مكان لابنك»، و3 كروت للمميزات بتاعتها، ومربعات مكتوب عليها «صورة الفصل» مكان الصور. مفيش أي حاجة من صفحة اليوجا غير الإحساس.
لو حاجة مش مظبوطة
لو حاجة مش مظبوطة
نقل كلام إنجليزي من الصورة
قوله: «امسح أي كلام من الصفحة الأصلية، واستخدم كلامي بس».
الشكل بعيد خالص عن الصورة
ارجع لخطوة الوصف وصحّح فهمه، أو ارفع صور أوضح لكل جزء لوحده.
نقل اللوجو أو نفس الألوان بالظبط
قوله: «الألوان تبقى [ألواني] بس، ومن غير أي لوجو أو اسم من الصورة».
حلوة على اللابتوب ومكركبة على الموبايل
قوله: «على الموبايل خلي كل حاجة تحت بعض، وكبّر الزراير والخط».
مش قادر يقرا الصورة كويس
الصورة غالبًا صغيرة أو مقصوصة. صوّر كل جزء لوحده وارفعهم بالترتيب.
كلمات هتقابلك
- Layout (التقسيمة)
- ترتيب الأجزاء في الصفحة وأماكنها.
- Screenshot
- صورة للشاشة.
- Artifact
- صفحة أو أداة Claude بيعملها جنب الشات.
- RTL
- الكتابة من اليمين للشمال.
لو معاك Claude Pro: نفس الفكرة في Claude Code تطلع أقوى. اطلب منه يسطّبلك skill اسمها frontend-design (من Anthropic، بتبعد التصميم عن الشكل المتكرر بتاع الـ AI)، وحط الصور في الفولدر وقوله: «استخدم frontend-design واعمل صفحة بنفس تقسيمة الصور اللي في الفولدر، بكلامي اللي في content.txt، ومن غير أي حاجة من البراند الأصلي».