# Pembuat Sketsa Mockup HTML

> Hasilkan 2-3 varian mockup HTML interaktif untuk membandingkan arah desain UI/UX sebelum memutuskan satu pendekatan. Jelajahi berbagai sudut pandang visual dengan cepat dan kumpulkan umpan balik.

- Canonical: https://nanoskill.ai/id/skills/html-mockup-sketcher
- Markdown: https://nanoskill.ai/id/skills/html-mockup-sketcher.md
- Author: NousResearch
- Published: 2026-06-04T05:30:00.000Z
- Updated: 2026-07-21T18:34:02.819Z
- Language: id
- Source type: github
- Popularity signal: 2137

## Sources

- https://github.com/NousResearch/hermes-agent

## Install

```shell
npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch
```

## About

Pembuat Sketsa Mockup HTML adalah keterampilan yang ampuh dirancang untuk membantu pengguna dengan cepat menjelajahi dan membandingkan arah desain UI/UX melalui mockup HTML sekali pakai. Alih-alih berkomitmen pada satu desain, alat ini menghasilkan 2-3 varian interaktif, memungkinkan perbandingan berdampingan dari berbagai pendekatan visual. Ini ideal untuk eksplorasi desain tahap awal, membantu Anda memvisualisasikan konsep dan mengumpulkan umpan balik sebelum investasi pengembangan yang signifikan.

Keterampilan ini berfokus pada pembuatan mockup HTML yang fungsional dan interaktif yang melampaui gambar statis. Setiap varian adalah file HTML mandiri yang menampilkan CSS sebaris, font sistem, dan konten realistis. Yang terpenting, mockup ini menyertakan interaktivitas dasar seperti tautan yang dapat diklik, status hover, dan setidaknya satu transisi keadaan, memberikan nuansa yang lebih nyata untuk pengalaman pengguna. Alat browser terintegrasi memungkinkan verifikasi visual, memastikan mockup bersih dan bebas bug.

Untuk memfasilitasi pengambilan keputusan yang tepat, Pembuat Sketsa Mockup HTML menyediakan perbandingan terstruktur. Setiap varian dilengkapi dengan \`README.md\` terperinci yang menguraikan prinsip desainnya, pilihan utama, kompromi, dan kasus penggunaan yang paling sesuai. Setelah pembuatan, tabel komparatif merangkum perbedaan di berbagai dimensi desain, disertai dengan analisis opini untuk membantu Anda memilih pemenang, menggabungkan elemen, atau melakukan iterasi lebih lanjut.

## Key features

- **Hasilkan Beberapa Varian Desain**: Hasilkan 2-3 varian mockup HTML yang berbeda secara bersamaan, masing-masing mengeksplorasi pendirian desain yang berbeda (misalnya, kepadatan, penekanan, estetika, tata letak) untuk perbandingan berdampingan.
- **Mockup HTML Interaktif**: Buat file HTML mandiri dengan CSS inline, font sistem, dan konten palsu realistis. Mockup bersifat interaktif, memungkinkan tautan yang dapat diklik, efek hover, dan setidaknya satu transisi status.
- **Verifikasi Visual dengan Alat Peramban**: Manfaatkan navigasi peramban terintegrasi dan alat penglihatan untuk memeriksa dan memverifikasi secara visual setiap mockup HTML, memastikan tata letak bersih, dapat dibaca, dan bebas bug sebelum presentasi.
- **Dokumentasi Varian Terstruktur**: Setiap varian mockup HTML menyertakan \`README.md\` yang merinci pendirian desainnya, pilihan utama (tata letak, tipografi, warna, interaksi), trade-off, dan kasus penggunaan ideal untuk memfasilitasi perbandingan yang terinformasi.
- **Tabel Analisis Perbandingan**: Sajikan semua varian mockup HTML yang dihasilkan dalam tabel perbandingan, menyoroti perbedaan di berbagai dimensi utama seperti kepadatan, visibilitas tindakan utama, kemudahan dipindai, dan kesan keseluruhan, beserta ringkasan berpendapat.

## Use cases

- **Jelajahi Arah Desain UI/UX**: Hasilkan dan bandingkan dengan cepat beberapa varian mockup HTML untuk mengeksplorasi ide desain antarmuka pengguna dan pengalaman pengguna yang berbeda sebelum berinvestasi waktu pengembangan yang signifikan.
- **Kumpulkan Umpan Balik tentang Konsep Visual**: Sajikan mockup HTML interaktif kepada pemangku kepentingan atau pengguna untuk mengumpulkan umpan balik awal tentang berbagai arah visual, membantu menyempurnakan konsep dan membuat keputusan desain yang terinformasi.
- **Prototipe Cepat untuk Fitur Baru**: Buat mockup HTML yang dapat dibuang untuk membuat prototipe cepat fitur atau layar baru, dengan fokus pada fungsionalitas inti dan aliran visual daripada kode siap produksi.

## Result preview

Lihat HTML nyata tentang situs web hotel butik yang dihasilkan oleh Keterampilan Agen ini.

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg)

## Result walkthrough

### Langkah 1：Instal

Tambahkan keterampilan ke agen Anda.

![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg)

### Langkah 2：Deskripsikan Situs Web Anda

Jelaskan informasi rinci (misalnya, gaya, jenis) dari situs web yang ingin Anda buat.

![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg)

### Langkah 3：Tinjau Hasil

Tinjau dan bandingkan mockup HTML yang dihasilkan.

![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg)

## Skill definition

# 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:

```html
<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:

```markdown
## 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**:

```markdown
## 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:

```css
/* 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](https://github.com/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`.

## FAQ

### Apa itu mockup HTML?

Mockup HTML adalah halaman web interaktif yang dapat dibuang, dibuat dengan HTML dan gaya dasar (sering kali CSS inline) untuk memvisualisasikan dan membandingkan berbagai ide desain UI/UX dengan cepat. Ini tidak dimaksudkan untuk produksi tetapi untuk eksplorasi desain tahap awal.

### Berapa banyak varian mockup HTML yang dihasilkan oleh keterampilan ini?

Keterampilan ini biasanya menghasilkan 2-3 varian mockup HTML interaktif sekaligus. Tujuannya adalah untuk memberikan pendirian desain yang kontras untuk perbandingan, bukan daftar lengkap variasi kecil.

### Bisakah saya menggunakan keterampilan ini untuk membuat kode yang siap produksi?

Tidak, keterampilan ini dirancang khusus untuk mockup HTML 'sekali pakai' untuk mengeksplorasi arah desain. Untuk komponen siap produksi atau artefak yang halus, Anda harus menggunakan alat atau keterampilan lain seperti \`claude-design\`.

### Jenis interaktivitas apa yang dimiliki mockup HTML?

Mockup HTML yang dihasilkan bersifat interaktif, artinya tautan dapat diklik, efek hover nyata, dan setidaknya ada satu transisi status (misalnya, membuka/menutup panel, memfilter daftar). Ini memberikan kesan yang lebih realistis daripada gambar statis.

### Bagaimana keterampilan ini membantu saya membandingkan desain yang berbeda?

Setelah menghasilkan mockup HTML, keterampilan ini menyediakan tabel perbandingan yang menyoroti perbedaan utama di berbagai dimensi desain (misalnya, kepadatan, tata letak, estetika). Ini juga menawarkan ringkasan berpendapat untuk memandu pengambilan keputusan Anda.

### Informasi apa yang perlu saya berikan untuk menghasilkan mockup HTML?

Untuk menghasilkan mockup HTML yang efektif, Anda akan ditanyai tentang 'rasa' yang diinginkan (kata sifat, suasana), aplikasi/situs referensi yang menangkap rasa itu, dan 'tindakan inti' terpenting yang dilakukan pengguna di layar.