حوّل أرقام مشروعك إلى عالم ثلاثي الأبعاد تضغط عليه مع Claude وThree.jsTurn Your Business Numbers into a Clickable 3D World with Claude and Three.js

المصطلحات

connector (كونكتر)

وصلة رسمية تربط Claude بأداة ثانية مثل Stripe، حتى يقرأ بياناتك منها بإذنك.

Three.js

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

artifact (أرتيفاكت)

الملف اللي يبنيه Claude داخل المحادثة. الداشبورد نفسه artifact تفتحه وتضغط عليه.

لقطة الأرقام

الأرقام اللي سحبها Claude وقت ما بنى الداشبورد. ما تتغير لحالها، تحدّثها لما تطلب.

الخطوات

1. 1

   الخطوة 1

   اختار مصدر بياناتك

   عندك Stripe؟ Stripe عنده connector رسمي في Claude. تضيفه من دليل الـ connectors وتسجل دخول بحسابك وتعطيه الصلاحيات.

   Square مش متاح لاستقبال البطاقات في الإمارات، فإذا مشروعك هنا غالباً ما راح تحتاجه.

   ما عندك أي واحد منهم؟ ملف Excel أو CSV من نظام المبيعات يكفي، ترفعه في المحادثة.

   docs.stripe.com

   

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

2. 2

   الخطوة 2

   اسحب الأرقام وراجعها قبل أي تصميم

   قبل لا تطلب أي رسم، خلّ Claude يجمع الأرقام في جدول واحد وراجعها بنفسك.

   إذا الجدول غلط، الداشبورد راح يطلع غلط بس أحلى.

   برومبتجدول الأرقام

   نسخ

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

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

3. 3

   الخطوة 3

   صمّم مشروعك كعالم ثلاثي الأبعاد

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

   وقل له إن كل جزء لازم ينضغط ويفتح بطاقة فيها أرقامه.

   

   برومبتتصميم العالم

   نسخ

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

4. 4

   الخطوة 4

   قل له يبنيه بـ Three.js

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

   Three.js مجانية ومفتوحة المصدر، وClaude يكتب الكود ويعرضه لك كـ artifact داخل المحادثة.

   threejs.org

   

   برومبتالبناء

   نسخ

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

5. 5

   الخطوة 5

   اضغط على كل جزء وصحّح

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

   أي رقم مختلف أو أي جزء ما ينضغط، قل له بالضبط وين المشكلة.

   برومبتتصحيح

   نسخ

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

6. 6

   الخطوة 6

   حدّث الأرقام لما تحتاج

   الأرقام في الداشبورد لقطة من وقت ما انبنى. ما تتحدث لحالها.

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

   برومبتتحديث

   نسخ

   اسحب أرقام [الفترة الجديدة] من [Stripe أو الملف الجديد] وحدّث كل البطاقات في نفس العالم. اكتب لي تحت الداشبورد تاريخ آخر تحديث.

   نصيحة: اكتب تاريخ آخر تحديث داخل الداشبورد حتى ما تعتمد على رقم قديم.

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

صمّم محل القهوة اللي عندي كعالم ثلاثي الأبعاد: الكاونتر، ماكينة القهوة، الطاولات، وسيارة التوصيل. كل جزء ينضغط ويعرض: [مبيعات اليوم، أكثر مشروب طلباً، عدد الطلبات، طلبات التوصيل] من الملف المرفق. ابنيه بـ Three.js.