Hallmark: Skill Desain Open Source yang Mengakhiri AI Slop

Kalau kamu pernah meminta AI coding agent membuat landing page, kamu pasti tahu hasilnya: gradasi ungu yang sama, label eyebrow di atas setiap heading, dan grid kartu generik yang itu-itu saja. Terlihat rapi selama lima detik, lalu langsung terlupakan. Hallmark dibuat untuk memperbaiki hal itu. Ini adalah skill desain open source untuk Claude Code, Codex, Cursor, dan OpenCode yang menolak membiarkan frontend buatan AI terlihat seperti buatan AI, dengan memberi agent selera desain, sistem tema, dan gerbang kualitas di browser asli sebelum apa pun dirilis.

Poin Penting

Hallmark adalah skill desain gratis berlisensi MIT yang bekerja dengan Claude Code, Codex, Cursor, dan OpenCode.

Ia membagikan satu dari lima puluh tema kurasi manusia di setiap build, sehingga dua prompt dalam tema yang sama tetap menghasilkan halaman berbeda.

Setiap build di-lint di browser asli dengan sloplint dan ditinjau dengan mata segar sebelum dirilis.

Ia juga bisa mendesain ulang atau mengaudit halaman yang sudah ada, sambil menjaga konten, tautan, dan formulirnya tetap utuh.

Pasang dengan satu perintah: npx skills add nutlope/hallmark -g.

Apa sebenarnya Hallmark itu

Hallmark bukan website builder dan bukan pustaka komponen. Ia adalah sebuah skill, yaitu sekumpulan instruksi, referensi, dan skrip yang diikuti AI coding agent saat mendesain dan membangun halaman. Proyeknya ada di nutlope/hallmark di GitHub, dibuat oleh Together AI, dan sudah mengumpulkan lebih dari 39.000 bintang GitHub. Situs resminya, usehallmark.com, menunjukkan prompt yang sama dibangun dengan dan tanpa Hallmark, lengkap dengan jumlah masalah dari linter di samping tiap versi.

Ide intinya sederhana: agent tanpa panduan desain akan kembali ke pola yang paling sering ia lihat, dan pola-pola itu persis yang kini dikenali pembaca sebagai AI slop. Hallmark mengganti default itu dengan sebuah lantai kualitas, seperangkat tema, dan loop peninjauan, sehingga agent harus membuat keputusan desain sungguhan, bukan mengulang rata-rata internet.

Tonton sinyal repo 30 detiknya: Tonton sinyal repo 30 detik.

Seperti apa AI design slop itu

Linter Hallmark, sloplint, memeriksa daftar ciri yang spesifik, dan membaca daftar itu adalah cara tercepat memahami proyek ini. Ia menandai label eyebrow di atas setiap heading, label yang ditulis dengan huruf kapital berjarak, satu kata berwarna di dalam headline, halaman yang hanya berisi frame kosong atau hanya foto, hero yang meleset dari layar, formulir daftar email di akhir setiap halaman, dan formulir yang mengucapkan terima kasih tanpa benar-benar mengirim apa pun. Masing-masing terlihat sepele, tetapi bersama-sama itulah ciri khas halaman buatan AI.

Gerbangnya bertingkat. Floor tidak pernah lolos: kontras, state fokus, dukungan reduced motion, fakta yang dikarang, dan tata letak ponsel yang rusak adalah kegagalan keras. Gerbang Reflex mencakup default yang biasa dipilih model, dan build yang punya alasan boleh mengesampingkan satu gerbang dengan catatan. Pemeriksaan Finish mencakup detail kerajinan yang tidak pernah menghalangi rilis. Penjenjangan ini penting, karena menjaga skill ini agar tidak menjadi template kaku: ia memblokir cacat nyata, mempertanyakan default yang malas, dan menyerahkan polesan pada penilaian.

Cara kerja sebuah build

Build Hallmark mengikuti urutan yang tetap, dan urutan itulah sumber sebagian besar kualitasnya.

1. Pre-flight membaca proyek. Ia memeriksa font, palet, framework, dan design.md yang terkunci, lalu meminta satu kali materi yang dibutuhkan: foto, tangkapan layar, dan angka asli. Tidak ada yang dikarang.

2. Tiga tema dibagikan. Skrip theme.mjs menawarkan tiga tema yang cocok dengan prompt, lalu build memilih satu. Langkah draw kemudian menyusun anatomi halaman dari tugasnya, sehingga halaman booking benar-benar untuk booking, toko benar-benar untuk jualan, dan newsletter benar-benar untuk berlangganan.

3. Hero dibangun sendirian. Hero di-render dan ditinjau dalam kondisi dingin sebelum sisa halaman ada, sehingga hero yang lemah tidak bisa bersembunyi di dalam halaman panjang.

4. Halaman di-lint dan ditinjau. sloplint.mjs --render memeriksa halaman pada delapan lebar, lalu subagent meninjaunya dengan mata segar. Setiap halaman adalah HTML dan CSS mandiri, yang distempel di komentar CSS pertamanya dengan keputusan yang diambil.

Urutan ini, desain sebelum kode, tema sebelum tata letak, hero sebelum sisanya, adalah kebalikan dari cara kerja kebanyakan agent kalau dibiarkan sendiri, yaitu menghasilkan semuanya sekaligus dan berharap tampilannya bagus.

Lima puluh tema, bukan lima puluh template

Versi 2 Hallmark membawa lima puluh tema, dan perbedaan antara tema dan template adalah intinya. Setiap tema adalah sebuah material: kertas, tipografi, warna, permukaan, komponennya sendiri, dan tekstur, dengan gambar halaman jadi di sampingnya. Tema tidak pernah menentukan isi halaman atau urutannya, sehingga dua prompt dalam satu tema menghasilkan dua halaman berbeda. Setiap tema adalah satu file berukuran maksimal 8 KB, dan sebuah build hanya membaca satu file.

Ada juga mode custom. Katakan custom dan Hallmark membuang tema sepenuhnya: tanpa rencana, tanpa komponen, tanpa resep palet, hanya lantai kualitas, gerbang, dan arahan singkat untuk menemukan satu ide yang hanya dimiliki klien itu, lalu membiarkan ide itu menjalankan halaman. Ini menjaga skill tetap berguna untuk brand yang sudah punya identitas kuat dan tidak ingin terlihat seperti demo tema.

Foto mendapat perlakuan jujur yang sama. Hallmark membawa pustaka berisi 755 foto berlisensi terbuka, dipilih per subjek dan dikreditkan di halaman, yang diambil dari Wikimedia Commons, bukan dari situs stok yang ketentuannya melarang AI memilih gambarnya. Tidak perlu API key, dan image key bersifat opsional.

Desain ulang dan audit untuk halaman yang sudah ada

Hallmark tidak pernah memulai dari desain yang sudah ada kecuali kamu menyebutnya. Perintahnya eksplisit:

• /hallmark redesign ./src/app membangun ulang halaman sambil menjaga konten dan wiring-nya.

• /hallmark audit ./index.html hanya melaporkan, tanpa mengubah apa pun.

Desain ulang penuh menjaga konten dan wiring, lalu mengubah sistem dan tata letaknya. Katakan keep the layout untuk restyle, atau polish hanya untuk ciri-cirinya. Sebelum desain ulang, sloplint --before mencatat setiap tautan, field, handler, dan heading, dan sloplint --kept menggagalkan desain ulang kalau ada satu yang hilang. Serah terimanya adalah perbandingan berdampingan sebelum dan sesudah, sehingga kamu bisa melihat apa yang benar-benar berubah.

Pasang dalam satu baris

Instalasinya satu perintah:

npx skills add nutlope/hallmark -g

Flag -g memasangnya untuk semua proyek; hilangkan flag itu untuk memasang di proyek saat ini saja. Ia membutuhkan Node 18 atau yang lebih baru. Pemeriksaan browser, sloplint --render dan tangkapan layar, juga membutuhkan puppeteer-core dan Chrome; tanpanya, pemeriksaan statis tetap berjalan. Kalau skill tidak aktif sendiri, sebut namanya: minta agent memakai Hallmark untuk membangun halaman itu.

Apa yang tidak dilakukan Hallmark

Hallmark jujur soal batasnya, dan batas itu layak diketahui sebelum kamu memasangnya. Ia mendesain halaman, bukan seluruh produk: ia tidak akan merencanakan backend, menulis logika bisnis, atau memperbaiki strategi produk yang rusak. Ia bekerja di dalam agent yang didukungnya, Claude Code, Codex, Cursor, dan OpenCode, sehingga ia bukan alat desain umum untuk semua alur kerja. Dan ia tidak bisa menyelamatkan konten yang tidak ada: pre-flight meminta materi asli justru karena foto dan angka karangan adalah bagian dari slop yang ingin ia hapus. Kalau kamu memberinya prompt samar tanpa materi, bersiaplah ia bertanya dulu.

Kenapa ini penting

AI coding agent membuat pembuatan halaman menjadi murah, dan halaman murah itu mulai terlihat sama semua. Hallmark menarik karena memperlakukan kesamaan itu sebagai bug kualitas yang punya checklist, bukan soal selera yang diperdebatkan. Lantai kualitas yang tidak pernah lolos, lima puluh material sebagai pengganti satu tampilan default, dan peninjauan dengan mata segar sebelum rilis: itu proses kecil, tetapi itulah perbedaan antara halaman yang terlihat buatan mesin dan halaman yang terlihat didesain.

Kalau kamu membangun frontend dengan AI agent, coba di landing page berikutnya dan bandingkan hasilnya dengan agent saja. Perbedaannya adalah seluruh argumennya.

Baca artikel ini dalam Bahasa Inggris: Read this article in English.

FAQ

Apakah Hallmark gratis?

Ya. Ia open source di bawah lisensi MIT, sehingga kamu bisa memakai, mem-fork, dan merilis dengan Hallmark.

AI coding agent apa saja yang didukung Hallmark?

Claude Code, Codex, Cursor, dan OpenCode. Ia dipanggil sebagai /hallmark <prompt> di sebagian besar agent, atau $hallmark <prompt> di Codex.

Apakah saya perlu API key?

Tidak. Foto berasal dari pustakanya sendiri yang berisi gambar berlisensi terbuka, dan image key bersifat opsional.

Bisakah Hallmark mendesain ulang situs saya yang sudah ada?

Ya, kalau kamu memintanya dengan nama lewat /hallmark redesign <path>. Ia menjaga konten, tautan, dan formulir kamu, lalu membangun ulang tampilannya. Ia tidak pernah menyentuh situs yang sudah ada dengan sendirinya.

Apa bedanya Hallmark dengan pustaka komponen UI?

Pustaka komponen memberimu potongan siap pakai. Hallmark memberi agent proses desain: tema, gerbang, lint di browser asli, dan peninjauan mata segar, sehingga halaman jadi terasa didesain, bukan sekadar dirakit.