رفتن به محتوای اصلی
ورودساخت حساب
دیزاین‌سیستمتایید شده توسط سپنتا پویا

ساخت و توسعه‌ی دیزاین‌سیستم فارسی

تجربه‌ی ۲۱۵ کامیت ساخت کاشی در یک اسکیل: از توکن و RTL تا داده‌های ایرانی، دسترس‌پذیری، تست تصویری و انتشار نسخه.

Claude CodeClaude.ai و DesktopCodexCursorGemini CLI

لایسنس شخصی: برای استفاده‌ی خودتان، روی همه‌ی دستگاه‌ها و ابزارهایتان

۱٬۴۹۰٬۰۰۰تومان۲٬۲۹۰٬۰۰۰۳۵٪ تخفیف
راهنمای نصب
لایسنس دائمی به‌روزرسانی رایگان تست‌شده روی پروژه‌ی واقعی
دیزاین‌سیستم فارسی از صفر تا انتشار؛ با تجربه‌ی ۲۱۵ کامیت ساخت کاشی
معرفی

ساختن کامپوننت سخت نیست؛ سختی در جزئیاتی است که فقط در محصول فارسی پیدا می‌شوند: رقم‌هایی که عرضشان عوض می‌شود، «ي» و «ك» عربی که جست‌وجو را خراب می‌کنند، شماره‌هایی که وسط متن راست‌به‌چپ جابه‌جا می‌شوند، تقویم شمسی، قالب کارت و شبا، نیم‌فاصله، و تیمی که نمی‌تواند به‌روزرسانی کند چون یک نسخه‌ی جزئی اسم یک prop را عوض کرده.

این اسکیل از ساخت کاشی بیرون آمده: یک دیزاین‌سیستم متن‌باز فارسی با بیش از ۸۰ کامپوننت، ۴۸۰۰ آیکون، پکیج React و وب‌کامپوننت، کیت فیگما و سرور MCP. هر قاعده‌ی آن پشتش یک باگ واقعی یا یک تصمیم سنجیده است که در طول ۲۱۵ کامیت گرفته شده.

دستیار شما با این اسکیل می‌داند توکن‌ها را چند لایه بسازد، CSS را فقط با logical properties بنویسد، ورودی‌های ایرانی را با الگوریتم درست اعتبارسنجی کند، متن‌ها را دوزبانه نگه دارد، کنتراست را در بیلد چک کند و نسخه را بدون شکستن کار تیم‌ها منتشر کند. سه اسکریپت بررسی RTL، متن فارسی و کنتراست هم همراهش است.

کامیت تجربه پشت اسکیل۲۱۵
کامپوننت در کاشی۸۰+
اسکریپت بررسی۳
اعتبارسنج داده‌ی ایرانی۷
آخرین نسخهv1.0.0
به‌روزرسانی۱۷ آبان ۱۴۰۵
امکانات

چه چیزهایی داخل این اسکیل است

۰۱

روند کامل: ممیزی، توکن سه‌لایه، CSS راست‌به‌چپ، تایپوگرافی فارسی، داده‌های ایرانی، کامپوننت، انتشار

۰۲

اسکریپت rtl_audit: پیدا کردن margin-left، text-align: left، translateX و ده‌ها خطای رایج RTL با راه‌حل

۰۳

اسکریپت fa_text_lint: ی و ک عربی، نیم‌فاصله، رقم و نشانه‌ی لاتین و عبارت‌های اداری در متن‌ها

۰۴

اسکریپت contrast_check: سنجش WCAG 2.2 AA برای همه‌ی جفت‌های توکن در هر تم

۰۵

کتابخانه‌ی آماده‌ی persian-utils: کد ملی، شناسه‌ی ملی، کارت، شبا، موبایل، کد پستی، رقم، پول و تاریخ شمسی

۰۶

چک‌لیست کامپوننت: حالت‌ها، کیبورد، ARIA، پیام‌های fa/en، وب‌کامپوننت، بودجه‌ی حجم، تست تصویری

۰۷

قواعد انتشار: changesets، deprecate به‌جای حذف، تست مصرف‌کننده در Next.js، llms.txt و MCP

کجا به کارتان می‌آید

ساخت دیزاین‌سیستم از صفر

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

فارسی کردن یک کتابخانه‌ی موجود

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

افزودن کامپوننت تازه

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

رفع باگ‌های RTL و متن

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

نمونه‌ی واقعی

شما می‌گویید، اسکیل انجام می‌دهد

می‌خوام برای فروشگاهمون یه دیزاین‌سیستم فارسی بسازیم، از کجا شروع کنیم؟
تعیین دامنه (CSS، React یا وب‌کامپوننت)، ساخت توکن‌های سه‌لایه با تم تیره و روشن، قواعد logical properties، انتخاب فونت و رقم، لایه‌ی داده‌ی ایرانی از persian-utils، و برنامه‌ی ۱۰ کامپوننت اول با چک‌لیست هر کدام.
Audit our component library for RTL problems
اجرای rtl_audit و fa_text_lint روی سورس، گزارش ۴۷ مورد به ترتیب اثر (چیدمان، معنا، دسترس‌پذیری)، و یک codemod برای تبدیل خودکار margin/padding/left/right به logical properties.
نصب

روی ابزار خودتان نصب کنید

یک فایل zip برای همه‌ی ابزارها. ابزارتان را انتخاب کنید و دستورها را کپی کنید.

ترمینال، VS Code، JetBrains و اپ دسکتاپ (تب Code)~/.claude/skills/building-persian-design-systems/
  1. فایل zip را از کتابخانه‌ی حسابتان دانلود کنید

    فایل building-persian-design-systems.zip با مشخصات لایسنس شما ساخته می‌شود. نیازی به استخراج دستی نیست.

  2. برای همه‌ی پروژه‌ها (پیشنهادی)

    اسکیل در پوشه‌ی شخصی نصب می‌شود و در هر پروژه‌ای در دسترس است.

    macOS / Linux
    mkdir -p ~/.claude/skills && unzip -o ~/Downloads/building-persian-design-systems.zip -d ~/.claude/skills/
    Windows (PowerShell)
    Expand-Archive -Force $HOME\Downloads\building-persian-design-systems.zip $HOME\.claude\skills
  3. یا فقط برای یک پروژه

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

    mkdir -p .claude/skills && unzip -o ~/Downloads/building-persian-design-systems.zip -d .claude/skills/
  4. بررسی و استفاده

    Claude Code را دوباره باز کنید. هر وقت کارتان به این اسکیل مربوط باشد Claude خودش آن را فعال می‌کند. برای اجرای مستقیم بنویسید /building-persian-design-systems یا بپرسید «چه اسکیل‌هایی داری؟».

    claude
به‌روزرسانی: نسخه‌ی جدید را دانلود و همان دستور را دوباره اجرا کنید؛ گزینه‌ی -o فایل‌های قبلی را جایگزین می‌کند.
داخل بسته
building-persian-design-systems/
LICENSE.txtبا مشخصات شما
SKILL.md
assets
contrast-pairs.example.json
persian-utils.ts
references
components.md
persian-data.md
release.md
rtl.md
tokens.md
typography.md
scripts
contrast_check.mjs
fa_text_lint.mjs
rtl_audit.mjs

پیش‌نیاز: Node.js 18 یا بالاتر برای اسکریپت‌ها. بدون وابستگی خارجی.

تاریخچه

نسخه‌ها

  1. v1.0.0

    ۱۷ آبان ۱۴۰۵
    انتشار اول: روند کامل، rtl_audit، fa_text_lint، contrast_check و persian-utils.
سوال‌ها

سوال‌های این اسکیل

فقط برای کسانی است که از کاشی استفاده می‌کنند؟
نه. اسکیل درباره‌ی ساختن دیزاین‌سیستم خودتان است. کاشی منبع تجربه‌هاست، نه پیش‌نیاز.
با چه فریم‌ورک‌هایی کار می‌کند؟
قواعد مستقل از فریم‌ورک‌اند؛ برای React، وب‌کامپوننت (Vue، Svelte، Angular، HTML) و Tailwind راهنمای مشخص دارد.
چرا از بقیه‌ی اسکیل‌ها گران‌تر است؟
دامنه‌اش کل چرخه‌ی ساخت یک محصول زیرساختی است و تجربه‌ی چند ماه کار و صدها تصمیم را فشرده می‌کند.

ساخت و توسعه‌ی دیزاین‌سیستم فارسی

تجربه‌ی ۲۱۵ کامیت ساخت کاشی در یک اسکیل: از توکن و RTL تا داده‌های ایرانی، دسترس‌پذیری، تست تصویری و انتشار نسخه.

۱٬۴۹۰٬۰۰۰تومان۲٬۲۹۰٬۰۰۰۳۵٪ تخفیف
    ساخت و توسعه‌ی دیزاین‌سیستم فارسی · Skills