‏دیزاین سیستم آماده برای AI: از کد به Figma با MCP

کریستین والور تو این مقاله که قسمت اول یه سری سه‌قسمتیه، می‌گه وقتی مسیر همیشگی Figma به کد رو به AI سپرد، نتیجه ظاهراً خوب بود ولی نگران‌کننده. AI فایل رو دقیق ترجمه می‌کرد و هرچی فایل نمی‌گفت رو با حدس پر می‌کرد. به گفته‌ی اون مشکل اصلی کیفیت متوسط کد نیست، چیزاییه که اختراع می‌شه: ترتیب فوکوس، حالت خطا، متن اسکرین‌ریدر، یا رفتار وقتی درخواست fail می‌شه. این‌ها تو اسکرین‌شات دیده نمی‌شن و تو review کسی متوجهشون نمی‌شه.

نویسنده مقایسه کرده که یه کامپوننت Figma چقدر از قابلیت‌های یه کامپوننت React رو می‌تونه بیان کنه و به حدود ۱۷ درصد رسیده؛ برای CSS حدود ۴۵ درصد. اون می‌گه این شکاف تقصیر Figma نیست و نباید هم پر بشه. قبلاً یه developer این خلأها رو با سؤال پرسیدن پر می‌کرد، ولی AI فایل رو کامل فرض می‌کنه. برای همین جهت رو برعکس کرده: کد منبع حقیقته، Figma آینه‌شه، و هرجا فرق داشتن Figma اشتباهه. وقتی از روی کد تولید می‌کنی، همون لفظی‌بودن AI یه مزیت می‌شه چون props و مقدارهای پیش‌فرض واقعی رو می‌خونه.

ابزارهاش: Claude Code، یه branch امن، Storybook (سایت محلی که کامپوننت‌ها رو زنده نشون می‌ده)، یه فایل خالی Figma و Figma Console MCP از Southleft؛ MCP یعنی پروتکلی که AI رو به ابزاری مثل Figma وصل می‌کنه. اول tokenها و text styleها با همون اسم‌های کد منتقل می‌شن، دو لایه‌ی primitive و semantic، با alias و scope و modeهایی مثل light و dark. بعد فقط دو کامپوننت آزمایشی مثل Button و Alert ساخته می‌شه و چک می‌شه variantها، اسم propertyها، auto layout و description درست اومدن.

قلب کار فایل GAPS.md هست: نویسنده هر بار از AI می‌خواد هرچی رو نتونسته تو Figma بیان کنه یا بهش شک داره اونجا بنویسه. مثلاً line heightهایی که تو کد بی‌واحدن و تو Figma باید پیکسل بشن، یا stateهایی که فقط تو رفتار وجود دارن. به گفته‌ی نویسنده این لیست از خود کامپوننت‌ها مفیدتر بود. بعد از چند بار تکرار، این کارها رو تبدیل به یه skill کرده و هشدار می‌ده skill می‌تونه روی سیستمت کد اجرا کنه، پس فقط از منبع مطمئن نصب کن.

برای همگام موندن، یه parity check ساخته: Storybook از نسخه‌ی ۱۰ با فعال کردن components manifest یه لیست JSON از کامپوننت‌ها و propsها و پیش‌فرض‌ها می‌سازه، و نویسنده یه لیست مشابه از Figma گرفته. مقایسه‌ی این دو لیست deterministic هست، یعنی هیچ AIی توش نیست و هر بار همون جواب رو می‌ده. فعلاً دستی اجراش می‌کنه و فقط ساختار رو چک می‌کنه، نه CSS و ظاهر. برای کتابخونه‌ی قدیمی هم می‌گه روی کپی کار کن، و variant رو پاک نکن چون نسخه‌ی بازسازی‌شده دیگه به instanceها وصل نمی‌شه.

نویسنده محدودیت‌ها رو هم صادقانه می‌گه: اگه کد شلوغ باشه، یه شلوغی قشنگ تولید می‌کنی؛ Code Connect فقط لینک می‌ده و چک نمی‌کنه؛ Code Sources فیگما هنوز تو بتای بسته‌ست؛ و آپدیت کتابخونه رو هر طراح باید خودش تو فایلش قبول کنه. برای محصول چندپلتفرمی هم ایده‌ی component contract از Nathan Curtis رو امیدوارکننده‌ترین می‌دونه، یعنی تعریف کامپوننت به شکل داده‌ای که بالای همه‌ی پلتفرم‌ها می‌شینه.

نکات کلیدی:

• به حساب نویسنده، Figma حدود ۱۷٪ از قابلیت‌های React و حدود ۴۵٪ از CSS رو پوشش می‌ده
• قانون اصلی: کد منبع حقیقته و هرجا فرق داشتن، Figma اشتباهه
• ابزارها: Claude Code، Figma Console MCP از Southleft و Storybook
• اول tokenها و text styleها، بعد فقط دو کامپوننت آزمایشی، بعد کل کتابخونه
• GAPS.md لیست هرچیزیه که AI نتونسته بیان کنه یا بهش شک داره
• components manifest از Storybook 10 به بعد در دسترسه و پایه‌ی parity check هست
• variant پاک‌شده حتی اگه یکسان بازسازی بشه به instanceها وصل نمی‌شه