مهندسی معکوس رابط کاربری کلود؛ کالبدشکافی دقیق پروژه Open Claude UI

Open Claude UI بازسازی متن‌باز رابط کاربری کلود است که با ۳۰ مؤلفه React، توکن‌های طراحی و فیزیک تعاملات، تجربه‌ای مشابه نسخه اصلی ارائه می‌کند.

خلاصه

پروژه Open Claude UI یک کتابخانه متن‌باز و مهندسی‌شده است که با تحلیل دقیق ساختار دسکتاپ Claude، سیستم طراحی آن را بازسازی کرده است. این ابزار با استفاده از ۳۰ مؤلفه React و الگوریتم‌های فیزیکی پیشرفته، تجربه کاربری مشابه نسخه اصلی را بدون وابستگی به دارایی‌های تجاری فراهم می‌کند. توسعه‌دهندگان می‌توانند از این استانداردها برای ساخت رابط‌های کاربری هوشمند و باکیفیت در محیط‌های فارسی استفاده کنند.

طراحی رابط کاربری برای ابزارهای هوش مصنوعی فراتر از چیدمان ساده دکمه‌ها است. در پروژه Open Claude UI، تمرکز اصلی بر انتقال حس «گرما» و «دقت» است که از طریق پارامترهای فیزیکی و ریاضیات دقیق به دست می‌آید. این مخزن گیت‌هاب که با نام Caho1/open-claude-ui شناخته می‌شود، بیش از ۳۰۰۰ خط مستندات تحلیل فنی را شامل می‌شود که جزئیات ریزترین تعاملات بصری را فاش کرده است.

سیستم طراحی CDS و فلسفه بصری آن

سیستم طراحی کلود (Claude Design System) بر پایه چهار لایه کنتراست سطوح بنا شده است. در این سیستم، رنگ اصلی موسوم به «نارنجی سفالی» (Clay) با کد رنگی #d۹۷۷۵۷ نقشی کلیدی در هویت بصری ایفا می‌کند. برخلاف بسیاری از پوسته‌های آماده، در اینجا از تکنیک جبران خطوط مویی (Hairline Ring) برای نمایشگرهای با رزولوشن بالا استفاده شده تا مرز بین اجزا در هر ابعادی شفاف باقی بماند.

یکی از چالش‌های بزرگ در طراحی رابط‌های کاربری برای کاربران فارسی‌زبان، حفظ تعادل بصری در حالت‌های تیره و روشن است. در این پروژه، الگوریتم‌های معکوس برای وزن فونت در حالت تیره (Retina weight compensation) استخراج شده‌اند که مانع از «پف کردن» یا ضخیم به نظر رسیدن حروف در پس‌زمینه تاریک می‌شوند. این سطح از جزئیات برای پلتفرم‌هایی مانند هوش مصنوعی نهال که به دنبال ارائه تجربه‌ای حرفه‌ای و بومی هستند، اهمیت بالایی دارد.

فیزیک تعاملات و انیمیشن‌های پیشرفته

آنچه کلود را از سایر رقبا متمایز می‌کند، حس فیزیکی حرکت‌ها است. Open Claude UI توانسته است ۴ مجموعه پارامتر فنری (Spring Physics) را که مسئولیت باز و بسته شدن پنل‌ها را بر عهده دارند، بازسازی کند. این پارامترها شامل مواردی نظیر «ناحیه مرده» ۴ پیکسلی برای حرکت نشانگر و محافظ‌های ورودی برای زبان‌های خاص است.

در بخش پردازش متن، از ماسک‌های آلفای غیرخطی ۷ مرحله‌ای استفاده شده تا متن‌های طولانی هنگام اسکرول شدن، به آرامی در لبه‌ها محو شوند. این تکنیک که به Zero-JS Scroll Fade معروف است، بدون نیاز به کدهای سنگین جاوااسکریپت و تنها با تکیه بر توان CSS اجرا می‌شود.

معماری صوتی و چندرسانه‌ای

بسیاری از رابط‌های کاربری هوش مصنوعی صامت هستند، اما در این بازسازی، سیستم صوتی مبتنی بر Web Audio API پیاده‌سازی شده است. این سیستم بدون نیاز به دانلود فایل‌های صوتی سنگین، صداهای هشدار و بازخورد را به صورت کد تولید می‌کند. این رویکرد علاوه بر کاهش حجم پروژه، تأخیر صدا را به صفر می‌رساند که برای ایجنت‌های هوش مصنوعی در محیط‌های تحت وب حیاتی است.

مؤلفه‌های کلیدی در مهندسی معکوس

۱. بخش ورودی (Composer): شامل نگهبان‌های ورودی برای جلوگیری از تداخل در زمان تایپ و سیستم پیش‌بینی توکن. ۲. کارت‌های MCP: طراحی وضعیت‌های سه‌گانه برای تایید، اجرا و نمایش نتایج ابزارهای جانبی. ۳. نمایشگر کد و تفاوت‌ها (Diff): استفاده از Shadow DOM برای ایزوله کردن استایل‌های کد و جلوگیری از به‌هم‌ریختگی چیدمان اصلی.

توسعه‌دهندگان ایرانی که قصد دارند دستیارهای هوشمند اختصاصی بسازند، می‌توانند با بهره‌گیری از توکن‌های طراحی این پروژه، رابط کاربری خود را به استانداردهای جهانی نزدیک کنند. استفاده از پرداخت تومانی و زیرساخت‌های بومی در کنار چنین رابط‌های کاربری استانداردی، مسیر پذیرش هوش مصنوعی را در سازمان‌ها هموارتر می‌کند.

نکات کلیدی

• استفاده از ۳۰ ماژول مستقل React که بدون وابستگی به کتابخانه‌های جانبی قابل استفاده هستند.
• پیاده‌سازی سیستم صوتی سنتز شده با کد برای حذف تأخیر و کاهش حجم بارگذاری.
• رعایت استانداردهای دسترسی‌پذیری (A۱۱y) از جمله ناوبری کامل با صفحه‌کلید در محیط‌های پیچیده.
• ارائه ۱۸۳ توکن طراحی که به راحتی در پروژه‌های Tailwind یا CSS خالص قابل ادغام هستند.

منبع: github.com