零基础 AI 开发劝退贴：没那金刚钻别懒那瓷器活

原创于 2025-08-06 11:15:53 发布 · 864 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

用AI 设计+开发一个产品用于生产和商用，门槛很高，非常高。

我做出来了，所以我告诉各位看官，网上吹的什么“零基础小白用Claude 3天撸了个app，月入x万”的故事就别信了，不要相信网上的ai奇迹。

总之，程序员和设计师不会失业。AI决定了下限，使用者决定了上限。

接下来我将会详述整个项目经历，实施难度各位自行判断。

背景介绍

这个部分有点啰嗦。通过这个章节，有助于读者了解Vibe项目的难度，以便于判断自己能否Vibe xx。

先展示成果，网址 www.aidroplet.com

团队介绍：

我：卓普云科技的市场负责人，文科背景出身。

Zhai：Content Writer，本科计算机出身，但没写过一行代码。

技术经验：

编程能力约等于0。我出于兴趣爱好，学过python和swift，没有代码能力，仅仅了解基本的编程概念。Zhai自打毕业，就没写过一行代码。
技术知识有一些。我和Zhai，日常要写技术内容宣传产品：前公司是音视频SDK，现公司是云服务器，所以知道基本的技术概念，与网站相关的基本概念都知道。比如，React、JS、CSS、Nginx、Apache、前端、后端之类的...
个人兴趣爱好做过几个网站，用Wordpress+Elementor搭建。知道SSH登录，SSL证书配置。“知道”就是字面意思，means 不会操作。

设计经验：

工作需要，经常与设计师沟通，所以知道基本的设计沟通语言，诸如：色值、hover特效、背景模糊、边框阴影、字号之类的。有基本的审美…这个就见仁见智了。

项目开始

背景

官网www.aidroplet.com，旧版是我使用Wordpress+Elementor搭建。我很菜，不会优化性能，并发几十就扛不住了。所以就有了要建个新网站的计划。

建新官网就涉及到三大资源：

文案：我们自己会写
开发：我在前公司有过多次技术项目找外包的经历，与外包沟通身心俱疲。超贵！
设计：外包？如果想要效果达到完美，沟通需求身心俱疲，可能还达不到想要的结果。超贵！

那就试试AI？

搜索了一圈，设计工具选了Figma Make。开发工具用Cursor。

为什么不用Claude？

刚花20刀买了license就把我的账号封了，退钱了。
Cursor是一个IDE，对我这个超级菜鸟来说，一个会自动搭建开发环境的IDE比什么都重要！

Figma Make可以直接写代码，为什么还要用Cursor？

Figma Make写的代码都是在Figma的云端，无法本地调试。Figma Make的云端开发环境，无法复制到云服务器上。如果不通过Cursor本地调试后再部署，这对我一个菜鸟来说，是不可能完成的任务。
Figma写的代码，在本地编译就是不通过。

import * as SeparatorPrimitive from "@radix-ui/react-separator@1.1.2";

import { Slot } from "@radix-ui/react-slot@1.1.2";

import { cva, type VariantProps } from "class-variance-authority@0.7.1";

Figma会写这样的代码。Cursor说引用不该带有版本号。我也不知道谁对，但是版本号删除，就能编译通过.

直接用Cursor就好了，为什么还要用Figma？

Cursor设计能力基本为0，也就能搭个原型，成品太丑了。

接下来，以这个项目的实际经历，梳理整个流程。这部分，有助于读者初次尝试，或优化自己的Vibe anything流程。

Step 1：测试Prompt（耗时3天）

通过一个测试项目，来测试Figma Make的实际能力，这一步很重要。

通过测试，要形成两个文档。你可以提供基本内容，让ChatGPT帮你完善。

1.项目综述文档

项目功能
技术栈

2.单个页面的Prompt模版

设计规范
页面结构综述
注意事项
文案

Step 2：设计+开发（耗时7天）

使用Figma Make形成设计和基本代码。

Publish网站预览效果。要通过不断与Figma Make对话，来修改样式。

这样的语言，Figma都能懂：

Herobanner 按钮颜色变为蓝色，hover变成白色。

按钮的蓝色太深了，浅一点

再浅一点

加个发光效果

太丑了，颜色调整一下，用同色系渐变，加一些透明度，增加通透感

出来的效果就是让 AI suprise you！

也可以直接精确指定效果，不过很精确的描述只有设计师能操作。

这个过程就尽可能精益求精啦，AI 可不会嫌你烦。你想改几版就改几版。有过外包沟通经历的都懂...

注意事项：

走到这一步，AI 的幻觉来了，出现的问题有：

让它修改1个小细节，它把整个页面重新设计
让它新建1个页面，它把其它页面重新设计

感觉Cursor的工作方式是，根据需求去找实现代码，然后整段复制粘贴过来。有时候复制多了，就把整个页面重做了。专业人士，会review AI写的代码。但是我不会...只能靠Prompt去尽可能限制。

自己乱编、乱加文案
修改一个小bug，不断写代码，陷入循环。从几十行代码累加到几百行

这是编译报错的例子，Cursor发现错误，只会就地解决，不会追根溯源。这时需要使用者及时指明方向

所以，在Prompt中，这段内容不能少。没有一个字是多余的，都是血与泪的教训

现在开始新页面：常见问题，url是/faq

建立新页面时，不要对其他页面进行修改，同时建立好各个页面之间url的路由。

设计原则：

1.每个section的卡片背景颜色统一，有hover特效

2.文字列表部分加dot

3.Herobanner 选择一种几何元素，动态变化，要有透明水晶质感，不影响文字焦点

4.页面左上角及右下角增加大块色团动态变化，两个色团颜色不一样，同为冷色调或暖色调，有渐变，选择与页面主体一致的颜色

5.放在居中主标题下方的描述，尽量不要换行

6.除了我给你的文案，不要擅自增加文案

Step 3：形成项目综述（1小时）

整个项目调试到你满意了，就让Figma给你一个项目综述，包括：

设计规范
技术栈
部署指南
运维指南

这个东西是拿给Cursor看的，也会用于将来项目维护用。

请写一个综述，用于将来项目维护和扩展

Step 4：Cursor本地调试（7天）

在Figma Make把代码下载到本地

解压缩后，用Cursor打开

首先，让Cursor读一遍代码，给你1个项目综述。这一步的目的，是确保Cursor详细理解了项目，减少后续调试过程中的幻觉。Cursor有遗漏的，你就拿Figma写的补充给它看。

请详细分析这个项目的代码，告诉我这个项目是做什么的，技术栈是什么。

成功的第一步：在本地运行项目

让Cursor告诉你怎么在本地部署，要非常详细的指南。

Cursor会写一个readme，非常详细的告诉你怎么在本地运行。不出意外的话，整个过程会不断报错。需要你会这些

在terminal写命令行

Cursor会告诉你发什么，直接复制粘贴即可。有报错就复制粘贴发给Cursor，它会给出解决方案。

用Chrome的开发模式

查看Console的报错信息。把报错信息发给Cursor，它才会改

多个AI问

修复一个报错时，Cursor可能会无限循环改错，写屎山。把问题发给ChatGPT，然后把ChatGPT的回答发给Cursor，能提高成功率。

会用Chrome的开发模式看源代码

指出问题的基本方向。Cursor会帮你改。

有个按钮只有右侧1/4的位置可点击。Cursor不断的修改这个按钮的实现方式，错误依然存在。我告诉Cursor，看看是不是有东西遮挡了按钮。Cursor依然陷入死循环。直到我告诉Cursor，容器ID xxxxx，看看这个容器干嘛的。Cursor删除了这个容器，问题解决。这个容器是Figma创建的一个没有正确显示的动效，另一个AI幻觉。

通过不断的调试，最终你能成功的在http://localhost:3000 看到你的网站。此时，你十分接近成功了！

Step 5：部署指南（0.5d）

告诉Cursor，你要部署上线了，需要怎么做。

现在，我要把网站部署到云服务器上，用于正式生产环境，我什么都不会。请帮我写1个非常详细的部署指南。考虑好生产环境的安全问题。

Cursor 会帮你：

进行生产环境的一些优化，安全隔离之类的
写部署脚本
写部署指南，包括
1. 安装github。一定要用github
2. 如何运行部署脚本
3. 服务器上如何操作

这个过程中，不会的就问Cursor，或者ChatGPT。比如

我不会用Github，怎么做

我把代码push到Github了，接下来怎么做

它会给你一个非常详细的指南，包括如何注册账号

Step 6：部署到云服务器（3天）

此时，你应该把代码 Pull 到云服务器了，运行Deploy脚本，很有可能报错。尽可能的把报错信息Copy或截图，发给Cursor，让它帮你改，你再操作。如此循环往复，直到成功。成功后，记得让Cursor更新Deploy脚本，写一个update脚本，便于以后迁移服务器，更新网站。

在云服务器 deploy 的过程中有这么多报错，请帮我完善deploy脚本，确保以后一次成功。同时，帮我写一个update脚本，用于以后更新网站

这其中又会有新的知识点：

域名解析
CDN配置
Nginx配置
SSL证书配置
.env配置

在网站正式发布后遇到的这些问题，目前已解决。

访问 https://aidroplet.com，提示“404”。

访问 http://aidroplet.com，提示“不安全”。

访问 https://www.aidroplet.com，能正常访问。

访问 DigitalOcean 独家战略合作伙伴-卓普云 AI Droplet，能正常访问。

访问 DigitalOcean 独家战略合作伙伴-卓普云 AI Droplet，提示“404”。

项目总结

步骤	耗时	难点
测试Prompt	3天	这是学习、测试的过程，要形成Prompt模版
设计+开发	7天	难度最小，Prompt模版写好了，半体力活。
形成项目综述	1小时	Figma编写，用于给Cursor阅读，以及项目维护
Cursor本地调试	7天	最难，我太菜了，遇上任何报错，都是一个新知识点，需要现学。整个过程就是不断的发现问题 - 学习 - 解决问题
部署指南	0.5d	Cursor写，需要根据部署指南实际操作，调试
部署到云服务器	3天	由于本地调试已经基本没问题了，所以报错比较少，也会有新知识点，又是一个发现问题 -学习 - 解决问题的过程。

Next Step：

持续优化

我让Cursor开发了一个统计分析服务，用于通过API上报转化事件给Crazy Egg（一个网站分析平台）。

Cursor又产生了幻觉。它打算给网站的每一个按钮都加一个tracking事件，并把事件上报...我紧急撤回。告诉Cursor，能否只通过一个脚本，在footer引用，能够监听全站所有点击url 包含xxx的事件。Cursor照做，问题解决。

通过数据来优化网站设计，提升网站的数据表现

Strapi做CMS，构建1个博客系统

旧的博客系统还在wordpress上，性能很差，设计风格也与新网站不符。需要重新设计，内容管理使用Strapi，同时支持静态生成。下面的内容是我使用AI调研，结合我的需求，定下的需求。将会结合之前Figma Make写的设计规范，去构建博客系统

系统名称：博客内容管理与展示系统

后端：使用 Strapi （开源 Node.js Headless CMS）

前端：React + Next.js + Strapi

多语言支持

英文版网站

至此，项目已到进行时。关于整个实施难度，相信各位已经有了自己的判断。

总结

程序员和设计师不会失业。AI决定了下限，使用者决定了上限。
没有相关背景知识，使用AI设计+开发，是不可能完成的任务
要有持续学习的能力。使用过程中，会有新知识点，要学会用AI帮助学习，指导AI。
使用者要为AI指明方向，及时勒住缰绳。否则， AI 敢从人类起源写到火箭发射
AI 能帮你完成很多体力活

网站的文案中，需要将英文连接中文，或者数字连接中文的地方，中间加一个空格，规范前端显示。我让Cursor写了1个脚本，批量替换。耗时10分钟。

AI 幻觉清单

问题类型	具体表现	解决方案
过度修改	改1个按钮导致全站样式重置	Prompt中明确："仅修改[组件X]，其他部分保持原样"
错误循环	反复修改同一问题但无效	① 换用ChatGPT诊断 ② 人工指定排查路径（如："检查容器ID:xxx"）
擅自创作	自动添加未授权的文案/功能	Prompt末尾强制声明："禁止添加任何未明确要求的元素"
依赖混淆	错误引用带版本号的库（如@1.1.2）	要求AI："所有引用必须使用最新稳定版"
逻辑缺陷	全站按钮埋点等过度设计	明确需求边界："只需在footer添加全局监听脚本"