Claude Artifacts و Projects، أدوات العمل المنظّم

Anthropic أطلقت ميّزتَين قاتلتَين تُميّزان Claude عن المنافسين: Artifacts وProjects. هذا الدليل يشرح كليهما.

Claude Artifacts

ما هو

مساحة عمل جانبية تظهر يميناً بينما تحادث Claude يساراً. تعرض:

• كود قابل للتحرير
• مستندات (Markdown، HTML)
• مواقع كاملة (Preview مباشر)
• تطبيقات React
• SVG، Mermaid diagrams
• ملفّات JSON منظّمة

متى يفتح تلقائياً

Claude يفتح Artifact حين:

• تطلب كوداً طويلاً (>20 سطر)
• تطلب مستنداً كاملاً
• تريد إنشاء موقع/تطبيق
• تحتاج diagram

10 استخدامات

1) بناء موقع مصغّر

> اصنع لي موقع صفحة واحدة عن مقهى سعودي:
> Hero section، About، Menu، Contact
> Tailwind CSS، responsive
> بصمة عربية دافئة

Artifact يفتح، يعرض HTML كامل مع Preview مباشر.

2) React Component

> اكتب React Component لبطاقة عميل:
> Props: name, email, avatar, status
> Tailwind، Accessible
> TypeScript

Preview يظهر المكوّن مباشرة.

3) Landing Page

كامل بـHTML وCSS في دقائق.

4) SQL Schema

> صمّم schema قاعدة بيانات لمتجر إلكتروني:
> Users, Products, Orders, Reviews
> مع علاقات وفهارس

Artifact يعرض SQL منسّق.

5) Documentation

> اكتب README.md شامل لمشروع [X]

يفتح Markdown Artifact، تحرّره جانبياً.

6) API Documentation

OpenAPI YAML كامل قابل للتحرير.

7) Diagram

> ارسم Mermaid flowchart لعملية طلب في متجر إلكتروني

يرسم Diagram مرئي فوراً.

8) Interactive Data Visualization

> ارسم رسم بياني من هذه البيانات: [ألصق]
> Chart.js مع alt text

Preview يعرض الرسم فوراً.

9) Email Template

> اكتب HTML email template للترحيب بعميل جديد
> Responsive، متوافق مع Gmail وOutlook

يفتح Email HTML قابل للاختبار.

10) Dashboard Prototype

بناء dashboard مصغّر بـHTML وCSS.

ميّزات Artifacts

• تحديث فوري: تعديل الكود يظهر في Preview مباشرة
• تاريخ التعديلات: تراجع لأيّ إصدار سابق
• مشاركة: رابط قابل للمشاركة (Pro+)
• تحميل: بضغطة كملف

القيود

• لا يستطيع الوصول للإنترنت من داخل Artifact
• حجم محدود، التطبيقات الكبيرة تحتاج IDE
• لا حفظ في السحابة، Artifacts تُخزّن في المحادثة

Claude Projects

ما هو

مساحة عمل لمشروع طويل الأمد. تحوي:

1. Instructions، تعليمات ثابتة تُطبَّق على كل محادثة في المشروع
2. Knowledge، ملفّات مرجعية (PDF، Word، Excel، صور)
3. Conversations، محادثات متعدّدة كلها تعرف السياق

الفرق عن Custom GPTs

| Claude Projects | ChatGPT Custom GPTs | |---|---| | مساحة عمل شخصية | قابلة للنشر (Store) | | محادثات منظّمة داخل Project | GPT مستقلّ | | مناسب لعمل ذاتي طويل | مناسب للأدوات القابلة للمشاركة | | Knowledge حتى 200MB | Knowledge حتى 20 ملفّاً |

10 استخدامات

1) محامٍ مع قضية

Instructions: "أنت مساعدي في قضية [X]. اللغة عربية، تستشهد بالمواد الرسمية، تُشدّد أنّ ردودك استرشادية".

Knowledge:

• ملفّ العميل
• المستندات الرسمية
• السوابق ذات الصلة
• النظام القانوني المطبّق

كل محادثة تعرف السياق.

2) كاتب مع كتاب

Instructions: "أنت مساعد الكاتب. أسلوبه [صف]. تحافظ على الاتّساق مع الفصول السابقة".

Knowledge:

• المخطّط
• الفصول المكتوبة
• ملاحظات الشخصيات
• بحث خلفي

3) مطوّر مع مستودع

Instructions: "أنت مساعد المطوّر لمستودع [X]. Stack: React + Node + PostgreSQL. Convention: [أنماط الكود]".

Knowledge:

• README
• API docs
• Schema قاعدة البيانات
• Style Guide

4) محاسب مع عميل

Instructions: "مساعد محاسبة لعميل [X]. تراعي معايير SOCPA السعودية".

Knowledge:

• بيانات العميل المالية
• سياسات المحاسبة
• الفترة المالية

5) مدرّس مع فصل

Instructions: "مساعد مدرّس مادّة [X] للصف [Y]. طلابي يعانون من [Z]. أسلوبي [W]".

Knowledge:

• المنهج
• خطّة الفصل
• تقييمات الطلاب

6) مسوّق مع حملة

Instructions: "مساعد حملة [X]. الجمهور [صف]. الرسائل الأساسية:...".

Knowledge:

• استراتيجية الحملة
• Personas
• محتوى سابق نجح

7) باحث مع دراسة

Instructions: "مساعد باحث في [الموضوع]. المنهجية [X]. أنشر في مجلّات [Y]".

Knowledge:

• الأدبيات المرجعية
• بيانات البحث
• خطّة النشر

8) صحفي مع تحقيق

Instructions: "مساعد صحفي لتحقيق عن [X]. المصادر: [قائمة]. الخطّ التحريري: [صف]".

Knowledge:

• المقابلات المفرّغة
• المستندات المسرّبة
• خلفية القصّة

9) طبيب مع عيادة

Instructions: "مساعد طبّي. تنبيه: كل رد استرشادي، القرار السريري للطبيب".

Knowledge:

• بروتوكولات العيادة
• أدلّة طبّية

10) صاحب مشروع مع شركة

Instructions: "مساعد مؤسّس شركة [X] في مجال [Y]. الأهداف:...".

Knowledge:

• خطّة العمل
• تحليلات المنافسين
• ملاحظات الاجتماعات

كيف تبني Project ممتاز

1) Instructions بنية واضحة

أنت [الدور].
تخصّصك: [حدّد].
جمهورك: [صف].
أسلوبك:
- [نقطة 1]
- [نقطة 2]
كل رد، افعل:
1. [شيء محدّد]
2. [شيء محدّد]
لا تفعل:
- [ممنوع]

2) Knowledge منظّم

• ملفّات ذات صلة فقط (لا حشو)
• أسماء واضحة
• تحديث دوري

3) Custom Actions (متقدّم)

مع MCP، يستطيع Project الاتّصال بأدواتك (Google Drive، GitHub).

أخطاء شائعة

1) رفع كل شيء إلى Knowledge

Knowledge كثير = نموذج مشتّت. اختر بعناية.

2) Instructions مبهم

"كن مفيداً" لا يعني شيئاً. حدّد.

3) عدم تحديث Instructions

مع تطوّر مشروعك، حدّث.

4) رفع بيانات حسّاسة بلا حماية

Projects آمنة نسبياً، لكن للحسّاس، استخدم Team/Enterprise.

5) عدم استخدام Artifacts داخل Projects

Artifacts متاحة داخل Projects، استفد من الاثنَين معاً.

المصادر الرسمية

• Claude Artifacts
• Claude Projects
• Anthropic Documentation

اقرأ أيضاً: Claude، الدليل الشامل · Claude Code، دليل المطوّر · MCP، بروتوكول سياق النموذج · Custom GPTs، كيف تبني