> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# ما هو Flowstep؟

> Flowstep هي أداة تصميم قائمة على الذكاء الاصطناعي تولّد واجهات مستخدم محترفة من موجّهات نصية. تعرّف على ما تفعله، ومن يستطيع استخدامها، وما الذي يمكنك بناؤه باستخدامها.

<iframe src="https://www.youtube.com/embed/ziyHZVaSbvQ" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

صِف الشاشة التي تريدها، واحصل على واجهة مصممة في ثوان.

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

## ما يمكنك فعله مع Flowstep

* **توليد الشاشات من نص** — صِف ما تريد، واحصل على واجهة مصممة في ثوان
* **تحسين التصميم من خلال موجّهات أو تعديلات مباشرة** — صقّل التخطيطات والنصوص والأنماط دون مغادرة لوحة الرسم
* **معاينة كنموذج أولي تفاعلي** — Flowstep يربط الشاشات الخاصة بك في تدفق قابل للنقر تلقائياً. انظر [النماذج الأولية](/ar/prototypes).
* **الاتصال بـ IDE الخاص بك عبر MCP** — توليد وتعديل الشاشات من Cursor أو Claude Code أو Windsurf أو Claude Desktop. انظر [خادم MCP](/ar/mcp/overview).
* **التصدير إلى Figma أو كود أو ملفات صور** — الصق مباشرة في ملف Figma موجود، أو صدّر الكود، أو نزّل الشاشات بصيغة PNG/JPG
* **المشاركة برابط واحد** — المراجعون لا يحتاجون إلى حساب Flowstep للعرض أو التعليق

## من يستخدم Flowstep

* **المطورون** الذين يبنون واجهة مستخدم للمنتج بدون مصمم متوفر، أو الذين يريدون تحديد الشاشة بصرياً قبل تنفيذها
* **مديرو المنتجات والمؤسسون** الذين يتواصلون بالأفكار بصرياً أو يتحققون من صحة فكرة
* **المصممون** الذين يتخطون الصفحة الفارغة — ابدأ من تخطيط مولّد وعدّل من هناك

<Note>
  لا يُتطلب خبرة تصميمية. إذا كنت تستطيع وصف الشاشة بلغة إنجليزية عادية، فإن Flowstep يستطيع توليدها.
</Note>

## إلى أين تتجه الآن

<CardGroup cols={2}>
  <Card title="البدء السريع" icon="rocket" href="/ar/getting-started">
    توليد أول شاشة لك في أقل من خمس دقائق.
  </Card>

  <Card title="خادم MCP" icon="terminal" href="/ar/mcp/overview">
    استخدم Flowstep من Cursor أو Claude Code أو أي عميل متوافق مع MCP.
  </Card>

  <Card title="توليد التصاميم" icon="wand-magic-sparkles" href="/ar/generating-designs">
    كيفية كتابة موجّهات تنتج الشاشات التي تريدها فعلاً.
  </Card>

  <Card title="تكامل Figma" icon="figma" href="/ar/figma-integration">
    الصق تصاميم Flowstep في ملف Figma موجود برمز واحد.
  </Card>
</CardGroup>
