یک دیزاینسیستمِ واقعیِ کدمحور بسازید: کامپوننتهای حرفهای با Tailwind و shadcn/ui، توکنها بهعنوان منبعِ حقیقت، و مستنداتی که هم انسان و هم هوش مصنوعی میفهمد.
ضمانت: تا جلسهی دوم راضی نبودید، کلِ مبلغ برمیگردد.
اشتراک Claude (از ماهی ۲۰ دلار) جداست.
طراحها، فرانتاندکارها و سازندگانِ محصول که میخواهند یک سیستمِ کامپوننتِ مقیاسپذیر بسازند.
توکن و تم، ساختِ کامپوننت با shadcn/ui، حالتها (variants)، RTL/LTR و مستندسازی.
تسلط بر Claude Code یا گذراندنِ دورهی مبانی توصیه میشود.
سرفصل
در پایان هر جلسه، یک خروجیِ مشخص در دست دارید.
پیش از نوشتنِ هر خطِ کد، یاد میگیرید یک دیزاینسیستم واقعاً چیست و چرا توکنها قلبِ آن هستند. شما با مفهومِ منبعِ حقیقت (single source of truth) آشنا میشوید تا رنگ، فاصله و تایپوگرافی را یکبار تعریف کنید و همهجا استفاده کنید.
جزئیات: design tokenها را در یک فایلِ مرکزی دستهبندی میکنید (رنگ، فاصله، شعاعِ گوشه، تایپوگرافی) و با Claude Code یک ساختارِ اولیهی توکن میسازید که بعداً به Tailwind config متصل میشود.
خروجیِ جلسه: ساختارِ توکنهای پایه بهعنوانِ منبعِ حقیقت آماده است.
حالا محیطِ کاری را برپا میکنید تا توکنها به یک سیستمِ کدمحورِ واقعی تبدیل شوند. شما Tailwind و shadcn/ui را نصب و پیکربندی میکنید تا پایهی همهی کامپوننتها روی همین دو ابزار بنا شود.
جزئیات: پروژه را با Tailwind config و فایلِ globals میچینید، سپس با shadcn/ui CLI سیستم را مقداردهیِ اولیه میکنید و توکنهای جلسهی قبل را بهصورتِ متغیرهای CSS و کلیدهای Tailwind وصل میکنید.
خروجیِ جلسه: محیطِ Tailwind و shadcn/ui راهاندازی شده و به توکنها متصل است.
وقتِ آن است که اولین کامپوننتهای واقعیِ سیستم را بسازید. شما با Claude Code دکمه، فیلدِ ورودی، کارت و سایر اجزای پایه را تولید میکنید تا یک کتابخانهی منسجم شکل بگیرد.
جزئیات: از Claude Code میخواهید کامپوننتهای پایه را بر اساسِ توکنها بسازد، سپس با shadcn/ui CLI اجزای آماده را اضافه و سفارشی میکنید و ساختارِ پوشهها را تمیز و قابلِ نگهداری نگه میدارید.
خروجیِ جلسه: مجموعهای از کامپوننتهای پایهی منسجم آمادهی استفاده است.
یک کامپوننت باید در شرایطِ مختلف رفتارِ درست داشته باشد و سیستم باید چند تم را پشتیبانی کند. شما حالتهای کامپوننت و توکنهای معنایی را تعریف میکنید تا تمِ روشن و تیره بدونِ دوبارهکاری کار کند.
جزئیات: با cva حالتهای کامپوننت (variants) مانند اندازه و نوع را میسازید، توکنهای معنایی (semantic tokens) مثلِ primary و muted را تعریف میکنید و تمِ روشن و تیره را با لایهی متغیرهای CSS به یکدیگر متصل میکنید.
خروجیِ جلسه: کامپوننتها variant دارند و تمِ روشن و تیره با توکنِ معنایی کار میکند.
یک سیستمِ حرفهای باید هم فارسی و هم انگلیسی را درست نمایش دهد و برای همه قابلِ استفاده باشد. شما پشتیبانیِ دوجهته و اصولِ دسترسپذیری را به کامپوننتها اضافه میکنید.
جزئیات: با dir=rtl و dir=ltr و استفاده از logical properties چیدمان را دوجهته میکنید، سپس صفاتِ ARIA و معیارهای WCAG مثلِ کنتراست و فوکوس را با کمکِ Claude Code بررسی و اصلاح میکنید.
خروجیِ جلسه: کامپوننتها در RTL و LTR درست کار میکنند و معیارهای دسترسپذیری را رعایت میکنند.
یک دیزاینسیستم بدونِ مستندات نیمهکاره است. شما مستنداتی میسازید که هم برای تیمِ انسانی روشن باشد و هم برای ابزارهای هوش مصنوعی قابلِ خواندن و استفاده.
جزئیات: هر کامپوننت را در Storybook یا یک صفحهی مستندات با نمونهها و variantها نشان میدهید و با Claude Code مستنداتِ خوانا برای LLM مینویسید تا مدلها بتوانند کامپوننتها را درست فراخوانی کنند.
خروجیِ جلسه: دیزاینسیستم مستندِ کامل و قابلفهم برای انسان و LLM دارد.
مجموعهای از کامپوننتهای مبتنی بر Tailwind که با Claude Code بهسرعت ساخته و سفارشی میشوند؛ استانداردِ امروزِ ساختِ سیستم.
بله؛ خروجی یک سیستمِ واقعی و قابلِ استفاده در محصولِ شماست، نه تمرین.
آشنایی با Claude Code توصیه میشود؛ در غیر این صورت دورهی مبانی را اول بگذرانید.
برای رزرو جایگاه یا پرسیدنِ سوالهایتان، بدون هیچ تعهدی، همین حالا پیام بدهید.
مشاوره و رزرو در واتساپ