🔝 الدليل الرئيسي: Claude AI: الدليل الشامل 2026

عندما أطلقت Anthropic Claude Design في أبريل 2026، كثير من المصممين رفعوا الحاجبين — أداة توليد UI أخرى؟ لكن من تعمّق فهم الدقة: Design ليس نسخة من Figma، بل طبقة فوق Artifacts تُحوّل محادثة إلى livrable بصري قابل للاستخدام. مع Artifacts الموجودة، أسرع طريقة للانتقال من فكرة إلى prototype قابل للاختبار.

يأخذك هذا الدرس من أول Artifact HTML مستقل إلى mini-dashboard تفاعلي وmockup قابل للمشاركة. سترى كيف تُقود الـ rendu، كيف تُكرّر دون البدء من الصفر، كيف تُصدّر، وكيف هذه الـ livrables تتّصل بـ Cowork لتشغيل إنتاجات أوسع.

المتطلبات

حساب Claude Pro، Max، Team أو Enterprise. Artifacts تعمل على Free، لكن Design يتطلّب خطة مدفوعة
متصفّح حديث — لا برنامج للتثبيت
معرفة أساسية بـ Markdown ومفاهيم HTML/CSS
المستوى: مبتدئ إلى خبير
الوقت المُقدَّر: 70 دقيقة

الخطوة 1 — فهم Artifacts

Artifact هو مخرج Claude غير محادثي يظهر في لوحة جانبية. عندما تطلب وثيقة طويلة، ملف كود، صفحة HTML، مخطط SVG أو جدول مُهيكَل، Claude يكتشف أن الجواب يستحق التعامل معه كـ livrable ويفتحه كـ Artifact.

الأنواع الأكثر شيوعًا: Markdown، HTML (صفحة web مستقلة تعمل في المتصفّح)، React (مكوّن UI مُرَكَّب مباشرة)، code لغة محددة، Mermaid، SVG. كل نوع له وضع معاينة مُكيَّف.

ثلاث نقاط قبل الغوص. أولًا، Artifact يبقى في المحادثة: يمكنك العودة إليه، تعديله، تنزيله لاحقًا. ثانيًا، يمكنك التكرار دون البدء من الصفر — Claude يُحدّث Artifact حافظًا ما تريد الإبقاء عليه. ثالثًا، Artifacts HTML تُنفَّذ في sandbox المتصفّح.

الخطوة 2 — أول Artifact: صفحة HTML مستقلة

Génère-moi une page HTML autonome — un seul fichier, sans dépendances externes —
qui présente l'offre de formation cybersécurité d'ITSkillsCenter :
- Titre principal et accroche d'une phrase
- Section "Programme" avec 4 modules listés en cartes
- Section "Public visé" en bullet points
- Bouton CTA "Demander le programme détaillé"
- Pied de page avec mention contact via WhatsApp

Style : sobre, deux couleurs principales (bleu nuit et orange clair), polices système, responsive
mobile. Pas de framework, juste HTML et CSS dans le même fichier.

Claude يفتح Artifact HTML، يكتب الصفحة، يُرَكِّبها مباشرة في اللوحة. ترى النتيجة. للتنزيل: نقرة على أيقونة التنزيل في أعلى Artifact، تستردّ ملف .html.

الخطوة 3 — التكرار دون كسر

الخطأ الكلاسيكي ترك Artifacts ينحرف. تطلب تغييرًا، ثم آخر، ثم آخر، وبعد 10 تكرارات الكود أصبح كرة معقّدة. الانضباط: طلب تغييرات مستهدفة.

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

الخطوة 4 — Artifact React لـ mini-dashboard

Génère un mini-dashboard React (composant unique, autoporté) qui affiche :
- 3 cartes KPI en haut : MRR (8.2K€), Clients actifs (47), Churn mensuel (2.3%)
- 1 graphique à barres : évolution du MRR sur 12 derniers mois (données fictives plausibles)
- 1 tableau "Top 5 clients" avec nom, plan, MRR, ancienneté

Style sobre, palette neutre (gris et bleu), une seule colonne sur mobile.
Utilise recharts pour le graphique.

Claude يفتح Artifact React ويُرَكّبه مباشرة. ترى dashboard يعمل — البيانات وهمية لكن البنية قابلة للاستخدام. للتوصيل ببيانات حقيقية، تستبدل الجداول الثابتة باستدعاءات API.

الخطوة 5 — Artifact SVG لمخطط تقني

Génère un SVG qui illustre l'architecture d'une stack web typique :
- À gauche : utilisateur (icône silhouette neutre stylisée)
- Au centre : serveur web Nginx
- Derrière Nginx : 2 conteneurs Node.js (load balancing)
- Plus loin : base PostgreSQL et cache Redis
- Flèches étiquetées entre chaque composant

Sobre, en noir et blanc avec une couleur d'accent bleu, dimensions 800x500.

الـ SVG يفتح في لوحة Artifact. يمكنك تنزيله، إدراجه في وثيقة، لصقه في slide. لـ tutoriel، wiki داخلي، توثيق منتج، اختصار مُقدَّر.

الخطوة 6 — اكتشاف Claude Design

Claude Design منتج أطلقته Anthropic Labs في أبريل 2026، مُخصَّص لتوليد visuels سريعة — maquettes، posters، slides، supports marketing. يتكامل مع Cowork.

Crée un poster A4 portrait pour annoncer une conférence ITSkillsCenter sur la cybersécurité,
le 15 mai 2026 à Dubaï.
- Titre principal : "Cybersécurité PME 2026"
- Sous-titre : "Les 10 contrôles essentiels"
- Date, lieu, intervenant : Malick Diallo
- Style sobre, fond bleu nuit, accents orange, typographie sans-serif moderne
- Pas d'image figurative — uniquement formes géométriques abstraites et typo

Design يُنتج البوستر. تُكرّر بالكلمات. التصدير النهائي يُعطي PDF جاهز للطباعة أو PNG للشبكات الاجتماعية. لـ freelance أو PME دون مصمّم داخلي، كسب وقت ضخم.

الخطوة 7 — ربط Artifacts وSkills للتقييس

التركيبة التي ترفع الـ rendu: إنشاء Skill « Branding » تُحدّد اللوحة، الخطوط، النبرة البصرية؛ واستدعاؤها لكل Artifact. راجع Skills Claude.

---
name: branding-itsk
description: Charte visuelle ITSkillsCenter à appliquer à tout Artifact ou support Claude Design : palette, polices, mise en page.
---

## Palette
- Bleu nuit : #0F1B3D
- Orange clair : #FF8C42
- Gris fond : #F5F5F5

## Polices
- Titres : Inter, semi-bold, justifiés à gauche
- Corps : Inter, regular, line-height 1.6

## Mise en page
- Marges intérieures généreuses (24px minimum)
- Pas plus de 3 niveaux de hiérarchie typographique
- Boutons CTA en orange, coins arrondis 8px

فعّل Skill، وكل التوليدات البصرية من هذه اللحظة تحترم الـ charte. تتوقّف عن امتلاك landing pages وslides وposters لا تتشابه.

الخطوة 8 — التصدير والنشر

حسب نوع Artifact، التصدير يأخذ أشكالًا مختلفة. HTML خالص: تنزيل .html تودعه في استضافتك. React: نسخ المكوّن، للدمج في مشروعك. SVG: نسخ الملف، إدراج في وثيقة. Markdown: نسخ/تنزيل، إلى wiki أو Notion.

لـ Claude Design، التصدير في عدة صيغ: PDF للطباعة، PNG عالي الدقة للشبكات الاجتماعية، SVG شعاعي للتعديلات اللاحقة، وأحيانًا Figma.

الخطوة 9 — الربط مع Cowork للأتمتة

للـ supports المتكررة، Cowork يستطيع قيادة Design. حالة استخدام: توليد كل جمعة بطاقة ترويج أسبوعية لـ LinkedIn، من متغيّر موضوعي للأسبوع.

À partir du thème de la semaine indiqué dans Drive (fichier "Themes hebdo 2026.xlsx",
colonne "Semaine en cours"), génère une carte LinkedIn 1200x630 pixels avec :
- Titre = thème de la semaine
- Sous-titre fixe : "ITSkillsCenter — Formations IT pour la région MENA"
- Charte branding-itsk activée
Dépose le PNG dans Drive dossier "Comms hebdo 2026".

Programmation : tous les vendredis 14h, fuseau Asia/Riyadh.

الآن، كل جمعة، Cowork يُولّد البطاقة ويودعها في المكان المتوقع. الـ community manager يستردّ، يُصادق بصريًا، ينشر. الوقت المتوسط ينخفض من 30 دقيقة إلى 5 دقائق لكل بطاقة.

الخطوة 10 — التحقق من إتقانك

ثلاثة معايير. الأول: ولّدت على الأقل 3 Artifacts مختلفة (HTML، React أو SVG، Design) مُستخدَمة فعلًا. الثاني: فهمت انضباط التكرار — تغييرات مستهدفة، أبدًا « أعد كل شيء أفضل ». الثالث: لديك حالة استخدام متكررة شبه آلية على الأقل.

أخطاء شائعة

الخطأ	السبب	الحل
Artifact ينحرف بعد تكرارات	طلبات عريضة جدًا	طلبات مستهدفة: « عدّل فقط X »
صفحة HTML لا تُعرض عند التصدير	مرجع لـ asset خارجي غير مُضمَّن	اطلب صراحةً « ملف مستقل »
charte بصرية تتغيّر من livrable لآخر	لا Skill branding	أنشئ Skill تُشفِّر الـ charte
أداء بطيء لـ Artifact React معقد	منطق كثير في مكوّن واحد	قسّم في مكوّنات فرعية
Design يُنتج visuels تصويرية غير مرغوبة	prompt غامض جدًا	حدّد « أشكال هندسية فقط »
تصدير Figma غير متاح	الخطة لا تدعمه	تحقّق من الإعدادات؛ SVG كبديل

ثلاث نقاط للسياق العربي

لـ PME أو وكالة، الثنائي Artifacts + Design يفتح حالات استخدام ملموسة. أولًا: الدعامات التجارية للردّ على مناقصة. تُعطي Claude الإطار (عرض تقني، تخطيط، ميزانية)، يُخرج لك في دقائق عرضًا نظيفًا، في charte، قابلًا للتصدير PDF. ثانيًا: دعامات التكوين. إذا تُنشّط جلسات، slides يمكن توليدها من Design. ثالثًا: flyers وملصقات الأحداث المجتمعية — رمضان، الأعياد الوطنية، رجوع المدارس.

للـ rendu طباعي، الخطوط ليست مشكلة — مُضمَّنة في PDF النهائي. للمحمول، فضّل خطوط ويب قياسية (Inter، Roboto، Cairo، IBM Plex Sans Arabic) لضمان rendu متماسك. خط Cairo أو Tajawal ممتاز للمحتوى العربي.

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

هل Artifacts HTML تستطيع استدعاءات API خارجية؟
نعم، في حدود sandbox المتصفّح. يمكنك fetch APIs عامة (CORS سامح). لـ APIs موثَّقة، الأفضل استخراج الكود HTML ونشره عندك.

هل Claude Design قوي مثل Figma؟
لا، ولا يسعى لذلك. Figma أداة مهنية للمصممين الذين يُكرّرون بدقة. Claude Design أداة إنتاج سريع تُخرج visuel قابل للاستخدام في دقائق. أدوات مكمّلة، ليست متنافسة.

هل هناك حد لحجم Artifact؟
عمليًا نعم. ما بعد بضع مئات أسطر، الجودة تتدهور. قسّم في عدة Artifacts.

هل Artifacts خاصة؟
نعم افتراضيًا. تبقى في محادثتك، متاحة فقط لك.

هل أُحوّل Artifact HTML إلى صفحة WordPress؟
نعم — تنسخ الكود HTML/CSS، تلصقه في كتلة HTML مخصصة في Gutenberg أو Elementor.

Artifacts وClaude Design خطوة بخطوة: توليد UI وdashboards وmini-apps (2026)