TL;DR — Anthropic baru merilis Claude Design di Anthropic Labs. Saya coba langsung: kasih Figma file Morpheme Design, tunggu ~5 menit, dan dapat design system lengkap (typography, color, components, UI kit). Dari sana saya prompt sederhana "buatkan aplikasi e-commerce" dan hasilnya benar-benar mind-blowing. Output-nya HTML + JSX yang bisa di-export ke Claude Code — hasil akhirnya bisa langsung dilihat di morpheme-store.vercel.app.
Apa itu Claude Design?
Sebelum masuk ke pengalaman aku, mari luruskan dulu apa itu Claude Design berdasarkan post resmi Anthropic.
Claude Design adalah produk baru di Anthropic Labs yang memungkinkan kolaborasi visual dengan Claude AI (powered by Claude Opus 4.7). Intinya: tool untuk bikin dan iterasi visual design lewat percakapan dengan AI.
Untuk siapa?
Ini bagian yang menarik. Di post resminya, Anthropic sebutkan audience-nya:
- Designer — yang mau eksplorasi lebih banyak arah desain
- Non-designer — "for founders, product managers, and marketers with an idea but not a design background"
Jadi target utamanya adalah desainer dan orang non-teknis yang punya ide tapi kesulitan meng-eksekusi secara visual. Developer tidak disebut eksplisit sebagai target audience — tapi ada fitur handoff ke Claude Code untuk implementasi.
Fun fact: aku developer, tapi tetap pakai tool ini dan ternyata tetap sangat membantu (lewat "pintu belakang" Claude Code). Lebih lanjut soal ini nanti di bagian catatan di akhir artikel 😄.
Fitur utama
Menurut post resminya:
- Design system integration — otomatis apply branding tim dari codebase & design files
- Multiple input formats — text prompt, upload gambar, import dokumen (DOCX, PPTX, XLSX), atau web capture
- Refinement tools — inline comments, direct text editing, custom adjustment controls
- Collaboration — sharing scope organisasi dengan permission view/edit
- Export flexibility — multi format: Canva, PDF, PPTX, HTML, internal URL
- Handoff ke Claude Code — untuk tahap implementasi
Cara kerjanya (versi resmi)
Anthropic mendeskripsikan workflow-nya seperti ini:
- Setup brand saat onboarding
- Import atau create desain
- Iterasi lewat percakapan dan kontrol
- Kolaborasi dengan tim
- Export atau handoff ke Claude Code untuk development
Akses
Claude Design tersedia untuk pengguna Claude Pro, Max, Team, dan Enterprise sebagai bagian dari plan yang sudah ada.
Kenapa ini menarik (dari perspektif developer)
Workflow design-to-code itu selalu penuh friksi. Desainer kerja di Figma, engineer translate ke kode, dan di tengah-tengah selalu ada informasi yang hilang — token yang tidak ter-sync, spacing yang di-approximate, komponen yang di-rebuild dari nol.
Claude Design mencoba memperpendek jarak itu secara drastis. Alurnya: Figma → Design System → Aplikasi jadi — dalam satu tool, konsisten end-to-end.
Walaupun target utamanya bukan developer, justru buat developer yang punya akses ke design system tim — tool ini bisa jadi shortcut yang powerful. Aku sudah coba end-to-end. Di bawah ini step-by-step-nya.
Catatan sebelum mulai: Morpheme Design adalah design system milik GITS.ID yang sudah kami bangun sebelumnya — lengkap dengan Figma file, fonts, komponen, dan guidelines. Kami juga sudah punya implementasi Vue-nya di Morpheme UI. Jadi saya punya starting point yang matang. Pengalamanmu mungkin berbeda, terutama kalau kamu belum punya design system sendiri. Di akhir artikel aku bahas lebih detail soal ini.
1. Setup Morpheme Design
Langkah pertama langsung tancap gas: setup Morpheme Design sebagai design system di Claude Design.
Yang perlu disiapkan:
- Figma file (save as
.figfile) — ini yang paling utama - Fonts yang digunakan di desain — jangan sampai lupa
- Kode contoh dan link GitHub kalau ada
- Sisanya bisa di-follow up lewat chat dengan Claude
2. Generate design system
Setelah semua bahan dikirim, tinggal generate.
3. Tunggu ~5 menit, worth the wait
Proses generate-nya agak lama — sekitar 5 menit. Tapi hasilnya worth banget. Claude sudah generate:
- Typography (type scale lengkap)
- Color tokens
- Components library
- UI Kit sebagai contoh output
Semuanya based on Figma file yang aku kirim di awal. Jadi bukan template generik, tapi benar-benar turunan dari design source-ku.
4. Review hasil generate
Setelah design system selesai di-generate, kita bisa review hasilnya. Ada dua opsi sederhana:
- Looks good → kalau hasilnya sudah sesuai
- Needs work → prompt lagi apa yang kurang, Claude akan adjust
Alur review-nya intuitif. Yang sudah oke di-approve, yang belum tinggal kasih feedback.
5. Edit manual & SKILL.md
Yang menarik, file-file yang di-generate bisa kita edit manual juga. Dan yang bikin aku tersenyum: Claude juga generate file SKILL.md bernama morpheme-design — mirip banget sama yang pernah aku buat sendiri sebelumnya.
Kalau kamu ikuti tulisanku sebelumnya tentang membuat Skill Claude Code yang mengubah Design System jadi UI pixel-perfect, konsepnya persis sama. Sekarang Claude Design yang bikinkan otomatis.
6. Bikin aplikasi E-Commerce
Dengan design system yang sudah siap, saatnya test case yang lebih ambisius: bikin design aplikasi E-Commerce lengkap. Prompt-ku sederhana saja:
create full e-commerce application with these features:
- Homepage
- Product List
- Product Detail
- Cart
- Checkout
- Payment
Tidak perlu detail panjang. Design system sudah jadi guardrail — Claude tinggal apply.
7. Claude akan banyak bertanya
Kalau context masih kurang, Claude akan banyak bertanya detail lewat UI (di canvas-nya). Sayang waktu itu lupa aku screenshot bagian ini.
Tipsnya: kalau bingung jawab apa, pilih aja "Decide for me". Biar Claude yang ambil keputusan berdasarkan best practice. Ini salah satu UX yang menurutku paling pas — tidak dipaksa memutuskan semua detail di depan.
8. Tunggu Claude bekerja
Proses generate aplikasi juga butuh waktu. Santai aja, biarkan Claude mengerjakan.
9. BOOM! Hasilnya mind-blowing
Dan... hasilnya sangat mind-blowing. Semua halaman ter-generate dengan konsisten mengikuti design system yang sudah di-setup sebelumnya. Warna, tipografi, spacing, komponen — semua sesuai token.
Buat yang mau lihat hasilnya dalam bentuk video (Morpheme Store output):
Atau tonton langsung di YouTube →
10. Masih bisa di-tweak lagi
Yang perlu diingat: hasil generate bukan final. Kita masih bisa tweak lagi — ganti warna, ubah layout, tambah komponen, atau adjust copy sesuai kebutuhan. Claude Design posisinya sebagai titik awal yang sangat kuat, bukan black box yang final.
11. Export ke berbagai target
Output akhirnya berupa HTML + JSX (kemungkinan untuk preview di canvas). Tapi yang bikin tool ini benar-benar useful: hasilnya bisa di-export ke banyak target, termasuk langsung ke Claude Code.
Dari sini alurnya jadi mulus — buka Claude Code, lanjutkan integrasi ke proyek nyata (stack kamu sendiri, API, routing, state management) tanpa harus re-build UI-nya dari nol.
Live demo: Morpheme Store
Sebagai bukti end-to-end flow-nya jalan, aku export hasil Claude Design ke Claude Code dan langsung publish ke Vercel:
Jadi alur lengkap yang aku lalui: Figma → Claude Design → Design System → Aplikasi E-Commerce → Claude Code → Vercel. Semua halaman (Homepage, Product List, Product Detail, Cart, Checkout, Payment) bisa langsung diakses live.
Catatan kecil: Bad Gateway
Di tengah proses ada satu kendala — sempat muncul Bad Gateway. Wajar, tool ini masih di Anthropic Labs (experimental). Tinggal refresh dan lanjut.
Kenapa ini game-changer
Setelah aku coba end-to-end, ada dua hal yang menurutku bikin Claude Design beda dari sekadar "AI yang generate UI":
1. Setup Morpheme Design cukup 1x, reusable berkali-kali
Investasi waktu 5 menit di awal untuk generate design system itu one-time cost. Setelah itu, design system-nya bisa dipakai ulang untuk project apapun:
- Hari ini bikin aplikasi e-commerce
- Besok bikin dashboard admin
- Lusa bikin landing page
Semuanya pakai design system yang sama. Tidak perlu setup ulang. Tidak perlu upload Figma lagi. Cukup prompt, dan Claude langsung apply token yang benar.
2. Design / output app selalu konsisten
Ini yang menurutku paling valuable. Karena Claude baca source desain dan bikin aturannya sendiri (lewat SKILL.md yang ter-generate), setiap halaman yang di-generate selalu konsisten — warna, tipografi, spacing, komponen, semua sesuai token.
Tidak ada lagi drama "kok biru di halaman ini beda sama halaman itu?" atau "spacing-nya kenapa tiba-tiba 14px padahal design system-nya basis 4px?". Konsistensi yang biasanya harus dijaga manual lewat code review, sekarang ter-enforce otomatis.
Catatan penting: pengalaman bisa berbeda antar user
Sebelum kamu langsung coba dan expect hasil yang sama, ada hal penting yang perlu aku sampaikan:
Morpheme Design bukan design system dadakan. Ini adalah design system milik GITS.ID (tempat aku bekerja) yang sudah kami bangun sebelumnya — dengan Figma file yang rapi, token yang terstruktur, komponen yang lengkap, fonts yang jelas, dan guidelines yang sudah matang.
Jadi saat aku upload ke Claude Design, input-nya sudah sangat berkualitas. Hasil yang aku dapat (5 menit → design system lengkap → aplikasi konsisten) sangat dipengaruhi oleh kualitas source-nya.
Pengalamanmu bisa berbeda kalau:
- ❌ Kamu belum punya design system sendiri
- ❌ Figma file-mu masih berantakan (tidak pakai auto layout, token warna acak, komponen tidak ter-organize)
- ❌ Tidak ada dokumentasi jelas soal spacing, tipografi, atau komponen
- ❌ Font yang dipakai tidak di-attach
Dalam kasus itu, Claude Design tetap bisa membantu — tapi dia harus "menebak" banyak hal, dan hasilnya akan mencerminkan apa yang kamu kasih. Garbage in, garbage out.
Rekomendasi aku:
- Kalau kamu punya design system: Rapikan dulu sebelum upload — token, komponen, auto layout, fonts. Investasi ini worth it.
- Kalau kamu belum punya design system: Gunakan Claude Design sebagai starting point — generate design system dari Figma sederhana, lalu iterasi via "Needs work" sampai sesuai keinginan. Ini cara yang lebih organik untuk membangun design system dari nol.
- Kalau kamu designer/developer solo: Coba dengan desain yang kamu sudah punya — walaupun belum sempurna, hasilnya bisa jadi foundation yang bagus untuk di-tweak.
Intinya: Claude Design adalah amplifier. Dia memperkuat apa yang kamu kasih — bagus maupun jelek.
Plot twist: ternyata ini bukan untuk developer 😅
Setelah selesai coba semuanya, aku baru baca ulang post resmi Anthropic — dan sadar satu hal:
Claude Design itu dibuat untuk designer dan orang non-teknis (founders, PM, marketer). Developer tidak disebutkan sebagai target audience utama.
Aku — sebagai developer — masuk lewat "pintu belakang" via fitur handoff ke Claude Code. Dan ternyata... tetap powerful. Bahkan mungkin ini jadi salah satu use case yang paling efisien buat developer:
- Punya akses ke design system tim? ✅
- Mau eksperimen bikin UI baru tanpa harus nunggu mockup dari designer? ✅
- Mau dapat starting point HTML/JSX yang konsisten? ✅
Jadi kalau kamu developer dan mau coba Claude Design, jangan minder — walaupun bukan target audience utama, tool ini tetap bisa jadi senjata yang powerful. Tinggal gimana caramu memanfaatkannya.
Bonus insight untuk developer: convert ke stack favoritmu
Karena hasil export Claude Design ke Claude Code itu berupa HTML + CSS + JSX, ini artinya kita punya material mentah yang bisa di-transform ke stack apapun.
Contoh prompt lanjutan di Claude Code yang bisa kamu coba:
- "Convert semua halaman ini ke Nuxt 3 dengan composables, auto-imports, dan file-based routing"
- "Port ke Next.js 15 (App Router) dengan server components dan server actions"
- "Convert ke Vue 3 murni dengan
<script setup>dan Pinia untuk state management" - "Rewrite sebagai Laravel Blade views + Alpine.js untuk interaktivitas"
- "Buat versi SvelteKit dengan stores"
- "Integrate ke Inertia.js project yang sudah ada"
Alurnya jadi: Figma → Claude Design → HTML/JSX → Claude Code → Stack favoritmu.
Jadi kalau kamu bekerja di tim dengan stack yang sudah ditentukan (misalnya tim kami di GITS.ID banyak pakai Nuxt), kamu tetap bisa pakai Claude Design sebagai starting point, lalu minta Claude Code convert ke stack yang kamu pakai. Design system tetap konsisten, tinggal ganti "bungkus framework"-nya.
Ini yang menurutku bikin Claude Design relevan banget buat developer — bukan karena tool-nya di-design untuk kita, tapi karena output-nya cukup generic (HTML/JSX) untuk di-adapt ke stack apapun.
Kesimpulan
Claude Design ini benar-benar mengubah cara pandang tentang workflow design-to-code. Dari satu Figma file bisa jadi design system, lalu dari design system bisa jadi aplikasi fungsional — semuanya dalam satu flow yang konsisten.
Yang menurutku paling powerful bukan fitur "generate halaman-nya" itu sendiri (karena itu sudah banyak tool yang bisa). Yang powerful adalah konsistensi antara design system dan hasil generate-nya. Karena Claude membaca source desainmu dan membuat skill/rule sendiri, dia tidak halu — setiap halaman yang di-generate benar-benar memakai token yang benar.
Beberapa takeaway:
- Siapkan Figma file yang rapi — garbage in, garbage out tetap berlaku. Design system yang di-generate akan serapi source-nya.
- Fonts itu krusial — jangan lupa attach fonts yang dipakai, biar tipografi tidak fallback ke default.
- Manfaatkan SKILL.md yang ter-generate — ini sama berharganya dengan design system itu sendiri. Kamu bisa bawa ke Claude Code dan konsistensi terus berlanjut.
- "Decide for me" is your friend — tidak perlu memutuskan semua detail di depan.
Kalau kamu punya design system internal dan mau coba AI tooling yang benar-benar respect terhadap design system itu, Claude Design layak banget dicoba.
Referensi: Introducing Claude Design — Anthropic Labs
Live Demo: morpheme-store.vercel.app — hasil Claude Design yang di-export ke Claude Code dan di-deploy ke Vercel
Morpheme Design System (GITS.ID):
- 🎨 Design system: morpheme.design
- 🧩 Vue implementation: ui.morpheme.design
Related read: Saya Membuat Skill Claude Code yang Mengubah Design System Jadi UI Pixel-Perfect