يمكنك الانتقال من تصميم Figma إلى موقع ويب مباشر ومنتشر في فترة ما بعد الظهيرة باستخدام Claude — بدون الحاجة إلى خبرة برمجية. سير العمل بسيط: صمّم في Figma، ثم صدّر أو صف التصميم إلى Claude، وأنشئ الكود، وانشره على Vercel أو Netlify. كل ذلك مجاني تماماً إذا استخدمت النسخ المجانية.
الناس يشاركون مقاطع "موقع بقيمة 5000 دولار في ساعتين" على X، لكن معظمهم يتخطون الخطوات الفعلية. هذا الدليل يملأ هذه الفجوة. كل موجه مضمن، وكل نقطة قرار موضحة، والمقايضات صادقة.
لماذا يعمل هذا الآن (ولم يعمل قبل سنة)
قبل سنة، تحويل التصميم إلى كود باستخدام الذكاء الاصطناعي يعني لصق لقطة شاشة والحصول على تقريب تقريبي يحتاج ساعات من التنظيف. اليوم، نافذة السياق بـ 1 مليون رمز في Claude تعني أنه يمكنك إدخال نظام تصميم كامل — الألوان والطباعة والمسافات وتفاصيل المكونات — والحصول على كود جودة الإنتاج يطابق تصميمك بشكل وثيق في المحاولة الأولى.
الفكرة الرئيسية: جودة ما تحصل عليه تعتمد بالكامل تقريباً على مدى جودة وصفك للتصميم. الأوصاف الغامضة تنتج مواقع غامضة. الأوصاف المحددة والمنظمة تنتج مواقع محددة ومصقولة.
ما تحتاجه
ثلاث أدوات، جميعها بها نسخ مجانية:
Figma — لتصميمك. النسخة المجانية تعمل بشكل جيد. إذا لم يكن لديك تصميم، احصل على قالب مجاني من مجتمع Figma وخصصه.
Claude — لإنشاء الكود. النسخة المجانية تعطيك Sonnet، التي تتعامل مع هذا بشكل جيد. Pro (20 دولار/شهر) تعطيك Opus 4.7 للمواقع الأكثر تعقيداً.
Vercel أو Netlify — للنشر. كلاهما له نسخة مجانية. صل مستودع GitHub الخاص بك، ادفع الكود، والموقع يبدأ التشغيل.
الخطوة 1: تحضير تصميم Figma الخاص بك
قبل إشراك Claude، نظم ملف Figma الخاص بك. هذه الخطوة تحدد جودة كل ما يتبعها.
يجب أن يكون لديك صفحات محددة بوضوح (الصفحة الرئيسية، حول، اتصل، إلخ)، مسافات وتنسيق متسق، لوحة ألوان مرئية (لاحظ قيم hex الدقيقة)، خطوط محددة، ونقاط كسر سريعة للسطح والجوال إن أمكن.
لا تقلق بشأن الكمال بالبكسل. Claude يتعامل مع تفاصيل التنفيذ بشكل جيد. ما يهم هو أن يوصل تصميمك البنية والهرمية والأسلوب البصري بوضوح.
نصيحة احترافية: امنح طبقات Figma الخاصة بك أسماء ذات معنى. "قسم البطل" و"بطاقات الميزات" و"جدول التسعير" مفيدة بكثير عندما تكتب الموجهات أكثر من "Frame 247".
الخطوة 2: تصدير معلومات التصميم الخاصة بك
Claude لا يمكنه قراءة ملف Figma مباشرة، لذا تحتاج إلى ترجمة التصميم إلى معلومات يمكن لـ Claude أن يعمل بها. لديك ثلاث طرق، من الأسهل إلى الأكثر دقة:
الطريقة أ: لقطة شاشة + وصف. خذ لقطات شاشة بملء الصفحة لكل صفحة في تصميمك. احملها إلى Claude جنباً إلى جنب مع وصف مكتوب للتخطيط والألوان والتفاعلات. هذه أسرع طريقة وتعمل بشكل مفاجئ.
الطريقة ب: تصدير Figma Dev Mode. إذا كان لديك خطة Figma مدفوعة، استخدم Dev Mode لتصدير قيم CSS وعلامات التباعد ومواصفات المكونات. ادفع هذه إلى Claude جنباً إلى جنب مع لقطات الشاشة للحصول على مخرجات أكثر دقة.
الطريقة ج: مواصفات التصميم المكتوبة. اكتب وصفاً مفصلاً لكل قسم — رأس، بطل، ميزات، شهادات، تذييل — بما في ذلك الألوان والخطوط والأحجام والتخطيط. هذا يستغرق وقتاً أطول لكنه يعطيك السيطرة الأكثر على المخرجات. إذا كنت تبني بدون تصميم Figma، هذا هو طريقك.
الخطوة 3: اكتب موجهك الأولي
هنا حيث يخطئ معظم الناس. يكتبون "بناء موقع يبدو مثل هذه اللقطة" ويحصلون على مخرجات عامة. إليك هيكل الموجه الذي ينتج بشكل متسق نتائج عالية الجودة:
بناء موقع [رقم]-صفحة مع المواصفات التالية:
نظام التصميم:
- اللون الأساسي: [hex]
- اللون الثانوي: [hex]
- الخلفية: [hex]
- النص: [hex]
- الخط: [اسم الخط] للعناوين، [اسم الخط] للنص
- نصف قطر الحد: [قيمة]
- مقياس التباعد: [قيم]
الصفحة 1 — الرئيسية:
- قسم البطل: [الوصف الدقيق — نص العنوان، النص الفرعي، نص زر CTA، معالجة الخلفية]
- قسم الميزات: [رقم] البطاقات، كل واحدة تحتوي على [رمز/صورة، عنوان، وصف]
- الشهادات: [وصف التخطيط]
- قسم CTA: [الوصف]
- التذييل: [الروابط والتخطيط]
الصفحة 2 — حول:
[نفس مستوى التفاصيل]
التقني:
- استخدم Next.js مع Tailwind CSS
- سريع الاستجابة للجوال
- تمرير سلس بين الأقسام
- جميع الصور كمربعات نائبة بألوان خلفية (سأضيف صوراً حقيقية لاحقاً)كلما كنت أكثر تحديداً حول ما يراه المستخدم، كان الإخراج أفضل. لا تصف الكود — اصف التجربة. إذا كنت تحتاج إلى مساعدة في شحذ هذا الموجه قبل إرساله، يمكن لمحسّن الموجه المجاني الخاص بنا أن يساعد في تنظيمه للحصول على نتائج أفضل.
الخطوة 4: المراجعة والتكرار
المخرجات الأولى لـ Claude عادة ما تحتوي على 60–80% من التصميم الخاص بك. بقية 20–40% تأتي من التكرار. هذه هي الخطوة حيث تنتهي معظم برامج تعليمية "vibe coding"، لكنها حيث تحدث الجودة الحقيقية.
راجع المخرجات بفحص ثلاثة أشياء: هل يطابق التخطيط تصميمك؟ هل تشعر الألوان والطباعة بالصواب؟ هل تبدو جيدة على الجوال؟
ثم كرر مع تعليقات محددة. لا تقل "اجعله أفضل". قل:
- "قسم البطل يحتاج إلى المزيد من الحشو العمودي — أضف 120px أعلى وأسفل"
- "بطاقات الميزات يجب أن تكون في شبكة 3 أعمدة على سطح المكتب، عمود واحد على الجوال"
- "زر CTA يجب أن يكون لديه تأثير عند التحويم — أغمق الخلفية بنسبة 10% وكبر قليلاً"
- "روابط التذييل يجب أن تكون مرتبة في 4 أعمدة: المنتج، الشركة، الموارد، القانونية"
كل جولة تعليقات يجب أن تعالج 3–5 مشاكل محددة. ثلاث جولات عادة ما تحصل على 95% من التصميم الخاص بك.
تحصل على القيمة من هذا؟ نحن ننشر واحد متعمق واحد في الأسبوع حول سير عمل الذكاء الاصطناعي والأدوات والأدلة العملية. انضم إلى القراء الذين يحصلون عليه أولاً →
الخطوة 5: إضافة محتوى وصور حقيقية
استبدل نص النائب بنسختك الفعلية. استبدل مربعات الصور النائبة بصور حقيقية. إذا كنت تحتاج إلى مساعدة في كتابة نسخة الموقع، Claude ممتاز في هذا — ادفع له وصف علامتك التجارية واطلب نسخة الصفحة الرئيسية التي تطابق نبرتك.
للصور، استخدم مخزون مجاني من Unsplash أو Pexels، أو أنشئ صوراً مخصصة باستخدام أداة صور الذكاء الاصطناعي. اترك ملفات الصور في مجلد /public في المشروع وحدّث سمات src.
الخطوة 6: النشر بنقرة واحدة
إذا استخدمت Next.js (موصى به)، فإن النشر على Vercel يستغرق 60 ثانية:
- ادفع الكود الخاص بك إلى مستودع GitHub
- انتقل إلى vercel.com وسجل الدخول باستخدام GitHub
- انقر فوق "استيراد مشروع" وحدد المستودع الخاص بك
- Vercel يكتشف تلقائياً Next.js ويضبط كل شيء
- انقر على "نشر"
موقعك مباشر الآن مع عنوان URL .vercel.app. اربط مجالاً مخصصاً في إعدادات Vercel إذا كان لديك واحد.
Netlify يعمل بنفس الطريقة تقريباً — استيراد من GitHub، كشف تلقائي للإطار، نشر. كلا المنصتين يتعاملان مع SSL والـ CDN والنشر المستمر تلقائياً. في كل مرة تدفع إلى GitHub، يتم تحديث الموقع الخاص بك.
غير متأكد من منصة النشر التي تستخدمها؟ كتبنا مقارنة كاملة: أين تنشر بعد Vibe Coding؟
الأخطاء الشائعة التي تعثر على الناس
1. إعطاء Claude لقطة شاشة بدون سياق مكتوب. لقطات الشاشة تساعد، لكن Claude يحتاج إلى أوصاف مكتوبة للألوان والخطوط والمسافات والتخطيط لإنتاج كود دقيق. لقطة الشاشة هي مرجع — النص هو التعليمات.
2. محاولة بناء كل شيء في موجه واحد. موقع بـ 6 صفحات مع الرسوم المتحركة والنماذج و CMS كثير جداً لممر واحد. بناء صفحة تلو الأخرى، قسم تلو الآخر. ابدأ مع الصفحة الرئيسية، احصل عليها بشكل صحيح، ثم انتقل إلى الصفحة التالية.
3. تخطي الاستجابة للجوال. إذا لم تذكر الجوال في موجهك، سيبني Claude تخطيطاً للسطح فقط. تضمن دائماً "سريع الاستجابة للجوال" في متطلبات التقني واختبر المخرجات بعرض 375px.
4. عدم اختبار التفاعلات. انقر فوق كل زر، املأ كل نموذج، مرر عبر كل صفحة. كود الذكاء الاصطناعي غالباً ما يبدو صحيحاً لكنه يحتوي على روابط معطلة أو نماذج غير وظيفية أو حالات تحويم مفقودة. اختبر قبل النشر.
5. الكمال قبل النشر. شحن في 90% والتكرار. نشرك الأول لا يحتاج إلى أن يكون مثالياً — يحتاج إلى أن يكون مباشراً. يمكنك دفع التحديثات في ثوان.
البناء للعملاء؟ اقرأ دليلنا عن 5 أخطاء أمان يرتكبها كل مشفر vibe قبل التسليم.
الخلاصة
سير عمل Figma-to-Claude-to-deploy هو أسرع طريقة لتحويل التصميم إلى موقع ويب عملي بدون كتابة الكود بنفسك. الجودة تعتمد على تحديد الموجهات الخاصة بك، وليس على مهارة البرمجة. ثلاث جولات من التكرار عادة ما تحصل عليك من المسودة الأولى إلى الإنتاج الجاهز.
ابدأ بمشروع بسيط — محفظة أو صفحة هبوط — واعمل من خلال الدورة الكاملة مرة واحدة. المرة الثانية ستستغرق نصف الوقت لأنك ستعرف بالضبط كيفية هيكلة الموجهات الخاصة بك.
غير متأكد من أداة الذكاء الاصطناعي الأفضل لسير العمل الخاص بك؟ خذ اختبار Model Picker الخاص بنا لمدة 60 ثانية لمعرفة ذلك، أو انظر الكامل مقارنة State of AI Models.
هذا ما نفعله كل أسبوع. واحد متعمق حول أدوات الذكاء الاصطناعي وسير العمل والآراء الصادقة — بدون هيبة، بدون حشو. انضم إلينا →
الإفصاح: بعض الروابط في هذا المقال هي روابط تابعة. نوصي فقط بالأدوات التي اختبرناها شخصياً واستخدمنا بانتظام. انظر سياسة الإفصاح الكاملة الخاصة بنا.