Interactive website 构建一个真正能用的网站——跨多个页面的真实 HTML、CSS 和 JavaScript,在预览里实时运行,可以点击、可以 steer。 这就是"网站的 mockup"和"网站"之间的区别。
一次建站的 run 构建什么
像对一个项目那样下 brief——"一个咖啡订阅的落地站:主视觉、 三种拼配、定价、页脚"——agent 会建出这个网站:页面、导航、 交互、响应式布局。预览就是网站本身,在本地运行——滚动它、点 链接、拖宽度、看交互触发。
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.”
Steering 一个网站
完整的 steering 工具箱都适用——毕竟还是文件夹里的文件:
- ⌥-click 跑偏的元素,评论到确切的节点
- Tweaks 调实时参数——主题、间距、动效
- 后续追加 补缺的页面或改错的交互("导航在移动端应该收成 抽屉")
- Versions 对同一个网站试另一种做法
门禁按网站的方式检查:每个宽度下的活导航、对比度、点击目标、 布局在手机尺寸下真正工作——而不只是能渲染出来。
它擅长什么
- 落地页 ——营销站、发布页、产品页
- 可工作的原型 ——证明交互,不只是样子
- 小型真实网站 ——个人主页、活动站、作品集
- 交互式演示 ——人们真的可以点的东西
网站 vs mockup vs 移动 app
- Interactive website ——能工作的网站,多页,真实行为
- UI mockups ——界面的图,桌面或网页形态
- Mobile app ——手机形态的界面,触摸尺寸的控件
只要它需要真正能用——不只是看起来能用——就是这个模板。
Tip: 先交付网站的骨架再打磨——"先把四个页面都跑通"产出 一个可以 steer 的可导航网站,而不是一个完美的首页加三个反正 会被门禁标记的死链。
导出
网站导出为 ZIP 或 HTML ——可以原样部署的文件——或者导出 PNG / PDF 作为视觉存档。项目文件夹保存源代码,供下一次 steer 或网站的下一个版本使用。