Interactive website는 실제로 동작하는 사이트를 빌드합니다. 여러 페이지에 걸친 진짜 HTML, CSS, JavaScript로, 미리보기에서 라이브로 돌고, 클릭할 수 있고, 스티어링할 수 있습니다. 웹사이트의 목업과 웹사이트의 차이입니다.
사이트 실행이 만드는 것
프로젝트처럼 브리프하세요. "커피 정기구독을 위한 랜딩 사이트: 히어로, 세 가지 블렌드, 가격, 푸터" 같이요. 그러면 에이전트가 사이트를 빌드합니다. 페이지, nav, 인터랙션, 반응형 레이아웃까지요. 미리보기는 로컬에서 돌아가는 사이트 그 자체입니다. 스크롤하고, 링크를 클릭하고, 너비를 드래그하고, 인터랙션이 발화하는 것을 지켜보세요.
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.”
진짜는 진짜
사이트는 프로젝트 폴더의 실제 코드입니다. 파일을 열고, 마크업을 읽고, 결과물을 배포할 수 있습니다. 그 정직함이 사이트의 용도에 중요합니다. 누군가 앞에 놓을 수 있는 동작하는 프로토타입, 실제로 배포할 수 있는 랜딩 페이지, 컨셉이 동작함을 증명하는 개념 증명이니까요.
- 내비게이션 — 어딘가로 가는 링크, 게이트가 검사합니다
- 인터랙션 — 메뉴, 모달, 스크롤 효과, 동작하는 컨트롤
- 반응형 — 게이트가 검사하는 다섯 너비, 뷰포트에서 라이브
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.”
사이트 스티어링
전체 스티어링 도구 상자가 적용됩니다. 여전히 폴더 안의 파일이니까요.
- 어긋난 요소를 ⌥-click해 정확한 노드에 댓글
- 실시간 파라미터 — 테마, 간격, 모션 — 에는 Tweaks
- 빠진 페이지나 잘못된 인터랙션에는 후속 지시("nav는 모바일에서 드로어로 접혀야 해")
- 같은 사이트의 다른 시도에는 버전
게이트는 사이트답게 검사합니다. 모든 너비의 동작하는 nav, 대비, 히트 타겟, 폰 크기에서 실제로 동작하는 레이아웃 — 렌더링만 되는지가 아니라요.
강점
- 랜딩 페이지 — 마케팅 사이트, 출시 페이지, 제품 페이지
- 동작하는 프로토타입 — 보기만이 아니라 인터랙션 증명
- 작은 실제 사이트 — 개인 페이지, 이벤트 사이트, 포트폴리오
- 인터랙티브 데모 — 사람들이 실제로 클릭할 수 있는 것
웹사이트 vs 목업 vs 모바일 앱
- 인터랙티브 웹사이트 — 동작하는 사이트, 멀티 페이지, 실제 동작
- UI 목업 — 인터페이스의 그림, 데스크톱이나 웹 모양
- 모바일 앱 — 폰 모양 화면, 터치 스케일 컨트롤
동작하는 것처럼 보이기만이 아니라 동작해야 한다면 이 템플릿입니다.
Tip: 다듬기 전에 사이트의 뼈대를 출시하세요. "네 페이지가 먼저 모두 동작하게 해줘"는 스티어링할 수 있는 탐색 가능한 사이트를 만들고, 완벽한 홈페이지 하나와 게이트가 어차피 지적할 죽은 링크 세 개를 피합니다.
내보내기
사이트는 ZIP 또는 HTML로 내보냅니다 — 그대로 배포하는 파일입니다 — 또는 시각 기록용으로 PNG / PDF로요. 프로젝트 폴더에는 다음 스티어링이나 사이트의 다음 버전을 위한 소스가 남습니다.