AI Open Guide
→ Claude · Claude Design

1في جملة واحدة

يمكن تسليم التصميم المكتمل إلى Claude Code، الذي يبنيه كموقع إلكتروني أو تطبيق حقيقي، فتتحول الصورة إلى الشيء نفسه.

2كلمات جديدة

  • تسليم (Handoff) — تمرير التصميم من Claude Design إلى Claude Code مع كل ما يحتاجه: التخطيط، الألوان، النص، الصور.
  • Claude Code — نسخة Claude التي تكتب البرامج وتشغّلها (الجزء 6). لا تحتاج إلى قراءة الكود لاستخدامه في هذا.
  • حزمة (Bundle) — الرزمة التي ينشئها التسليم. ملف واحد تعطيه لـ Claude Code.

3لماذا تحتاجه

هذا أقصر طريق من "أريد موقعًا إلكترونيًا" إلى امتلاك واحد: صفه (3.1)، اجعله يبدو صحيحًا (3.2)، اختبره كنموذج أولي (3.4)، سلّمه، ويبنيه Claude Code. لصفحة هبوط بسيطة، الطريق كله يستغرق ظهيرة واحدة، ولم يكتب أحد سطر كود واحدًا بيده.

4جرّبه الآن

(الخطط المدفوعة؛ مع إعداد Claude Code كما في الفصل 6.1)

  1. افتح صفحة الهبوط المكتملة من الفصل 3.1. استخدم قائمة التصدير أو المشاركة لإنشاء حزمة التسليم لـ Claude Code.
  2. افتح Claude Code (تبويب Code في التطبيق، أو تطبيق سطح المكتب) في مجلد (folder) فارغ.
  3. اكتب: ابنِ هذا التصميم كموقع إلكتروني ثابت. حافظ على التخطيط والألوان بالضبط. استبدل ساعات العمل والعنوان المؤقتين بـ: [تفاصيلك].
  4. افتح النتيجة في المتصفح.

5ماذا سترى

[الصورة قيد الإعداد: قائمة التسليم في Design، والموقع المبني مفتوحًا في المتصفح.] يقرأ Claude Code الحزمة، وينشئ الملفات، ويشغّل الموقع محليًا ويعرض لك العنوان لفتحه. تبدو الصفحة مثل التصميم، والآن يمكن للأزرار أن تفعل أشياء حقيقية (نموذج حجز، رابط خريطة).

6انتبه

  • يحتاج الموقع الإلكتروني إلى مكان على الإنترنت (استضافة). يمكن لـ Claude Code إعداد ذلك معك، لكنه خطوة إضافية وأحيانًا بتكلفة صغيرة.
  • أبقِ التصميم والموقع متوافقين: غيّر التصميم، ثم سلّمه مرة أخرى، بدل تعديل الاثنين يدويًا.

7خطوة أبعد

الجزء 6 يشرح Claude Code بشكل صحيح: كيف يعمل في مجلداتك، وكيف تبقيه آمنًا، وكيف تجعله يتبع قواعدك في كل مرة.