‏لوناگراف: بومِ طراحی‌ای که کدِ واقعی می‌نویسه

لوناگراف خودشو یه بومِ طراحیِ آشنا معرفی می‌کنه که یه فرقِ اساسی داره: به‌جای اینکه یه نمایشِ انتزاعی از رابط بسازه، خودِ کدِ واقعیِ HTML، CSS و ری‌اکت رو می‌نویسه. تو صفحهٔ محصول اومده که تحویلِ کار دیگه یه فایلِ دیزاین نیست، بلکه همون کدیه که ship می‌شه.

استدلالِ اصلیِ محصول اینه که بهترین تصمیم‌های طراحی وقتی گرفته می‌شن که آدم مستقیم با «مادهٔ خام» یعنی خودِ کد کار کنه، نه با یه لایهٔ انتزاعی روش. این‌طوری شکافِ handoff و اون چیزهایی که موقعِ ترجمهٔ دیزاین به تیکت گم می‌شن، حذف می‌شن و طراح روی کامپوننت و منطق و خروجیِ واقعی کار می‌کنه.

نکتهٔ متمایزکننده‌ش ادغام با Claude Code به‌عنوانِ یه همکارِ طراحیه که کلِ تصویر رو می‌بینه: از سند و بوم و moodboard گرفته تا خودِ کدبیس. چت هم بومِ طراحی و هم کدبیسِ محلیِ تو رو می‌بینه، پس می‌شه روی بوم طراحی کرد، مستقیم توی ریپو پیاده کرد و نتیجه رو زنده توی یه iframe دید و مقایسه کرد.

برای اینکه این رفت‌وبرگشتِ دیزاین تا کد کار کنه، لوناگراف یه بخشِ دسترسیِ فایل داره که به هوش مصنوعی اجازه می‌ده فایل‌های داخلِ پروژه و حتی بیرونِ اون رو بخونه و بنویسه؛ اتصال به گیت‌هاب هم بخشی از همین جریانه. محصول الان تو مرحلهٔ بتای عمومیه.

نکات کلیدی:

• خروجیِ لوناگراف کدِ واقعیِ HTML، CSS و ری‌اکته، نه فایلِ دیزاین
• هدفِ اصلی، حذفِ شکافِ handoff بینِ طراح و برنامه‌نویسه
• با Claude Code کار می‌کنه و هم بوم و هم کدبیسِ محلی رو می‌بینه
• امکانِ پیاده‌سازیِ مستقیم توی ریپو و پیش‌نمایشِ زنده توی iframe
• الان نسخهٔ بتای عمومیش در دسترسه