وایب‌فارسیUI
v0.1 · پیش‌نمایش عمومی · رایگان و متن‌باز

کامپوننت‌های فارسی،
برای توسعه‌دهنده‌ها

راست‌چین از پایه؛ فونت و ارقام فارسی داخل خود قطعه است. فایل را کپی کنید، یا پرامپت انگلیسی را به Cursor و Claude بدهید تا همان را در پروژه بسازند. قوانین فارسی داخل پرامپت است؛ لازم نیست یادآوری کنید.

دیدن کامپوننت‌هاشروع در دو دقیقه
Next.js و ViteTailwind v4بدون وابستگی اضافهکد + پرامپت + MCP
کامپوننت
۰
کامپوننت
بلاک
۰
بلاک
انیمیشن
۰
انیمیشن
پس‌زمینه
۰
پس‌زمینه
قالب
۰
قالب
سیستم طراحی
۰
سیستم طراحی
۱۰۰٪
رایگان

داشبورد فروش

شنبه، ۲۸ شهریور ۱۴۰۵

فروش امروز

۱۲٬۴۵۰٬۰۰۰تومان

۱۸٪

سفارش‌های باز

۲۴۶

۱۲٪

مشتریان جدید

۳۸

۴٪

میانگین سبد

۱٬۸۶۰٬۰۰۰تومان

۶٪
شهریور ۱۴۰۵

فروش هفتگی

شنبه تا جمعه

رشد ۲۳٪
ش
ی
د
س
چ
پ
ج
هدف ماه۷۲٪

لینک پرداخت پیامکی

پیش‌شماره‌ی ایران، با تشخیص اپراتور

+98

اپراتور: همراه اول

شمارهمشتریمبلغوضعیت
#۱۴۰۵۲ممریم احمدی۲٬۸۹۰٬۰۰۰ تومانپرداخت‌شده
#۱۴۰۵۱ععلی رضایی۶۴۰٬۰۰۰ توماندر انتظار
#۱۴۰۵۰ننگار کریمی۱٬۲۱۵٬۰۰۰ تومانارسال‌شده
#۱۴۰۴۹ررضا موسوی۳٬۴۰۰٬۰۰۰ تومانپرداخت‌شده

قالب داشبورد فروشگاه · تقویم شمسی، تومان، شماره‌ی ایران؛ همه زنده

  • راست‌چین واقعی

    چیدمان و آیکون‌ها از پایه راست‌چین‌اند. یک dir روی کل صفحه کافی نیست.

  • تایپوگرافی فارسی

    وزن فونت و ارتفاع خط برای فارسی تنظیم شده؛ letter-spacing حروف را از هم جدا نمی‌کند.

  • اعداد و تقویم شمسی

    ارقام فارسی، جداکننده‌ی هزارگان، تومان و تاریخ شمسی داخل خود قطعه است.

  • رنگ از توکن

    هر رنگ از یک متغیر CSS می‌آید. تم تیره پیش‌فرض است؛ با چند خط عوضش می‌کنید.

۵۹ از ۵۹ کامپوننت

هر کارت یک کامپوننت زنده است

تصویر نیست؛ خود قطعه است. روی نام بزنید تا کد، پرامپت و راهنما را ببینید.

هر کدام کد، پرامپت و راهنمای راست‌چین دارد.

همه‌ی کامپوننت‌ها

دو خروجی برای هر کامپوننت

کد می‌خواهید یا پرامپت؟

اگر خودتان کد می‌زنید، فایل را کپی کنید و در پروژه بگذارید؛ همین دکمه است، نه نمونه. اگر با Cursor یا Claude کار می‌کنید، پرامپت انگلیسی را بدهید تا با سبک پروژه همان را بسازد. خروجی هر دو راست‌چین و فارسی است.

  • کدTypeScript، Tailwind، بدون وابستگی اضافه
  • پرامپتانگلیسی، با قوانین راست‌چین و فارسی داخلش
button.tsx
1import * as React from "react";2import { cn } from "@/lib/utils";34type Variant = "default" | "secondary" | "outline" | "ghost" | "brand" | "destructive";5type Size = "sm" | "md" | "lg" | "icon";67const variants: Record<Variant, string> = {8  default: "bg-primary text-primary-foreground hover:bg-primary/90",9  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border",10  outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",11  ghost: "hover:bg-accent hover:text-accent-foreground",12  brand: "bg-brand text-brand-foreground hover:bg-brand/90 shadow-[0_10px_28px_-12px_var(--brand)]",13  destructive: "bg-destructive text-white hover:bg-destructive/90",14};1516const sizes: Record<Size, string> = {17  sm: "h-8 px-3 text-[13px] rounded-md gap-1.5",18  md: "h-10 px-4 text-sm rounded-lg gap-2",19  lg: "h-12 px-6 text-base rounded-xl gap-2.5",20  icon: "size-10 rounded-lg",21};2223export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {24  variant?: Variant;25  size?: Size;26  asChild?: boolean;27}2829export function Button({ className, variant = "default", size = "md", type = "button", ...props }: ButtonProps) {30  return (31    <button32      type={type}33      className={cn(34        "inline-flex items-center justify-center whitespace-nowrap font-semibold transition-all duration-200",35        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",36        "disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",37        "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",38        variants[variant],39        sizes[size],40        className,41      )}42      {...props}43    />44  );45}

۸ بلاک

بلاک‌ها: بخش‌های آماده‌ی صفحه

هیرو، قیمت، پرسش‌های متداول، آمار، کارت ورود. هر کدام یک بخش کامل است. چندتایشان را پشت هم بگذارید؛ صفحه آماده است.

چند بلاک پشت هم، یک صفحه. هر کدام کد و پرامپت خودش را دارد.

همه‌ی بلاک‌ها

۳۹ انیمیشن

حرکت، به اندازه و در جهت درست

فقط CSS و React، بدون کتابخانه‌ی اضافه. همه از راست شروع می‌شوند و اگر سیستم «کاهش حرکت» داشته باشد خاموش می‌شوند.

هر کدام یک فایل کوچک است، با چند خط keyframe.

همه‌ی انیمیشن‌ها

۳۲ پس‌زمینه

پس‌زمینه‌هایی که متن را خفه نمی‌کنند

کم‌کنتراست و آرام، تا خط فارسی خوانا بماند. هر کدام یک کامپوننت کوچک است؛ داخل والد relative بگذارید. شیدرهای WebGL هم رنگ را از تم می‌گیرند و بدون کتابخانه کار می‌کنند.

با عوض شدن تم، رنگ‌شان هم عوض می‌شود.

همه‌ی پس‌زمینه‌ها

۲۴ قالب

صفحه‌های کامل، از همین قطعه‌ها

قالب‌ها با همین کامپوننت‌ها و توکن‌ها ساخته شده‌اند. تم را عوض کنید، همه‌ی صفحه‌ها با هم عوض می‌شوند. هر کدام را تمام‌صفحه باز کنید و کدش را بردارید.

  • داشبورد فروشگاه

    shop-dashboard

    آمار فروش، نمودار هفتگی، سفارش‌های اخیر و هدف ماهانه در یک نگاه.

    داشبوردجدولآمار

  • ورود و ثبت‌نام

    auth

    ورود با شماره‌ی موبایل و کد تأیید پیامکی، در دو مرحله.

    فرمکد تأیید

  • لندینگ استارتاپ

    startup-landing

    هیرو، سه ویژگی، سه پلن قیمت و پرسش‌های متداول.

    لندینگقیمتپرسش‌ها

  • صفحه‌ی قیمت‌گذاری

    pricing

    سه پلن با تومان، تغییر ماهانه/سالانه و جدول مقایسه.

    قیمتتب

  • چت هوش مصنوعی

    ai-chat

    گفت‌وگو با حباب‌های پیام، فراخوانی ابزار و جعبه‌ی پرامپت فارسی.

    چتاستریمپرامپت

  • فاکتور

    invoice

    پیش‌فاکتور قابل چاپ با تاریخ شمسی، جدول اقلام و جمع کل.

    چاپجدولشمسی

  • وبلاگ

    blog

    صفحه‌ی مطلب با فهرست مطالب، تایپوگرافی خواندنی و کارت نویسنده.

    محتواخواندن

  • پنل تنظیمات

    settings

    پروفایل، امنیت و اعلان‌ها با ناوبری کناری.

    فرمکلید

  • پرداخت

    checkout

    سبد → آدرس → پست/پیک → درگاه، با خلاصه‌ی سفارش چسبان و کد تخفیف.

    فروشگاهچندمرحله‌ای

  • فروشگاه

    store

    صفحه‌ی محصول به سبک فروشگاه‌های ایرانی: گالری، مشخصات، جعبه‌ی فروشنده با گارانتی و ارسال، سبد کشویی و کالاهای مشابه.

    فروشگاهمحصولسبد

  • ثبت‌نام پیامکی

    onboarding

    موبایل → کد تأیید → پروفایل → پایان، در یک کارت با مراحل.

    فرمکد تأیید

  • مدیریت سفارش‌ها

    admin-orders

    جدول داده با فیلتر تاریخ شمسی و وضعیت، نشان‌های وضعیت، منوی عمل و سه کارت آمار.

    ادمینجدولشمسی

  • رزرو نوبت

    booking

    سرویس، روز روی تقویم شمسی (جمعه‌ها تعطیل)، ساعت‌های خالی و تأیید با بیعانه.

    کلینیکسالنتقویم

  • کیف پول

    wallet

    کارت موجودی با شماره‌انداز، شارژ سریع، تراکنش‌ها با تاریخ شمسی و برداشت به شبا در پنجره.

    مالیشبا

  • صفحه‌های خطا

    error-pages

    ۴۰۴، ۵۰۰، آفلاین و حالت خالی؛ متن فارسیِ آدم‌وار و یک کار بعدی مشخص، نه «اوپس».

    ۴۰۴خالیآفلاین

  • قالب‌های ایمیل

    email

    کد تأیید، تأیید سفارش و بازیابی رمز؛ HTML جدولی با dir=rtl روی همه‌ی عناصر و استایل درون‌خطی، برای کلاینت‌های ایمیل.

    ایمیلRTLجدول

  • لندینگ حرفه‌ای

    saas-landing

    هیرو با تیتر ماسکی و ترمینال زنده، نوار مشتری‌ها، بنتوی ویژگی‌ها، پرتو اتصال بین سرویس‌ها، پشته‌ی نظرات و قیمت.

    لندینگانیمیشنبنتو

  • داشبورد مالی

    finance-dashboard

    ارزش دارایی با شماره‌انداز و دکمه‌ی پنهان‌کردن، نمودار ۱۴ روزه‌ی شمسی، جدول دارایی‌ها با اسپارک‌لاین، معامله‌ی سریع و تراکنش‌ها.

    داشبوردنمودارارز

  • سفارش غذا

    food-delivery

    صفحه‌ی رستوران به سبک اپ‌های سفارش غذا: امتیاز و زمان ارسال، دسته‌های چسبان، منو با افزودن سریع، سبد چسبان در دسکتاپ و کشوی پایین در موبایل.

    فروشگاهرستورانسبد

  • برد کارها

    kanban

    چهار ستون با کشیدن و رها کردن، منوی «انتقال به» برای کیبورد، برچسب، پیشرفت زیرکارها، تاریخ شمسی و کار عقب‌افتاده به رنگ خطا.

    پروژهکشیدنشمسی

  • صفحه‌ی دوره

    course

    صفحه‌ی دوره‌ی آموزشی: ویدئو، مدرس و امتیاز، سرفصل‌ها با درس‌های دیده‌شده و قفل، نظرات و کارت خرید چسبان با پیشرفت.

    آموزشویدئوقیمت

  • رسید پرداخت

    receipt

    صفحه‌ی بعد از پرداخت: تیک موفقیت با کاغذ رنگی، مبلغ، کد پیگیری کپی‌شدنی، تاریخ و ساعت شمسی، کارت و درگاه، دانلود و اشتراک‌گذاری.

    پرداختموفقیتپیگیری

  • بلیت سفر

    travel-search

    جست‌وجوی پرواز: مبدأ و مقصد با جابه‌جایی، تاریخ شمسی، تعداد مسافر، فیلتر ایرلاین و سقف قیمت، مرتب‌سازی و کارت‌های پرواز با ساعت و صندلی باقی‌مانده.

    سفرپروازتقویم

  • به‌زودی

    coming-soon

    صفحه‌ی پیش از انتشار: شفق و ستاره در پس‌زمینه، تیتر گرادیانی، شمارش معکوس تا تاریخ شمسی و ثبت شماره‌ی موبایل با دکمه‌ی سه‌حالته.

    لندینگشمارش معکوسفرم

پیش‌نمایش زنده و کد کامل هر صفحه.

همه‌ی قالب‌ها

۶ سیستم طراحی

یک کتابخانه، چند سیستم طراحی

رنگ، شعاع گوشه و کنتراست از توکن CSS می‌آیند. دکمه‌ی اعمال کل سایت را عوض می‌کند؛ انتخاب در مرورگر می‌ماند. روی نام هر تم بزنید تا توکن‌ها و پرامپتش را ببینید.

  • سبد خرید
    جمع۲٬۴۸۰٬۰۰۰ تومان

    گرافیت

    Graphite

    سیاه خنثی، دکمه‌ی سفید، یک لهجه‌ی کهربایی. پیش‌فرض.

    radius ۱۰px
  • سبد خرید
    جمع۲٬۴۸۰٬۰۰۰ تومان

    فیروزه

    Turquoise

    آبی‌سبز کاشی، گوشه‌های نرم‌تر. مناسب محصول با لحن گرم.

    radius ۱۲px
  • سبد خرید
    جمع۲٬۴۸۰٬۰۰۰ تومان

    زعفران

    Saffron

    زمینه‌ی گرم، دکمه‌ی طلایی. مناسب فروش و رستوران.

    radius ۸px
  • سبد خرید
    جمع۲٬۴۸۰٬۰۰۰ تومان

    انار

    Pomegranate

    قرمز عمیق و گوشه‌های گرد. مناسب برندهای پرتحرک.

    radius ۱۶px
  • سبد خرید
    جمع۲٬۴۸۰٬۰۰۰ تومان

    لاجورد

    Lapis

    نیلی دقیق و گوشه‌های تیز. مناسب ابزارهای فنی.

    radius ۶px
  • سبد خرید
    جمع۲٬۴۸۰٬۰۰۰ تومان

    کاغذ

    Paper

    روشن و آرام، مرکب تیره. مناسب محتوا و خواندن طولانی.

    radius ۱۲px
MCP

پرامپت را بدهید؛ قطعه‌ی فارسی ساخته می‌شود.

ابزارهای هوش مصنوعی به انگلیسی فکر می‌کنند: فونت Inter می‌گذارند، ارقام را لاتین می‌نویسند و دکمه را چپ‌چین می‌کنند. سرور MCP وایب‌فارسی قوانین طراحی فارسی و کد قطعه‌ها را مستقیم به Cursor، Claude Code و Windsurf می‌دهد.

  • get_design_rules

    قوانین راست‌چین، فونت، ارقام و توکن

  • search_registry

    جست‌وجو در قطعه‌ها؛ فارسی یا انگلیسی

  • get_component

    کد و پرامپت همان قطعه

  • get_theme

    توکن‌های رنگ و شعاع گوشه

  • scaffold_page

    از توضیح صفحه، یک ترکیب آماده

  1. ۱

    سرور را اضافه کنید

    یک‌بار در تنظیمات ادیتور؛ بعد دیگر کاری نیست.

    1{2  "mcpServers": {3    "vibefarsi": {4      "command": "npx",5      "args": ["-y", "@vibefarsi/mcp"]6    }7  }8}
  2. ۲

    مثل همیشه پرامپت بدهید

    لازم نیست چیزی درباره‌ی فارسی یادآوری کنید.

    یک صفحه‌ی پرداخت با خلاصه‌ی سبد و فرم آدرس بساز.

    → get_design_rules()
    → scaffold_page("صفحه‌ی پرداخت")
    → get_component("input", "price", "button")

  3. ۳

    خروجی فارسی درست بگیرید

    همان بار اول؛ بدون رفت‌وبرگشت برای راست‌چین و ارقام.

    • فونت پروژه، بدون letter-spacing
    • چیدمان راست‌چین، آیکون سمت راست
    • مبلغ‌ها با ارقام فارسی و تومان
    • فیلد موبایل چپ‌چین و ۱۱ رقمی
    • توکن‌های تم پروژه، نه رنگ دلخواه مدل

رایگان. برای فارسی‌زبان‌ها.

پلن پولی نیست و هیچ قطعه‌ای قفل نیست. می‌خواهیم ساخت رابط فارسی خوب ساده باشد.