كيفية استخدام Claude Artifacts: دليل خطوة بخطوة
جولة كاملة في درس Claude Artifacts الذي يستغرق 12 دقيقة من Kevin Stratvert: ابنِ لوحة بيانات تفاعلية من ملف CSV، وطوّرها عبر الأوامر في المحادثة، وصحّح التفاصيل بأداة التعليقات، ثم أضف الذكاء الاصطناعي المدمج والبيانات المحفوظة والموصلات وLive Artifacts. 14 خطوة، كل خطوة مع لقطة شاشة حقيقية.
الخلاصة السريعة
- الأرتيفكتات تطبيقات مصغّرة تفاعلية — لوحات بيانات وأدوات وألعاب — ينشئها Claude من وصف بلغة طبيعية. حساب Claude مجاني يكفي للبدء.
- ارفع ملف CSV وسيوفر لك Claude لوحة بيانات جاهزة برسوم بيانية تُظهر الأرقام عند تمرير المؤشر خلال دقيقة تقريبًا؛ وكل تعديل لاحق ليس إلا أمرًا جديدًا في المحادثة، دون أي كود.
- أداة التعليقات تصحّح عنصرًا محددًا بدقة؛ والمشاركة تتم بنقرة واحدة عبر رابط «أي شخص يمتلك الرابط»، بينما يُبقي التثبيت أرتيفكتاتك المفضلة في أعلى المكتبة.
- كما يمكن للأرتيفكتات استدعاء Claude نفسه، وتذكّر البيانات بين الجلسات، والوصول إلى Slack أو Trello عبر موصلات MCP — بينما تحدّث Live Artifacts في تطبيق سطح المكتب نفسها تلقائيًا.
How to Use Claude Artifacts (Full Tutorial)
القناة: Kevin Stratvert · 12:42
حول لقطات الشاشة
جميع لقطات الشاشة في هذا الدليل مأخوذة من الفيديو أعلاه وتبقى ملكًا لـ Kevin Stratvert. كل خطوة تحتوي رابطًا إلى اللحظة المحددة التي تقع فيها في الفيديو. أما نص الخطوات والتعليقات والأسئلة الشائعة فهي من كتابتنا الخاصة.
من ملف CSV إلى لوحة بيانات (الخطوات 1–10)
- 1
افتح مكتبة الأرتيفكتات
سجّل الدخول إلى claude.ai — يكفي حساب مجاني — واضغط Artifacts في الشريط الجانبي الأيسر. تبويبا All وYours يعرضان كل ما أنشأته، وShared with you يجمع الأرتيفكتات التي شاركك فيها الآخرون، وصندوق البحث يرشّح المكتبة كلها.
مركز Artifacts: تبويبات All وYours وShared with you، وفي الزاوية New artifact.شاهد من 0:50 - 2
اضغط New artifact
اضغط زر New artifact في الزاوية العلوية اليمنى. يفتح Claude مهمة جديدة، وبدلًا من البناء عشوائيًا يستجوبك أولًا ببعض الأسئلة. يسمّي الأرتيفكت «web page» — لا يهم الاسم، فهذا مجرد الأساس الذي يبني عليه أيا كان ما ستنتهي إليه.
نقرة واحدة تبدأ مهمة موجّهة — الأسئلة قبل الكود.شاهد من 1:02 - 3
أجب عن أسئلة البداية
في هذا المثال اخترنا Dashboard، وستايل Bold & colorful، ومحور Sales & revenue trends. قد تختلف قائمة أسئلتك قليلًا — لا مشكلة. أجب عمّا يناسبك، أو تجاوز الأسئلة واشرح كل شيء بنفسك في رسالة واحدة.
النوع والستايل والمحور: هذه الإجابات توجّه النسخة الأولى التي يبنيها Claude.شاهد من 1:40 - 4
أرفق ملف CSV
عندما يسألك Claude من أين ستأتي البيانات، أجب أنك سترفع ملفاتك. اضغط أيقونة الزائد في صندوق الرسالة واختر Add files or photos (يعمل أيضًا Ctrl U / Cmd U) واختر ملف CSV. سيقرأ Claude الأعمدة ويقرر كيفية عرضها بصريًا قبل أن يبدأ البناء.
أيقونة الزائد → Add files or photos → اختر ملف CSV؛ يدرس Claude الملف قبل كتابة أي واجهة.شاهد من 2:19 - 5
انشر النسخة الأولى
بعد دقيقة أو دقيقتين ينشر Claude الأرتيفكت. تظهر لوحة البيانات على اليمين — المؤشرات الرئيسية في الأعلى والرسوم البيانية تحتها — ويلخّص Chat ما بناها: 1,207 طلبًا موزعة على 5 نكهات و4 مناطق، مباشرة من ملف CSV. اضغط أيقونة التوسيع لرؤية أوضح.
«The Bake Sheet»: بطاقات KPI ورسوم بيانية مولّدة من ملف CSV واحد.شاهد من 2:42 - 6
مرّر المؤشر على الرسوم لرؤية الأرقام الدقيقة
هذا تطبيق حقيقي وليس صورة. مرّر المؤشر على خط الاتجاه فيظهر لك صندوق صغير بالإيراد الدقيق لكل نكهة في ذلك الشهر، والرسوم العمودية والجداول تتجاوب بالمثل. لا أحد كتب كود الرسوم — Claude بناءها كلها من الملف.
صندوق معلومات شهر يونيو يفصّل الإيراد حسب النكهة — تفاعلي منذ أول نشر.شاهد من 2:58 - 7
طوّر بالدردشة لا بالبرمجة
لا يعجبك شيء؟ اطلبه فقط. جملة «Add a dark mode toggle to the dashboard» تكفي — يعيد Claude نشر نسخة محدثة بمفتاح شمس/قمر في الرأس يحوّل الثيم بالكامل ويتذكر اختيارك. واطلب التعديلات الأكبر بالطريقة نفسها في المحادثة نفسها.
برومبت واحد: مفتاح بأيقونة قمر في الرأس وثيم داكن كامل.شاهد من 4:02 - 8
صحّح تفصيلة واحدة بأداة التعليقات
لتغيير عنصر واحد فقط، افتح أداة التعليقات في الزاوية العلوية اليمنى من الأرتيفكت وظلّل الموضع المحدد — هنا عنوان «Kevin's Cookie Company». يفتح صندوق تعليق: اكتب ما تريد تغييره ثم اختر Send to Claude لتطبيقه فورًا، أو Add comment لترك الملاحظة دون تغيير أي شيء.
ظلّل واكتب التعديل ثم طبّقه — أو اتركه تعليق مراجعة.شاهد من 4:50 - 9
شاركه مع كل من يملك الرابط
اضغط Share واجعل General access على Anyone with the link واختر أي نسخة تنشر — يحتفظ Claude بكل مراجعة، فيمكنك عمدًا مشاركة لقطة أقدم. يمنحك Copy link رابطًا تعمل عليه لوحة البيانات وتظل تفاعلية في أي متصفح.
General access → Anyone with the link؛ محدد النسخ يقرر ما يراه الزوار.شاهد من 5:10 - 10
ثبّته واحتفظ بالمحادثة للتعديلات
عد إلى المكتبة، مرّر على الأرتيفكت وافتح قائمة النقاط الثلاث واختر Pin — تتجمع العناصر المثبتة في قسم Pinned للوصول بنقرة واحدة. ولتعديله لاحقًا أعد فتح محادثته الأصلية من Chat and tasks: تلك المحادثة تبقى دائمًا غرفة تحرير الأرتيفكت.
قائمة النقاط الثلاث للتثبيت؛ والمحادثة الأصلية تبقى مفتوحة لأي تعديلات قادمة.شاهد من 5:42
ارتقِ بمستواك: ذكاء اصطناعي مدمج وبيانات محفوظة وموصلات وLive Artifacts (الخطوات 11–14)
- 11
ابنِ أداة تستدعي Claude نفسه
يمكن للأرتيفكتات استدعاء Claude مباشرة. أنشئ أرتيفكتًا جديدًا واختر Something else وصِف الأداة — في مثالنا: يُدخل الموظفون مكونات الكوكيز فيولّد Claude خمسة اقتراحات للتسمية. بدون مفتاح API وبدون خادم خلفي؛ وعند أول استخدام يطلب الأرتيفكت من الزائر إذنًا للوصول إلى Claude فحسب.
The Batch Namer: اكتب المكونات واضغط Generate 5 names فتظهر اقتراحات التسمية من الذكاء الاصطناعي.شاهد من 7:02 - 12
اجعله يتذكر البيانات
اطلب من Claude إضافة ميزة المفضلة وسيطرح أولًا سؤال تصميم: هل المحفوظات خاصة بهذا المتصفح أم مشتركة بين كل من يفتح الأرتيفكت؟ اخترنا هنا المشتركة. بعدها تبقى الأفكار المحفوظة — أغلق التبويب اليوم وستجدها غدًا كما هي. هذه أساس أدوات التتبع والقوائم وأدوات المشاريع الخفيفة.
حفظ خاص أم مشترك — ثم تحصل كل اقتراح على نجمة لا تضيع بين الجلسات.شاهد من 8:20 - 13
اربطه بـ Slack وما بعدها
عبر موصلات MCP (Model Context Protocol) يستطيع الأرتيفكت العمل خارج Claude. اطلب زر مشاركة إلى Slack، ووافق على الاتصال، واختر قناة، فتحصل كل فكرة محفوظة على زر ينشرها للفريق مباشرة. والتطبيقات بلا موصل أصلي يمكن الوصول إليها عبر Zapier MCP — آلاف الإجراءات الإضافية.
تم ربط Slack: الفكرة المحفوظة تنشر نفسها الآن في #new-cookie-ideation.شاهد من 9:40 - 14
أبقه محدَّثًا مع Live Artifacts
في تطبيق Claude لسطح المكتب تجلب Live Artifacts البيانات الحالية من التطبيقات المرتبطة والملفات المحلية بدلًا من لقطة مجمّدة. لوحة المبيعات هذه تُجمَّع تلقائيًا من تقارير نقاط البيع وجداول Google Drive؛ اضغط Reload في رأسها فيُعاد رسمها بأحدث الأرقام — ابنِها مرة واحدة وافتحها دائمًا وستجدها حديثة.
زر Reload في تطبيق سطح المكتب يعيد جلب البيانات المرتبطة عند الطلب.شاهد من 12:04