دليل Claude Artifacts: أنشئ تطبيقات ووثائق وكوداً فورياً

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

ما هي Claude Artifacts؟

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

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

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

Artifacts متاحة لجميع مستخدمي Claude Max عبر واجهة الويب على claude.ai. مستخدمو FreeClaude الحاصلون على وصول Claude Max x20 يملكون وظائف Artifacts الكاملة بما في ذلك جميع أنواع القطع الأثرية وإمكانية إنشاء قطع أثرية غير محدودة لكل جلسة.

الأنواع الستة للقطع الأثرية

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

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

قطع أثرية للكود والتطبيقات

التطبيق الأكثر إثارةً لـClaude Artifacts هو بناء التطبيقات الوظيفية. تُعرض قطع أثرية مكوّنات React مباشرةً في لوحة Artifacts مما يُتيح لك التفاعل الفوري مع ما بناه Claude وطلب التغييرات استناداً إلى ما تراه لا ما تتخيله. هذا نمذجة أولية سريعة حقيقية بأشمل معانيها.

ما يمكن بناؤه بقطع أثرية React

نطاق التطبيقات التي يمكن لـClaude بناؤها وعرضها كقطع أثرية React يُفاجئ المستخدمين الذين لم يجربوه بعد. فيما يلي فئات مع أمثلة محددة:

أدوات الإنتاجية

• الآلات الحاسبة والمحولات: حاسبات الرهن العقاري ومحولات الوحدات ومقدّرات الضرائب وحاسبات العائد على الاستثمار مع حقول مدخلات متعددة ومنطق مشروط ومخرجات منسّقة
• منشئات النماذج: نماذج متعددة الخطوات مع تحقق وحقول مشروطة ومعالجة التقديم
• أدوات المؤقت والتتبع: مؤقتات Pomodoro ومتتبعات العادات ومسجّلات الوقت مع الاستمرارية عبر localStorage
• أدوات معالجة النص: عدّادات الكلمات ومختبرات regex ومنسّقات النص وأدوات معاينة Markdown

تصور البيانات

• المخططات: مخططات شريطية وخطية ودائرية ومبعثرة باستخدام مكتبات مثل Recharts أو Chart.js
• لوحات المعلومات: لوحات معلومات متعددة المخططات مع فلاتر ومحددات نطاق زمني
• جداول البيانات: جداول قابلة للفرز والتصفية مع ترقيم صفحات لمجموعات البيانات التي تقدمها
• الخرائط: تصورات جغرافية بسيطة حين تُقدم بيانات الإحداثيات

المحتوى التعليمي والتفاعلي

• الاختبارات وبطاقات التعلم: اختبارات اختيار متعدد وحزم بطاقات التعلم بالتكرار المتباعد واختبارات المعرفة
• الدروس التفاعلية: إرشادات خطوة بخطوة مع تتبع التقدم
• المحاكيات: تصورات الخوارزميات ومحاكيات الفيزياء والنماذج الاقتصادية
• أدوات تعلم اللغة: تطبيقات التدريب على المفردات وتمارين التصريف وتمارين الترجمة

الألعاب

• الألعاب الكلاسيكية: إكس-أو ومطابقة أربعة وثعبان وألعاب الكتل على طريقة Tetris ومطابقة الذاكرة
• ألعاب الكلمات: متغيرات Wordle وحلّالات الأنجرام ومولّدات البحث عن الكلمات
• الألعاب اللغزية: مولّدات سودوكو مع فحص الحل والألغاز المنطقية وتحديات على غرار غرفة الهروب
• ألعاب المسابقات: مسابقات مخصصة حول أي موضوع تحدده مع تتبع النقاط ومستويات الصعوبة

مكوّنات واجهة المستخدم والنماذج الأولية

• التنقل والتخطيط: أشرطة تنقل متجاوبة وأشرطة جانبية وأقسام رئيسية لتصاميم المواقع
• عروض الميزات: عروض ميزات متحركة وأقسام الصفحات الرئيسية للمنتجات
• مكتبات المكوّنات: أنظمة مكوّنات UI مخصصة بأسلوب متسق
• الإطارات السلكية: إطارات سلكية تفاعلية لتصاميم التطبيقات يمكن لأصحاب المصلحة النقر عليها

مطالبات فعّالة لقطع أثرية الكود

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

للتطبيقات الأكثر تعقيداً، قدّم متطلبات محددة منذ البداية بدلاً من طلب إصدار أساسي والتكرار. يمكن لـClaude بناء تطبيقات متطورة إلى حد ما في توليد واحد، وتقديم متطلبات تفصيلية منذ البداية يُنتج نتائج أفضل من المطالبات الغامضة المتبوعة بجولات مراجعة عديدة.

قطع أثرية للوثائق والمحتوى

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

قطع أثرية وثائق Markdown

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

حالات الاستخدام الأكثر فاعليةً لقطع أثرية Markdown تشمل: مقترحات المشاريع ونطاقات الأعمال والتوثيق التقني وملفات README والتقارير المنظمة بجداول وبيانات منسّقة والأدلة التعليمية وجدداول أعمال الاجتماعات مع عناصر الإجراءات المرفقة.

قطع أثرية SVG والمخططات

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

مخططات Mermaid قوية بصفة خاصة للتوثيق التقني. يمكن لـClaude توليد:

• مخططات التدفق: أشجار القرار وتدفقات العمليات ومخططات الخوارزميات
• مخططات التسلسل: تسلسلات تفاعل API ومخططات تمرير الرسائل ومخططات تدفق المستخدم
• مخططات علاقات الكيانات: تصورات مخطط قاعدة البيانات
• مخططات Gantt: الجداول الزمنية للمشاريع وتخطيط المعالم
• مخططات الفئات: تصورات التصميم الكائني التوجه
• مخططات الحالة: تعريفات آلة الحالة والانتقالات

لتوليد مخطط Mermaid، صف ببساطة ما تريد تصوره: "أنشئ مخطط تسلسل يوضح تدفق رمز تفويض OAuth 2.0" أو "اصنع مخطط علاقات كيانات لقاعدة بيانات مدونة تحتوي على مقالات ومؤلفين ووسوم وتعليقات." سيولّد Claude صياغة Mermaid ويعرضها في لوحة القطع الأثرية.

التكرار وصقل القطع الأثرية

من أكثر جوانب سير عمل Artifacts قوةً دورة التكرار السريع. على خلاف التطوير التقليدي حيث تستلزم كل تغيير تحرير ملفات وتشغيل بناء والتحقق من النتائج يدوياً، تُتيح Artifacts رؤية التغييرات فوراً — محوّلةً ما كان دورة بضع دقائق إلى دورة 10-30 ثانية.

أنماط التكرار الفعّالة

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

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

افصل الوظيفي عن المرئي: أجرِ التغييرات الوظيفية (إضافة ميزات وإصلاح السلوك) والتغييرات المرئية (الألوان والتخطيط والطباعة) في جولات مراجعة منفصلة. خلط الاثنين في طلب مراجعة واحد يزيد احتمال تغيير Claude لشيء لم تقصده.

طلب الإضافات لا إعادة الكتابة: عند طلب ميزات إضافية، حدد أنك تريد من Claude الإضافة إلى الكود الحالي لا إعادة توليده بالكامل. صُغ الطلبات كـ"أضف مبدّل الوضع المظلم إلى الواجهة الحالية" بدلاً من "أنشئ إصداراً جديداً بالوضع المظلم" — الأول أكثر احتمالاً للحفاظ على الهيكل الحالي الذي تُعجب به.

مشاركة وتصدير القطع الأثرية

يمكن مشاركة القطع الأثرية عبر رابط منشأ بـClaude يُتيح للآخرين عرض القطعة الأثرية المعروضة في متصفحهم دون الحاجة إلى حساب Claude. لقطع أثرية React وHTML، يمكن نسخ الكود الأساسي من لوحة القطعة الأثرية ونشره على أي خدمة استضافة ثابتة — Vercel وNetlify وGitHub Pages أو خادم ويب بسيط — للاستضافة الدائمة.

سير العمل العملي والقوالب

طوّر المستخدمون الأكثر إنتاجيةً لـArtifacts سير عمل قابلة للتكرار تُعظّم جودة المخرجات مع تقليل دورات المراجعة. فيما يلي الأنماط الأكثر فاعليةً:

سير عمل النمذجة الأولية السريعة

لنمذجة المنتجات والميزات الأولية: ابدأ بقصة مستخدم ("أنشئ أداة تتيح للمستخدمين إدخال CSV ورؤية مخطط للبيانات") واحصل على الإصدار الأول العامل وشاركه مع أصحاب المصلحة للحصول على ملاحظات ثم اصقله استناداً إلى ردود الفعل الفعلية على النموذج الأولي العامل. يضغط سير العمل هذا دورة تصميم-ملاحظات نموذجية من أيام إلى ساعات.

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

لتحليل البيانات: الصق مجموعة بياناتك (بصيغة CSV أو JSON) في المحادثة وحدد الرؤية التي تريد إيصالها واطلب من Claude بناء تصور يوضّح هذه الرؤية بجلاء. كرّر على نوع المخطط ومخطط الألوان والتسمية والتفاعل حتى يُوصل التصور ما تحتاجه. صدّر كود React للتكامل في منتجك الفعلي.

سير عمل المحتوى التعليمي

لإنشاء مواد تعليمية: حدد هدفك التعليمي والجمهور المستهدف وقيود المحتوى ثم اطلب من Claude بناء وحدة تفاعلية. ادمج نص الشرح (قطعة أثرية Markdown) مع التمارين التفاعلية (قطعة أثرية React) في الجلسة ذاتها. راجع المحتوى وحرّره ثم صدّره للاستخدام في منصة دوراتك.

سير عمل توليد الوثائق

لوثائق الأعمال: قدّم لـClaude الحقائق الرئيسية ونقاط البيانات والمتطلبات ثم اطلب منه توليد الوثيقة المنسّقة الكاملة كقطعة أثرية Markdown. اقرأ النتيجة المعروضة واطلب تعديلات محددة للأقسام ثم انسخ الإصدار النهائي للاستخدام في نظام إدارة وثائقك الفعلي.

القيود والحلول البديلة

فهم قيود Artifacts يساعدك في وضع توقعات مناسبة وإيجاد حلول بديلة فعّالة حين تصطدم بها.

لا خادم خلفي أو استدعاءات خارجية

تعمل قطع أثرية مكوّنات React في بيئة متصفح معزولة دون وصول إلى واجهات API الخارجية أو قواعد البيانات أو أنظمة الملفات. التطبيقات التي تحتاج جلب بيانات مباشرة أو مصادقة المستخدمين أو استمرارية البيانات خارج جلسة المتصفح لا يمكن بناؤها بالكامل كقطع أثرية. الحلول البديلة: استخدم مجموعات بيانات ثابتة ملصوقة في المحادثة للتطبيقات المبنية على البيانات؛ واستخدم localStorage للاستمرارية البسيطة؛ وصمّم الواجهة الأمامية كقطعة أثرية مع الإشارة إلى أين ستكون نقاط تكامل الخادم الخلفي.

قيود المكتبات

تتضمن بيئة Artifacts المعزولة مجموعة منتقاة من المكتبات المتاحة بما في ذلك React وRecharts وChart.js وTailwind CSS وغيرها. ليست كل حزم npm متاحة. إذا ولّد Claude كوداً يستخدم مكتبة غير متاحة، قد تفشل القطعة الأثرية في العرض. الحلول البديلة: حدد أن Claude يستخدم فقط واجهات برمجة المتصفح المدمجة وReact لأقصى توافق، أو اطلب من Claude تطبيق الوظائف بصورة أصيلة بدلاً من الاعتماد على المكتبات.

سقف التعقيد

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

تصحيح القطع الأثرية المعروضة

حين تفشل قطعة أثرية في العرض أو يكون سلوكها غير متوقع، صف ما تلاحظه: "تُظهر القطعة الأثرية شاشة فارغة" أو "النقر على الزر لا يفعل شيئاً" أو "يُعرض المخطط لكن التسميات تتداخل". يمكن لـClaude تشخيص المشكلات وإصلاحها استناداً إلى وصفك. للتصحيح على مستوى الكود، اطلب من Claude إضافة عبارات console.log أو معالجة الأخطاء وأخبره بما يُظهره وحدة تحكم المتصفح.

الحصول على وصول مجاني لـClaude Artifacts

تستلزم Claude Artifacts اشتراكاً في Claude Max وهي متاحة عبر واجهة الويب على claude.ai. توفر FreeClaude وصول Claude Max x20 — الذي يشمل وظائف Artifacts الكاملة — مجاناً من خلال برنامج الإحالة المجتمعي.

1. افتح @FreeClaudeIO_bot على Telegram واضغط على ابدأ
2. انضم إلى قناة FreeClaude كما يوجّهك البوت
3. تلقّ رابط لوحة التحكم على freeclaude.io/dashboard
4. شارك رابط إحالتك — انضمام صديق واحد يمنحك 3 أيام وصول كامل بما في ذلك Artifacts
5. سجّل الدخول إلى claude.ai وابدأ البناء — Artifacts مُفعّلة تلقائياً لمستخدمي Max

Artifacts غير متاحة في تطبيقات Claude للجوال أو طرفية Claude Code — إنها ميزة واجهة ويب. يمكنك الوصول إليها على claude.ai في أي متصفح مكتبي أو جوّال. تعمل الميزة بشكل أفضل على سطح المكتب مع شاشة أكبر لرؤية المحادثة ولوحة Artifacts جنباً إلى جنب في آنٍ واحد.

الأسئلة الشائعة

هل أحتاج معرفة البرمجة لاستخدام Claude Artifacts؟

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

هل يمكنني تصدير كود القطعة الأثرية واستخدامه في مشروعي؟

نعم. انقر زر النسخ في لوحة القطعة الأثرية للحصول على الكود الخام. تُنتج قطع أثرية مكوّنات React كود JSX/TSX يمكن استخدامه مباشرةً في أي مشروع React. قطع أثرية HTML تُنتج HTML/CSS/JS قياسياً يعمل في أي مكان. تُنتج قطع أثرية Markdown صيغة Markdown قياسية تُعرض في أي منصة تدعم Markdown. تُنتج قطع أثرية SVG وMermaid صيغاً قياسية متوافقة مع أي أداة تدعمها.

هل يمكن للقطع الأثرية الوصول إلى الإنترنت أو واجهات API الخارجية؟

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

كم عدد القطع الأثرية التي يمكنني إنشاؤها في محادثة واحدة؟

لا يوجد حد رسمي لعدد القطع الأثرية لكل محادثة. في الممارسة، قد تقترب المحادثات الطويلة جداً ذات القطع الأثرية الكبيرة الكثيرة من حدود نافذة السياق. معظم المستخدمين ينشئون من 5 إلى 10 قطع أثرية في كل جلسة دون مشكلة.

هل يمكن لأشخاص متعددين التعاون على قطعة أثرية؟

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

هل تعمل القطع الأثرية على الهاتف المحمول؟

تُعرض القطع الأثرية على متصفحات الجوال على claude.ai، وإن كانت التجربة أفضل على سطح المكتب حيث يمكن عرض المحادثة ولوحة Artifacts جنباً إلى جنب. القطع الأثرية التفاعلية ذات التفاعلات باللمس تعمل عادةً بشكل جيد على الجوال؛ القطع الأثرية المصممة لحالات التحويم أو اختصارات لوحة المفاتيح قد تحتاج تكييفاً.

هل يمكنني استخدام Artifacts لتوليد الصور أو الصوت؟

لا يمكن لـClaude توليد صور نقطية (مثل JPEG أو PNG) عبر Artifacts. يمكن توليد رسومات SVG المتجهية كقطع أثرية، وهو يشمل أنواعاً كثيرة من الرسوم التوضيحية والمخططات. توليد الصوت غير مدعوم حالياً في Artifacts. لتوليد الصور والصوت، تُستلزم أدوات مخصصة أخرى.

ما الفرق بين القطعة الأثرية وClaude Code؟

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