نموذج أولي بدون فيغما: ابنِ منتجك وعرضك التقديمي بكلودPrototype Without Figma: Build Your MVP and Pitch Deck with Claude

المصطلحات

Design system (نظام التصميم)

مجموعة قرارات بصرية ثابتة: الألوان، الخطوط، المسافات والزوايا. تكتبها مرة واحدة وتطبقها على كل شاشة.

Design tokens (رموز التصميم)

قيم نظام التصميم مكتوبة كمتغيرات CSS، مثل لون أساسي أو حجم زاوية. أي تعديل فيها يظهر في كل مكان يستخدمها.

Tailwind CSS

مكتبة تنسيق تكتب فيها الشكل مباشرة داخل HTML بأسماء جاهزة. Claude يولّدها بسهولة والمطور يفهمها فوراً.

RTL

اتجاه الكتابة من اليمين إلى اليسار. الصفحة العربية تحتاجه حتى تنعكس المحاذاة وترتيب العناصر.

Developer handoff (التسليم للمطور)

الحزمة التي تعطيها للمطور ليبني المنتج الحقيقي: الشاشات، ملف نظام التصميم، صفحة الهبوط والعرض التقديمي.

الخطوات

1. 1

   الخطوة 1

   جهّز مساحة العمل على جهازك

   قبل أي شيء تحتاج مكاناً تحفظ فيه ما يولّده Claude وتعاينه فوراً في المتصفح. هذا الهيكل يفصل الشاشات عن العرض التقديمي عن صفحة الهبوط، والتسليم للمطور يصبح أسهل لاحقاً.

   شغّل هذه الأوامر في الـ terminal مرة واحدة في بداية كل مشروع:

   mkdir -p my-startup/{screens,pitch-deck,landing,assets/{icons,images,fonts}} cd my-startup npm install -g serve serve . -p 3000

   بعدها افتح http://localhost:3000 في المتصفح. أي ملف تحفظه داخل المجلد يظهر هناك مباشرة.

   نصيحة: اترك الـ server يعمل في نافذة terminal مستقلة طوال الجلسة.