Claude Code untuk desain.

Apa sebenarnya Claude Code itu

Claude Code adalah alat coding agentic dari Anthropic. Ia membaca codebase Anda, menyunting file, menjalankan perintah, dan terintegrasi dengan alat pengembangan Anda — merencanakan, menulis, dan memverifikasi pekerjaan dari tugas berbahasa alami, bukan sekadar melengkapi baris secara otomatis.

Ia hadir di beberapa permukaan yang semuanya berbagi mesin yang sama: CLI terminal, ekstensi IDE untuk VS Code, Cursor, dan JetBrains, aplikasi desktop dengan tinjauan diff visual, serta pengalaman web untuk tugas yang berjalan lama. File CLAUDE.md, pengaturan, dan server MCP Anda terbawa di semuanya.

• File instruksi: Claude Code membaca file CLAUDE.md di root proyek Anda pada awal setiap sesi — tempat alami untuk menuliskan konvensi desain, tokens, dan checklist tinjauan Anda.
• Skills: Agent Skills mengemas instruksi, skrip, dan sumber daya yang dapat diulang yang dimuat Claude sesuai kebutuhan, termasuk skill Frontend Design resmi dari Anthropic untuk selera.
• Plan dan subagent: Ia dapat merencanakan sebelum bertindak dan memunculkan subagent yang mengerjakan bagian-bagian berbeda dari suatu tugas secara paralel, yang menjaga refaktor UI besar tetap koheren.

• Vendor: Anthropic
• Kredensial: kunci API Anthropic (BYOK, melalui Console) atau langganan Claude (Pro / Max)
• Permukaan: CLI terminal, ekstensi VS Code / Cursor / JetBrains, aplikasi desktop, web

Mengapa Claude Code bagus untuk desain

Di antara agen coding, Claude Code punya reputasi soal selera dalam pekerjaan frontend. Beberapa hal menjelaskannya.

• Keputusan spesifik, bukan samar: Claude Code cenderung berkomitmen pada pilihan konkret — nilai hex yang persis, spacing scale, type ramp, dan hierarki komponen — alih-alih mengambang, dan itulah yang membedakan antarmuka sungguhan dari placeholder.
• Penalaran yang sadar codebase: Dengan konteks kerja yang besar, ia merefaktor UI di banyak file sekaligus, menggunakan kembali komponen dan tokens Anda yang ada, alih-alih menciptakan ulang gaya sekali pakai.
• Skill frontend resmi: Anthropic menyediakan skill Frontend Design yang membuat Claude menulis arah desain lebih dulu dan secara sengaja menjauh dari font sistem generik dan gradien ungu yang bisa ditebak.

Pelajarannya sama dengan yang Anthropic katakan tentang modelnya sendiri: Claude tidak punya selera secara default — dibiarkan sendiri, ia mengonvergensi ke pusat statistik desain web (Inter, gradien ungu, soft shadow). Ia menghasilkan desain yang baik ketika Anda memberinya batasan. Open Design mengemas masukan-masukan itu secara persis, dan itulah mengapa keduanya cocok bersama (lebih lanjut di bawah).

Menyiapkan Claude Code untuk pekerjaan desain, dari nol

Berikut jalur lengkap dari mesin yang bersih hingga Claude Code yang dapat membangun dan memverifikasi UI.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• Tuliskan aturan desain Anda: Letakkan tokens, primitif, dan konvensi Anda di CLAUDE.md dan arahkan Claude ke sana, sehingga output sesuai dengan brand alih-alih jatuh ke tampilan generik.
• Tambahkan verifikasi browser: Hubungkan Playwright atau Chrome MCP agar Claude merender di browser sungguhan dan memeriksa output-nya di berbagai breakpoint, bukan hanya memastikan build lolos.

Alur kerja CLAUDE.md dan Skills

Loop desain dengan daya ungkit tertinggi pada Claude Code adalah memberinya referensi nyata plus konteks desain Anda, lalu mengiterasi hingga UI cocok — dengan CLAUDE.md dan Skills membawa batasannya sehingga Anda tidak perlu menjelaskannya ulang di setiap prompt.

1. Mulai dari referensi visual paling jelas yang Anda miliki — dan sertakan banyak state (desktop dan mobile, hover, kosong, loading), bukan hanya satu hero shot.
2. Bersikaplah spesifik dalam prompt; prompt yang samar menghasilkan UI generik bahkan dengan agen yang kuat.
3. Simpan design system dan konvensi Anda di CLAUDE.md, dan beri tahu Claude di mana tokens dan primitif kanonis berada.
4. Tambahkan skill Frontend Design agar Claude berkomitmen pada arah estetik nyata sebelum menulis kode.
5. Hubungkan verifikasi browser agar Claude merender, mengubah ukuran ke breakpoint, dan membandingkannya kembali ke referensi — bukan sekadar memastikan ia berhasil build.

Jatuhkan gambar referensi ke dalam sesi dan beri prompt dengan batasan konkret:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

Jalankan dev server di sampingnya, jaga prompt tetap kecil dan terfokus, lalu commit iterasi yang baik / revert yang buruk (beri tahu Claude saat Anda revert) sehingga setiap putaran dibangun di atas dasar yang bersih. Gunakan plan mode untuk refaktor yang lebih besar agar Anda bisa meninjau pendekatannya sebelum ada perubahan file.

Claude Code + Figma: round-trip desain ↔ kode

Pada Februari 2026 Anthropic dan Figma merilis integrasi dwiarah kelas satu melalui server Figma MCP. Ia bekerja di kedua arah.

• Desain → Kode: Pilih sebuah frame di Figma atau tempelkan tautan ke Claude Code, tarik konteks desainnya, dan minta ia mengimplementasikan desain menggunakan pustaka komponen Anda yang ada. Code Connect menjaga output tetap selaras dengan komponen nyata Anda.
• Kode → Desain: Bangun dan pratinjau sebuah fitur di browser, lalu katakan “Send this to Figma” untuk menangkap UI yang berjalan sebagai layer Figma yang dapat disunting — seluruh layar atau elemen terpilih.

Install sekali dengan claude plugin install figma@claude-plugins-official (Dev Mode MCP memerlukan paket Figma berbayar). Figma MCP yang sama tersedia untuk Claude Code, Codex, Cursor, dan VS Code — persis jenis kemampuan portabel dan multi-agen yang dibuat untuk diorkestrasikan oleh Open Design.

Claude Code vs Codex vs Cursor untuk desain

Tidak ada pemenang tunggal untuk pekerjaan desain — setiap agen punya kekuatan berbeda, dan tim berpengalaman menumpuknya. Ringkasan yang adil:

Putusan komunitas yang berulang adalah bahwa selera datang dari manusia: ketiganya jatuh ke estetika generik tanpa skill, referensi, dan batasan. Itulah masalah sebenarnya yang harus dipecahkan — dan bentuknya seperti alat desain, bukan seperti model.

Jebakan, dan cara menghindari tampilan “AI slop”

Bahkan dengan reputasi selera Claude Code, keluhan paling umum tentang desain hasil AI adalah tampilannya yang generik — font Inter, gradien ungu di atas putih, soft shadow, sudut membulat berukuran berlebihan, estetika yang “berteriak ini buatan AI.” Anthropic sendiri mengaitkannya dengan konvergensi distribusional: pilihan aman mendominasi data pelatihan web. Masalah lain yang dilaporkan termasuk layout mobile yang rusak dan instruksi yang bocor ke teks UI.

• Install skill Frontend Design: Ia memaksa Claude berkomitmen pada arah nyata dan secara eksplisit menghindari font dan gradien yang terlalu sering dipakai oleh AI.
• Aktifkan verifikasi browser: Buat Claude merender dan memeriksa diri sendiri di berbagai breakpoint sehingga layout tidak diam-diam rusak di mobile.
• Sediakan tokens dan referensi: Design tokens nyata dan screenshot referensi adalah satu daya ungkit terbesar bagi kualitas output.
• Tuliskan aturan di CLAUDE.md: Letakkan aturan bergaya “tanpa hero card, maksimal dua typeface, hierarki brand-first” di tempat yang dibaca agen pada setiap putaran.

Perhatikan bahwa setiap mitigasi adalah soal memberi agen konteks desain yang terkurasi. Memelihara konteks itu secara manual, per proyek, adalah kerja melelahkan yang dihapus Open Design.

Mendesain dengan Claude Code di dalam Open Design

Open Design adalah lapisan desain open-source yang terus diminta oleh alur kerja di atas. Ia memperlakukan Claude Code sebagai adaptor first-party dan membungkusnya dengan pustaka skill dan design system terkurasi, pipeline render terstruktur, dan UI desktop lokal — sehingga konteks desain yang membuat Claude Code bagus sudah ada sejak putaran pertama, bukan dirakit secara manual setiap kali.

1. Install Open Design dan pilih Claude Code sebagai agen Anda.
2. Autentikasi dengan kunci API Anthropic (BYOK) atau langganan Claude Anda — kredensial tetap di mesin Anda dan tidak pernah diproksi melalui kami.
3. Pilih design system dan skill, lalu hasilkan deck, prototipe, dan landing page dengan selera yang konsisten.
4. Setiap artefak dan file DESIGN.md hidup di repo Anda sendiri, bukan di cloud yang dihosting.

Agen Claude Code yang sama, kunci yang sama — ditambah alur kerja desain open-source yang nyata dan portabel di sekelilingnya. Ia local-first dan Apache-2.0, sehingga tidak ada bagian dari pekerjaan atau kredensial Anda yang meninggalkan mesin Anda.

Pertanyaan yang sering diajukan

1. 01 Apakah Claude Code bagus untuk pekerjaan desain? +

   Ya — ia secara luas dianggap sebagai agen coding dengan selera frontend terbaik, membuat keputusan spesifik dan sadar codebase tentang nilai hex, spacing, dan type scale. Dengan skill Frontend Design, design system, dan gambar referensi nyata dalam konteks, ia menghasilkan UI berkualitas produksi dan responsif serta dapat memverifikasinya di browser. Tanpa konteks itu, ia cenderung jatuh ke tampilan generik, dan itulah celah yang diisi Open Design.

2. 02 Apakah saya butuh langganan Claude untuk mendesain dengan Claude Code? +

   Anda dapat menggunakan kunci API Anthropic (BYOK, melalui Console) atau langganan Claude (Pro / Max). Bagaimanapun, Open Design tidak pernah memproksi kredensial Anda — kredensial digunakan langsung oleh agen Anda di mesin Anda.

3. 03 Claude Code atau Codex untuk desain frontend? +

   Keduanya kuat. Claude Code dikenal karena keputusan desain yang spesifik dan sadar codebase serta penalaran frontend; Codex punya poles visual yang kuat dan unggul dalam build yang didelegasikan dan tersandbox. Banyak tim memakai keduanya — Open Design memungkinkan Anda berganti agen tanpa mengubah alur kerja desain Anda.

4. 04 Bagaimana cara menghubungkan Claude Code ke Figma? +

   Install plugin Figma resmi dengan claude plugin install figma@claude-plugins-official. Anda kemudian dapat mengimplementasikan frame Figma dalam kode menggunakan konteks desain, dan mendorong UI yang berjalan kembali ke frame Figma yang dapat disunting dengan “Send this to Figma.” Dev Mode MCP memerlukan paket Figma berbayar.

5. 05 Apa itu Skills dan CLAUDE.md? +

   CLAUDE.md adalah file markdown di root proyek Anda yang dibaca Claude Code pada awal setiap sesi — tempat untuk menuliskan konvensi desain Anda. Skills mengemas instruksi dan sumber daya yang dapat diulang yang dimuat Claude sesuai kebutuhan, termasuk skill Frontend Design resmi dari Anthropic. Open Design menyediakan pustaka keduanya yang terkurasi sehingga Anda melewati penyiapan per proyek.

6. 06 Bagaimana cara menghindari estetika “AI slop” yang generik? +

   Install skill Frontend Design, sediakan design tokens nyata dan screenshot referensi, tuliskan aturan brand di CLAUDE.md, dan aktifkan verifikasi browser. Open Design menyediakan ini sebagai pustaka terkurasi sehingga Anda melewati penyiapan per proyek.

7. 07 Apakah Open Design berafiliasi dengan Anthropic? +

   Tidak. Claude Code adalah produk Anthropic; Open Design adalah proyek open-source independen yang mendukungnya sebagai adaptor first-party. Claude dan Claude Code adalah merek dagang Anthropic.

8. 08 Apakah file dan kredensial saya aman? +

   Ya — Open Design bersifat local-first dan Apache-2.0. File, artefak, dan DESIGN.md Anda tetap di repo Anda sendiri, dan kredensial Anthropic Anda digunakan langsung oleh agen Anda, tidak pernah dirutekan melalui server Open Design.