Design In The Browser使用教程
AI代码助手5 步上手
Design In The Browser是一款AI驱动的可视化前端开发工具，核心定位为帮助开发与设计人员直接在浏览器内完成前端页面的设计与开发工作，无需下载安装本地开发环境。核心功能包含点击式页面编辑、AI代码生成、实时预览调试、响应式适配检查和代码导出，支持用户基于现有页面修改，也支持从零搭建完整页面结构，还可借助AI能力完成样式调整与布局优化。目标用户覆盖前端开发人员、UI设计师、产品原型设计师、独立开发者、创业团队前端负责人以及网页设计爱好者，适用于快速搭建产品原型页面、修改现有公开前端页面、调试多终端响应式布局、生成可直接部署的生产代码等场景，能有效简化前端开发流程，降低跨角色协作的沟通成本。
- 1
访问Design In The Browser官网，无需注册即可使用基础编辑功能，若需要保存项目或使用AI生成功能，可使用邮箱完成账号注册并登录。
- 2
选择开发模式，可点击“从零创建”搭建空白页面，也可输入现有网页URL导入页面进行二次修改，还可选择平台提供的模板库中的模板快速开始。
- 3
进行页面开发，可直接点击预览区域的元素修改样式和内容，也可在代码编辑器中手动编写代码，需要AI辅助时在输入框描述需求即可生成对应代码。
- 4
测试适配效果，点击顶部的设备切换按钮，分别查看页面在手机、平板、桌面端的展示效果，调整布局和样式直到满足多终端适配需求。
- 5
导出或部署项目，完成开发后选择对应格式导出代码到本地，有部署需求的用户可选择付费版的一键部署功能，将页面直接发布到线上生成访问链接。
看完教程，直接上手试试
访问 Design In The Browser 官网
