خمس أماكن تتحرك في براندك مع Claude: برومبت جاهز لكل مكانFive Places Your Brand Can Move with Claude: A Ready Prompt for Each One

المصطلحات

SVG

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

micro-interaction (مايكرو إنترآكشن)

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

hero (هيرو)

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

Claude Motion

خاصية في Claude تحوّل كلامك لأنيميشن قصير وتصدّره MP4. للحين بيتا، في باقات Team وEnterprise بس.

الخطوات

1. 1

   الخطوة 1

   اكتب ألوان البراند وخطوطه مرة وحدة

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

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

   برومبتبريف البراند

   نسخ

   هذا براندي: الألوان [الكود الأساسي] و[الكود الثاني]، الخط [اسم الخط]، والإحساس [هادي / سريع / فخم]. أي حركة تسويها لي بعدين، التزم بهذا بالضبط.

2. 2

   الخطوة 2

   حرّك الشعار

   اطلب الشعار كملف SVG بخلفية شفافة، حتى تحطه فوق أي فيديو أو في أعلى الموقع.

   ارفع ملف الشعار نفسه مع الطلب، لا تخلي Claude يرسمه من الذاكرة.

   برومبتالشعار

   نسخ

   هذا شعاري (مرفق). حرّكه في [3] ثواني: يرسم نفسه خط خط وبعدين يثبت. سلّمه SVG بخلفية شفافة وبألوان البراند بالضبط، وخلّ الحركة تشتغل مرة وحدة بدون تكرار.

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

3. 3

   الخطوة 3

   اعمل الحركات الصغيرة

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

   اطلبها كود CSS أو SVG تقدر تلصقه في موقعك أو تعطيه للمبرمج.

   برومبتالحركات الصغيرة

   نسخ

   اعمل لي [زر حفظ] بثلاث حالات: عادي، يتحمّل، وتم بعلامة صح. الحركة أقل من ثانية، ناعمة، وبألوان البراند. سلّمها كود HTML وCSS في ملف واحد مع شرح وين ألصقه.

4. 4

   الخطوة 4

   حرّك واجهة الموقع

   أول شاشة في الموقع هي أكثر مكان يشوفه الناس.

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

   برومبتواجهة الموقع

   نسخ

   اعمل لي أول شاشة لموقع [نوع المشروع]: العنوان [النص] يدخل حرف حرف، والصور تتحرك أبطأ من النص مع السكرول. لازم تشتغل على الجوال، وما تثقل الموقع. سلّمها ملف HTML واحد.

5. 5

   الخطوة 5

   اعمل فيديو يشرح وجولة في التطبيق

   هنا Claude Motion: من مربع الرسالة اختار Output وبعدين Motion، أو من تبويب Artifacts اختار قالب Motion.

   تصدّر الفيديو MP4 من زر Export. للحين بيتا، وبس في باقات Team وEnterprise، ويحسب من حد استخدامك.

   ما عندك الباقة؟ اطلب نفس الشي كصفحة HTML تتحرك، وصوّر الشاشة.

   برومبتفيديو يشرح

   نسخ

   اعمل لي فيديو [30] ثانية يشرح [المنتج أو الخدمة] في [4] مشاهد: المشكلة، الحل، كيف يشتغل، وطلب واحد في الآخر. نص قصير على الشاشة، أيقونات بسيطة، وبألوان البراند.

6. 6

   الخطوة 6

   عدّل جزء بدون ما تخرب الباقي

   كل حركة كود، فتقدر تطلب تعديل تفصيل واحد بس.

   سمّ المشهد أو الجزء بالضبط، وقل اللي يتغير واللي يبقى.

   برومبتتعديل

   نسخ

   في [المشهد الثاني]، غيّر [لون الخلفية] بس، وخلّ كل شي ثاني مثل ما هو بالضبط.

برومبتات جاهزة للنسخ

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