Interactive website สร้างเว็บไซต์ที่ใช้งานได้จริง — HTML, CSS และ JavaScript จริงข้ามหลายหน้า สดใน preview คลิกได้ steer ได้ มันคือความต่างระหว่าง mockup ของเว็บไซต์กับเว็บไซต์
การรันเว็บไซต์สร้างอะไร
บรีฟมันเหมือนโปรเจกต์ — "เว็บไซต์ landing สำหรับบริการกาแฟแบบสมัครสมาชิก: hero สามเบลนด์ ราคา footer" — แล้ว agent สร้างเว็บไซต์: หน้า nav อินเทอร์แอกชัน เลย์เอาต์ responsive preview คือตัวเว็บไซต์เอง รันในเครื่อง — เลื่อนมัน คลิก ลิงก์ ลากความกว้าง ดูอินเทอร์แอกชันทำงาน
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.”
จริงหมายถึงจริง
เว็บไซต์คือโค้ดจริงในโฟลเดอร์โปรเจกต์ — คุณเปิดไฟล์ได้ อ่าน markup ส่งออก ผลลัพธ์ ความซื่อตรงนั้นสำคัญกับสิ่งที่เว็บไซต์มีไว้เพื่อ: โปรโตไทป์ที่ใช้ได้ จริงที่คุณวางต่อหน้าคนได้ หน้า landing ที่ deploy ได้จริง proof of concept ที่ พิสูจน์ว่าคอนเซ็ปต์ทำงาน
- Navigation — ลิงก์ที่ไปถึงอะไร ถูกตรวจโดยเกต
- Interactions — เมนู modal scroll effect ตัวควบคุมที่ทำงาน
- Responsive — ห้าความกว้างที่เกตตรวจ สดใน 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.”
การ steer เว็บไซต์
ชุดเครื่องมือ steering เต็มรูปแบบใช้ได้ — ยังคงเป็นไฟล์ในโฟลเดอร์:
- ⌥-click องค์ประกอบที่คลาด คอมเมนต์บน node ตัวเป๊ะ
- Tweaks สำหรับพารามิเตอร์สด — ธีม ช่องว่าง การเคลื่อนไหว
- ตามหลัง สำหรับหน้าที่ขาดหรืออินเทอร์แอกชันที่ผิด ("nav ควรยุบเป็น drawer บนมือถือ")
- Versions เพื่อลองอีกแบบของเว็บไซต์เดียวกัน
เกตตรวจมันเหมือนเว็บไซต์: nav สดทุกความกว้าง ความคมชัด เป้าหมายการแตะ เลย์เอาต์ ที่ทำงานจริงที่ขนาดโทรศัพท์ — ไม่ใช่แค่เรนเดอร์ออกมา
มันถนัดอะไร
- หน้า landing — เว็บไซต์การตลาด หน้าเปิดตัว หน้าผลิตภัณฑ์
- โปรโตไทป์ที่ใช้ได้ — พิสูจน์อินเทอร์แอกชัน ไม่ใช่แค่หน้าตา
- เว็บไซต์จริงขนาดเล็ก — หน้าส่วนตัว เว็บไซต์อีเวนต์ portfolio
- เดโมอินเทอร์แอกทีฟ — สิ่งที่คนคลิกได้จริง
เว็บไซต์ vs mockup vs แอปมือถือ
- Interactive website — เว็บไซต์ที่ใช้งานได้ หลายหน้า พฤติกรรมจริง
- UI mockups — ภาพของอินเทอร์เฟซ รูปทรงเดสก์ท็อปหรือเว็บ
- Mobile app — หน้าจอรูปทรงโทรศัพท์ ตัวควบคุมสเกลสัมผัส
ถ้ามันต้องทำงาน — ไม่ใช่แค่หน้าตาเหมือนทำงาน — มันคือเทมเพลตนี้
Tip: สร้างโครงของเว็บไซต์ก่อนขัดเกลา — "ทำทั้งสี่หน้าให้ทำงานก่อน" ได้ เว็บไซต์ที่นำทางได้ซึ่งคุณ steer ได้ แทนหน้าแรกสมบูรณ์หนึ่งหน้ากับลิงก์ตาย สามอันที่เกตจะติดธงอยู่ดี
การ export
เว็บไซต์ export เป็น ZIP หรือ HTML — ไฟล์ที่คุณ deploy ตรง ๆ — หรือเป็น PNG / PDF สำหรับบันทึกภาพ โฟลเดอร์โปรเจกต์เก็บ source สำหรับ steer ถัดไป หรือเวอร์ชันถัดไปของเว็บไซต์