写在前面：
作为设计师，相信都曾有过打造一个专属个人网站的想法，之前受限于前端学习成本和不好意思“白嫖”程序员同事，所以搁置了很久。另一方面，去年我分享了很多关于AI绘画落地实践的内容，鉴于很多平台判定标准的差异，部分文章无法顺利发出，在各种原因之下，我决定重新启动“独立开发”个人网站的计划。
这次个站“开发”对我来说是一次有趣的探索，我并不打算把自己变成程序员，但我想试试看，AI是否可以协助我将设计稿尽可能的还原出来。
本篇文章将会完整记录我借助Cursor的建站过程，包括整体思路、使用Cursor的操作方式、实战中踩过的坑和应对方法，以及一些总结和复盘。
欢迎访问我的个人网站 👇👇
https://wincyfu.vercel.app/ （建议魔法访问）
整个网站布局采用比较常规的单列式，核心功能也并不复杂，主要包括「导航栏」、「头部区」、「内容区」、「底部区」，其中内容区包含“关于我”、“AI辅助开发的产品”、“文章教程”、“个人成就”、“联系我”、“AI产品推荐”等，上线版本的还原度基本可以达到90%以上。
我的代码知识储备仅限于认识一点css和html，知道Cursor和Trae可以AI辅助写代码，但是从来没有完整独立写过项目，可以算是纯代码小白。经历一周的“折磨”，完成了我个人开发“处女作”，其中“艰辛”只有经历过才能体会，但是请相信我，看到最终上线的那一刻，你会觉得——值得！
整个开发过程经历了MCP尝试、切图标注测试、内容推翻与重建、页面效果调整、Git无法同步、页面莫名错乱、各种不知名报错等等，几乎每天都在“想放弃”和“硬着头皮再试一次”之间反复横跳。虽然过程常常令人崩溃，但我还是一点点地调试完成了。现在回头看，那些被迫成长的过程，也挺值得为自己鼓个掌的👏👏。
1. 明确开发内容
最初尝试：
开始想法很简单，看了很多一句话建站的案例分享，所以开始我直接用提示词创建个站，我给了Cursor一个非常详细的提示词，包括网站尺寸、内容、跳转链接、以及我需要调用的内容等，希望它能“一步生成”我想要的网站。实际效果却比较粗糙，无法达到我想要的个站水准。
之后尝试了在Figma中做设计稿，通过MCP链接Figma和Cursor，Cursor直接阅读我在Figma中的设计稿，完成网页开发，想象非常简单，实际产出效果也是有点“难以接受”。
我又继续调整策略，通过sketch切图标注，将标注文件+Figma链接+文字描述给Cursor，以便更精准还原我的设计稿，但是仍然没有实现我想要的效果，理想中的“傻瓜式AI建站”宣告失败。
最后我基于当前的V1.0版本进行调整，一步步将网站打磨成我想要的还原度。
中途取舍：
“文章教程”和“个人成就”，原计划通过接口动态调用我公众号和小红书的数据，按阅读量、分享量自动排序展示内容。但实际尝试后发现问题很多，有的数据无法读取，有的反而调取出我已经隐藏或删除的旧内容，体验非常混乱。经过大概1天左右的调试，无法实现，最终舍弃了动态调用，改为直接静态展示。
经验小结：
-
不要过度相信AI，它确实在搭建雏形和快速验证上非常有用。但当打算真正落地一个项目，细节的打磨、结构的优化、逻辑的梳理，这些仍然离不开你的参与。
-
不要死磕，先完成，再完美，有些功能一时难以实现，那就先用简单的方式跑通流程、看到结果；卡在某个点太久，对个人的信心和整个项目进度都有很大的影响。
2. AI辅助生成代码
小版本保存：
这一部分其实是整个流程中最轻松的，前提是你愿意静下心来，和Cursor好好“聊一聊”。我全程使用纯自然语言，Agent模式(claude3.7sonnet)进行沟通，只要描述足够清晰，它就能按你的要求快速生成代码。在初始阶段，最重要的一点就是——理清页面结构的“区块”概念。比如：导航栏、头部区、内容区、底部区，你说清楚区域，它就能准确划分，后续修改也不会牵一发而动全身。
我习惯在最开始就创建一个readme文件，可以直接通过版本号管理自己每一步的改动。每完成几个模块，我就会给Cursor如下提示词👇
“保存现在的版本为V1.0.0（按需设定），并更新readme，其余内容保持不变，保存备份好目前版本的所有内容，确保我可以回退到当前的版本”。
这样确保整个过程有迹可循，不会因为某次操作出错就找不到回滚点。
提示词技巧：
在提修改需求时，要使用精简的语言，保证一个需求一个点，并在结尾加一句“其余内容保持不变”，避免AI自作主张地“顺手”帮你修改其他地方。图片中展示的是我分条沟通了，但是第一条内容中有2个修改点，修改button颜色和鼠标移入移出效果，结果就只识别并修改了button颜色，需要我二次沟通才可以完全修改好我的需求，之后我就再也不合并需求了。需求越明确越细，结果越可控。
组件调用：
个站中的很多组件和交互效果我直接调用了Reactbits中的现成组件，把代码复制给Cursor，让它帮我集成，比如首页头部的Text Pressure和Aurora和底部的Falling Text。
图片处理：
在涉及图片的区域，我一开始会先让Cursor建立占位图，不用我提供实际图片，它会自动生成结构，等做好图片之后，直接按照命名，把图片拖进public/images文件夹，自动替换，保存就可以了。效率很高。给Cursor如下提示词👇
“我想xx位置替换成自己的图片，告诉我图片命名及格式”
其他建议：
细节调整阶段，建议调整完一个部分全部内容之后，再调整下一个部分，比如“文章教程”，我会调整主标题副标题的字体字号、间距、颜色之后，再去调整卡片效果，包括卡片中的文字大小、文字间距、图片等，然后再去调整“文章教程”整个模块在不同深浅模式效果，调整完整个模块后，可以保存一个小版本。再进行“个人成就”部分的调整。
经验小结：
-
精准提示词+分步骤，不要说大段的要求，最好可以一个需求一个点去提；
-
善用Readme，多用版本记录，可以多做尝试，随时可回退，不怕踩坑；
3. 部署上线
当网站的基本功能和页面细节都调整得差不多之后，接下来的重点就是部署上线。说实话，这一部分是我最陌生的领域，因为它涉及到Git、远程仓库、部署平台这些我之前完全没接触过的东西。在git同步就遇到很多问题，一度崩溃到请了我的前后端同事现场支援。
最开始我天真地想着直接让Cursor一步到位，帮我部署到互联网上。结果git提交代码失败，于是后端同事推荐我先试试Gitee，我照做了，但是仍然无法成功，最后求助同事写了一堆我看不懂的强推命令才推上去，本来以为通过GiteePages就能搞定部署，结果它居然暂停服务了，瞬间傻眼，差点原地放弃。
后来排查问题，开始以为是文件大小限制问题，后面进一步排查发现，提交失败的根本原因是我的Git版本问题，让Cursor帮我直接降低了Git版本，才终于顺利push到了GitHub上。对比了几个上线方案后，我最终选择了GitHub+Vercel的组合，理由很简单：一键部署+自动更新。后期本地更新了代码，只要同步到github，vercel也就直接自动更新了。
虽然这部分写出来很简单，但是我回看与cursor的记录，反反复复提交不上，直接导致后续无法顺利部署。上线时间延后至少一天！
经验小结：
-
先调研清楚整个流程，确认工具的版本兼容性，能避免很多基础性问题；
-
个人建议还是提交Github（因为后续也没有用到gitee），大部分部署的网站都可以直接通过Github同步代码，非常方便，但是需要网络稳定（这也很重要）！
模型选择：
我的Cursor使用版本是0.49.6(Universal)，为方便个站开发开通了会员，开始直接用了Agent，claude-3.7-sonnetMAX，结果因为开始的测试，2天直接用完了，MAX是按使用量计费的，后续换了claude3.7-sonnet，完成了整个网站的开发工作。
Cursor主要有三种模式：Agent、Ask、Manual。
Agent是Cursor中默认且最智能的模式，适合处理复杂任务，可以自主探索代码库、阅读文档、浏览网页、编辑文件以及运行终端命令等（默认无脑选择即可）。
Ask模式，类似“只读”模式，具有读取文件和其他上下文的全部能力，但无法没自行进行任何更改。
Manual模式，针对需要进行针对性的代码修改时，它不会探索代码库或运行终端命令；完全手动控制。
个站我全部使用Agent模式完成，可以按需选择。
报错：
报错一般两个方法解决，第一可以直接截图+报错两个字，让Cursor直接解决；如果是在代码中看到有红色的报错，可以直接复制错误代码点击“add to chat”，Cursor就会直接阅读相应位置来解决报错，通过这两种方法一般问题都可以解决。
一个需求一个Chat：
这个方法我没有实践，是在其他文章上看到，准备下次尝试的，每一个小问题新开启一个Chat，方便问题回溯和复盘。比如【前端】SpotlightCard样式调整、【Git】同步网络问题等。
后续我会继续完善个站的开发，实现后端动态调用、上线AIGC周刊、补充我的AI产品案例，并尝试更多项目，建立从产品构思、设计开发到上线运营的完整流程，一步步朝着自己的目标前进。
这次实践也让我重新思考了“身份”定位，在设计师身份下，容易陷入“细节控”，为了实现一个效果或者一个间距，反复调试。当站在一个产品构建者，甚至是“独立创作者”的视角上来看，就会发现，要完成一个完整项目，仅有精致的视觉是远远不够的。内容架构、交互逻辑、开发实现、上线部署，甚至数据加载、访问速度、适配等都是必须思考并解决的关键问题，避免让自己沉浸在单一身份下做事情，多跳出来看看。
总的来说这次的实践不仅是搭建了个站，还是一次完整的从0到1的AI实战过程，每一步踩的坑，都一一爬了出来。未来我会继续借助AI的能力探索更多方向，完成更多探索。
更多原创AI教程文章：