uikit.studio
المعرض

Aurora

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

حزمة SaaS أنيقة وزجاجية — رمادي بارد وأزرق، خط Sora للعناوين، بطاقات زجاجية ولمسة تدرّج لوني. فاتح وداكن، عربي/إنجليزي مع RTL كامل. تطبيق React جاهز للتشغيل بصفحة هبوط وأسعار ولوحة تحكم ومعرض مكوّنات.

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

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

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

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

Build me a website styled exactly like this design: https://uikit.studio/kit/aurora — it's agent-ready. Read the spec at https://uikit.studio/kit/aurora/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/aurora/افتح

لقطات

Aurora landing
landing
Aurora dashboard
dashboard

الألوان

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

50
100
200
300
400
500
600
700

فاتح

primary#3b82f6
accent#6366f1
background#f5f8fd
foreground#0b1324
card#ffffff
muted#eef2fb
border#e2e8f5

داكن

background#060b16
foreground#e8eefb
card#0e1626
primary#60a5fa
accent#818cf8
border#1d2a44

الخطوط

The quick brown fox

Sora

العناوين

The quick brown fox jumps over the lazy dog

Inter

النص

const ship = () => fast

JetBrains Mono

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

الموجّه

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

A clean SaaS kit with a glassy dashboard. Blue primary (#3b82f6), Inter body + Sora display, glassmorphism cards, soft glass shadow, light + dark. React-first. Ship a dashboard and a landing page template, with EN/AR + RTL.

  1. 1Derived design tokens (colors, Sora/Inter, 1rem radius, soft glass shadow) → tokens.json, theme.css (v4) and tailwind-preset.js (v3).
  2. 2Built React components on a shared `cn` util: Button, Card, Input, Badge, Pill, Mark, Marquee, Container.
  3. 3Composed blocks (StatCards, Footer), then assembled the Landing, Pricing, Dashboard and Showcase templates.
  4. 4Wrote the bundled consumer skill (.claude/skills/aurora) so AI builds with the kit cheaply.
  5. 5Emitted uikit.json, validated it against the contract, and authored screenshots.

وش فيها

المكوّنات

ButtonCardInputBadgePillMarkMarqueeContainer

الكتل

StatCardsFooter

القوالب

Landing/
Pricing/pricing
Dashboard/dashboard
Showcase/components