April 15, 2026

TL;DR — Saya mengemas design system Morpheme UI sebagai skill Claude Code. Sekarang setiap kali saya minta Claude membangun halaman, dia otomatis mengikuti token, spacing, tipografi, dan aturan aksesibilitas yang benar. Tidak perlu lagi copy-paste spec desain. Tidak ada lagi "biru itu kok beda ya." Cukup /morpheme-design buat halaman pricing dan langsung jadi. Lihat 10 contoh UI live →

Masalahnya: design system yang tidak ada yang ikuti

Kalau kamu pernah kerja di tim produk, pasti paham situasi ini. Tim desain punya file Figma yang rapi — lengkap dengan token, komponen, dan guidelines. Tim engineering berusaha mengikutinya. Tapi di suatu titik antara "di Figma 8px" dan "hardcode 10px aja deh, mirip-mirip" — konsistensi mati.

Design system hanya berguna kalau benar-benar diterapkan. Dan menerapkannya secara manual itu melelahkan. Code review menangkap sebagian pelanggaran, linting menangkap sebagian lagi, tapi beban kognitif untuk mengingat shadow token yang mana yang harus dipakai atau seperti apa spec focus ring — itulah yang memperlambat.

Jadi saya bertanya: bagaimana kalau AI-nya sudah tahu design system-nya?

Solusinya: skill di Claude Code

Claude Code punya fitur bernama skills — file instruksi yang bisa dipakai ulang dan diinjeksi ke konteks saat dipicu. Anggap saja sebagai prompt khusus yang aktif berdasarkan apa yang sedang kamu kerjakan.

Saya membuat skill bernama morpheme-design yang berisi semua aturan dari design system kami:

  • Token warna (arsitektur 3 lapisan: foundation → brand → semantic)
  • Spec tipografi (Poppins, type scale, hierarki weight)
  • Sistem spacing (basis 4px)
  • Spec komponen (button, input, card, badge, alert, modal, navigasi)
  • Skala shadow dan elevasi
  • Token motion dan animasi
  • Persyaratan aksesibilitas (rasio kontras, focus ring, ARIA)
  • Referensi CSS custom properties

Saat dipicu, skill ini memerintahkan Claude untuk membaca spec DESIGN.md secara lengkap dan menerapkan setiap aturan saat men-generate kode.

Cara kerjanya

Struktur file

project-kamu/
├── DESIGN.md                              # Spec design system lengkap
├── .claude/
│   └── skills/
│       └── morpheme-design/
│           └── SKILL.md                   # Definisi skill

File skill (SKILL.md) punya header YAML frontmatter yang memberi tahu Claude Code kapan harus aktif:

---
name: morpheme-design
description: >
  Enforce the Morpheme UI Design System when building web pages, apps, or UI components.
  Ensures all design tokens, colors, typography, spacing, components, and accessibility
  guidelines follow the Morpheme specification from DESIGN.md.
  Use when user asks to build, create, or modify a web page, app, landing page,
  dashboard, form, UI component, or any frontend interface. Also use when user asks
  to style, theme, or design any web element.
---

Di bawah frontmatter adalah konten skill yang sebenarnya — instruksi detail yang mencakup aturan warna, aturan tipografi, aturan spacing, spesifikasi komponen, layout/grid, motion, persyaratan aksesibilitas, dan checklist self-review.

Cara menggunakannya

Ada dua cara skill ini aktif:

1. Invokasi manual — awali prompt dengan nama skill:

/morpheme-design buat halaman checkout dengan form pengiriman dan ringkasan pesanan

2. Auto-trigger — Claude Code mendeteksi bahwa kamu sedang minta dibuatkan UI dan mengaktifkan skill secara otomatis:

buatkan halaman settings dengan form profil dan toggle notifikasi

Hasilnya sama: Claude membaca DESIGN.md, merencanakan layout, memilih token yang tepat, dan men-generate kode yang mengikuti setiap spec.

Apa yang Claude lakukan

Saat skill aktif, Claude mengikuti pre-flight checklist:

  1. Membaca DESIGN.md secara lengkap
  2. Mengidentifikasi komponen mana dari DESIGN.md seksi 8.1–8.7 yang dibutuhkan
  3. Merencanakan layout menggunakan sistem grid 12 kolom (§11)
  4. Memilih token tipografi (§3) dan spacing (§4) yang benar

Struktur output

Setiap halaman yang di-generate mengikuti struktur CSS 7 lapisan di dalam satu blok <style>:

<style>
  /* 1. CSS Reset / Normalize */
  /* 2. :root variables dari DESIGN.md §14 */
  /* 3. Base styles */
  /* 4. Component styles menggunakan var() tokens */
  /* 5. Layout styles */
  /* 6. Responsive styles */
  /* 7. prefers-reduced-motion */
</style>

Penerapan berlapis ini memastikan token selalu didefinisikan sebelum digunakan, responsive override tidak bocor ke base styles, dan preferensi reduced-motion selalu diterapkan terakhir.

Ikon

Semua ikon harus menggunakan gaya outline (stroke 1.5–2px). Library yang direkomendasikan: Heroicons, Phosphor Icons, atau Feather Icons. Ukuran: 16px inline, 20px default, 24px untuk header atau ikon fitur. Tombol icon-only wajib menyertakan aria-label.

Checklist self-review

Sebelum menampilkan kode final, Claude menjalankan 12 pemeriksaan:

  • Semua warna menggunakan CSS variables
  • Semua spacing kelipatan 4px via token --space-*
  • Tipografi menggunakan Poppins dengan hierarki weight yang benar
  • Semua elemen interaktif punya transisi hover (min 100ms)
  • Focus ring di semua elemen yang bisa difokuskan
  • Semua form input punya label yang terhubung
  • Media query prefers-reduced-motion disertakan
  • Layout responsif dengan breakpoint yang benar
  • Shadow sesuai hierarki elevasi
  • Border-radius menggunakan token --radius-*
  • Sentence case di semua copy
  • Tidak ada animasi yang memicu layout (hanya opacity/transform)

Hasilnya: 10 contoh UI dihasilkan

Untuk menguji skill ini, saya men-generate 10 contoh UI lengkap — semuanya dari prompt sederhana, semuanya mengikuti design system Morpheme dengan tepat:

ContohYang dicakup
Halaman authLogin, register, lupa password, verifikasi OTP
BlogDaftar artikel dengan card, detail artikel dengan tipografi prose
CRM adminTabel data kontak, stat card, panel detail slide-over
DashboardGrafik pendapatan, tabel pesanan, feed aktivitas, navigasi sidebar
E-commerceHomepage, daftar produk, detail produk, keranjang, checkout (5 halaman)
Email inboxLayout 3 panel: sidebar, daftar email, detail pesan dengan lampiran
Halaman error404, 500, mode maintenance dengan progress bar
Pricing3 tier paket, tabel perbandingan fitur, FAQ accordion
SettingsForm profil, toggle switch, danger zone, section bertab
SaaS landingHero, fitur, testimoni, section CTA

Setiap halaman:

  • Menggunakan CSS custom properties dari design system
  • Punya focus ring dan navigasi keyboard yang benar
  • Menyertakan dukungan prefers-reduced-motion
  • Responsif di mobile, tablet, dan desktop
  • Mengikuti type scale Poppins dengan tepat
  • Menggunakan grid spacing 4px

Totalnya 24 file HTML/CSS, semuanya sesuai design system, di-generate dari prompt satu baris.

Lihat semua 10 contoh UI live →

Cara install di project kamu

npx skills add https://github.com/gravitano/morpheme-design-skill --skill morpheme-design

Opsi 1: Clone dan langsung pakai

git clone https://github.com/gravitano/morpheme-design-skill.git
cd morpheme-design-skill
claude  # skill otomatis terdeteksi

Opsi 2: Copy ke project yang sudah ada

mkdir -p .claude/skills/morpheme-design
cp /path/to/morpheme-design-skill/.claude/skills/morpheme-design/SKILL.md \
   .claude/skills/morpheme-design/
cp /path/to/morpheme-design-skill/DESIGN.md .

Opsi 3: Install via Claude Code

/install-skill https://github.com/gravitano/morpheme-design-skill

Verifikasi dengan /skills — kamu akan melihat morpheme-design di daftar.

Pelajaran yang didapat

1. Strukturkan design system sebagai dokumen referensi, bukan tutorial

DESIGN.md diorganisir per kategori (warna, tipografi, spacing, komponen) dengan nilai persis dan code snippet. Ditulis agar machine-readable — tabel, blok kode, pola penamaan yang jelas. Tanpa narasi bertele-tele.

2. File skill adalah instruksi, bukan dokumentasi

SKILL.md memberi tahu Claude apa yang harus dilakukan, bukan apa itu design system. Dia bilang "selalu gunakan var(--color-primary) bukan #1D6EEB" — dia tidak menjelaskan mengapa arsitektur token ada. Mengapa ada di DESIGN.md. Bagaimana ada di SKILL.md.

3. Checklist self-review itu krusial

Tanpanya, Claude kadang lupa detail kecil — query prefers-reduced-motion yang hilang, border-radius yang di-hardcode alih-alih pakai token. Checklist di akhir skill berfungsi sebagai gerbang. Claude menjalankannya sebelum menampilkan kode dan menangkap kesalahannya sendiri.

4. Skill harus mereferensikan file, bukan meng-embed-nya

Skill mengatakan Read @DESIGN.md alih-alih menduplikasi semua token secara inline. Artinya:

  • DESIGN.md adalah single source of truth
  • Kamu bisa update token tanpa menyentuh skill
  • File skill tetap ringkas

5. Struktur direktori skill itu penting

Awalnya saya membuat skill sebagai .claude/skills/morpheme-design.md — file datar. Tidak berhasil. Claude Code mensyaratkan skill berada dalam subdirektori:

# Salah
.claude/skills/morpheme-design.md

# Benar
.claude/skills/morpheme-design/SKILL.md

Detail kecil, tapi bikin saya debugging 10 menit.

Adaptasi untuk design system kamu sendiri

Pendekatannya generik. Kamu bisa melakukan ini dengan design system apapun:

  1. Dokumentasikan design system dalam file DESIGN.md. Sertakan: token warna, skala tipografi, sistem spacing, spec komponen, aturan aksesibilitas. Gunakan tabel dan blok kode.
  2. Buat skill di .claude/skills/nama-skill/SKILL.md. Sertakan: aturan wajib, spesifikasi komponen, checklist self-review.
  3. Referensikan dokumen desain dari skill menggunakan @DESIGN.md — jangan duplikasi konten.
  4. Tes dengan prompt yang beragam — buat dashboard, form, halaman error. Setiap percobaan mengungkap celah di instruksi skill yang bisa kamu perbaiki.

Insight kuncinya adalah bahwa design system pada dasarnya berbasis aturan. Mereka adalah sekumpulan constraint: pakai warna ini, bukan itu. Pakai spacing ini, bukan nilai sembarang. Selalu sertakan focus ring. Aturan adalah hal yang LLM kuasai — asalkan kamu memberi tahunya dengan cukup jelas.

Repository

Skill lengkap, spec design system, dan semua 10 contoh UI bersifat open source:

github.com/gravitano/morpheme-design-skill

Live demo → morpheme-design-md.vercel.app

Dibuat dengan Claude Code dan design system Morpheme UI oleh gits.id.