Awesome DESIGN.md؛ سیستم طراحی متنی برای ایجنتهای هوش مصنوعی
هوش مصنوعی
فرانتاندخلاصهٔ کاملتر
این مخزن یه مجموعهٔ گزیده (awesome list) از فایلهای DESIGN.md هست که VoltAgent جمعشون کرده؛ فایلهایی که از روی سایتهای واقعی استخراج شدن و آمادهان که تو پروژهات استفادهشون کنی. ایدهسادهست: یه DESIGN.md رو کپی میکنی تو پروژهات، به ایجنت هوش مصنوعی میگی «یه صفحه شبیه این بساز» و اون UI باکیفیتی تولید میکنه که با زبان طراحی اون سایت هماهنگ بمونه.
خود DESIGN.md یه مفهوم تازهست که Google Stitch معرفیش کرده: یه سند سیستم طراحی بهصورت متن ساده که ایجنتهای طراحی میخوننش تا UI یکدست بسازن. به گفتهٔ مخزن، این فقط یه فایل مارکداونه؛ نه اکسپورت Figma لازم داره، نه اسکیمای JSON، نه ابزار خاص. میندازیش تو روت پروژه و هر ایجنت کدنویس یا خود Google Stitch فوری میفهمه UIت باید چه شکلی باشه. استدلالشون اینه که مارکداون فرمتیه که LLMها بهترین میخوننش، پس چیزی برای پارس یا کانفیگ کردن نمیمونه.
یه قیاس قشنگ هم تو متن هست: همونطور که AGENTS.md به ایجنت کدنویس میگه پروژه چطور ساخته بشه، DESIGN.md به ایجنت طراحی میگه پروژه باید چه ظاهر و حسی داشته باشه. این مخزن نسخههای آمادهٔ همین فایل رو از روی سایتهای واقعی فراهم میکنه.
مجموعه دستهبندیهای متنوعی داره: از پلتفرمهای AI و LLM مثل Claude و Mistral و Ollama گرفته تا ابزارهای توسعه مثل Cursor و Vercel و Warp، دیتابیس و دواپس مثل ClickHouse و Supabase و Sentry، و کلی برند معروف فینتک، خردهفروشی و خودرو مثل Stripe، Apple، Nike و Tesla. حتی یه بخش «وب رترو» هم داره که DESIGN.md سایتهای دههٔ ۹۰ میلادی رو بازسازی میکنه.
هر فایل از فرمت استاندارد Stitch با بخشهای گستردهتر پیروی میکنه و چیزهایی مثل تم بصری و اتمسفر، پالت رنگ با نام معنایی و کد hex و نقش کاربردی، قواعد تایپوگرافی، استایل کامپوننتها با حالتهاشون، اصول لیاوت، سیستم سایه و ارتفاع، بایدها و نبایدها، رفتار ریسپانسیو و یه راهنمای پرامپت آماده رو ثبت میکنه. کنار هر سایت، فایلهای preview.html و preview-dark.html هم یه کاتالوگ بصری از سوآچ رنگها، مقیاس تایپ، دکمهها و کارتها نشون میدن.
نکات کلیدی:
- مجموعهٔ گزیدهٔ فایلهای DESIGN.md آماده، استخراجشده از سایتهای واقعی
- DESIGN.md مفهومی از Google Stitch: سیستم طراحی بهصورت مارکداون ساده برای ایجنتها
- نیازی به اکسپورت Figma، اسکیمای JSON یا ابزار خاص نیست؛ فقط فایل تو روت پروژه
- شامل برندهای معروفی مثل Stripe، Apple، Nike، Tesla و Linear
- هر فایل تم، پالت رنگ، تایپوگرافی، کامپوننت و راهنمای پرامپت رو ثبت میکنه
