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

في Kingsmont كانت المهمة تقديم العمل بإقناع من مواد حقيقية. المطلوب بنية وانضباط بصري وصفحة تعمل، لا مولّد سيرة مؤسسية.

تحتفظ شاشة «Kingsmont — الشاشة الأولى» بمواد المشروع وتصميمه الحقيقيين.

Kingsmont — الشاشة الأولى

واجهة مؤرشفة · بيانات توضيحية

Kingsmont — الشاشة الأولى
شاشة محفوظة من المشروع · دون تحكم تفاعلي

أيدٍ سريعة وقرارات متأنّية

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

بُني الموقع على Astro وTypeScript مع عرض ثابت، واستُخدم Tailwind للتنسيق. أُنجزت الحركة في النسخة الأولى بـCSS وIntersectionObserver: يخبر المتصفح أن الكتلة دخلت مجال الرؤية، فتُطبَّق حالتها. لم نحتج إلى محرّك حركة كبير لذلك.

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

ما الذي يبقى للإنسان في هذا العمل

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

تحتفظ شاشة «Kingsmont — قسم داخلي» بمواد المشروع وتصميمه الحقيقيين.

Kingsmont — قسم داخلي

واجهة مؤرشفة · بيانات توضيحية

Kingsmont — قسم داخلي
شاشة محفوظة من المشروع · دون تحكم تفاعلي

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

Kingsmont — قسم التواصل

واجهة مؤرشفة · بيانات توضيحية

Kingsmont — قسم التواصل
شاشة محفوظة من المشروع · دون تحكم تفاعلي

كلّفت الوكلاء في Kingsmont بالمكوّنات والحالات المتجاوبة، وبقيت البنية والمواد والعرض البصري مسؤوليتي. تسريع كتابة الكود كان مفيدًا، لكن تحديد ما ينبغي أن تقوله الشركة عن نفسها ظلّ يسبق ذلك.

المرحلة التالية: Antigravity وGemini

كان العمل مع Cursor وCodex مرحلة من Kingsmont. لاحقًا صمّمت نسخة جديدة وبنيتها في Google Antigravity مع Gemini. أقدّر أن هذه المرحلة اللاحقة استغرقت أقل من يوم عمل. هذا ليس زمن التطوير كله؛ فقد بقيت مواد الشركة ومعلوماتها الحقيقية أساس العمل.

سمّيت الاتجاه البصري Quiet Institutional Power: ألوان داكنة وعرض متحفظ وطباعة كبيرة ومعلومات منظّمة بعناية. استند المستودع إلى مواد الشركة. لم تُضف إلى النص شركات محفظة أو مؤشرات استثمار أو ادّعاءات أخرى بلا مصدر.

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

أُضيف إلى Astro وTypeScript وTailwind في هذه النسخة مجسّم كرة أرضية WebGL خاص على Three.js، والتحقّق من JSON المنظّم عبر Zod، ومعالجة الصور عبر Sharp. العناوين بـSyne، والنص والواجهة بـIBM Plex Sans، والتسميات الخدمية بـIBM Plex Mono. ساعدت رموز التصميم على توحيد المقاسات والمسافات والطباعة أثناء العمل مع الوكلاء.

بقيت الحركة البسيطة على CSS وIntersection Observer؛ ولم أُدخل Framer Motion أوGSAP في النسخة الأولى. احتوى المستودع فحوصًا مستقلة لمعلومات الإدارة والادّعاءات العامة ونموذج التواصل. نجاح الترجمة البرمجية وحده لا يكفي لهذه المهام.

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

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

مشاهدة Kingsmont.

شاشات المشروع وتسجيلاته

Kingsmont: كيف أمنع AI من اختراع شركة استثمار

قصص ذات صلة: Horizon · Connection.me وRTL.