32 primitif severity
Storybook source of truth
Nuxt 4 & Tailwind v4
Masalah
Alpamayo mengelola tiga produk yang sangat teknis dan kompleks (PREKIT, Sanding Performance, dan OCU) yang dibangun pada waktu berbeda oleh developer yang berbeda pula. Akibatnya, ketiganya tidak memiliki identitas desain bersama, library komponen UI, atau branding yang sama, yang menyebabkan pengalaman developer terfragmentasi secara visual. Menambahkan fitur baru berarti mendesain ulang komponen standar dari awal, dan mengubah detail tema visual memerlukan pembaruan kode manual di banyak file di berbagai repositori terpisah.
Kendala
- [01]Wajib mendukung tiga tema produk berbeda: PREKIT (industrial edge), Sanding Performance (modern utility), dan OCU (spektroskopi biofarmasi)
- [02]Storybook harus berfungsi sebagai satu-satunya sumber kebenaran (source of truth) bagi developer dan desainer
- [03]Harus ringan dan berkinerja tinggi di bawah beban visualisasi grafik SVG/Canvas yang padat di dashboard web
- [04]Integrasi yang mulus dengan PrimeVue, Tailwind CSS, Nuxt 4, Vue 3, dan CSS Variables
Pendekatan Kami
Kami membangun bahasa visual terpadu dan library komponen berbasis Vue 3, TypeScript, PrimeVue, dan Tailwind CSS. Kami merancang 32 primitif Alp* berbasis severity dan sistem design token lintas produk yang dikelola via CSS Variables untuk fleksibilitas warna dan tipografi. Storybook diimplementasikan sebagai satu-satunya sumber kebenaran (source of truth) untuk state komponen. Agar design token dapat digunakan sepenuhnya, kami membangun customizer langsung yang memungkinkan desainer menyetel token secara real-time dan mengekspor file DESIGN.md terstruktur yang siap untuk AI.
Menetapkan satu sumber kebenaran (source of truth) menggunakan primitif berbasis severity dan design token menjamin kohesi visual di seluruh codebase yang terfragmentasi serta mengaktifkan regenerasi frontend berbantuan AI.
Galeri
Hasil
- Storybook ditetapkan sebagai satu-satunya sumber kebenaran, menyelaraskan engineering dan desain di tiga produk
- Konsistensi visual tercapai di seluruh platform PREKIT, Sanding Performance, dan OCU
- Memangkas waktu pengembangan fitur frontend hingga lebih dari 40% berkat penggunaan kembali komponen
- Customizer token langsung diluncurkan dengan dukungan ekspor DESIGN.md siap pakai untuk AI
Kenapa ini penting
Sebuah design system bukan hanya soal estetika; ini tentang efisiensi engineering dan konsistensi produk. Dengan menyatukan PREKIT, Sanding Performance, dan OCU di bawah satu tata bahasa visual, kami mengubah tiga antarmuka yang terfragmentasi menjadi satu suite produk kohesif yang memproyeksikan kualitas teknik tinggi khas Swiss. Ekspor otomatis DESIGN.md menjembatani celah antara desainer manusia dan alur kerja pengkodean AI agent.