علامة رامن بُنيت حول قطة واحدة، من الشعار إلى موقع حيّ

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

Play video

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

المهمة

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

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

تضم القائمة عددًا لا بأس به من الأطباق (رامن بالمرق، وأبوراسوبا بلا مرق، وإضافات، ووجبة متكاملة)، لذا كان جزء من العمل تنظيمها بحيث تُقرأ بسرعة.

بعد ذلك كان السؤال الأول عن الشخصية: كيف يجب أن تبدو هذه القطة بالضبط؟

من المراجع إلى قطة بنظرة شاردة

بدأتُ بجمع مراجع لقطط بأساليب متنوعة جدًا، فقط لأرى ما يعجبني قبل أن أحدد اتجاهًا.

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

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

كانت لكل قطة هيئة وتعبير وطريقة اندماج مع النودلز مختلفة قليلًا. وعند الاختيار سألتُ نفسي سؤالين:

• هل تبقى هذه القطة في الذاكرة؟
• هل ستنجح خارج الشعار أيضًا، على القائمة والتغليف والموقع؟

اخترنا هذه القطة السوداء. تبدو مشدوهة قليلًا، وهذا التعبير بالذات هو ما جعلني أرغب في المضي معها.

تحويل قطة إلى علامة

بعد ذلك وسّعتُ الشعار إلى هوية بصرية كاملة.

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

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

حين توضع جنبًا إلى جنب، تجيب سريعًا عن السؤال الحقيقي: هل تستطيع هذه القطة حمل علامة كاملة، وهل تبدو كل هذه القطع منتمية إلى عائلة واحدة؟ (للتوضيح: هذه نماذج تُظهر طريقة تطبيق الهوية، وليست صورًا لمحل مكتمل.)

تخطيط الموقع، ثم نظام تصميم

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

1. الواجهة الرئيسية، لتكون القطة أول ما يبقى في الذاكرة
2. قائمة الطعام
3. من نحن
4. الموقع، مع خريطة ومواعيد العمل

ثم الإعداد: مستودع جديد على GitHub، ومجلد مشروع محلي، ونظام تصميم جديد في Claude Design.

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

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

تسليم التصميم إلى Claude Code

حين صار ملف التصميم جاهزًا، ضغطتُ «مشاركة»، واخترتُ الإرسال إلى Claude Code، وحدّدتُ الوضع المحلي مع الملفات المعنية، ونسختُ طلب التسليم الذي قدّمه.

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

تقنيًا، هو موقع Next.js مُصدَّر كملفات ثابتة، مع GSAP وLenis لحركات التمرير. لكل لغة رابطها الخاص (/ja/ و/zh/ و/en/)، والقائمة كلها في ملف واحد يحمل فيه كل طبق اسمه باللغات الثلاث.

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

جعل القطة تأكل الرامن

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

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

ثم ولّدتُ صورتين للقطة بوضعيتين مختلفتين قليلًا، لتكونا الإطار الأول والأخير في حركة متكررة.

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

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

هذه هي النسخة التي وُضعت في الموقع:

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

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

استكمال البقية

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

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

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

النشر على Railway

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

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

الخيط الذي يربط كل شيء

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

1. استكشف على نطاق واسع مبكرًا. دع الذكاء الاصطناعي يجرّب اتجاهات كثيرة في مرحلة المفاهيم.
2. التزم بشخصية واحدة. بعد اختيار القطة، بُني كل عنصر حولها هي نفسها.
3. سلّم العناصر مع ملخّص واضح. انطلق نظام التصميم والتطوير كلاهما مما سبقهما.
4. راجع النتيجة الفعلية، قسمًا قسمًا، حتى تصبح صحيحة.

يمكنك رؤية المزيد من العلامة المكتملة والصفحة الرئيسية كاملة في صفحة مشروع Neko Ramen.

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

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