小白也能顺利上手的AI编程实录：打造属于你自己的网站资源收录站
缘起
随着AI编程能力越来越强， "全民编程" 时代可能真的不远了！遥想当年毕业找工作，会office都是加分项，而未来，会不会编程可能也会成为一个闪光点。
作为一个大龄转码的程序媛，我也挺依赖AI Copilot帮我"打工"，而且也一路见证着它的突飞猛进，但我还真没试过从头到尾就靠AI来完成一个项目。
所以我也很好奇，它到底能不能行呀？
说来有点不好意思，虽然我是小码农，条理性应该不错，可偏偏我的浏览器资源收藏夹却让我特别抓狂。每次看到一个不错的站点，我就想把它收藏起来，虽然也分了文件夹。但是我还是常是的：
- 要找的时候找不到
- 看到也想不起这个网站是干什么的，我当时为什么收录它
这收藏的网页多了就跟垃圾堆似的，剪不断，理还乱……
于是我就灵机一动：为什么不自己做个资源收录网站呢？有了这个资源网站，我那些收集的资源就有了个家，我可以快速地打开技术参考文档网站，查询颜色调色板，各类技术博客等，那得多方便呀。
于是我想到要把这个任务交给AI。我就像个大Boss一样，只提需求和想法，全程只抱着VS Code和GitHub Copilot这两个"AI外挂"，体验了一把真正的"AI编程"。
结果简直惊掉下巴——从零开始到完整部署上线，整个过程只用了4小时！先给大家看个效果图：
是不是你也觉得最酷？而更酷的是——这次我真没靠自己！
如果你总有些创意想法，但又觉得编程门槛太高，那一定要看看我的这段经历。相信我，现在的AI编程，已经不再神秘，普通人也能玩转了！
开发之旅
准备工作
这次的开发之旅，需要你把开发环境搭建好，工欲善其事，必先利其器，我们需要的开发环境，包括：
- Node
- Github
- Vscode 和 Github copliot插件
这几个软件的安装就像你安装QQ、微信一样，在电脑上把软件包下载回来，按照官网的说明步骤安装。
最后完成Github的注册。这时候创建一个目录，就可以打开开发环境了。
第一步：把想法“告诉”AI
还记得我01 AI编程初学者的三个黄金指令：从“不会问”到高效对话的终极指南说的吗？第一步总是沟通想法。所以我打开聊天窗口，跟小C发布命令：
于是，小C就问了我几个问题包括前端、后端、数据存储、构建工具、样式和部署的问题。
我想尽量简单一些，所以选择了仅前端不要后端，数据保存用文本JSON格式，CSS可以用styled component。（如果你看不明白，也不影响，你就按最简单的方式回答就可以了）。
第二步：用README给项目做个笔记：把想法落到纸面上
就像你每次开会，都需要做个会议记录一样；其实跟AI沟通，你也可以创建这样的一个文档，随时记录沟通的内容。
这个文档将作为项目开发的指导文档，帮助AI更好地理解项目需求和技术架构。随后我们可以按照这个文档中的规划，逐步实现功能。
在这个计划书，AI帮我们准备了：
- 项目概述
- 详细的项目结构
- 核心组件
- 开发计划
- 数据结构
第一步的沟通总是很重要。刚开始的时候，AI帮我创建的Readme文档里含有很多分类，娱乐、游戏、财经等等，简直是发散性思维。于是我强调这是一个开发资源收集站点，所以仅限于工具、知识、博客等，它马上更新了分类体系，真的比我想得全多了，同时它也更新到了这个文档，做后面的参考。
第三步 小C当“参谋”，小G来干活
在这里，我要再次介绍AI的两个牛马：小C（Chat模式） 和小G （Agent模式） 。故名思意，一个当参谋，只会聊天不干活，善于沟通； 一个会干活，干得飞快，但是有时候有点着急有点莽撞。所以，灵活地切换两个模式，可以更好地搞定技术活。
3.1 先让小G帮你创建项目。
首先，我请小G帮我创建了文件目录。我们要明确的告诉小G指令，而且要一步一步执行，否则它猛起来，真是拉也拉不回来。
小G是会干活的，它会在各种终端运行命令，自动帮你完成任务。它会帮你搭建基础框架，创建文件目录结构、帮你安装各种库、最后启动项目，检查完给你汇总报告。
3.2 让AI 为我们创建基础的css 变量
在网站开发中，HTML、CSS和JavaScript被称为"前端三剑客"，它们各司其职又紧密配合：
- HTML 是网站的骨架，就像毛坯房的承重墙和基本格局
- CSS 是装修方案，决定视觉效果和用户体验
- JavaScript 则是智能家居系统，让房子变得"聪明"起来
HTML 就像你的毛胚房，里面可以设计格局，还可以放家具，这是网站的内容。
为了让毛胚房好看一点，我们往往通过CSS，也就是通过主题、颜色、间距等属性为我们的网站做装饰。
如果我们能定义一些变量，就像装修前要确定主色调和设计风格一样，就能更好确保全站风格一致、同时方便后期的维护调正，轻松实现主题切换的功能。
在经过一番沟通后，小G又开始干活了：它创建了颜色和主题等样式方面的内容。
这些变量就像装修时的色卡和材料样板，后续所有组件都会基于这些变量来构建，确保全站视觉统一。AI不仅提供了这些变量，还贴心地为每个变量添加了注释说明，让代码更易读易懂。
3.3 创建数据
个资源导航网站的核心在于其展示的内容数据。经过与AI的讨论，我们确定了每个资源卡片需要包含以下关键信息：网站名称、链接、简单的描述、所属分类、标签和图标。
根基于这个数据结构，AI自动生成了一个示例JSON文件，包含了6个典型的开发者常用网站：
这些初始数据虽然不多，但已经足够用来：测试网站的基本功能、验证页面布局效果、调试和检查图标加载等性能。
在开发初期，使用少量但具有代表性的测试数据是非常明智的做法，这可以让我们快速迭代而不必纠结于数据收集。待核心功能完善后，再逐步扩充真实内容会高效得多。
3.4 创建首页，添砖加瓦，功能一个个加上去
小G在我的指令下，很快地帮我创建了各种页面和组件，经过多次地沟通，网站就做好了。
小G基本都是在努力地干活中，我就是不停地监工、给他提各种意见，这是一个长时间的过程。很遗憾我无法一一列举。
但是我还是想分享我的技巧：
3.4.1 不直接问“怎么做”，而是问“有哪些方案？”
比如以“中英双语支持”为例，聊聊AI如何给出不同选项。小C针对我的项目，就给了不少好的建议。我可以更好的根据我的项目、自身的能力做选择。
又比如，我还询问了当我收录的网站很多时，会有什么样的影响，未来应该如何扩展，小C又提供了几种扩展方案，例如200个站点、500个站点、1000个站点等的解决方案，优缺点等等。
3.4.2 不要期待AI一次完美，小步快跑比大改更高效。
在AI辅助开发的过程中，最重要的心态转变就是：不要期待一次性获得完美代码。
这就像教小朋友画画，第一次可能只是简单的线条，但通过不断指导和修正，最终能完成令人满意的作品。
例如我的搜索和过滤组件，就经过了几次迭代：
- 基础输入搜索
- 添加分类过滤
- 添加标签过滤
- 输入和标签过滤
每次改进只需给AI一个明确的指令，比如："能否把过滤选择框改成按钮式？“， ”能否横向布局等？"AI就能快速给出实现方案。这种渐进式开发有三大优势：
- 降低认知负担 - 每次只需关注一个小功能点
- 快速验证可行性 - 每个小改动都能立即看到效果
- 便于问题定位 - 如果出现问题，很容易找到是哪个改动导致的
记住：AI不是魔术师，而是高效执行者。与其要求它"给我做个完美的搜索框"，不如分步骤说："先实现基础功能→添加过滤功能→增加清空按钮→优化"。
这种"小步快跑"的开发节奏，往往能在最短时间内获得最理想的结果。
3.5 填充数据
最后， 在网站基本搭建完成的情况下，我再一起请小G帮我充实各种数据，我只给出一些站点名。
不得不说，小G实在太能干活了，它自动补充完整每个网站的数据信息。
比如它能自动的实现智能归类，还能生成简单的网站介绍，它还能从技术栈、功能类多维度打标签，自动匹配图标地址，并检查链接的有效性，保证可访问。
我不得不感叹：AI不仅是一个代码助手，更是强大的内容整理专家， 数据收集效率提升了10倍不止，同时分类和标签系统比我自己设计的更加科学合理。
待数据填充完成后，一个包含了39个站点，具有12个分类内容丰富、支持搜索和过滤的开发者资源导航站就初具雏形了。
最重要的是，整个过程我只提供了最基础的信息，其他繁琐的工作都交给了AI来完成。
第五步 项目部署，让网站真正上线运行
当网站开发完成后，最关键的一步就是部署上线。我尝试了两种主流的免费部署方案：
第一种是Vercel部署，整个过程异常简单：
- 只需关联GitHub仓库
- 选择项目目录
- 点击部署按钮
不到3分钟，网站就拥有了一个vercel.app的临时域名，支持自动SSL证书和全球CDN加速。
第二种方案我选择了GitHub Pages+自定义域名：
- 在仓库Settings中开启GitHub Pages
- 关联已购买的域名
- 配置DNS解析
对于国内开发者，我还推荐这些替代方案：
- 腾讯云静态网站托管：访问速度快，备案方便
- Gitee Pages：国内版GitHub Pages
记住，小C和小G可以回答你各类的问题，也可以帮你生成部署文档，即使是新手也能完成上线任务。我的经验是：先选最简单的方案快速上线，后续再优化，不要让部署成为项目的终点。
尾声
这次用AI全程辅助开发资源网站的经历，彻底刷新了我对编程的认知。
最深刻的体会是：AI编程真的没有想象中那么难！只要掌握与AI"好好说话"的技巧，把想法拆解成明确的步骤，普通人完全可以把脑海中的创意变成真实可用的产品。
这让我意识到，技术门槛正在被AI快速拉平，创造的门槛从未如此之低。
如果你也跃跃欲试，我想说：现在就是最好的开始时机。AI就像一位24小时待命、永远耐心的编程私教，既不会嫌弃你的基础薄弱，也不会抱怨重复解释。从简单的个人项目起步，比如做一个纪念日倒计时页面、或是像我这样的资源导航站，每一个小项目都是成长的阶梯。
别被"编程"这个词吓住，记住：在AI时代，重要的不是你懂多少代码，而是你敢不敢把想法付诸实践。
站在更广阔的视角看，我们正在见证一个创作方式变革的新纪元。AI不只是工具，更是思维的延伸，它让每个人都有了将灵感具象化的超能力。
这种转变让我想起个人电脑普及的80年代，或是智能手机改变生活的10年代——而现在，AI正在开启的，是一个人人可以成为创造者的全新时代。
与其观望，不如拥抱；与其犹豫，不如动手。你的第一个AI项目，或许就是改变你与世界互动方式的开端。
