Pembuat Sketsa Mockup HTML

Sketsa

Gunakan skill ini ketika pengguna ingin melihat arah desain sebelum berkomitmen pada satu desain — menjelajahi ide UI/UX sebagai mockup HTML sekali pakai. Tujuannya adalah menghasilkan 2-3 varian interaktif sehingga pengguna dapat membandingkan arah visual secara berdampingan, bukan untuk menghasilkan kode yang siap dikirim.

Muat skill ini ketika pengguna mengatakan hal-hal seperti "sketsa layar ini", "tunjukkan padaku bagaimana X bisa terlihat", "bandingkan tata letak A vs B", "beri aku 2-3 interpretasi UI ini", "biarkan aku melihat beberapa varian", "buat mockup ini sebelum aku membangun".

Kapan TIDAK menggunakan ini

• Pengguna menginginkan komponen produksi — gunakan claude-design atau bangun dengan benar
• Pengguna menginginkan artefak HTML satu kali yang dipoles (halaman arahan, dek) — claude-design
• Pengguna menginginkan diagram — excalidraw, architecture-diagram
• Desain sudah terkunci — langsung saja bangun

Jika pengguna telah menginstal sistem GSD lengkap

Jika gsd-sketch muncul sebagai skill saudara (diinstal melalui npx get-shit-done-cc --hermes), lebih suka gsd-sketch untuk alur kerja lengkap: .planning/sketches/ persisten dengan MANIFEST, analisis mode frontier, audit konsistensi di seluruh sketsa sebelumnya, dan integrasi dengan seluruh GSD. Skill ini adalah versi ringan mandiri — sketsa satu kali tanpa mesin status.

Metode inti

intake  →  varian  →  head-to-head  →  pilih pemenang (atau iterasi)

1. Intake (lewati jika pengguna sudah memberikan cukup)

Sebelum menghasilkan varian, dapatkan tiga hal — satu pertanyaan setiap kali, tidak semuanya sekaligus:

1. Nuansa. "Bagaimana seharusnya nuansa ini? Kata sifat, emosi, suasana." — "tenang, editorial, seperti Linear" memberi tahu Anda lebih banyak daripada "minimal".
2. Referensi. "Aplikasi, situs, atau produk apa yang menangkap nuansa yang Anda bayangkan?" — referensi aktual mengalahkan deskripsi abstrak.
3. Aksi inti. "Apa hal tunggal terpenting yang dilakukan pengguna di layar ini?" — varian harus melayani ini dengan baik; jika tidak, mereka hanya dekorasi.

Renungkan setiap jawaban secara singkat sebelum pertanyaan berikutnya. Jika pengguna sudah memberikan ketiganya di awal, langsung saja ke varian.

2. Varian (2-3, jangan pernah 1, jarang 4+)

Hasilkan 2-3 varian sekaligus. Setiap varian adalah file HTML lengkap dan mandiri. Jangan deskripsikan varian — bangunlah. Intinya adalah perbandingan.

Setiap varian harus mengambil sikap desain yang berbeda, bukan nilai piksel yang berbeda. Tiga sumbu varian yang baik:

• Kepadatan: padat / lapang / ultra-padat (pilih dua kutub yang kontras)
• Penekanan: konten-pertama / aksi-pertama / alat-pertama
• Estetika: editorial / utilitarian / playful
• Tata letak: kolom-tunggal / bilah-sisi / panel-terpisah
• Dasar: berbasis-kartu / konten-polos / gaya-dokumen

Pilih satu sumbu dan tarik terpisah darinya. Dua varian yang hanya berbeda warna aksen adalah usaha yang sia-sia — pengguna tidak dapat membedakannya.

Penamaan varian: deskripsikan sikapnya, bukan nomornya.

sketches/
├── 001-calm-editorial/
│   ├── index.html
│   └── README.md
├── 001-utilitarian-dense/
│   ├── index.html
│   └── README.md
└── 001-playful-split/
    ├── index.html
    └── README.md

3. Buatlah HTML nyata

Setiap varian adalah file HTML tunggal mandiri:

• <style> inline — tidak ada langkah build, tidak ada CSS eksternal
• Font sistem atau satu Google Font melalui <link>
• Tailwind melalui CDN (<script src="https://cdn.tailwindcss.com"></script>) diperbolehkan
• Konten palsu realistis — kalimat aktual, nama aktual, bukan "Lorem ipsum"
• Interaktif: tautan dapat diklik, hover nyata, setidaknya satu transisi status (buka/tutup, filter, toggle). Gambar statis yang beku adalah spike yang lebih buruk daripada animasi yang berantakan.

Buka di browser. Jika terlihat rusak, perbaiki sebelum menunjukkan kepada pengguna.

Verifikasi varian secara visual — gunakan alat browser Hermes. Jangan hanya menulis HTML dan berharap itu dirender; muat setiap varian dan lihat:

browser_navigate(url="file:///absolute/path/to/sketches/001-calm-editorial/index.html")
browser_vision(question="Apakah tata letak ini terlihat bersih dan terbaca? Ada bug yang terlihat (teks tumpang tindih, elemen tidak terformat, gambar rusak)?")

browser_vision mengembalikan deskripsi AI tentang apa yang sebenarnya ada di halaman plus jalur tangkapan layar — menangkap bug tata letak yang terlewat oleh inspeksi sumber murni (mis. impor font yang gagal diam-diam, wadah flex yang runtuh). Perbaiki dan navigasi ulang sampai setiap varian terlihat benar.

Reset CSS default + tumpukan font sistem untuk memulai cepat:

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    background: #fafafa;
    line-height: 1.5;
  }
</style>

4. README Varian

File README.md setiap varian menjawab:

## Varian: {nama sikap}

### Sikap desain
Satu kalimat tentang prinsip yang mendorong varian ini.

### Pilihan kunci
- Tata letak: ...
- Tipografi: ...
- Warna: ...
- Interaksi: ...

### Trade-off
- Kuat pada: ...
- Lemah pada: ...

### Terbaik untuk
- Jenis pengguna atau kasus penggunaan yang benar-benar dilayani varian ini

5. Head-to-head

Setelah semua varian dibangun, sajikan sebagai perbandingan. Jangan hanya daftar — berikan pendapat:

## Tiga interpretasi layar beranda

| Dimensi | Tenang editorial | Utilitarian padat | Playful split |
|-----------|----------------|-------------------|---------------|
| Kepadatan   | Rendah            | Tinggi              | Sedang        |
| Visibilitas aksi utama | Rendah | Tinggi | Sedang |
| Keterbacaan scan | Tinggi | Sedang | Rendah |
| Nuansa | Tenang, tepercaya | Tajam, seperti alat | Mengundang, energetik |

**Pendapat saya:** Utilitarian padat untuk pengguna ahli, tenang editorial untuk audiens yang mengutamakan konten. Playful split adalah yang terlemah — mencoba melakukan keduanya dan tidak berkomitmen pada salah satu.

Biarkan pengguna memilih pemenang, atau gabungkan dua menjadi hibrida, atau mintalah putaran lain.

Tema (ketika proyek memiliki identitas visual)

Jika pengguna memiliki tema yang ada (warna, font, token), letakkan token bersama di sketches/themes/tokens.css dan @import di setiap varian. Jaga token seminim mungkin:

/* sketches/themes/tokens.css */
:root {
  --color-bg: #fafafa;
  --color-fg: #1a1a1a;
  --color-accent: #0066ff;
  --color-muted: #666;
  --radius: 8px;
  --font-display: "Inter", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, sans-serif;
}

Jangan terlalu banyak token pada sketsa sekali pakai — tiga warna dan satu font biasanya sudah cukup.

Batas interaktivitas

Sebuah sketsa cukup interaktif ketika pengguna dapat:

1. Klik aksi utama dan sesuatu yang terlihat terjadi (perubahan status, modal, toast, pura-pura navigasi)
2. Lihat satu transisi status yang berarti (filter daftar, alihkan mode, buka/tutup panel)
3. Hover affordance yang dapat dikenali (tombol, baris, tab)

Lebih dari itu adalah over-engineering untuk sekali pakai. Kurang dari itu adalah tangkapan layar.

Mode frontier (memilih apa yang akan disketsa selanjutnya)

Jika sketsa sudah ada dan pengguna berkata "apa yang harus saya sketsa selanjutnya?":

• Kesenjangan konsistensi — dua varian pemenang dari sketsa berbeda membuat pilihan independen yang belum digabungkan bersama
• Layar belum disketsa — direferensikan tetapi belum pernah dieksplorasi
• Cakupan status — jalur bahagia disketsa, tetapi tidak kosong / loading / error / 1000-item
• Kesenjangan responsif — divalidasi pada satu viewport; apakah bertahan di mobile / ultra-wide?
• Pola interaksi — tata letak statis ada; transisi, tarik, perilaku gulir tidak

Ajukan 2-4 kandidat bernama. Biarkan pengguna memilih.

Output

• Buat sketches/ (atau .planning/sketches/ jika pengguna menggunakan konvensi GSD) di root repo
• Satu subdirektori per varian: NNN-nama-sikap/index.html + README.md
• Beri tahu pengguna cara membukanya: open sketches/001-calm-editorial/index.html di macOS, xdg-open di Linux, start di Windows
• Jaga varian sekali pakai — sketsa yang Anda rasa perlu disimpan harus dipromosikan menjadi kode proyek nyata, bukan dikurasi sebagai aset

Urutan alat khas untuk satu varian:

terminal("mkdir -p sketches/001-calm-editorial")
write_file("sketches/001-calm-editorial/index.html", "<!doctype html>...")
write_file("sketches/001-calm-editorial/README.md", "## Varian: Tenang editorial\n...")
browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html")
browser_vision(question="Bagaimana tampilannya? Ada masalah tata letak yang jelas?")

Ulangi untuk setiap varian, lalu sajikan tabel perbandingan.

Atribusi

Diadaptasi dari alur kerja /gsd-sketch proyek GSD (Get Shit Done) — MIT © 2025 Lex Christopherson (gsd-build/get-shit-done). Sistem GSD lengkap mengirimkan status sketsa persisten, referensi pola tema/varian, dan alur kerja audit konsistensi; instal dengan npx get-shit-done-cc --hermes --global.