AI编程时代太疯狂了！2小时搞定学员作品展示站，200多个作品挤爆网站

大家好，我是孟健。

最近在负责破局行动家的AI编程训练营，说实话，学员的表现完全超出了我的预期。

我们设置了三个阶段，每个阶段都有一些小作业。

结果开营前3天，就有几十个人提交了第一阶段的作业。

甚至在作业之外，很多人还扩展了自己的小游戏、小工具。

不得不感慨，AI编程的时代，真的太疯狂了。

看到大家的作品，在欣慰之余，我觉得我应该要做点什么事情。

于是我做了一个作品展示的站点，把大家的成果全部放上来。

整个过程也是通过AI Coding来完成，两小时就搞定了。

这里也记录一下详细的过程，分享给大家。

一个好的提示词，胜过千言万语

这是我的提示词，其实最关键的就是提示词，你要把需求描述清楚：

markdown 复制代码

背景：我在AI破局俱乐部这个社群担任AI编程训练营的教练，我希望做一个站点，用来展示学员通过AI编程完成的作品。\
  我希望这个站点可以做到：\
  - 酷炫地展示大家的作品合集，目前训练营有好几期，而且不止一个训练营，比如行动家AI编程加强营、AI编程出海工具
  训练营等等，所以在展示上面，应该是分不同训练营展示学员的作品，具体的训练营可以给个配置的方式。\
  - 大家可以自己上传作品，支持直接上传HTML文件，以及贴作品链接两种方式，作品的封面图也是必传，作为门面，你可
  以统一规范一下封面图的规格。\
  - 学员的必要字段需要包括昵称、星球编号、学员身份（教练、行动家、圈友、志愿者、工作人员）等等\
  - 作品支持投票，票数高的排前面\
  \
  \
  如果你明白了这个需求，接下来可以先帮我创建一个github仓库，然后克隆到本地，开始初始化项目

CC直接帮我建仓库，省了一堆事

cc直接调用github的mcp，帮我把github仓库建好了，省得我去github填一堆东西（最主要的是取名，AI取名很不错）：

然后，它大概给我初始化了一个项目结构，整体没有什么问题，很顺利：

等了大概几分钟，代码基本上写完了，我把它跑起来，看看效果。

本地环境搭建，一条命令搞定

我直接跟CC说：

复制代码

你帮我把这个项目跑起来，数据库本地可以帮我启一下

因为我这台电脑上没有安装postgresql，所以我直接丢给cc去启动，顺便它还能帮我把本地的数据库环境配置好：

接着，我把这台电脑的docker安装好了，直接让它本地启动数据库：

启动起来有点报错，直接让cc修一下：

修正了bug之后，第一版本的系统就出来了：

第一版出来了，但还需要优化

这一版其实大概的轮廓有了，review了一遍，我给它提了一些要求：

markdown 复制代码

这个站点有如下需要改进的地方：\
  -
  首页左上角的logo区域不可点，需要优化\
  - 没有登录机制，管理后台应该只有管理
  员才有权限访问\
  - 现在只能添加训练营，不能修改和删除
  训练营\
  - 作品也需要有可以修改和删除的地方\
  - 整个站点在设计上可以酷炫一些，让学
  员加强成就感\
  - 上传作品的表单页，样式有点丑

它整体优化了一版：

这一版的它对酷炫的效果理解有偏差，反而更丑了，另外注册登录一开始没有讲清楚，于是再让它调整一下：

diff 复制代码

以下问题还需优化：
- 酷炫并不代表要很多动画动效，动效应该是微动效，恰到好处，不要喧宾夺主
- 整体站点的颜色不要过多，尤其是去掉颜色的动效，整体站点的配色应该是干净、舒服的
- 应该要设计一套统一的注册登录机制，管理员可以进管理后台，普通用户登录之后才能上传作品、管理自己的作品、以及投票等等操作
- 已有的作品图片没有显示出来，你可以帮我mock几张好看的图片放在数据库
- mock数据可以多一些，作品列表需要做个分页

功能和视觉要分开做

这一版分页和图片没问题，但整体设计风格，以及登录注册的设计还不是我想要的，于是继续向它提出要求：

diff 复制代码

- 目前这一版本的视觉效果过于朴素，需要提升视觉美观度和吸引力，吸引学员展示作品，但注意整体的配色和控制动效数量
- 希望设计用户中心，需要注册登录之后才能提交、管理作品，以及投票操作，管理员的账号可以预先设计好
- 表单的样式需要优化，所有的表单统一优化视觉效果
- 视觉从产品全局思考，符合统一的调性和审美

这一版改动不是特别理想，功能层面加了登录校验，但是交互层面设计的不好。

于是我决定拆两步走，先不管样式，把交互层面先搞定，最后再解决视觉问题：

diff 复制代码

- 用户未登录的时候，导航栏上只放一个按钮，引导用户登录就可以了
- 未登录的时候，投票的红心应该是空心的，这里应该区分我是否对该作品投过票
- 所有登录的校验，直接跳转到登录页就好，不需要alert弹框

这个交互和功能方面就比较符合预期了，不过投票功能还有点问题，我让它修复一下：

复制代码

现在点了投票没有反应，日志返回403，帮我修复

结果最后发现是不能为自己的作品投票：

那整个功能就没有太大问题了，接下来就是让它优化视觉。

最后一步：视觉优化

markdown 复制代码

整个页面尤其是首页，视觉上不够好看，比较朴素，你查看项目所有代码，在控制动
  效和保持配色和谐的前提下，帮我优化整体站点的视觉呈现效果：\
  - 首页体现出来作品展示的效果和成就感\
  - 表单可以不用原生的，采用好看的组件库\
  - 整个站点的配色和谐统一\
  - 按钮布局整洁大方，符合设计原则\
  - 不要用alert弹框，用组件库给用户更好地提示