【超详细教程】小白入门，一小时理解自己的需求，写出网站，入行AI基础开发

[Lesley_Kundrick (永不言败zlcggb)]

【机械转码】一个机械学生的自救之路，通过半年成功转码（工作：理解需求“用 AI 把行业经验封装成工具的产品经理”，非纯技术开发）。

我的确不是专业的开发，未写过一行代码，但仍希望懂一点点业务需求的我，能给你带来启发。欢迎批评指正。文档链接：https://doyd60gw42.feishu.cn/wiki/M3UxwbJy7in1z2kv0TNcxECynoc

【小白】【个人网站】网站是什么，能吃吗？

基础的网站包含3要素，固定的和动态变化的，即导航栏、内容、页脚。

配色是一个个性的事情（ Primary主色、Secondary辅助色、Accent个性色），不要交给AI，但如何自己配色，可以使用配色网站 Color wheel | Use color theory and color calculator | Atmos

得到需要的色系后就要验证一下，在线预览https://www.realtimecolors.com/

完成配色之后就要开始定义导航栏、内容、页脚。此时可以通过AI

不想套模板，但我发现，我想不清楚我想要的是什么，gemini给了思路，https://gemini.google.com/

gemini写的很详细，但是我需要设计草稿，无图无真相

通过生成的草图，大致知道自己想要的是什么了

结合草图，完善了一下需求

生成的设计图有点丑，但是基本需求是满足了

开始交给bolt设计， Bolt AI builder: Websites, apps & prototypes

大致写完了，他的一键发布的确很快

但是有bolt标识，而且如何实现代码自部署？

先把代码导出github，然后交给netlify托管，https://app.netlify.com/

此时部署的网站不会有bolt标识，而且每次代码提交，都会自己构建并自动发布

然后，此时使用自己的域名指向netlify他部署的域名，就可以使用自己的域名访问了，无需服务器，不耗流量。
-----到此为止，已经完成了网站部署，得到自己的网站 https://zlcggb.com

但，为什么bolt会默认选择react?

因为react的组件化是代码数量最少的，最适合AI开发和理解

自从这时开始，开始使用react开发，因为他最快

[daisheng]

哇，大佬好

[blacksein]

佬 有一点流程优化的建议

你前面用的那套流程更适合海外网站
国内的话没必要用supabase+cf R2+netlify上 不然还得迁移
最好本地直接开发+本地数据库 然后阿里云一把梭了

从bolt导出再改感觉有点舍近求远 既然步骤上已经有AI IDE/cli了 可以直接让他们按照设计图写（固定框架就行 比如说告诉AI用的是react+tanstack router/react router +tailwindcss+shadcn) 就可以简化bolt这一步

[Lesley_Kundrick (永不言败zlcggb)]

我刚开始是小白，没有经费，没有服务器，不会sql语法。代码、数据库都是AI写的。
当时搭建的的确是海外的官网，是bolt+supabase让我快速搭建了一个网站和数据库，bolt可以直接操作数据库,现在也有mcp。我当时能想到的、免费的，是这个思路。
AI从0初始化react项目，需要人输入一些引导指令，没学过，当时没看懂 。
还有一点是，AI IDE写出来的网站好丑，很AI风，bolt他写出来的框架，还是能看的，然后基于这个修改。

[Crayonl]

太强了，佬

[blacksein]

还有一个要注意的问题
佬 supabase是可以直接前端调sql服务的 没配置好权限(RLS)会比较危险的 一些vibe coding的网站被拿下也是因为这个
佬要做现实中生产项目最好还是问一下AI关于架构 安全上的东西
不然就会这样

[zhubaiwan-oozzxx (ℬ𝒶𝒾𝒲𝒶𝓃)]

想问问佬友是国内985研究生转码吗还是什么学历？普通人还是很难吧

[Lesley_Kundrick (永不言败zlcggb)]

双非，深圳技术大学

[zhubaiwan-oozzxx (ℬ𝒶𝒾𝒲𝒶𝓃)]

哇，那很厉害了佬友

[ratuaroricus (清风)]

可惜虽然现在机械是天坑，码也掉坑里了

[1-debtor]

厉害的

[eaa]

什么专业不坑

[Lesley_Kundrick (永不言败zlcggb)]

可能做了才有可能吧，我喜欢我领导对我说的话“去实践，输了我护着你”。我当时也没有写过网站，公司（是中型上市公司）当时要改官网，之前是外包，问有没有人会，我直接上了。我尝试用一个下午，用bolt写了一个demo，然后公司的其他网站都交给我开发了，世界可能是一个草台班子，但我什么都没有，我不怕。的确，如果当时我不勇敢，我可能真画一辈子图，和我一个学校进来的有3个人，一样的岗位，我是唯一转码成功，并且薪资涨了50%，现在参与公司的核心系统开发，同时对接6家系统公司。的确，错过了，就没有了，现在我公司要求65%的985了

[neeo (科什么比)]

你这个牛逼啊，画CAD就能参与核心开发*

[louishino0524 (三局两胜)]

我觉得你的最大的能参考的地方是首先抓到了需求，然后接着做的。其实很多人做的网页比你的好得多，但是他们并没有市场上的需求。

[Lesley_Kundrick (永不言败zlcggb)]

和提升效率有点关系吧，我把部门画图效率提升了200%，用AI写出了一个CAD插件，画图半自动，模版化（之前8小时的活，现在2小时可以做完）。然后领导给了机会，逐渐进入核心层

[K_Z]

情况有点像，但我现在还在学html css js 平时用python数据分析，可视化，虽然自己也能写一个简单的网页，但可能要几天到一周，没有外网。

最近有了外网账号，大佬觉得我是还是手搓还是让ai写呢，我这边opus codex 都能接入vs code了。但到时候和同事领导感觉讲不清楚？

前天周六让opus 拆分了我之前的一个项目，还是用了一下午到晚上十点才走。

但如果要我自己来整的话，这个原本的项目拆分可能要四五天。

大佬你觉得我该咋搞，其实我想学c#搞 web api的，但我现在工作就是可视化报表这种。

[handsome (大帅哥)]

太强了！大佬

[MaiKaDe (MyCard)]

太强了，不过这就能拿下核心开发offer。
也够幸运的(没别的意思，纯羡慕)

[Hexon-X (Bell Devin)]

@Lesley_Kundrick

我使用AI写出了一个CAD插件，开始了解lsp语言

我CAD二开已经十年了,lsp[fas反编译]出来的时候,我就没再用过这个语言进行深度开发,而是转向了ObjectARX或者C#,有什么不懂的可以问我.