‏بررسی تغییرات UI ساختهٔ AI با Storybook و Chromatic

تیم SitePoint تو این مقاله می‌گه ایجنت‌های کدنویسی مثل Cursor، Copilot Agent، Devin و Claude Code تغییرات UI رو خیلی سریع‌تر از اون چیزی تولید می‌کنن که یه reviewer بتونه تو diff خام بررسی کنه، مخصوصاً وقتی تغییرات از ۵۰ فایل رد می‌شه. به گفتهٔ اون‌ها، diff متنی برای این نوع کد اصلاً ابزار مناسبی نیست. پیشنهادشون ترکیب سه چیزه: محدود کردن پرامپت، جدا کردن کامپوننت‌ها تو Storybook و تست visual regression (یعنی مقایسهٔ اسکرین‌شات جدید با یه نسخهٔ سالم قبلی) با Chromatic. مقاله روی Storybook 8 تا 10 و React یا Vue 3 تمرکز داره و Percy رو هم جایگزین Chromatic می‌دونه.

دو مشکل اصلی مطرح می‌شه. اولی «shotgun diff»ـه، یعنی یه دستور ساده مثل «طراحی کارت قیمت رو عوض کن» به کامپوننت، استایل، تست، layout و type definitionها دست می‌زنه. نویسنده‌ها به تحقیق‌هایی اشاره می‌کنن که نشون می‌ده کیفیت review تو PRهای بالای ۲۰ فایل به‌طور محسوس پایین میاد. مشکل دوم فاصلهٔ معناییه: یه تغییر JSX که lint و type check رو رد می‌کنه، می‌تونه یه دکمهٔ مهم رو تو بعضی breakpointها از صفحه بیرون بندازه یا attributeهای دسترس‌پذیری رو بی‌صدا حذف کنه. این‌ها رو فقط با مقایسهٔ پیکسلی می‌شه گرفت.

قدم اول، قانون تک‌کامپوننته: به‌جای «صفحهٔ قیمت‌ها رو دوباره طراحی کن» بگی «کامپوننت PricingCard رو با design tokenهای جدید refactor کن». مقاله یه متن قانون آماده هم داده که می‌شه تو .cursorrules یا CLAUDE.md گذاشت. این قانون می‌گه هر تسک فقط یه کامپوننت رو هدف بگیره، بیشتر از ۵ فایل تغییر نکنه و اگه لازم شد ایجنت وایسه و بخواد تسک تقسیم بشه. ایجنت باید برای هر کامپوننتی که عوض می‌کنه story بنویسه، از جمله حالت پیش‌فرض، edge caseها مثل متن طولانی یا حالت disabled، و دست‌کم یه viewport موبایل.

قدم دوم، Storybook رو سطح اصلی review می‌کنه، چون هر کامپوننت رو جدا و با propsهای مشخص نشون می‌ده و لازم نیست کل اپ بالا بیاد. مقاله یه فایل PricingCard.stories.tsx با فرمت CSF3 (یعنی Component Story Format نسخهٔ ۳) آورده که حالت‌های Default، Highlighted، Disabled، Responsive و LongContent رو پوشش می‌ده. نکتهٔ جالبش story واکنش‌گراست:

export const Responsive: Story = {
  args: { ...defaultArgs },
  parameters: {
    viewport: { defaultViewport: 'mobile1' },
    chromatic: { viewports: [320, 768, 1200] },
  },
};

پارامتر viewports باعث می‌شه Chromatic تو سه عرض مختلف اسکرین‌شات بگیره، پس خرابی layout بدون resize دستی پیدا می‌شه. story با اسم LongContent هم سرریز متن رو امتحان می‌کنه که طبق مقاله یکی از رایج‌ترین خرابی‌هاییه که AI وارد کد می‌کنه. نسخهٔ Vue 3 هم با همون ساختار CSF3 و فقط تفاوت‌های جزئی نوشته می‌شه. یعنی reviewer به‌جای خوندن صدها خط diff، تفاوت تصویری هر حالت رو می‌بینه.

نکات کلیدی:

• diff متنی خرابی‌های ظاهری مثل جابه‌جایی layout یا حذف attributeهای دسترس‌پذیری رو نشون نمی‌ده.
• کیفیت review تو PRهای بالای ۲۰ فایل به‌طور محسوس پایین میاد.
• قانون پیشنهادی: هر تسک یه کامپوننت و حداکثر ۵ فایل، با story اجباری تو Storybook.
• پارامتر chromatic.viewports با مقدار 320، 768 و 1200 تو سه breakpoint اسکرین‌شات می‌گیره.
• روش برای Storybook 8 تا 10 با React یا Vue 3 هست و Percy هم جایگزین Chromatic حساب می‌شه.