uikit.studio
المعرض

صدى

من المجتمع جاهزة للذكاء الاصطناعي

حزمة نشر دافئة، عربية أولًا، لمنصّات الوسائط — بودكاست وأفلام وثائقية ونشرات بريدية وقراءات مطوّلة. ورق كريمي وحبر أسود ولمسة برتقالية حارّة وذهب خردلي لزرّ الاشتراك. خط IBM Plex Sans Arabic للواجهة مع خطّي ثمانية Sans/Serif للعناوين، وأغلفة طِباعية بدل صور المخزون. وضع داكن كامل، عربي/إنجليزي مع RTL. تطبيق React جاهز للتشغيل.

v1.0.0· MIT· tailwind + tokens· نصف القطر 0.75rem· react
افتح العرض المباشر المستودع

جاهزة للذكاء الاصطناعي

ابنِها بأداة الذكاء الاصطناعي

الصق هذا في Claude Code أو Cursor أو Codex. تقرأ الأداة مواصفة التصميم من الرابط، وتعيد نفس الألوان والخطوط ونصف القطر والمكوّنات بالضبط — داخل مشروعك أنت.

Build me a website styled exactly like this design: https://uikit.studio/kit/sada — it's agent-ready. Read the spec at https://uikit.studio/kit/sada/llms.txt and match its color tokens (light + dark), fonts, radius and components. Keep full dark mode and a responsive layout.

المواصفة

llms.txtموجز التصميم للأدوات الذكيةmanifest.jsonالألوان · الخطوط · المكوّنات

متاحة في كل صفحات الموقع عبر /llms.txt

عرض مباشر

uikit.studio/demos/sada/افتح

لقطات

صدى landing
landing
صدى other
other
صدى other
other
صدى other
other

الألوان

تدرّج لون العلامة، مع ألوان الوضعين الفاتح والداكن اللي تجيك مع الحزمة.

50
100
200
300
400
500
600
700
800
900

فاتح

primary#15110c
accent#fa541c
gold#e3b23c
background#f6f4ee
foreground#15110c
card#ffffff
muted#ece8df
border#e2ddd2

داكن

background#14110c
foreground#f4efe6
card#1d1813
accent#fd6f3a
muted#261f17
border#322a20

الخطوط

The quick brown fox

Thmanyah Sans

العناوين

The quick brown fox jumps over the lazy dog

IBM Plex Sans Arabic

النص

const ship = () => fast

IBM Plex Sans Arabic

أحادي / تسميات

الموجّه

الموجز اللي طلعت منه هذي الحزمة عبر uikit-standard.

An editorial audio & video media platform — cream paper, ink-black type, a hot-orange accent and a mustard 'subscribe' gold. IBM Plex Sans Arabic for UI with the Thmanyah Sans/Serif display faces. Dense editorial card grids with typographic show 'covers' instead of stock photos. Arabic-first, full RTL, full dark mode. Ship a home feed (hero, featured, episodes, newsletters, documentaries, articles), an articles index, a podcasts page, and a components showcase.

  1. 1Tokens (tokens.json) → theme.css (cream/ink/orange/gold, dark block, [dir=rtl] swap) → tailwind-preset.js; self-host fonts via design/fonts.css.
  2. 2i18n: ar + en dictionaries (Arabic primary) + a provider that flips dir/lang.
  3. 3Design system: cn, tones, Button, Badge, Input, Card, Container, Cover.
  4. 4Blocks (Wordmark, SectionHeader, Footer) → pages: Home, Articles, Podcasts, Components showcase.
  5. 5Agent-ready: uikit.json (validated), AGENTS.md, llms.txt, screenshots.

وش فيها

المكوّنات

ButtonBadgeInputCardContainerCover

الكتل

WordmarkSectionHeaderFooter

القوالب

Home/
Articles/articles
Podcasts/podcasts
Showcase/components