Mockup with opencode

Okay, after kita dah paham basic understanding of the system architechture usually we want to build it directly but sabar dulu. Kita Vibe Code sat.

Vibe code apa? Mockup. Mockup ni actually ada mcm2 cara lah kalau dlm SAD kita belajar untuk pakai figma tapi personally aku rasa mcm better pakai AI je untuk mockup mudah and cepat.

Kenapa mockup dulu, bukan terus kod?

Tool untuk mockup: 4 benda je

Usually for mockup this is what i find the best after building for an unhealthy amount:

Kenapa tak pakai React je terus? Sebab mockup ni sekejap je, sebab ingat Mockup ni mmg kita just focus untuk mcm nak tgk design and tgk flow

Prompts

Part paling penting: macam mana kau suruh opencode buat kerja tu. Ni template asas — macam yang aku selalu guna:

build a mockup using html tailwind font awesome and javascript for [PROJEK]
with this feature [FEATURES]
i want to use this color [WARNA]
the design i want it to be [DESIGN]

Simple kan? Tapi realitinya, the more detail prompt you give the better the output.

Create a mockup in a single index.html file using HTML + Tailwind CSS (CDN) + Font Awesome + vanilla JavaScript.

Project: Gallery Blog — a photo gallery website where users can view, like, and comment on pictures.

Features:

Image grid layout

Folder / category filter

Lightbox modal when clicking on an image

Like and comment functionality

Admin: image upload form

Color Palette:

Background: #FAF7F2

Accent: #4F46E5

Highlight: #F97316

Design: Clean & minimal — plenty of white space and rounded corners.

Ensure it is responsive and uses placeholder images.

ini mcm nak mudahkanlah untuk belajar tapi lagi bagus kalau mcm kau belajar mcm mana nak prompt

Build a website mockup using HTML + Tailwind CSS (via CDN) + Font Awesome + vanilla JavaScript.
Keep everything in a single index.html file — no build tools, open it straight in the browser.

Project: Gallery Blog — website gambar — orang boleh tengok gambar, filter ikut folder, like dan komen. Ada admin section untuk upload gambar baru.

Features needed:
- Image grid
- Folder/category filter
- Lightbox (click to enlarge)
- Like button on photos
- Comments on photos
- Admin: upload photos
- Admin: create folders
- Responsive (mobile friendly)

Colors: use this palette — background #FAF7F2, primary/accent #4F46E5, highlight #F97316. Keep the colors consistent across the page.

Design: Clean & minimal — lots of whitespace, tidy layout, no unnecessary decoration.

Make sure it is responsive on phone and desktop, use placeholder images from picsum.photos, and every basic interaction is clickable.

Guna opencode

Okay sekarang kita jalankan dia. Kalau kau belum ada opencode, ni step ringkasnya:

1. 1

   Install opencode

   Guna npm — cara paling senang dan jalan dalam Windows juga.

                 npm install -g opencode-ai
               

   Ada juga install script (curl -fsSL https://opencode.ai/install | bash) untuk Mac/Linux. Dalam Windows, WSL bagi pengalaman paling penuh.

2. 2

   Sambung model

   Run opencode, lepas tu taip /connect untuk pilih provider dan model. Kalau tak sure nak guna model apa, OpenCode Zen ada senarai yang dah diuji.

                 opencode
   /connect
               

3. 3

   Sediakan folder kosong

   Buat folder baru khas untuk mockup — jangan campur dengan projek kod kau.

                 mkdir mockup-galeri
   cd mockup-galeri
   opencode
               

4. 4

   Paste prompt

   Copy prompt dari Prompt Builder tadi, paste dalam opencode dan tekan enter. Biar dia buat kerja — dia akan create fail index.html.

5. 5

   Buka dalam browser

   Tengok hasilnya. Dalam Windows, run command dalam folder tu. Mac: guna open index.html.

                 start index.html
               

   Atau double-click je fail index.html tu.

6. 6

   Tak kena? Jangan edit sendiri

   Cakap je kat opencode apa yang tak kena: "warna terlalu gelap, tukar ke krim". Kalau dia tersasar jauh, taip /undo dan prompt balik.

Iterate tu normal

Kebanyakan orang expect prompt pertama terus perfect. Realitinya tak — dan takpe. Ni contoh sesi sebenar, perhatikan cara dia cakap:

Hasil sebenar

Ni contoh mockup yang aku hasilkan guna prompt default dalam builder tadi. Betul-betul output, takde edit tangan:

Perasan tak? Dia nampak macam website betul, tapi takde apa di belakang. Refresh pun data balik asal. Tu mockup — dan tu memang tujuannya.

Bila mockup dah cukup

Jangan over-polish. Mockup ada titik cukup — lepas tu kita move on. Checklist:

Kalau semua dah tick — kau dah ready untuk sub-lesson seterusnya.

Recap

Dalam sub-lesson seterusnya, kita mula bina benda sebenar: setup monorepo, React dan Express. Kod, akhirnya.