uikit.studio
المعرض

Spark

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

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

v0.2.0· MIT· tailwind + tokens· نصف القطر 1rem· react / vue / web-components
افتح العرض المباشر المستودع

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

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

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

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

لقطات

Spark landing
landing

الألوان

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

50
100
200
300
400
500
600
700

فاتح

primary#f97316
mark#fb923c
background#faf6ee
foreground#181410
card#ffffff
muted#f1ebe0
border#e7dfd2

داكن

background#14100b
foreground#f7efe2
card#1d1812
primary#fb923c
muted#241d15
border#322a1f

الخطوط

The quick brown fox

Space Grotesk

العناوين

The quick brown fox jumps over the lazy dog

Inter

النص

const ship = () => fast

JetBrains Mono

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

الموجّه

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

A bold marketing kit — big type, orange, gradient accents, cream + ink, a grotesk display + monospace labels, highlight-marker headings. React-first. Full dark mode and EN/AR + RTL. Ship landing, pricing, dashboard, and a components showcase.

  1. 1Tokens (tokens.json) → theme.css (display/sans/mono fonts, --color-mark, dark block, [dir=rtl] Arabic font swap) → tailwind-preset.js.
  2. 2i18n: en + ar dictionaries + a provider that flips dir/lang and toggles language.
  3. 3Design system: cn, Button, Card, Input, Badge, Pill, Mark, Marquee, Container.
  4. 4Blocks (Navbar, Footer, StatCards) → four pages: Landing, Pricing, Dashboard, Components showcase.
  5. 5Consumer skill (.claude/skills/spark), registry, screenshots, validated uikit.json. Mirrored to Vue and Web Components.

وش فيها

المكوّنات

ButtonCardInputBadgePillMarkMarqueeContainer

الكتل

NavbarFooterStatCards

القوالب

Landing/
Pricing/pricing
Dashboard/dashboard
Showcase/components