00:00 - 00:02

一直想搭一个自己的个人网站

00:02 - 00:04

但是自学编程总是从入门到放弃

00:04 - 00:07

找专业的网页开发人员和设计人员

00:07 - 00:08

又价格不菲

00:08 - 00:09

最后啊无疾而终

00:09 - 00:10

这样的情况

00:10 - 00:11

你遇到过吗

00:11 - 00:12

但是现在

00:12 - 00:15

即使是完全不懂代码的编程小白

00:15 - 00:17

也可以用AI搭网站做APP啦

00:17 - 00:19

这就是我花了一个小时

00:19 - 00:20

用AI搭的个人主页

00:20 - 00:21

除此以外

00:21 - 00:24

连网页游戏 手机APP 浏览器插件等等

00:24 - 00:25

它都可以做到

00:25 - 00:27

今天呢木子就将分享这整个过程

00:27 - 00:30

其中包括大量市面上的教程

00:30 - 00:32

从来没有分享过的详细步骤

00:32 - 00:34

并且会对比DeepSeek和Windsurf

00:34 - 00:38

这两款AI编程热门产品的使用体验

00:38 - 00:38

感兴趣的话

00:38 - 00:40

那就一起看下去吧

00:40 - 00:42

第一步找到灵感来源

00:42 - 00:44

想象力比知识更重要

00:44 - 00:45

就像视频创作中

00:45 - 00:48

好的选题就成功了一半一样

00:48 - 00:51

好的网站灵感也是重要的点第一步

00:51 - 00:51

但我发现

00:51 - 00:53

所有的教程几乎都忽略了这一步

00:53 - 00:55

非常可惜

00:55 - 00:57

那么如果你一下子没有好的灵感

00:57 - 00:58

那该怎么开始呢

00:58 - 01:00

我将分享3种方法

01:00 - 01:03

方法一复刻已有成功案例

01:03 - 01:04

站在巨人的肩膀上

01:04 - 01:06

是一种快速获得灵感的方法

01:06 - 01:08

尤其适合初学者们

01:09 - 01:10

我这里就给大家两个

01:10 - 01:13

收集了市面上各种优秀网站的平台

01:13 - 01:14

第一个是product Hunt

01:14 - 01:17

这是一个为新产品提供曝光的地方

01:17 - 01:20

涵盖从软件应用到硬件产品等

01:20 - 01:20

大家呢

01:20 - 01:23

都可以在上面浏览和发现各种新产品

01:23 - 01:26

但是产品也会根据不同场景分类

01:26 - 01:27

非常详细

01:27 - 01:28

然后是一个小网站

01:28 - 01:30

叫做who is making money

01:30 - 01:31

谁正在赚钱

01:31 - 01:32

这个名字啊

01:32 - 01:34

非常言简意赅

01:34 - 01:37

它就是直接通过分析stripe支付流量

01:37 - 01:39

然后根据大家的付费趋势

01:39 - 01:40

进行网站排名

01:40 - 01:43

方法二利用ChatGPT提供想法

01:43 - 01:46

那除了学习市面上已经有的成功案例

01:47 - 01:48

我们的ChatGPT老师啊

01:48 - 01:51

也可以是你很好的创意来源

01:51 - 01:52

我通常呢

01:52 - 01:54

会给他一个具体的任务prompt

01:54 - 01:57

让他帮助我生成创意和灵感

01:57 - 01:58

通过这个详细的prompt

01:58 - 01:59

ChatGPT呢

01:59 - 02:02

会给你一些还蛮有创意的点子

02:02 - 02:03

第三个方法呢

02:03 - 02:05

就是根据自己的经验

02:05 - 02:07

如果你过去一直有好的想法

02:07 - 02:09

但是碍于自己没有开发能力

02:09 - 02:10

而无法实现

02:10 - 02:12

或者你在实际工作生活中

02:12 - 02:14

的确出现了痛点

02:14 - 02:16

想要通过一个产品给他解决

02:16 - 02:20

那么这些都是非常好的灵感

02:20 - 02:21

不过呢在开始前

02:21 - 02:23

你需要思考这些问题

02:23 - 02:24

你的网站是什么

02:24 - 02:26

需要解决什么问题

02:26 - 02:27

它的核心功能有哪些

02:27 - 02:30

是否有现成的网站已经做好了

02:30 - 02:31

你们的差异化功能是什么

02:31 - 02:33

是否做到了人无我有

02:33 - 02:34

人有我优

02:34 - 02:36

网站的目标用户是谁

02:37 - 02:37

我建议啊

02:37 - 02:40

新手在最开始的时候只做MVP产品

02:40 - 02:43

这不是你们打游戏里面的MVP啊

02:43 - 02:46

这里指的是呢是minimum variable product

02:46 - 02:48

就是有最基础的功能

02:48 - 02:51

但恰好可以表达你核心设计概念的

02:51 - 02:54

产品千万不要一上来就做很复杂

02:54 - 02:56

有很多交互的产品

02:56 - 02:57

这样试错成本太高了

02:57 - 02:59

你也handle不住

02:59 - 02:59

第二步呢

02:59 - 03:00

就是整理需求

03:00 - 03:02

并写出产品需求文档

03:02 - 03:04

在一家互联网公司中啊

03:04 - 03:06

这也是产品经理的职责

03:06 - 03:08

他需要写出一份产品需求文档

03:08 - 03:10

我们一般也叫做PRD

03:10 - 03:13

作为对开发团队或合作伙伴的指导性文件

03:13 - 03:16

来帮助大家清晰的理解产品的目标

03:16 - 03:18

功能和设计风格等等

03:18 - 03:20

大家听到这里可能已经懵了

03:20 - 03:21

我也没有做过产品经理

03:21 - 03:23

这个听起来也很复杂

03:23 - 03:23

该怎么写呢

03:23 - 03:25

别担心我们还有AI呀

03:25 - 03:27

比如我们就可以通过ChatGPT

03:27 - 03:29

来帮助我们整理

03:29 - 03:29

我这里啊

03:29 - 03:32

也给到已经训练好的prompt

03:32 - 03:33

大家可以直接用

03:33 - 03:34

我这次给大家演示的呢

03:34 - 03:36

是如何搭建个人网站

03:36 - 03:39

如果你想做一人公司或超级个体

03:39 - 03:42

你的个人网站就是对外介绍的第一步

03:42 - 03:44

三步就是寻找设计参考

03:44 - 03:47

这也是很多人会忽略掉的一步

03:47 - 03:47

大家可能觉得

03:47 - 03:50

我把网站基础功能实现就好了

03:50 - 03:51

但是实际上

03:51 - 03:52

网站的设计啊

03:52 - 03:55

就决定了你的门面和用户的第一印象

03:55 - 03:58

好的设计能让网站看起来更专业

03:58 - 03:59

更吸引人

03:59 - 03:59

这一步

03:59 - 04:02

如果你有自己的设计需求或审美要求

04:02 - 04:05

可以在上一步直接和AI沟通

04:05 - 04:08

例如颜色搭配字体样式等等等等

04:08 - 04:11

但是我知道这对大多数的小伙伴来说

04:11 - 04:13

还是有那么一点点门槛的

04:13 - 04:15

那么我们就可以参考一些设计平台

04:15 - 04:17

例如这些网站

04:17 - 04:17

别担心

04:17 - 04:19

地址我都附在说明栏中了

04:19 - 04:21

这些平台上有成千上万的设计师

04:21 - 04:22

分享他们的作品

04:22 - 04:24

你可以根据自己的网站类型

04:24 - 04:25

搜索关键词

04:25 - 04:27

这样你就可以找到很多

04:27 - 04:29

与自己想法接近的设计案例

04:29 - 04:31

那如果你喜欢这个风格

04:31 - 04:32

就可以直接下载

04:32 - 04:34

我们后续就会用到

04:34 - 04:34

或者呢

04:34 - 04:36

我们也可以用一些现成的模板

04:36 - 04:40

例如像Canva里就有很多高质量的网站模板可以选

04:40 - 04:42

此外我之前给大家推荐了GitHub

04:42 - 04:43

这个宝藏的资源网站

04:43 - 04:45

大家也可以充分利用起来

04:45 - 04:46

像这个项目里

04:46 - 04:49

就总结了网上各位大神自己的profile

04:49 - 04:52

网站大家可以逐一点进去参考

04:52 - 04:54

第四步就是开发网站

04:54 - 04:55

接下来呢

04:55 - 04:57

我们就进入到正式的开发环节

04:57 - 05:00

我将对比两种工具DeepSeek和Windsurf

05:00 - 05:02

并且分享他们各自的优缺点

05:02 - 05:04

和我使用下来的感受

05:04 - 05:05

首先啊DeepSeek

05:05 - 05:07

需要我们在VScode里面使用它的API

05:08 - 05:09

具体如何安装呢

05:09 - 05:10

我在这个视频里面

05:10 - 05:11

已经有了详细的演示

05:11 - 05:12

就不再重复了

05:12 - 05:14

然后Windsurf呢

05:14 - 05:16

也是cursor后的AI编程兴起之秀

05:16 - 05:18

我这次选择使用它

05:18 - 05:19

第一是因为它比cursor更便宜

05:19 - 05:21

一个月是15美元

05:21 - 05:22

第二呢它更适合

05:22 - 05:25

没有任何编程基础的开发小白

05:25 - 05:26

Windsurf安装链接呢

05:26 - 05:27

我已经附在说明栏中了

05:27 - 05:29

大家点击它逐步安装即可

05:29 - 05:32

那我们先来看一下DeepSeek的效果

05:32 - 05:34

打开vs code这里也说明一下

05:34 - 05:36

之前有很多小伙伴反映说

05:36 - 05:38

DeepSeek的API速度有点慢

05:38 - 05:38

官方解释

05:38 - 05:41

是因为常上下文窗口和多并发

05:41 - 05:42

导致了排队较长

05:42 - 05:44

也给出了解决方案

05:44 - 05:46

第一是关闭auto approve

05:46 - 05:48

然后呢建议使用cline改版

05:49 - 05:49

相对来说呢

05:49 - 05:51

它的上下文较短

05:51 - 05:52

处理也更快

05:52 - 05:55

我们把之前用AI写好的产品需求文案

05:55 - 05:56

直接复制过来

05:56 - 05:57

让DeepSeek开始写

05:57 - 05:58

根据我的经验

05:58 - 06:01

建议大家一开始只复制最基础的功能

06:01 - 06:04

后面再一点一点把复杂的功能加进去

06:04 - 06:07

然后我们打开Windsurf

06:07 - 06:09

不过如果你是第一次使用的话

06:09 - 06:11

建议先安装一个汉化的插件

06:11 - 06:13

我们打开或者新建一个文件夹

06:13 - 06:15

后续我们写的代码文件

06:15 - 06:17

就会存储在这个文件夹里面

06:17 - 06:19

如果你的页面没有这个对话框

06:20 - 06:22

可以点击右上角这个圈圈

06:22 - 06:24

或者按command L打开

06:24 - 06:25

对话框下方

06:25 - 06:26

这里的模式呢

06:26 - 06:27

改为write

06:27 - 06:28

这样它就会帮你直接写代码了

06:28 - 06:30

如果是chat模式的话呢

06:30 - 06:32

它就只会跟你沟通

06:32 - 06:34

但是不会更改代码

06:34 - 06:34

模型这里呢

06:34 - 06:35

我们选claude

06:35 - 06:35

然后

06:35 - 06:38

我们再把之前写的产品需求文档

06:38 - 06:38

复制过来

06:38 - 06:39

回车

06:39 - 06:42

他们这俩都是在勤勤恳恳地不停工作

06:42 - 06:43

不过呢我不懂代码

06:43 - 06:45

也不知道他们具体在干嘛

06:45 - 06:47

基本上一直点accept就可以了

06:47 - 06:48

第五步呢

06:48 - 06:49

就是调整和增加功能

06:49 - 06:50

在这之前

06:50 - 06:52

我们先看一下我们给到原始需求时

06:52 - 06:53

DeepSeek和Windsurf

06:53 - 06:56

他们给到的效果是怎么样子的

06:56 - 06:58

两边呢基本上都根据要求做好了

06:58 - 07:00

但是设计都还是很简单

07:00 - 07:02

而且没有我的头像等图片

07:02 - 07:03

有时候

07:03 - 07:05

一开始你的网站打开可能有问题

07:05 - 07:06

那也不用太慌

07:06 - 07:07

只需要把上面显示error的代码

07:07 - 07:08

全部复制下来

07:08 - 07:09

然后提问就可以了

07:10 - 07:12

下来呢我们就要基于之前的网页

07:12 - 07:13

进行进一步修改了

07:13 - 07:14

主要修改地方包括

07:14 - 07:15

第一

07:15 - 07:17

我们需要先添加头像等图片

07:17 - 07:18

第二呢

07:18 - 07:21

我想修改一下他的默认设计风格

07:21 - 07:21

第三

07:21 - 07:25

我想要添加更多的子页面和相关链接

07:25 - 07:27

不过我建议大家一点一点改

07:27 - 07:29

以免一下子出现较大的bug

07:29 - 07:31

我们先添加图片

07:31 - 07:32

至于怎么加

07:32 - 07:34

实际上在对话框里也提示我们了

07:34 - 07:37

比如DeepSeek是需要我在assets这里

07:37 - 07:39

添加一个叫做Avatar的jpg文件

07:39 - 07:40

而windsurf

07:40 - 07:43

是直接让我添加一个profile的jpg文件

07:43 - 07:44

添加好以后呢

07:44 - 07:47

我们的头像都已经被替代好了

07:47 - 07:49

然后就是修改设计风格

07:49 - 07:49

这里就要用到

07:49 - 07:52

我们之前第三部里面的设计案例了

07:52 - 07:52

不过DeepSeek

07:52 - 07:55

现在似乎不太支持对外链的识别

07:55 - 07:57

也无法上传图片

07:57 - 08:00

所以我即使给了设计参考

08:00 - 08:01

他有没有做更改

08:01 - 08:03

这里呢是要减分的

08:03 - 08:03

Windsurf这里

08:03 - 08:06

既可以上传一个网页链接作为参考

08:06 - 08:07

也可以上传图片

08:07 - 08:09

这两个功能都很强

08:09 - 08:10

你们都可以去试试看

08:10 - 08:11

我这次呢

08:11 - 08:14

是直接把我想要模仿的这个网站链接

08:14 - 08:15

复制进去

08:15 - 08:19

然后让Windsurf模仿他的风格修改网站

08:19 - 08:20

最后我们就是要为一些按钮

08:20 - 08:22

添加点击的链接

08:22 - 08:23

和增加子页面了

08:23 - 08:26

例如我想加一个about me的子页面

08:26 - 08:26

这里呢

08:26 - 08:29

只需要把之前AI给到的产品需求文档

08:29 - 08:30

再复制进去

08:30 - 08:34

并且把我们要加的链接地址复制进去就好

08:34 - 08:37

给大家看一下我最后生成的页面效果

08:42 - 08:45

那么你更喜欢哪边做出来的效果呢

08:45 - 08:46

不过我这次演示的

08:46 - 08:48

只是相对最基础的

08:48 - 08:50

个人主页的网站开发

08:50 - 08:52

基本不涉及到后端的逻辑

08:52 - 08:53

那如果你的网站需要登录

08:54 - 08:56

要收集邮箱信息等等这些

08:56 - 08:57

就涉及到后端开发了

08:57 - 08:58

这些功能呢

08:58 - 09:00

当然现在用AI也是可以实现了

09:00 - 09:02

不过会稍微复杂一点点

09:02 - 09:04

你们如果有想要开发的网页类型

09:04 - 09:06

也非常欢迎在评论区里告诉我

09:06 - 09:08

我后续也会根据大家的需求

09:08 - 09:10

逐步出对应的教程

09:10 - 09:12

第六步就是系统测试

09:12 - 09:14

当你完成网站开发以后啊

09:14 - 09:16

测试是不可或缺的步骤

09:16 - 09:18

我们主要呢是需要测试这三个方面

09:18 - 09:20

第一是功能测试

09:20 - 09:22

测试每个功能模块能不能正常运行

09:23 - 09:24

例如我们可以每个链接都点一下

09:24 - 09:26

确保能够正确跳转

09:26 - 09:28

第二是兼容性测试

09:28 - 09:29

确保你的网站

09:29 - 09:31

在不同的浏览器和操作系统上

09:31 - 09:32

都能够正常运行

09:32 - 09:35

第三呢就是响应式设计测试

09:35 - 09:36

我们主要是为了确保

09:36 - 09:37

网站在不同的设备上

09:37 - 09:39

都可以良好的展示

09:39 - 09:41

包括像手机平板桌面端等等

09:41 - 09:42

好到目前为止

09:42 - 09:43

我们已经成功的

09:43 - 09:46

在本地搭建一个自己的网站了

09:46 - 09:46

这期视频呢

09:46 - 09:47

我将分享

09:47 - 09:50

如何把这个网站部署到服务器上

09:50 - 09:52

让全世界所有的人都可以用

09:52 - 09:55

以及我们做网站到底该如何变现等等

09:55 - 09:56

感兴趣的话

09:56 - 09:57

不要忘记给我的视频点赞哦

09:57 - 09:58

最后我想说

09:58 - 10:00

现在AI编程的发展速度

10:00 - 10:02

真的是让我感到非常的激动

10:02 - 10:04

现在只要你有好的idea

10:04 - 10:05

即使不会代码

10:05 - 10:06

AI都可以成为你的手

10:06 - 10:07

帮你实现

10:07 - 10:09

不过同时也证明

10:09 - 10:11

AI时代如果你变成AI的奴隶

10:11 - 10:12

被他带着走

10:12 - 10:14

那你终究会被淘汰

10:14 - 10:16

而你如果自己有好的创意

10:16 - 10:17

能够用好AI

10:17 - 10:19

你的潜力就会是无穷大的

10:19 - 10:20

怎么样

10:20 - 10:22

跟着教程做好自己的网站了吗

10:22 - 10:24

欢迎在评论区里分享你自己的感受哦

Building Personal Website with AI: Design, Development, and Deployment

In today's digital age, the dream of creating a personal website is no longer out of reach even for those who are not well-versed in coding. With the help of AI tools like DeepSeek and Windsurf, individuals can now effortlessly design and develop websites, apps, and more without the need for extensive coding knowledge. This step-by-step guide will walk you through the entire process, from finding inspiration to testing the final product. If you've ever felt overwhelmed by the idea of web development, fear not – AI is here to simplify the process and empower you to bring your ideas to life.

Finding Inspiration and Ideation

A crucial first step in creating a website is to find inspiration. By exploring platforms like Product Hunt and "Who is Making Money," you can gain insights from successful website designs and trends. Additionally, leveraging AI tools like ChatGPT can help generate creative ideas based on specific prompts. Whether replicating successful case studies or drawing from personal experiences, having a clear vision of your website's purpose and target audience is essential before diving into development.

Organizing Requirements and Crafting Product Documentation

To ensure a smooth development process, it's vital to organize requirements and document them in a Product Requirements Document (PRD). This document serves as a roadmap for both developers and collaborators, outlining the project's goals, features, and design elements. If you're new to creating PRDs, AI assistants like ChatGPT can help structure your thoughts and requirements effectively.

Seeking Design References and Enhancing User Experience

While functionality is key, the design of your website plays a crucial role in attracting users and making a lasting impression. By browsing design platforms and utilizing templates from tools like Canva or GitHub, you can find design inspirations that align with your vision. Remember, a well-designed website enhances user engagement and credibility, setting the stage for a positive user experience.

Developing the Website with AI Tools

When it comes to actual development, AI-powered tools such as DeepSeek and Windsurf offer intuitive solutions for creating web pages without extensive coding. Comparing the features and performance of these tools can help you choose the one that best fits your needs. By following the prompts and instructions provided by these tools, you can generate web pages, customize designs, and add functionalities effortlessly.

Testing and Iterating for Optimization

After developing your website, thorough testing is essential to ensure its functionality, compatibility across different devices, and responsiveness. Conducting tests for each feature, checking compatibility across browsers and operating systems, and verifying responsive design on various devices will help optimize the user experience and address any issues before deployment.

Embracing the Future of AI in Web Development

As AI continues to advance, its integration into web development processes opens up new possibilities for creativity and innovation. By leveraging AI tools wisely and combining them with your unique ideas, you can build remarkable websites and apps without being constrained by a lack of coding expertise. Remember, AI is a tool to amplify your potential, so embrace its capabilities while staying true to your creativity and vision.

In conclusion, the journey from ideation to development of your personal website with AI tools is now more accessible than ever. By following these steps and embracing the power of AI, you can embark on a fulfilling and exciting web development journey. So, are you ready to unleash your creativity and build your own website with AI assistance? Share your thoughts and experiences in the comments below and let's continue exploring the endless possibilities AI brings to the world of web development.