团队同学用 AI 做了个抖音，一行代码没写。。

大家好，我系鱼皮，最近很多同学问我：现在 AI 发展怎么样了？能用 AI 生成项目了么？

我们团队的同学平时一直在用 AI 提高开发效率，但没想到，这两天，我们的前端开发 K.N 同学直接用 AI 开发了个 “抖音” 网站，一行代码都没有自己写！

他是怎么做到的呢？下面这篇文章，让他来给大家分享一下吧~

大家好，我是鱼厂的程序员 K.N，正在试图用代码和世界重新打结~

上周，我看到社区里有个小伙伴发问：“如果我用 GPT 完成了整个前端，后端也全靠 GPT，这样到底好不好呢？”

“人工智能 VS 人类”这个老生常谈的问题嘛，一直都是呈两极分化状态的。一些人觉得 AI 是救世主，从此开发者只需要喝茶看代码，其他工作交给工具就好。也有一部分人则把 AI 看成了“吃饭的工具”，甚至觉得会取代人类的工作，未来的开发者都要失业了。

而我呢，刚好介于这两种看法之间——既没有迷信 AI 到觉得它能解决所有问题，也没有过分恐惧它会抢走我的工作。说到底，工具再智能，它始终只是个工具，最终能否解决问题，还是得看你怎么使用它。

想起 22 年底的第一次接触 GPT，那种初次见面的惊艳感促使我一整晚都在研究，看到它能流畅地生成代码、写文章，甚至回答我前后端相关的疑问，我立刻意识到：这不只是个传统的 AI 聊天工具，而是一个能够极大提高开发效率的神器！

于是接下来的日子里，我开始把 GPT 当作搭档，尤其是在面对一些重复性的任务时，它帮我节省了大量时间。不仅能为我提供技术支持，甚至可以帮我生成各种写作素材、调整代码结构、甚至编写一些复杂的功能模块，实在是太香了 ~

这篇文章，先不谈 AI 和工具的哲学问题，我们先来聊聊：我是如何利用 GPT、Cursor 和一些简单的截图，迅速上线了一个短视频网站的（不写一行代码）

预览地址：https://tiktok-clone-ashy.vercel.app/

AI 在这过程中又是如何给我打工的，话不多说，坐稳扶好，发车咯 ~

一、Prompt 改进

在项目开发过程中，精准的 Prompt 是成功的关键。虽然 Cursor 的 Composer Agent 模式已经能够通过自然语言生成项目和代码，但要让它发挥最大作用，我们还需要通过一些优化提示词，让 Cursor 更清晰地理解我们的需求，并提高代码质量。如何给它提供准确且优化的提示词，是决定工具能否高效帮助开发的关键。

那么问题来了——怎么才能让 GPT 以及 Cursor 更好地理解我的需求，输出更精准的提示词和建议呢？我总结了一些关键点：

• 身份设定
• 明确需求
• 细化任务
• 使用上下文
• 逐步迭代

1、身份设定

首先，我会写一段这样的提示词，以告诉 GPT 生成一个我想要的身份。例如，假设我要创建一个 AI Prompt Engineer 作为我的工作助手：

// prompt
我要做 [] , 请帮我虚构一个 [] 的身份背景
需要包括教育背景、研究领域、教学经历、学术成就和行业经验。                
[拓展]

// 比如
我要写有助于 Cursor 理解的 AI 提示词，请帮我虚构一个 AI prompt engineer 的身份背景
需要包括教育背景、研究领域、教学经历、学术成就和行业经验。
除了简单的 AI Prompt Improve，我可能还需要他具备一些额外的能力，比如：对开发者需求的理解能力、跨学科的能力、教学经验等

一般 GPT 会按照你的要求，生成这样一段结果：

姓名：王 XX  
职位：AI 提示工程师（AI Prompt Engineer）  
现状：AI 提示与代码优化专家，专注于开发与优化编程辅助工具，尤其擅长通过自然语言与编程语言模型（如 OpenAI 的 GPT 系列）进行高效交互，提升开发者效率。

教育背景：  
本科：北京大学，计算机科学与技术（2008-2012）  
毕业时以优异成绩获得学位，获得了强大的编程和计算机科学基础，期间开始接触机器学习和自然语言处理。  
硕士：麻省理工学院（MIT），人工智能（2012-2014）  
...
研究领域：  
...
教学经历：  
...
学术成就：  
...
行业经验：  
...

这段由 GPT 生成的身份描述，基本涵盖了一个AI 提示工程师可能具备的背景、能力、经验等方面，尤其是针对提示优化和开发工具方面的专业知识。

我们复制这段生成的身份信息，在其开头简单描述一下需要他代入这个身份与我对话，并需要他做什么样的工作，例如：

我需要你代入以下身份信息与我对话，以更好的协助我完成 AI 提示词优化相关的工作：
... // 生成的身份信息

2、明确需求

其实我的需求很简单，就是我给 GPT 发一张截图，GPT 扫描识别截图页面上的结构，帮我生成一些有助于 Cursor 开发的提示词，但这么说肯定不行，不管是实际开发评审还是给 AI 指定工作，我们描述需求的时候一定要越细越好 ！这样才有助于理解，减少误解以及返工。

接下来，我们就需要靠着设定好的身份信息，给他明确一个需求：

由于篇幅原因仅展示部分参考提示词，以 ... 代替，原文内容请见：https://codefather.cn/post/1865951144450891778

// prompt
在接下来的过程中，我需要你始终以以下方式进行给我提示词：
1）我会给你上传一张图片，这个图片可能会是某些 UI 的设计稿，也有可能是一些现成的网站页面截图，而且我将会告诉你我要做的是 网站应用 还是 移动端应用。
2）你需要通过仔细分析图片中的 UI 、页面布局、样式等元素，并了解图片中的整体结构。
3）在你分析完图片后，你会给我 step 1：生成初始页面提示词、以及 step 2：页面结构分析。在我没给你 <执行 step 2 / 给我生成页面结构等指令时>，你需要先执行 step 1 ，等我告诉你需要 <执行 step 2> 时，你才能够继续执行 step 2， 接下来我会告诉你每一步的细节。
4）step 1：生成初始页面提示词
  
给我生成一段 cursor 可识别的 AI Prompt，用于给 Cursor 描述要做的重点需求及功能，你需要考虑的点应该包含但不限于以下内容：

固定要求，用于每次生成提示词都应该向 Cursor 描述清除该项目要使用的技术栈、要求、细节、规范等，例如：

根据这些要求创建详细的组件：
1.使用 TailWindCss 实用工具类进行响应式设计;
2.遵循主流的 import 规范：
  — 使用@/ path别名
  - 保持 import 的组件有组织，有排序
  - 更新当前src/app/页面。与TSX新全面的代码
  - 不要忘记每次都处理入口文件（page.tsx）
  - 必须在停止之前完成整个提示

开发要求，用于针对不同的页面、截图中的布局，生成不同的提示，但整体逻辑不变，应包含以下内容：

  <summary_title> // 用于描述网站标题
  <image_analysis> // 用于描述你分析后的图片中包含的元素，包含但不限于：导航栏、布局组件、正文内容、主题颜色等
  <development_planning> // 用于描述整体项目的文件规划等，包含但不限于：项目结构描述、关键特性描述、路由描述、组件结构等

前面我们称之为 step 1，以下是 step 2：页面结构分析

我会给你相关指令后，你才能开始执行 step 2，指令可能会是 <执行 step 2> 或者 <生成页面结构>，step 2 中要做的事情就是结合上传的图片，以及 step 1 中的提示词，继续生成用于给 Cursor 描述生成更多页面的提示词，生成的提示词格式如下：
固定要求，开头必须要有以下描述：

Next.js route structure based on navigation menu items (excluding main route).  Make sure to wrap all routes with the component:

根据图片，重新分析其他的页面的结构，然后你需要告诉 cursor 可能会有的页面以及结构，页面结构包含但不限于以下内容：

  - Routes:
  - Page Implementations:
  - Key Components
  - Layouts:
      MainLayout:
  - AuthLayout
  - DashboardLayout

希望你深刻理解以上需求，如果你理解了以上的要求，那么可以先等待一会，等待我的指令，如果你有任何的问题或者不清楚的地方，应该随时向我提问并要求我给你更详情的要求描述，如果没问题的话，我将会给你一张图片，以测试你能否胜任该项工作。

接下来，我们就可以发送一张图片来测试下 GPT 是否理解了我的需求，这里我截了一张 Apple 官网的图片发送给他：

事实证明，通过我们的提示词，AI 能更好的分析网页内容、布局，并优化 Cursor 可以读懂的 Prompt。

但是 Apple 这个官网太简单了，我们上点硬货给他试试，比如 Tik Tok 的官网，接下来就手把手地带大家用 Cursor 给我们打工。

二、Cursor 快速构建项目

这里就不详细介绍 Cursor 的下载安装以及白嫖方式了，有需要的可以自行查阅官网：https://www.cursor.com/

下面我们直接指挥它开干！

1、生成静态页面

1）新建一个空文件夹，命名为 copy-tiktok，打开 Cursor ，按下 ⌘/ctrl + I 调出 Composer。输入以下提示词使其先创建一个初始化项目：

注意：这里一定要勾选上 agent 模式，否则可能会无法执行终端命令。

完成初始化后，将 Tik Tok 官网的截图发给 GPT ，由 GPT 来给我们生成优化后的提示词，而后直接复制提示词至 Cursor 的 Composer 中，静待他的表演，随后鼠标点点 Accept All 即可。

经过若干秒后，他已经帮我做好了一个 Tik Tok 风格的前端界面，让我们来看看效果：

BOOM，真的太强大了！除了视频不能播放外（都是静态图片），其他基本上都实现了。而且每个按钮、每个导航栏，都有做用户交互状态。当页面出来的那一刻，我切实地感受到了 AI 工具带来的便捷，同时也感受到了莫大的压力，我会不会真的被代替了？

我们简单调整下，就能让 AI 把所有图片换成可以播的视频了：

2、生成其他路由及页面结构

接下来，我们利用在 GPT 中写好的 step 2 指令复制给 Cursor ，让其生成更多的页面，做成一个真正可交互的前端界面。

不出意外，借着优化过的提示词，Cursor 轻轻松松地就把剩下的二级页面都做好了，甚至是个人中心、设置、登录等，关注，直播等页面。看图吧，我已经被惊得不知道说什么了：

三、部署上线

我们仍然坚持 不写一行代码原则 ，让 Cursor 帮我们完成上传部署等工作，输入以下提示词：

请帮我上传至 GitHub ，并帮我部署到 vercel 托管服务

效果如图：

AI 会引导我们执行一些命令，无脑执行即可：

根据 AI 的提示，登录账号、创建仓库等：

最后我们的项目就成功上线了！

写在最后

AI 这几年已经从一个抽象的科技概念，逐步变成了我们生活和工作的得力助手。就像刚才在文章中提到的，AI 是一个强大的工具，它能够加速我们的开发进程、提升工作效率。但它始终是个工具，工具的好坏，不在于它本身，而在于使用它的人。就像你拿到一把锋利的刀，能用它做一顿美味的晚餐，也能用它做出伤害人的事情，最终的结果取决于你自己的判断。

我坚信，AI 并不会完全替代开发者，而是成为开发者的得力助手。它能处理大量繁琐的工作，解放我们的时间和精力，让我们更专注于创造性和复杂性更高的任务。但是，开发者的核心竞争力，依然在于 判断力和思维能力 。面对海量的信息、技术和工具，我们必须保持对知识的渴求，不断学习新的技能，但更重要的是，我们要学会在信息的海洋中辨别对错，不被虚假的或低质量的 AI 垃圾污染，不要让 AI 污染了我们的大脑。作为开发者，我们需要不断审视 AI 提供的结果，保持批判性思维，不能一味盲从，要时刻保持清醒的头脑，确保自己不被这些工具所局限。

👇🏻 点击下方阅读原文，获取鱼皮的编程学习路线、原创项目教程、求职面试宝典、编程交流圈子。