Interactive website membangun situs yang benar-benar bekerja — HTML, CSS, dan JavaScript nyata lintas beberapa halaman, live di pratinjau, bisa diklik dan diarahkan. Inilah bedanya mockup sebuah website dan sebuah website.
Apa yang dibangun run situs
Beri brief seperti sebuah proyek — "situs landing untuk langganan kopi: hero, tiga blend, harga, footer" — dan agen membangun situsnya: halaman-halamannya, nav-nya, interaksinya, layout responsifnya. Pratinjau adalah situs itu sendiri, berjalan secara lokal — scroll, klik tautannya, seret lebarnya, saksikan interaksinya menyala.
Mobile app · Devin · subagent · 9 screens · 5 files
Canopy — A plant-care prototype you can click through — nine states, light and dark, keyboard and offline fixtures.
▸ the prompt that made it▾ the prompt that made it
“Build the full flow from the product contract as a clickable HTML prototype, one screen per file plus an overview. Light and dark. Include the keyboard-open fixture for the add-plant form, a long Vietnamese plant name, and a large-text variant of the Today screen. Fixture data only; no network.”
Nyata berarti nyata
Situsnya adalah kode sungguhan di folder proyek — Anda bisa membuka file-nya, membaca markup-nya, mengirim output-nya. Kejujuran itu penting untuk apa situs itu digunakan: prototipe bekerja yang bisa Anda tunjukkan ke seseorang, landing page yang benar-benar bisa Anda deploy, proof of concept yang membuktikan konsepnya bekerja.
- Navigasi — tautan yang menuju ke suatu tempat, diperiksa gate
- Interaksi — menu, modal, efek scroll, kontrol yang bekerja
- Responsif — lima lebar yang diperiksa gate, live di viewport
Mobile app · Devin · swe-2-high · 22 min
Living Sky Weather — Five phone screens, five skies — animated weather that re-tints the whole interface per condition.
▸ the prompt that made it▾ the prompt that made it
“Design a mobile weather app as 5 phone screens (390×844) for Nha Trang: sunny noon, cloudy afternoon, tropical rain, thunderstorm at night, and clear night with stars. The top half of each screen is an animated sky (canvas or CSS: sun glare, drifting clouds, rain streaks, lightning flash, stars) that matches the condition and time. Content: current temperature, feels-like, hourly strip (12 hours), 7-day list with bars for temperature ranges, UV, rain chance, and a severe weather alert card for the storm screen. UI colors adapt per condition while keeping text contrast ≥ 4.5:1. Include a reduced-motion version.”
Mengarahkan sebuah situs
Toolkit pengarahan penuh berlaku — ia tetap file dalam folder:
- ⌥-click elemen yang meleset, beri komentar di node yang persis
- Tweaks untuk parameter live — tema, spasi, gerak
- Tindak lanjut untuk halaman yang hilang atau interaksi yang salah ("nav-nya harusnya collapse jadi drawer di mobile")
- Versions untuk mencoba pendekatan berbeda pada situs yang sama
Gate memeriksanya seperti situs: nav live di setiap lebar, kontras, target sentuh, layout yang benar-benar bekerja pada ukuran ponsel — bukan sekadar ia ter-render.
Apa yang dikuasainya
- Landing page — situs marketing, halaman rilis, halaman produk
- Prototipe bekerja — buktikan interaksinya, bukan hanya tampilannya
- Situs nyata kecil — halaman pribadi, situs acara, portofolio
- Demo interaktif — sesuatu yang benar-benar bisa diklik orang
Website vs mockup vs mobile app
- Interactive website — situs bekerja, multi-halaman, perilaku nyata
- UI mockups — gambar sebuah antarmuka, berbentuk desktop atau web
- Mobile app — layar berbentuk ponsel, kontrol skala sentuh
Kalau ia harus bekerja — bukan hanya terlihat bekerja — ini template-nya.
Tip: Kirim kerangka situsnya sebelum polesannya — "buat keempat halaman bekerja dulu" menghasilkan situs yang bisa dinavigasi dan diarahkan, alih-alih satu homepage sempurna dan tiga tautan mati yang toh akan ditandai gate.
Mengekspor
Situs diekspor ke ZIP atau HTML — file yang Anda deploy apa adanya — atau ke PNG / PDF untuk rekam jejak visual. Folder proyek menyimpan sumbernya untuk pengarahan atau versi situs berikutnya.