Contact Us
Webflow Premium Partner Ehab Fayez
This content is not available in your language yet. Showing the original Arabic version.
Back to Blog دليل عملي

إزاي تبني بورتفوليو احترافي باستخدام AI في ٢٠٢٦

٣ يناير ٢٠٢٦ · ٩ دقائق

كل مصمم محتاج بورتفوليو. بس أغلب المصممين بيقعوا في فخ من اتنين:

  1. بيستخدموا template جاهز — وبيطلع شكله زي كل حد تاني
  2. بيفضلوا يأجلوا — لأنهم مش بيعرفوا يكودوا أو مش عارفين يبدأوا منين

في ٢٠٢٦، مفيش عذر. باستخدام AI، تقدر تبني بورتفوليو مخصص ومميز في أيام.

الخطوة ١: حدد هويتك

قبل ما تفتح أي أداة، اسأل نفسك:

  • أنت بتتكلم مع مين؟ Startups؟ شركات كبيرة؟ agencies؟
  • إيه اللي بيميزك؟ تخصصك؟ أسلوبك؟ خبرتك في مجال معين؟
  • إيه الانطباع اللي عايز تسيبه؟ Professional؟ Creative؟ Technical؟

اكتب الإجابات دي — هتستخدمها في كل خطوة جاية.

الخطوة ٢: صمم في Figma

ابدأ بالتصميم. حتى لو هتستخدم AI في الكود، لازم تكون عارف شكل الموقع هيبقى إيه.

mockup لبورتفوليو على أجهزة مختلفة

نصائح:

  • ابدأ بـ mobile-first — أغلب الناس هتشوف بورتفوليوك من الموبايل
  • خلي الـ above the fold واضح — اسمك، تخصصك، و CTA واحد
  • متحطش كل شغلك — اختار ٤-٦ projects أحسن من ٢٠ project متوسطين

الخطوة ٣: اكتب المحتوى مع Claude

هنا AI بيوفر عليك ساعات. افتح Claude وقوله:

"أنا مصمم UX/UI متخصص في [تخصصك]. عايز أكتب محتوى لموقعي الشخصي. أسلوبي [رسمي/كاجوال/مزيج]. الجمهور المستهدف [نوع العملاء]. اكتبلي: bio قصير، about page، وأوصاف لـ ٤ مشاريع."

Claude هيديك draft ممتاز تقدر تعدل عليه. الميزة إنه بيكتب بالعربي بطريقة طبيعية — مش ترجمة.

مهم: متسبش Claude يكتب كل حاجة. صوتك لازم يكون واضح. عدّل، أضيف تفاصيل شخصية، خلي المحتوى يحسسك إنه أنت.

الخطوة ٤: ابنِ الموقع

عندك كذا خيار:

الخيار A: Claude Code (اللي أنا بستخدمه)

لو عايز موقع مخصص بالكامل، Claude Code هو الحل. اديه الـ Figma design (عن طريق MCP أو screenshots) وقوله يبنيه.

المميز: كنترول كامل، سرعة فائقة، النتيجة unique.
المطلوب: فهم أساسي لـ HTML/CSS، terminal.

الخيار B: Framer + AI

لو مش عايز تلمس كود خالص، Framer عنده AI features بتخليك تبني pages بسرعة.

المميز: سهل، drag & drop، hosting included.
المطلوب: اشتراك شهري.

الخيار C: Webflow

لو عايز الـ middle ground — control أكتر من Framer، كود أقل من Claude Code.

المميز: قوي جداً، الـ CMS ممتاز، interactions متقدمة.
المطلوب: learning curve.

الخطوة ٥: الـ SEO

أغلب المصممين بينسوا الـ SEO — وده غلطة كبيرة. لو حد بيدور على "مصمم UX عربي" ومش لاقيك، كأنك مش موجود.

لوحة تحليلات SEO بتوضح أداء الموقع

الأساسيات:

  • كل صفحة ليها title و meta description فريدين
  • الصور ليها alt text وصفي
  • الموقع سريع (Core Web Vitals)
  • الـ URL structure نظيفة ومفهومة
  • في sitemap.xml و robots.txt

Claude بيقدر يساعدك في كل ده — اطلب منه يراجع الـ SEO بتاع صفحاتك.

الخطوة ٦: Case Studies

أهم جزء في البورتفوليو. Case study كويسة بتفرق أكتر من ١٠ screenshots.

هيكل Case Study:

  1. المشكلة — إيه التحدي اللي العميل كان بيواجهه؟
  2. العملية — إزاي وصلت للحل؟ (research, wireframes, testing)
  3. الحل — إيه اللي صممته؟ (مع صور وتفاصيل)
  4. النتيجة — إيه اللي اتغير؟ (أرقام لو موجودة)

استخدم Claude عشان يساعدك تنظم أفكارك وتكتب كل case study بشكل مقنع.

الخطوة ٧: اطلق وروّج

بورتفوليو من غير زوار = مش موجود. بعد ما تطلق:

  • شاركه على LinkedIn مع post بيحكي القصة وراه
  • حطه في bio بتاعك في كل platform
  • اكتب مقالات (زي المدونة بتاعتي) عشان تجيب organic traffic
  • شاركه في communities التصميم العربية

أخطاء شائعة

  • تخلي AI يعمل كل حاجة — لازم يكون في لمسة شخصية
  • تستنى لما يبقى "perfect" — اطلقه ٨٠٪ وحسّنه بعدين
  • تنسخ بورتفوليو حد تاني — خلي صوتك وأسلوبك واضحين
  • تحط كل شغلك — Quality over quantity دايماً

الخلاصة: بناء بورتفوليو مميز مبقاش محتاج فريق أو ميزانية أو شهور. محتاج Figma + Claude + كام يوم شغل مركز. ابدأ النهارده.

Share Article

Share on X
Share on LinkedIn
Share on Facebook
Share on WhatsApp
Share on Telegram
Copy Link

Subscribe to the Newsletter

Get the latest articles and tips directly in your inbox

Subscribe on YouTube

138K+ subscribers

Subscribe