Interactive website rakentaa sivuston, joka oikeasti toimii — oikeaa HTML:ää, CSS:ää ja JavaScriptiä useiden sivujen yli, livenä esikatselussa, klikattavana ja ohjattavana. Se on ero verkkosivun mockupin ja verkkosivun välillä.
Mitä sivustoajo rakentaa
Briefaa se kuin projekti — "landing-sivu coffee-tilaukselle: hero, kolme blendiä, hinnoittelu, footer" — ja agentti rakentaa sivuston: sivut, navigaation, interaktiot, responsiivisen layoutin. Esikatselu on sivusto itse, ajossa paikallisesti — scrollaa sitä, klikkaa linkkejä, raahaa leveyttä, katso interaktioiden laukeavan.
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.”
Real tarkoittaa realia
Sivusto on todellista koodia projektikansiossa — voit avata tiedostot, lukea merkintää, lähettää tuloksen. Tuo rehellisyys merkitsee sille, mihin sivustoa käytetään: toimiva prototyyppi, jonka voit laittaa jonkun eteen, landing-sivu, jonka voit oikeasti deployata, proof of concept, joka todistaa konseptin toimivan.
- Navigaatio — linkit, jotka menevät jonnekin, gaten tarkistamina
- Interaktiot — menut, modalit, scroll-efektit, toimivat kontrollit
- Responsiivisuus — viisi leveyttä, joita gate tarkistaa, livenä viewporteissa
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.”
Sivuston ohjaaminen
Koko ohjaustyökalusarja pätee — kyse on silti tiedostoista kansiossa:
- ⌥-klikkaa elementtiä, joka on pielessä, kommentoi tarkkaa solmua
- Tweaks live-parametreille — teema, välit, liike
- Jatkot puuttuvalle sivulle tai väärälle interaktiolle ("navin pitäisi romahtaa draweriksi mobiililla")
- Versiot toisen oteen kokeilemiseksi samalle sivustolle
Gate tarkistaa sen kuin sivusto: live-nav joka leveydellä, kontrasti, osumakohteet, layoutin todellinen toiminta puhelimen koossa — ei vain se, että se renderöityy.
Missä se on hyvä
- Landing-sivut — markkinointisivu, lanseeraussivu, tuotesivu
- Toimivat prototyypit — todista interaktio, älä vain ulkoasua
- Pienet oikeat sivustot — henkilökohtainen sivu, tapahtumasivu, portfolio
- Interaktiiviset demol — jotain, mitä ihmiset voivat oikeasti klikata
Verkkosivu vs mockup vs mobiilisovellus
- Interactive website — toimiva sivusto, monisivuinen, oikea käyttäytyminen
- UI mockups — kuva käyttöliittymästä, työpöytä- tai web-muotoinen
- Mobile app — puhelimen kokoiset näytöt, kosketuskoosteiset kontrollit
Jos sen täytyy toimia — ei vain näyttää siltä, että se toimii — se on tämä pohja.
Vinkki: Lähetä sivuston runko ennen viimeistelyä — "tee kaikki neljä sivua toimiviksi ensin" laskeuttaa navigoitavan sivuston, jota voit ohjata, sen sijaan että saisit yhden täydellisen etusivun ja kolme kuollutta linkkiä, jotka gate liputtaisi joka tapauksessa.
Vieminen
Sivustot viedään ZIP:iin tai HTML:ään — tiedostoihin, jotka deployaat sellaisenaan — tai PNG / PDF:ään visuaalista tallennetta varten. Projektikansio säilyttää lähteen seuraavaa ohjausta tai sivuston seuraavaa versiota varten.