Interactive website dựng một site thực sự hoạt động — HTML, CSS và JavaScript thật trên nhiều trang, live trong preview, click được và điều hướng được. Đó là khác biệt giữa một mockup của website và một website.
Một lượt chạy site dựng gì
Brief nó như một dự án — "landing site cho dịch vụ cà phê đăng ký: hero, ba blend, pricing, footer" — và agent dựng site: các trang, nav, các tương tác, layout responsive. Preview chính là site đó, chạy local — cuộn nó, click các link, kéo độ rộng, xem các tương tác kích hoạt.
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.”
Thật nghĩa là thật
Site là code thật trong thư mục dự án — bạn có thể mở file, đọc markup, ship output. Sự trung thực đó quan trọng cho việc site dùng để làm gì: một prototype hoạt động bạn có thể đặt trước ai đó, một landing page bạn thực sự deploy được, một proof of concept chứng minh concept chạy được.
- Điều hướng — các link dẫn tới đâu đó, được cổng kiểm tra
- Tương tác — menu, modal, hiệu ứng cuộn, điều khiển hoạt động
- Responsive — năm độ rộng cổng kiểm tra, live trong các 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.”
Điều hướng một site
Bộ công cụ điều hướng đầy đủ đều áp dụng — nó vẫn là file trong một thư mục:
- ⌥-click phần tử bị lệch, bình luận đúng node
- Tweaks cho tham số trực tiếp — theme, khoảng cách, motion
- Follow-ups cho một trang thiếu hoặc tương tác sai ("nav nên collapse thành drawer trên mobile")
- Versions để thử một hướng khác của cùng site
Cổng kiểm tra nó như một site: nav live ở mọi độ rộng, tương phản, vùng chạm, layout thực sự hoạt động ở kích thước phone — không chỉ là render được.
Nó giỏi gì
- Landing page — site marketing, trang launch, trang sản phẩm
- Prototype hoạt động — chứng minh tương tác, không chỉ cái nhìn
- Site thật nhỏ — trang cá nhân, site sự kiện, portfolio
- Demo tương tác — thứ người ta thực sự click được
Website vs mockup vs mobile app
- Interactive website — một site hoạt động, nhiều trang, hành vi thật
- UI mockups — một hình của giao diện, dáng desktop hoặc web
- Mobile app — màn hình dáng phone, điều khiển cỡ chạm
Nếu nó cần hoạt động — không chỉ trông như hoạt động — đó là mẫu này.
Mẹo: Ship bộ khung của site trước phần polish — "dựng cả bốn trang hoạt động trước" cho một site điều hướng được mà bạn có thể điều chỉnh, thay vì một homepage hoàn hảo và ba link chết mà cổng sẽ flag.
Export
Site export ra ZIP hoặc HTML — các file bạn deploy nguyên trạng — hoặc ra PNG / PDF cho hồ sơ trực quan. Thư mục dự án giữ source cho lần điều hướng hoặc version tiếp theo của site.