吃顿饭的时间，用AI开发一个应用官网

最早接触开发时做的第一个项目就是企业官网，到后来自己开始走上独立开发者的道路时，哪怕是开发面向消费者的移动端产品，在产品上架时也需要提供应用官网。

感觉，编程这件事情和官网开发，紧密相连。

过往为了追求开发效率，如果是简单的静态官网，我会直接使用Figma或Sketch等设计软件将设计稿导为HTML项目，但如果碰到复杂一点的官网，就只能求助于前端的朋友帮忙开发。最近看到字节发布了一款智能开发工具— —豆包MarsCode，本着对新事物的好奇和对AI编程的存疑，我决定尝试使用AI开发一个应用官网。

整个项目大概花了30分钟，实现了从项目搭建、产品构思、编程开发全过程。

一、项目搭建

在豆包MarsCode官网了解到，豆包MarsCode支持Cloud IDE和插件两种方式，由于我的日常主要使用的编程工具是Xcode，于是便尝试使用Cloud IDE进行开发。

使用手机号登录后，在首页可以看到项目搭建方式。和传统的开发工具不同，豆包MarsCode支持根据模版搭建项目和导入Git项目两种方式。如下图所示：

稍微查询了一下，发现豆包MarsCode基本支持了市场上的主要编程语言，我们选择HTML/CSS/JS项目模版来开发Web项目，如下图所示：

创建完成之后，豆包MarsCode会直接初始化项目，并创建好Web项目所依赖的所有项目文件，这对于初学者来说特别友好。如下图所示：

二、产品构思

豆包MarsCode Cloud IDE模式的界面非常简洁，在之前我一直使用ChatGPT、Gemini等AI对话工具的情况下，当我切换到豆包MarsCode的Cloud IDE模式时，我一下子就注意到了右侧的‘AI助手’栏目，难道在正式编码之前，我能通过这个栏目先与AI进行对话？

设计思路

那么在正式编程之前，我想先借助AI助手来构思下整个官网的产品设计，我希望AI给我一些官网设计的建议。比如我希望搭建一个笔记App的官网，如下图所示：

令人惊讶的是，AI助手回答的质量非常高，而且回答内容的排版布局很符合中文环境的阅读习惯。由于很多生成式AI的语料库都是基于英文材料，所以在很多时候我能够敏锐地感觉出AI回答的语序差异。

结构设计

在整体构思之后，我希望能继续细化到页面结构设计，比如我想先完成官网首页的结构设计，如下图所示：

按照AI助手的回复，首页的结构分为页头（Header）、hero 区域、产品特点区域、用户评价区域、下载区域、页脚（Footer）六大部分。

示例数据

那么基于这个回答，我还希望豆包MarsCode给我一些示例的数据作为参考，如下图所示：

如此，我们在编程之前，可以借助于豆包MarsCode的AI原生能力来完成项目的整体构思、结构细化，以及示例数据的准备等工作，在大脑里就有了整个项目的开发思路。

接下来，正式进入编程环节。

三、开始编程

AI对话

由于在开发之前我们就了解了官方的页面结构，那么在编程顺序上，我们尝试按照页面结构的顺序进行开发。我们先完成首页的“页头（Header）”的内容，如下图所示：

上图中，AI助手给出了页头（Header）的代码示例，我们可以点击代码块右上角的“插入光标处”的按钮，代码便被直接插入到当前的index.html文件中。

Web预览

完成后，我们点击页面中间最上面的“运行”按钮，来预览下完成的内容。如下图所示：

豆包MarsCode竟然也能像客户端的编译器一样实时预览项目内容，而且除了在浏览器预览项目内容，也内置了Web预览功能，不错不错。

熟悉了AI对话的开发模式后，我们继续调整和完善CSS样式的内容，就得到了一个看起来还不错的页头（Header）效果，如下图所示：

AI对话模式可能是初学者最喜欢的开发模式，但对于习惯了编辑器上写代码的开发者而言，这样的开发模式效率还是不够直观。

下一步，我们回到豆包MarsCode的编辑区域，来看看编辑器的使用感受。

代码补全

最早的AI热门编程工具Copilot凭借其代码补全能力而深受广大开发者的青睐。对于像我这种许久没有接触HTML语言的学习者来说，自然很希望能够借助类似Copilot的代码补全功能帮助我快速完成官网的其他内容的开发。

正当我希望在 <header> 下增加新内容时，豆包MarsCode似乎“感知”到我在做什么，立即给出了补全的代码。如下图所示：

当我点击“Tab接受”按钮后，补全的代码便直接添加到了编辑器中。在连续使用“代码补全”的方法后，便完成了整个官网的开发。如下图所示：

AI修复

在预览项目时，我们发现“Hero Image”显示好像有些问题，这是由于在该项目中并没有导入对应的素材。我们可以直接选中需要修改的代码块，并唤起AI助手直接在代码块处帮助我们修改代码。如下图所示：

通过连续的对话，我们修复了图片显示的问题，最终效果如下图所示：

单元测试

为了检测图片加载是否存在问题，我们也可以直接让豆包MarsCode来为代码块生成单元测试，方便我们进行代码自测，从而提高代码的质量。如下图所示：

四、体验总结

从项目构思到开始编程，差不多是在吃饭的时间完成的。在许久未接触Web项目开发情况下，伴随着豆包MarsCode的帮助，竟然很快完成了一个静态官网的开发，这效率绝了！

依稀还记得最早开始学习编程的时候，需要各种安装依赖、配置环境、功能设置，十分打击学习编程的自信心。豆包MarsCode作为国产AI编程助手，AI原生的能力以及交互体验上还是可圈可点的，无论是项目搭建，还是AI问答、代码预测、AI修复、单元测试等方面，对于初学者学习一门新语言来说可谓是“学习利器”。

在AI蓬勃发展的今天，各种生成式AI正慢慢地融入到了我们的生活和工作当中，也许有些人会害怕AI会不会有一天代替了自己的工作。但我始终相信，AI从工具“进化”到现在的AI助手，将会更好地辅助我们的生活和工作，让我们的未来变得更好。

所以，在感受到焦虑的同时，不如开始接触AI、学习AI，进而掌握使用AI工作的能力。