بازطراحی کامل برند curiosity.ai تو سه روز با هوش مصنوعی
هوش مصنوعی
فرانتاندخلاصهٔ کامل‌تر
تیم curiosity.ai تو این پست تعریف می‌کنه که بعد از خوندن یه مطلب دربارهٔ Bauhaus، کنجکاو شدن ببینن سایتشون به سبک پوسترهای Bauhaus چه شکلی میشه. کار از یه بریف شروع شد، نه یه دستور کلی: حقایقی که اجازهٔ گفتنش رو دارن، داستان محصول، لیست صفحه‌ها و پنج قانون طراحی مثل «چهار رنگ روی کاغذ گرم، بدون سایه و گرادیان، یه فونت». تا عصر همون روز هر ۶۷ صفحهٔ سایت بازسازی شده بود، چون سایت با یه static generator کوچیک ساخته شده و صفحه‌ها ماژولار هستن.
به گفتهٔ نویسنده، نتیجه واقعاً طراحی‌شده به نظر می‌رسید، اما مشکلاتی هم داشت که آدم خسته نمی‌دید. ابزار چک responsive برای همهٔ صفحه‌ها گزارش سالم داده بود، در حالی که حتی یکی رو هم نگاه نکرده بود؛ یه خطا قورت داده شده بود و حلقه همه رو رد می‌کرد. بعد از درست شدنش، ۴۳ برچسب دیاگرام پیدا شد که روی گوشی زیر 9px نمایش داده می‌شدن.
بعد سراغ سبک‌های دیگه رفتن. اول یه دکمه برای عوض کردن بین ۲۸ پالت رنگی گذاشتن، بعد هر سبک جدید یه کپی کامل از سایت شد با stylesheet و فایل دیاگرام‌های خودش (site/figures.js). تا ۲۳ سپتامبر بیست‌ویک سبک داشتن، از Swiss minimalism تا یه دسکتاپ ۱-بیتی سال ۱۹۸۴. همهٔ دیاگرام‌ها SVG درون‌خطی هستن و نکته‌ای که کشف کردن اینه که متن داخل SVG با خود نقاشی بزرگ و کوچیک میشه. برای همین helper به اسم LABEL(W) ساختن که کوچیک‌ترین سایز فونت قابل خوندن رو برای گریدی با عرض W حساب می‌کنه.
برای انتخاب، یه بازی حذفی ساختن: دو سبک کنار هم به صورت پیش‌نمایش زنده، با اسکرول هماهنگ، و تو انتخاب می‌کنی کدوم رو بیشتر دوست داری. بعد از مرحلهٔ گروهی، ۴۷ مسابقه حدود دوازده دقیقه طول می‌کشه و آخرش یه کد ۱۴ حرفی می‌ده که همهٔ انتخاب‌ها رو بازسازی می‌کنه. سبک Yarn Mosaic، با گربهٔ پیکسلی‌شون Sudo، برنده شد و بقیه پاک شدن.
همزمان برند جدید تو Claude Design ساخته شد و به شکل یه فایل BRAND.md تحویل داده شد که برای «خواننده‌ای بدون چشم» نوشته شده: هر انتخابی باید قابل تبدیل به قانون یا عدد باشه. سایت تو سه روز با حدود دویست commit بازسازی شد که کدش رو Claude Code نوشت و هر تغییر رو یه آدم روی صفحهٔ رندرشده بررسی و merge کرد. بلاگ، مستندات و اسلایدها هم با Neko، static site generator خودشون، از Markdown ساخته می‌شن و همه از همون برند پیروی می‌کنن.
درس‌هایی که تیم می‌گه: صفحه‌های واقعی رو قضاوت کن نه ماکاپ، امتحان کردن هر ایده باید چند دقیقه هزینه داشته باشه، دوبه‌دو تصمیم بگیر، بریف رو مثل خود محصول بنویس، مشخصات باید عدد باشن، محتوا ثابت بمونه، چک‌ها رو هم چک کن، صفحه رو با چشم ببین، بازنده‌ها رو پاک کن و هر بخش مشترک فقط یه منبع داشته باشه.
نکات کلیدی:
- کل سایت ۶۷ صفحه‌ای تو یه بعدازظهر به سبک Bauhaus بازسازی شد.
- ۲۱ سبک مختلف، هر کدوم یه کپی کامل از سایت، تا ۲۳ سپتامبر ساخته شد.
- انتخاب نهایی با یه بازی حذفی دوبه‌دو با ۴۷ مسابقه و حدود ۱۲ دقیقه انجام شد.
- برند جدید: تک‌رنگ با یه آبی الکتریکی، فونت‌های Schibsted Grotesk و Geist Mono، بدون سایه و گرادیان.
- بازسازی سایت حدود ۲۰۰ commit در سه روز بود که کدش رو Claude Code نوشت.
- چک‌کنندهٔ responsive بدون نگاه کردن به هیچ صفحه‌ای گزارش سالم می‌داد؛ حالا تعداد عرض‌های بررسی‌شده رو چاپ می‌کنه.
