‏دیزاین سیستمت رو به Claude Design وصل کن

نیتای نیمن تو این مقاله از یه مشکل آشنا شروع می‌کنه: ابزارهای طراحی AI دیزاین سیستم پروژه رو نمی‌شناسن، پس هر بار کامپوننت‌ها رو از نو اختراع می‌کنن. به جای خودت یه با کلاس‌های دست‌چین می‌گیری که اون‌قدر شبیهه که تأییدش کنی، ولی اون‌قدر فرق داره که توسعه‌دهنده مجبور بشه از اول بسازتش. برای همین سراغ دستور /design-sync توی Claude Code می‌ره.

سینک کردن یعنی ساختن یه آینه از کتابخونه داخل Claude Design. آینه سورس پروژه نیست؛ یه نسخهٔ کامپایل‌شده‌ست: یه باندل با همهٔ کامپوننت‌ها، به‌علاوهٔ استایل‌شیت، فونت‌ها و یه کپی از ری‌اکت تا کامپوننت‌ها مستقل اجرا بشن. هر کامپوننت هم یه پوشهٔ کوچیک با تایپ‌هاش (تا Claude بدونه چه propها و variantهایی داره)، یه صفحهٔ پیش‌نمایش مستقل و یه راهنمای استفادهٔ تولیدشده می‌گیره. به گفتهٔ نویسنده معیار درست خیلی ساده‌ست: آیا کامپوننت تو Claude Design دقیقاً همون‌طوری دیده می‌شه که تو محصول واقعی؟

قبل از آپلود، سینک خودش کارش رو چک می‌کنه. هر پیش‌نمایش رو تو یه مرورگر واقعی باز می‌کنه، اسکرین‌شات می‌گیره و نمره می‌ده؛ دنبال مشکل‌های آشکار می‌گرده مثل کارت خالی یا variantهایی که همه شبیه هم در اومدن. اگه پروژه Storybook داشته باشه، چک خیلی قوی‌تر می‌شه: استوری‌ها هم خودشون پیش‌نمایش می‌شن و هم مرجع مقایسه، و Claude هر پیش‌نمایش رو کنار استوری متناظرش می‌ذاره و چیزی که بتونه رو خودش درست می‌کنه. به‌صورت پیش‌فرض تا شش استوری از هر کامپوننت گرفته می‌شه.

نویسنده تأکید می‌کنه که آینه یه اسنپ‌شاته، نه لینک زنده: کامپوننت که تو کد عوض شد، تا دوباره /design-sync نزنی هیچ اتفاقی تو Claude Design نمی‌افته. حتی سینک مجدد هم همیشه تمیزکاری نمی‌کنه و ممکنه کامپوننت حذف‌شده تو آینه بمونه، پس بعد از حذف بهتره فهرست فایل‌ها رو نگاه کنی. جریان هم یک‌طرفه‌ست؛ برگردوندن طراحی به کد با دستور /design انجام می‌شه. روی Pro و Max آینه شخصیه و روی Team و Enterprise با انتشارش مال کل سازمان می‌شه.

بخش عملی مقاله با shadcn، Tailwind v4 و Storybook چند تا تله رو نشون می‌ده. کامپوننتی که تو فایل ورودی src/index.ts اکسپورت نشده اصلاً به Claude Design نمی‌رسه و هیچ هشداری هم نمی‌گیری. تایپ‌ها هم لازمن، چون سینک کامپوننت‌ها رو از روی همونا پیدا می‌کنه. تو استایل‌شیت هم اگه توکن‌ها رو ببری تو فایل جدا، فرق @import './tokens.css' با نسخهٔ url() مهمه: Tailwind اولی رو داخل خروجی inline می‌کنه و دومی رو به‌صورت ارجاع بیرونی می‌ذاره، و بعد از آپلود فقط اولی توکن‌ها رو با خودش می‌بره.

آخرین تله اینه که استایل‌شیت کامپایل‌شده فقط کلاس‌هایی رو داره که تو سورس دیده شدن؛ یعنی هیچ‌کدوم از کلاس‌های چیدمانی که Claude دور کامپوننت‌ها می‌نویسه توش نیست. نویسنده برای این کار سراغ @source inline(...) می‌ره که تو Tailwind نسخهٔ ۴.۱ اضافه شده و کلاس‌ها رو از روی الگو می‌سازه:

@source inline("{sm:,md:,lg:,xl:,}{flex,grid,flex-col,hidden,flex-1}");
@source inline("{sm:,md:,lg:,xl:,}grid-cols-{1,2,3,4,6,12}");
@source inline("{sm:,md:,lg:,}{gap,gap-x,gap-y}-{0,1,2,3,4,6,8,12}");
@source inline("max-w-{sm,md,lg,xl,2xl,4xl,prose}");

این چند خط آخر src/index.css می‌شینن و باعث می‌شن کلاس‌هایی مثل grid-cols-3 و gap-6 هم توی خروجی باشن.

نکات کلیدی:

• آینه سورس نیست؛ یه باندل کامپایل‌شده با استایل‌شیت، فونت‌ها و یه کپی از ری‌اکته.
• Storybook اختیاریه ولی سینک رو از حدس به نتیجهٔ قابل‌راستی‌آزمایی تبدیل می‌کنه؛ پیش‌فرض تا ۶ استوری از هر کامپوننت.
• عنوان استوری باید دقیقاً با نام اکسپورت‌شدهٔ کامپوننت جور باشه، وگرنه به هم وصل نمی‌شن.
• کامپوننتی که تو src/index.ts اکسپورت نشده بی‌سروصدا از آینه جا می‌مونه.
• @import './tokens.css' داخل خروجی inline می‌شه ولی url() نه؛ با دومی بعد از آپلود همه‌چی بی‌استایل میاد بالا.
• بدون @source inline(...) کلاس‌های چیدمانی مثل grid-cols-3 تو استایل‌شیت نیستن.
• آینه اسنپ‌شات یک‌طرفه‌ست؛ تا /design-sync دوباره اجرا نشه تغییرات کد منتقل نمی‌شن.