design.md؛ به ایجنتها یاد بده مثل Vercel طراحی کنن
هوش مصنوعی
فرانتاندخلاصهٔ کاملتر
تیم Vercel برای ساختن صفحههایی که باید «شبیه Vercel» باشن از ایجنتهای کدنویس استفاده میکنه. قبلاً یه اسکیل به اسم product-design داشتن که داخل خود ریپازیتوری میشینه و به ایجنت یاد میده دیزاینسیستم و گایدلاینهای محصول رو کجا پیدا کنه. اون راهحل فقط وقتی جواب میده که ایجنت داخل کدبیس کار کنه؛ گزارشها و پروپوزالهایی که تو ابزارهای بیرونی ساخته میشن به اون فایلها دسترسی ندارن. جواب Vercel برای این حالت design.md بود؛ یه فایل عمومی روی یه URL که هر ایجنتی لودش میکنه.
به گفتهٔ نویسنده، اولین تلاش سادهلوحانه بود: همون اسکیل رو به یه پرامپت عمومی تبدیل کردن. نتیجه این شد که هر مدل، توصیف یکسان رو جور دیگهای میفهمید و از یه گایدلاین، صفحههای کاملاً متفاوت بیرون میداد. دلیلش دوتاست: زبان طراحی ذاتاً ذهنیه (عبارت «لیاوت تمیز» عملاً هرچیزی میتونه معنی بده)، و مهمتر اینکه ایجنت داخل کدبیس، متن راهنما رو کنار کامپوننتهای واقعی و نمونههای شیپشده میخونه؛ یه پرامپت عمومی هیچکدوم اینا رو نداره.
پس فایل رو از صفر نوشتن و هر تغییر رو مقابل هفت پرامپت ثابت تست کردن: گزارش مصرف و کارایی، پروپوزال تمدید، گزارش بنچمارک، صفحهٔ برنامهریزی تعاملی، خلاصهٔ build-versus-buy، بریف حاکمیت امنیتی و یه دک ارائه. پرامپت و دیتای فیک و تنظیمات رندر فریز میشدن تا تنها متغیر، خود design.md باشه. تو اولین مقایسه، همون مدل بدون فایل یه داشبورد SaaS کلیشهای ساخت و با فایل، صفحهای که با خود توصیهٔ تمدید شروع میشد. یعنی فایل فقط استایل رو عوض نکرده بود، ساختار صفحه رو هم عوض کرده بود.
چیزی که آخرش شکل گرفت یه سیستم سهتیکهست. اول design.md که قضاوت طراحی رو بهصورت نثر نگه میداره و حتی اسم الگوهای بد و تکرارشوندهٔ خروجیهای تولیدشده رو میبره تا ایجنت بشناسه و ازشون فرار کنه. دوم یه استایلشیت عمومی با واژگان محدود و مستندی از کلاسها و توکنها، تا مدل تایپوگرافی و فاصلهگذاری رو از خودش درنیاره. ظرافتش اینه که ایجنت خود CSS رو نمیخونه؛ استایلشیت موقع رندر تو مرورگر لود میشه، پس کانتکست مدل رو اشغال نمیکنه. سوم هم لوپ ارزیابی.
هر خط راهنما فقط از راه همین لوپ وارد فایل شده. هر راند یعنی تولید صفحهٔ تازه از هر هفت سناریو، روی Claude Opus 4.8 و Codex با GPT-5.5؛ یه اپ محلی رندر تمامصفحه و مقایسهٔ کور A/B رو نشون میده و بازخورد هر ران کنار همون ران ذخیره میشه. هر اصلاح تو باریکترین جایی میشینه که بتونه اجراش کنه: قضاوت میره تو design.md، مکانیک قابلاستفادهٔ مجدد میره تو استایلشیت، و هرچی مکانیکی قابلسنجش باشه تبدیل به یه چک قطعی تو کد میشه. مثالش جدول شرایط تجاری بود که با اینکه صفحه جا داشت، به عرض متن فشرده شده بود.
ساخت فایل بیش از ۲۰۰ ران برد. برای سنجش، سه سناریوی دسکتاپ رو با Codex/GPT-5.5 دوبار تولید کردن، یهبار با فایل و یهبار بدونش، فقط تلاش اول و بدون ریرول. چکهای قطعی روی این شش صفحه، ۳۹ خطای شناختهشده تو نسخههای با design.md شمرد و ۹۱ تا بدونش؛ یعنی ۵۷٪ کمتر. نویسنده دو هشدار میذاره: این چکها فقط خطاهای قبلاً ثبتشده رو میگیرن، و شش صفحه نمونهٔ خیلی کوچیکیه. حرف اصلیشون اینه: تا یه خطا رو اسمگذاری و کدگذاری کنی، معمولاً دیگه برنمیگرده.
نکات کلیدی:
- design.md یه فایل عمومیه روی vercel.com که هر ایجنتی از هر محیطی میتونه لودش کنه.
- سیستم سه لایه داره: راهنمای نثری، یه استایلشیت عمومی با کلاسها و توکنهای محدود، و یه لوپ ارزیابی.
- ایجنت هیچوقت خود استایلشیت رو نمیخونه؛ CSS موقع رندر لود میشه و کانتکست مدل رو اشغال نمیکنه.
- هفت سناریوی فریزشده مبنای تستان و راندهای کامل روی Claude Opus 4.8 و Codex با GPT-5.5 اجرا میشن.
- تو یه تست ششصفحهای، خروجیهای با فایل ۳۹ خطای شناختهشده داشتن و بدون فایل ۹۱ تا (۵۷٪ کمتر).
- نویسنده تأکید میکنه شش صفحه نمونهٔ کوچیکیه و همهٔ صفحهها هنوز حداقل یه ایراد بلاککننده داشتن.
- برای شروع خودت: یه آرتیفکت تکرارشونده انتخاب کن، اول بیسلاین بدون راهنما رو ذخیره کن، و ده اصلاح آخرت رو به قانون قابلمشاهده تبدیل کن.
