工具介绍与任务方法

Onlook

在 Next.js 与 Tailwind 代码上进行可视化编辑,并结合 AI 制作网站与交互原型。

Onlook 能做什么

在 Next.js 与 Tailwind 代码上进行可视化编辑,并结合 AI 制作网站与交互原型。

  • 网站与应用原型构建
从一个小任务开始

如何使用 Onlook

可视化修改网站原型

准备输入

  • Next.js项目
  • 页面修改要求

操作步骤

  1. 打开需要调整的 Next.js 与 Tailwind 项目,在可视化画布中定位元素。
  2. 直接修改布局和样式,查看对应代码如何变化。
  3. 在不同页面状态下检查效果与代码差异,再保留符合需求的修改。

预期交付物

  • 页面代码变更
  • 交互原型

检查响应式布局、代码差异和实际交互。

开始前需要了解

账号权限、费用与可用功能请以官方入口的当前说明为准。重要结果应先检查,再用于实际工作。

查看 Onlook 官方说明 ↗

← 返回全部 AI 工具