‏دیزاین‌سیستمی که LLM نتونه خرابش کنه

به گفتهٔ نویسنده (تیمِ Polar)، امروز بیشترِ کدِ UI اون‌ها با یه LLM تو حلقه نوشته می‌شه که برای سرعت عالیه ولی برای یکدستی سخت‌تره. نکتهٔ شروع اینه که مشکل این نیست که LLM نمی‌تونه CSS یا کلاسِ Tailwind بنویسه؛ خیلی هم روان می‌نویسه. مشکل اینه که بدونِ آگاهی از تصمیم‌های زیرین می‌نویسه: ازش یه کارت بخوای، می‌ره سراغِ p-4 و bg-gray-100 که هر کدوم منطقی‌ان ولی لزوماً مالِ تو نیستن و در مقیاسِ هزاران کامپوننت، رابطت آروم‌آروم به هزار خاکستریِ کمی متفاوت می‌ره.

شرطی که با Orbit می‌بندن اینه که نوشتنِ یه تصمیمِ خارج از برند رو تو کد سخت—و در حالتِ ایده‌آل تقریباً غیرممکن—کنن؛ اگه یه مقدار جزوِ تصمیم‌هایی که واقعاً گرفتن نباشه، نباید از CI رد شه. می‌گن ریشهٔ ماجرا اینه که کلاس‌های Tailwind فقط رشته‌ان و به LLM فضای بی‌نهایت می‌دن که «یه‌کم» اشتباه باشه؛ p-4 و p-5 و px-4 py-3، یا bg-gray-100 و bg-zinc-100، همه معتبرن، هیچ‌کدوم خطای نحوی نیستن، ولی خارج از سیستم‌ان.

استدلالِ عمیق‌ترشون اینه که دیزاین‌سیستم یه انبارِ مقدار نیست، یه مجموعه تصمیمه؛ p-4 یه «مقدار»ه (۱۶ پیکسل padding) ولی نمی‌گه چرا یا کجا مجازه. برای همین توکن‌های Orbit به‌جای مقدار با نیت نام‌گذاری می‌شن: background-card یه تصمیمه، یعنی «سطحی که کارت روش می‌شینه»، و اینکه به چه رنگی resolve می‌شه جزئیاتِ پیاده‌سازیه. برای فاصله هم m و l و xl نقش‌ان روی یه مقیاس، نه عددِ پیکسلی که یه‌وقت خوشت اومده.

یه خطِ مهمشون اینه: «مستندات یه پیشنهاده، CI یه قرارداده.» می‌گن هرچی تو CLAUDE.md یا style guide بنویسی فقط یه احتماله که مدل بیشترِ وقت‌ها رعایتش می‌کنه، ولی در هزاران تولید خطاها جمع می‌شن. برای همین قانون‌های واقعی رو نه به انگلیسی بلکه به‌شکلِ رول‌های ESLint نوشتن که تو CI اجرا می‌شن؛ اگه یه PR سبز باشه، مرجش امنه.

مکانیزمشون StyleXِ متا (کتابخانهٔ استایلِ کامپایل‌تایم و type-safe) به‌جای Tailwind هست، ولی نقطهٔ اصلی یه پریمیتیوِ واحد به اسم Box هست که فقط توکن‌های دیزاین رو به‌عنوانِ propهای typed قبول می‌کنه:

<Box flexDirection="column" gap="l" padding="m"
     backgroundColor="background-card" borderRadius="m">
  <Text variant="heading-xs" color="text-primary">Card title</Text>
</Box>

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

export const spacing = stylex.defineVars({
  xs: '4px', s: '8px', m: '12px', l: '16px', xl: '24px',
})

جسورانه‌ترین بخش، ممنوع‌کردنِ divِ خامه. می‌گن محدودکردنِ propهای Box فایده نداره اگه یه بی‌قید بغلش باشه، چون هر className و inline style رو قبول می‌کنه و LLM هر پرامپت سراغِ کم‌مقاومت‌ترین مسیر می‌ره. راه‌حل حذفِ کاملِ ظرفِ بی‌تایپه: Box چندریختیه و با propِ as همون و واقعی رو تو DOM می‌سازه، پس معنا و دسترس‌پذیری حفظ می‌شه ولی سطحِ رشتهٔ باز بسته می‌شه، و همه‌اش با رولِ ESLint اجبار می‌شه.

یه دستاوردِ جانبی هم اینه که هر توکن با تابعِ بومیِ light-dark()، هم مقدارِ روشن هم تیره رو با خودش داره، پس دیگه variantِ dark: برای فراموش‌کردن وجود نداره و یکی از رایج‌ترین باگ‌های تم اصلاً قابلِ بیان نیست. نویسنده می‌گه هنوز اولِ راهن و مشکلاتی مثل کوچیک‌بودنِ مجموعه‌توکن‌ها و مهاجرتِ تدریجی از Tailwind دارن، ولی ایدهٔ اصلی اینه که تو عصرِ LLM، دیزاین‌سیستم باید بشه مجموعه‌ای از تصمیم‌ها که فقط همون‌ها قابلِ بیان‌ان.

نکات کلیدی:

• مشکلِ LLM نوشتنِ CSS نیست، نوشتنِ مقدارِ خارج از سیستم بدونِ آگاهی از تصمیم‌هاست
• توکن‌ها با «نیت» نام می‌گیرن (background-card نه bg-gray-100)؛ مقدار پشتِ نام پنهونه
• مستندات احتماله، CI قرارداد؛ قانون‌های مهم به‌شکلِ رولِ ESLint اجرا می‌شن
• divِ خام ممنوع؛ Boxِ چندریخت با propِ as معنا رو نگه می‌داره و سطحِ باز رو می‌بنده