uikit.studio
المعرض

Lime

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

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

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

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

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

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

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

لقطات

Lime landing
landing
Lime dashboard
dashboard
Lime components
components

الألوان

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

50
100
200
300
400
500
600
700

فاتح

primary#c8f135
mark#c8f135
background#f5f3ea
foreground#0f0f0c
card#ffffff
muted#ece9dd
border#e2ded0

داكن

background#0e0e0b
foreground#f4f3ea
card#18180f
primary#c8f135
muted#1f1f15
border#2b2b1e

الخطوط

The quick brown fox

Bricolage Grotesque

العناوين

The quick brown fox jumps over the lazy dog

Inter

النص

const ship = () => fast

JetBrains Mono

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

الموجّه

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

A limey digital-business-card kit — warm cream + near-black ink + a vivid acid-lime accent, heavy Hanken Grotesk display, monospace micro-labels, highlight-marker headings, a marquee and dark bento sections. React-first. Full dark mode and EN/AR + RTL. Ship landing, pricing, dashboard, and a components showcase.

  1. 1Forked an existing kit with `uikit-cli new`, then reskinned its identity.
  2. 2Tokens (tokens.json) → theme.css: lime brand scale, cream/ink, dark block, [dir=rtl] Arabic font swap, Hanken Grotesk display.
  3. 3i18n (en + ar): a digital-card narrative — taps, designs, NFC/QR, lead capture.
  4. 4Reused the design system: cn, Button, Card, Input, Badge, Pill, Mark, Marquee, Container; Navbar/Footer/StatCards blocks.
  5. 5Four pages: Landing (hero · marquee · designs grid · dark bento · CTA), Pricing, Dashboard, Components showcase. Validated with `uikit-cli validate`.

وش فيها

المكوّنات

ButtonCardInputBadgePillMarkMarqueeContainer

الكتل

NavbarFooterStatCards

القوالب

Landing/
Pricing/pricing
Dashboard/dashboard
Showcase/components