أنا بنيت Design System كامل من screenshots باستخدام Claude + Figma MCP

في الـ live session دي، عملت حاجة كتير ناس بتسأل عنها: لو معنديش غير screenshots من أبليكيشن، أقدر أبني منهم design system كامل؟
الإجابة: أيوه. وبالـ AI.
مشيت في العملية خطوة بخطوة — من أول ما بدأت بصور ثابتة من تطبيق حقيقي، لحد ما وصلت لـ:
✦ Audit كامل للألوان والـ typography والـ spacing
✦ Design Tokens منظمة (Primitives → Alias → Semantic → Component)
✦ Components مبنية صح جوه Figma
✦ Screens مجمّعة من الـ components دي
كل ده باستخدام Claude Code + Figma Console MCP — يعني الـ AI بيشتغل معايا جوه Figma مباشرة: بيقرأ الملف، بيعمل audit، بينشئ tokens، بيبني components، وبيجمّع screens.
الـ session دي جزء من الـ Design Systems & Design Tokens Masterclass (الجولة التالتة) على Zomra — لو حابب تتعلم تبني design system صح من الأساس، الرابط تحت.

🔗 Links:

🎓 الماستركلاس على Zomra:
https://zomra.io/courses/master-design-systems-and-design-tokens

💬 جروب التيليجرام:
https://t.me/mohamedismailxdhttps://t.me/mohamedismailxd

🔌 Figma Console MCP (Southleft):
https://github.com/nicholasxwang/figma-console-mcp

🤖 Claude Code:
https://docs.anthropic.com/en/docs/claude-code

⏱️ Timestamps:
00:00 — Intro
06:05 — Tools
10:01 — Phases
10:30 — Audit & Tokens
22:20 — Components
30:00 — Verification
32:16 — Claude project structure
37:06 — Demo
48:06 — What AI can't do
01:01:16 — Design Systems Masterclass
#DesignSystems #DesignTokens #ClaudeCode #FigmaMCP #AI #UIDesign #ArabicDesign

Видео أنا بنيت Design System كامل من screenshots باستخدام Claude + Figma MCP канала Mohamed Ismail