# نسق: نظام تصميم عربي RTL من الأساس، والـ AI بتاعك يقدر يقراه

> 390 مكوّن في الـ registry لـ React وVue وLaravel Blade وHTML العادي، والاتجاه من اليمين للشمال جزء من التصميم مش ترقيع بعدين، ومعاه MCP مجاني عشان Claude وCursor وCodex يقروا الدليل الحقيقي بدل ما يخمّنوا.

*2026-10-19T12:49:01Z*

# نسق: نظام تصميم عربي RTL من الأساس، والـ AI بتاعك يقدر يقراه

![نسق: نظام تصميم عربي مفتوح المصدر](/uploads/sites/13d0db6a-b13a-4039-8823-6029d9eaf306/media/nasaq-launch-og-ar.png)

أنا بعمل منتجات لمستخدمين عرب وإنجليز في نفس الوقت. ولسنين كان الروتين واحد: آخد UI kit أجنبي كويس، وبعدين أقعد أسبوع أصلّح فيه عشان يشتغل من اليمين للشمال. هوامش في الناحية الغلط، أسهم بتشاور ورا، date picker مابيتكلمش غير إنجليزي، وسعر دايماً بالدولار.

**نسق** هو نظام التصميم العربي اللي عملته بدل كده. بدأ كواجهة مشتركة لمنتجاتي، وكبر لحد ما بقى نظام كامل. النهارده هو مفتوح المصدر برخصة MIT، ودي أول مرة أكتب عنه بجد. والحكاية من البداية في [ليه عملت نسق](https://fadymondy.com/ar/blog/why-i-built-nasaq-arabic-rtl-design-system).

## 1. الـ RTL قاعدة، مش ترقيع

- `NasaqProvider` بيحدد اللغة، واللغة بتحدد الاتجاه: `en` من الشمال لليمين، و`ar` من اليمين للشمال. وبيلفّ مزوّد الاتجاه بتاع Base UI، فالقوايم والـ popovers والـ sliders بتتقلب صح.
- **الـ build بيفشل لو فيه classes فيزيائية.** فيه lint rule بترفض `ml-` و`text-right` و`border-l` وأخواتهم، وكمان الألوان الـ hex المباشرة. كل المكوّنات بتستخدم logical properties، فالـ RTL مايتكسرش بعدين من غير ما حد ياخد باله.
- المكوّنات جاية بنصوص عربي وإنجليزي، و`useT()` بتتعامل مع الجمع في العربي. الأيقونات اللي معناها اتجاه بتتقلب، واللوجو عمره ما بيتقلب.
- الأسعار بالدولار افتراضياً، وبالريال السعودي في العربي.
- الخطوط: Inter للنص اللاتيني وIBM Plex Sans Arabic للعربي. مفيش ملفات خطوط جوه الباكدج، والتطبيق بتاعك هو اللي بيحمّلها.

## 2. شكل واحد، على 4 تقنيات

أغلب الـ kits بتاعة React بس. نسق فيه نفس المكوّنات ونفس التوكنز في:

- **React 19** على Base UI وTailwind v4: `npm i @fadymondy/nasaq`، أو تاخد السورس نفسه بـ shadcn: `npx shadcn@latest add @nasaq/button`.
- **Vue 3**: مكوّنات `Nq*` مع `v-model`.
- **Laravel**: مكوّنات Blade زي `<x-nq::button>`، وLivewire بـ `wire:model`، وplugin لـ FilamentPHP (`composer require fadymondy/nasaq-php`).
- **HTML عادي + Alpine**: سطرين `<script>` وخلاص.

في الـ registry فيه 390 عنصر: فورمز، جداول بيانات، dashboards، شاشة شات AI، متجر وcheckout، كاشير POS، قوالب docs، وأقسام marketing. التوكنز مكتوبة DTCG JSON وبتطلع متغيرات CSS باسم `--nq-*`، مع light/dark وكثافة و17 ثيم براندات (أو تحط ألوانك إنت).

## 3. الـ AI بتاعك بيقرا الدليل

ده الجزء اللي أنا بستخدمه كل يوم. نسق عنده MCP server مجاني وعام. من غير تسجيل ومن غير مفتاح:

```bash
claude mcp add --transport http nasaq https://mcp.nasaqui.com/mcp
```

فيه 6 أدوات للقراية بس: `list_components`، `search_components`، `get_component` (الدليل والسورس لكل تقنية)، `get_foundation`، `list_tokens`، و`get_setup`. وبيشتغل كمان مع Cursor وVS Code وWindsurf وClaude Desktop، وفيه نسخة offline: `npx -y @fadymondy/nasaq-mcp`.

الفرق بسيط: من غيره، الـ agent بيخمّن الـ props من ذاكرته. معاه، بيسأل `get_component` الأول ويكتب كود ماشي على الـ API الحقيقي، بالتقنية الصح، وبـ logical properties.

وفيه كمان plugin لـ Claude Code وCodex فيه skills وأوامر زي `/nasaq:new-site` و`/nasaq:audit-ui`:

```bash
/plugin marketplace add fadymondy/nasaq-plugin
```

## 4. نسق ستوديو: CMS بلغتين، والـ agent بتاعك يقدر يديره

نسق ستوديو (studio.nasaqui.com) هو الجزء المستضاف: تدير محتوى موقعك بالعربي والإنجليزي من مكان واحد، مع ثيمات، وpage builder، وقوايم، وredirects، وSEO، ونشر مجدول.

عنده MCP server خاص بيه، ولوحة **Connect your agent** بتديك مفتاح API ليه. المفاتيح ليها صلاحيات محددة (`cms:read` و`cms:write` و`cms:admin`، والـ admin مقفول افتراضياً)، وممكن تنتهي بعد 30 أو 90 أو 365 يوم، وبتظهر مرة واحدة بس. والجزء اللي يهمني أكتر: **المفتاح عمره ما يعمل أكتر من اللي دور صاحبه يسمح بيه دلوقتي.** ده بيتراجع مع كل طلب، فلو حد اتنقل من admin لـ editor، مفاتيحه بتخسر صلاحيات الـ admin فوراً. وبس الـ owners والـ admins هما اللي يقدروا يعملوا مفاتيح.

## ابدأ بسرعة

```bash
# مرة واحدة: الـ preset (التوكنز والثيم والـ provider)
npx shadcn@latest add https://docs.nasaqui.com/r/nasaq.json

# وبعدين أي مكوّن
npx shadcn@latest add https://docs.nasaqui.com/r/button.json
```

أو ثبّت الباكدج:

```bash
pnpm add @fadymondy/nasaq
```

```tsx
import { Button, NasaqProvider } from "@fadymondy/nasaq/web";
import "@fadymondy/nasaq/web/styles.css";
```

## الحدود بصراحة

- **أغلب المكوّنات لسه beta.** 49 منهم stable وماشيين على semver، والباقي ممكن تتزاد عليهم props.
- المشروع جديد. لسه مافيش community، والـ maintainer واحد (أنا). الـ issues والـ PRs مرحب بيها جداً.
- مافيش CLI خاص بنسق. التثبيت عن طريق npm أو shadcn أو Composer.
- الستوديو مستضاف ومش مفتوح المصدر.

## أسئلة شائعة

### هل نسق مجاني ومفتوح المصدر؟
مكتبة المكوّنات والتوكنز والـ MCP server برخصة MIT. الكود على [GitHub](https://github.com/fadymondy/nasaq).

### هل يشتغل مع مشروع shadcn/ui عادي؟
أيوه. هو shadcn registry، فالأمر `npx shadcn@latest add @nasaq/button` بينسخ السورس في مشروعك وإنت اللي بتملكه. ضيف الـ namespace اسمه `@nasaq` في `components.json` الأول.

### إزاي نسق بيتعامل مع الـ RTL؟
كل مكوّن بيستخدم logical properties، وفيه lint rule بتفشّل الـ build لو لقت classes فيزيائية زي `ml-` أو `text-right`. والـ `NasaqProvider` بيحدد الاتجاه من اللغة.

### بيدعم أنهي تقنيات؟
React 19 وVue 3 وLaravel (Blade وLivewire وplugin لـ FilamentPHP) وHTML عادي مع Alpine.

### إيه اللي الـ MCP server بيديه للـ AI agent؟
6 أدوات للقراية بس: تعرض المكوّنات وتدوّر فيها وتقرا دليل وسورس كل مكوّن للتقنية بتاعتك وتقرا التوكنز وأدلة الإعداد. وهو عام ومن غير تسجيل.

### هل هو جاهز للإنتاج؟
أنا بستخدمه في منتجاتي. 49 مكوّن stable والباقي beta، فشوف حالة المكوّن قبل ما تعتمد عليه.

## الخطوات الجاية

- الموقع والتوثيق: [nasaqui.com](https://nasaqui.com/ar) · [docs.nasaqui.com](https://docs.nasaqui.com)
- الكود: [github.com/fadymondy/nasaq](https://github.com/fadymondy/nasaq)
- الـ MCP: [mcp.nasaqui.com](https://mcp.nasaqui.com)
- الستوديو: [studio.nasaqui.com](https://studio.nasaqui.com)
- Product Hunt: [نسق على Product Hunt](https://www.producthunt.com/products/nasaq)
- مقال المؤسس: [ليه عملت نسق](https://fadymondy.com/ar/blog/why-i-built-nasaq-arabic-rtl-design-system)

لو فريقك بيعمل منتج عربي وإنجليزي ومحتاج مساعدة في الواجهة أو الـ RTL أو إنك تشغّل AI agents عليه، [أنا باخد النوع ده من المشاريع](https://fadymondy.com/ar/services?utm_source=nasaqui&utm_medium=blog&utm_campaign=nasaq-launch-oct20).

---

Source: https://nasaqui.com/ar/blog/nasaq-arabic-rtl-design-system-mcp