‏چطور ایجنت‌های AI رو به سیستمِ طراحیت پایبند کنی

نویسنده (از Builder.io) تعریف می‌کنه که یه ایجنت براش یه PR باز کرده برای یه پنلِ جدید؛ اسکرین‌شاتش درست به‌نظر می‌اومد و نزدیک بود تأییدش کنه. ولی وقتی برنچ رو کشید دید پنل یه modal رو از پوشه‌ی components/legacy/ import کرده، یه form hookِ ماه‌ها پیش منسوخ‌شده رو استفاده کرده، رنگِ حالتِ خطا رو با یه هگزِ hardcode به‌جای توکن‌های معنایی زده (که تو دارک‌مود و بعدِ ری‌برند خراب می‌شه)، و focusِ کیبورد رو اشتباه trap کرده که تستِ دسترس‌پذیری رو رد می‌کنه — چیزی که هیچ اسکرین‌شاتی نشونش نمی‌ده.

نکته‌ی محوریِ نویسنده اینه که هیچ‌کدومِ این‌ها از احمق بودنِ مدل نبود؛ مدل یه دانش‌آموزِ خوبِ کدبیس بود. پوشه‌ی legacy modalهای بیشتری داشت، هوکِ منسوخ تو ده‌ها فایل بود و جایگزینش تو چندتا. ایجنت درست فهمید که «چی کار می‌کنی» — و متأسفانه اون با «چی می‌گی» فرق داره.

به گفته‌ی نویسنده، راهِ حلِ رایج یعنی نوشتنِ فایلِ rulesِ بزرگ‌تر (.cursorrules، AGENTS.md و…) جواب نمی‌ده، چون نثر همیشه به کد می‌بازه. اول اینکه فایل‌های طولانی زوال پیدا می‌کنن — مدل به دستوراتِ وسطِ context کمتر توجه می‌کنه و کسی هم rules رو موقعِ تغییرِ API آپدیت نمی‌کنه. دوم اینکه مدل‌ها مثال رو بر دستور ترجیح می‌دن؛ اگه rules بگه «همیشه توکنِ معنایی» ولی سه فایلِ نزدیک هگزِ inline داشته باشن، هگز برنده می‌شه. جمله‌ی کلیدی نویسنده: کدبیسِ تو، پرامپتِ واقعیته.

راهکارِ نویسنده اینه که به‌جای بازنویسیِ کلِ ریپو یا نوشتنِ README طولانی‌تر، مسیرهای غلط رو مکانیکی، محلی و فوری fail کنی — قبل از اینکه انسان یه خط رو ببینه. اصلش: rules تا حدِ ممکن لاغر بمونه و به کد اشاره کنه، کد بهترین معلمِ الگوهاست، و چک‌های قطعی خروجی رو محدود می‌کنن تا ایجنت خودش تا رسیدن به جوابِ درست تکرار کنه.

اون چهار تاکتیک رو نشون می‌ده: (۱) ممنوع کردنِ importهای بد؛ ایجنت فرقِ ui/ و legacy/ رو نمی‌فهمه، پس به‌جای توضیح، اونو به یه خطای کامپایل تبدیل کن. (۲) غیرممکن کردنِ propهای نامعتبر با discriminated union در TypeScript تا کامپایلر بشه ریویوئرِ سیستمِ طراحی. (۳) اجبارِ قطعیِ توکن‌ها با Stylelint تا فضای تصمیمِ ایجنت کوچک بشه (نویسنده توصیه می‌کنه اول فقط رنگ، چون نام‌های معناییش واضحه). (۴) دادنِ یه پوشه‌ی نمونه‌ی طلایی با پیاده‌سازی‌های مرجعِ کامپایل‌شونده که تو CI اجرا می‌شن و rules رو به یه اشاره‌گر تقلیل می‌ده.

نمونه‌ای از تاکتیکِ اول با ESLint:

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          {
            "group": ["@/components/legacy", "@/components/legacy/*"],
            "message": "Do not import legacy UI. Use '@/components/ui'."
          }
        ]
      }
    ]
  }
}

نکات کلیدی:

• ایجنت اشتباه نمی‌کنه، از کدبیس یاد می‌گیره؛ الگوی پرتکرارِ غلط رو کپی می‌کنه
• فایلِ rulesِ طولانی جواب نمی‌ده چون «نثر به کد می‌بازه» و مدل مثال رو بر دستور ترجیح می‌ده
• importهای بد رو با ESLint به خطای کامپایل تبدیل کن
• propهای نامعتبر رو با discriminated union غیرممکن کن تا کامپایلر ریویوئر بشه
• توکن‌ها رو با Stylelint اجبار کن (اول فقط رنگ) و یه پوشه‌ی نمونه‌ی طلایی بساز