دیزاینسیستمها بعد از ایجنتها دیگه اون چیزی نیستن که فکر میکنی
فرانتاند
هوش مصنوعیخلاصهٔ کاملتر
نویسنده که با اسم مستعار TJ مینویسه، میگه دیزاینسیستمها معمولاً یهو خراب نمیشن، بلکه قدمبهقدم و بیسروصدا دریفت میکنن؛ یعنی کمکم از چیزی که تو فیگما و مستندات نوشته شده فاصله میگیرن. دلیلش اینه که یه ایجنت کدنویسی از وجود دیزاینسیستم خبر نداره مگه اینکه صریح تو کانتکستش گذاشته بشه؛ پس سادهترین راه براش اینه که یه کامپوننت تازه بسازه یا از یهجای دیگه بیاره، نه اینکه بره دنبال نسخهی رسمی بگرده.
این اتفاق تو صدها تیکت که تکرار بشه، کدبیس آرومآروم از مستنداتش دور میشه، در حالی که ظاهراً همهچیز سرجاشه: فایل فیگما هست، کتابخونهی کامپوننت هست، مستندات هم هست. مشکل اینه که وقتی سیستم مدتی اینجوری آلوده شده، جریان سنتی دیزاینسیستم (از فیگما بهعنوان منبع اصلی، بعد توکنها و کامپوننتها، بعد محصول) دیگه کار نمیکنه؛ چون این جریان فرض میکنه فیگما هنوز درسته، در حالی که ممکنه دیگه نباشه.
برای همین نویسنده یه سری ابزار استخراج دیزاینسیستم به پروژهی متنبازش به اسم Figma Console MCP اضافه کرده. این ابزارها رو که به یه ریپازیتوری اشاره بدی، کدبیس رو همونجوری که الان هست تحلیل میکنن، توکنها و کامپوننتها رو استخراج میکنن، یه Storybook متناسب باهاش میسازن (فریمورک رو خودکار تشخیص میده: React، Vue یا Web Components)، و بعد با Playwright یه مرورگر واقعی باز میکنن تا هر کامپوننت رندرشده رو با نسخهی واقعیش تو محصول مقایسه کنن، نه با پیشنمایش خود Storybook.
نویسنده این ابزار رو رو یه اپ به اسم Rateshare تست کرده که از اول با وایبکدینگ ساخته شده و اصلاً دیزاینسیستمی نداشته که دریفت کنه؛ خودش هم میگه این تست فقط مکانیزم کار رو نشون میده، نه واقعیت دریفت. نتیجهش یه ست کوچیک از توکنها (چندتا سایز فونت، یه آیکون، یه پالت رنگ ساده) و ۲۱ تا کامپوننت بوده، از دکمه و آواتار گرفته تا یه «node card» کامل با همهی حالتهای تعاملیش.
جمعبندی نویسنده اینه که با آسونتر شدن دور زدن دیزاینسیستم توسط ایجنتها، این سیستمها نهتنها بیاهمیت نمیشن، بلکه بیشتر از قبل لازمن؛ چون حالا باید یه راه خودکار هم برای چک کردن اینکه هنوز راست میگن یا نه داشته باشن.
نکات کلیدی:
- ابزار جدید استخراج دیزاینسیستم تو پروژهی متنباز Figma Console MCP منتشر شده.
- تشخیص خودکار فریمورک: React، Vue، Web Components.
- ارزیابی با Playwright، مقایسهی رندر واقعی با ادعای مستندات، نه پیشنمایش Storybook.
- تست روی Rateshare: تشخیص React، استخراج ۲۱ کامپوننت از دکمه تا یه node card کامل.
- نویسنده: TJ، پست ساباستک، ۱۷ اوت ۲۰۲۶.
