Interactive website は実際に動作するサイトを構築します。複数ページにまたがる本物の HTML、CSS、JavaScript がプレビューでライブに動き、クリックもステアリングもできます。Web サイトのモックアップと、Web サイトの違いです。
サイト実行が構築するもの
プロジェクトのようにブリーフを書きます。「コーヒーサブスクリプションのランディングサイト: ヒーロー、3 つのブレンド、料金、フッター」と書けば、エージェントがサイトを構築します。ページ、ナビ、インタラクション、レスポンシブレイアウトです。プレビューはサイトそのもので、ローカルで動いています。スクロールし、リンクをクリックし、幅をドラッグし、インタラクションの発火を見られます。
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.”
本物とは本物ということ
サイトはプロジェクトフォルダ内の実際のコードです。ファイルを開き、マークアップを読み、出力を出荷できます。その正直さは、サイトが何のためかに関係します。誰かの前に出せる動くプロトタイプ、実際にデプロイできるランディングページ、コンセプトが機能することを証明する概念実証です。
- ナビゲーション — どこかへ行くリンク。ゲートがチェック
- インタラクション — メニュー、モーダル、スクロールエフェクト、動くコントロール
- レスポンシブ — ゲートがチェックする 5 つの幅、ビューポートでライブ
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 でライブパラメータ(テーマ、余白、モーション)を調整
- 追記 で欠けたページや間違ったインタラクションを修正(「モバイルではナビをドロワーに畳んで」)
- Versions で同じサイトの別案を試す
ゲートはサイトとしてチェックします。あらゆる幅でのライブナビ、コントラスト、ヒットターゲット、スマートフォンサイズで実際に機能するレイアウト。レンダリングされるかだけではありません。
得意なこと
- ランディングページ — マーケティングサイト、ローンチページ、プロダクトページ
- 動くプロトタイプ — 見た目だけでなく、インタラクションを証明
- 小さな本物のサイト — 個人ページ、イベントサイト、ポートフォリオ
- インタラクティブデモ — 人が実際にクリックできるもの
Web サイト vs モックアップ vs モバイルアプリ
- Interactive website — 動くサイト、マルチページ、実際の挙動
- UI mockups — インターフェースの絵。デスクトップまたは Web 形状
- Mobile app — スマートフォン形状の画面、タッチスケールのコントロール
見た目だけでなく動作が必要なら、このテンプレートです。
ヒント: 磨き上げより先にサイトの骨格を出させましょう。「まず 4 ページ全部を動かして」は、ステアリングできるナビゲート可能なサイトを着地させます。完璧なホームページ 1 枚と、どうせゲートが指摘する行き止まりリンク 3 つより良いです。
エクスポート
サイトは ZIP または HTML にエクスポートします。そのままデプロイするファイルです。視覚記録用には PNG / PDF も。プロジェクトフォルダには、次のステアリングや次のサイトバージョン用のソースが残ります。