上一期咱们搞定了登录接口整合点选验证码，过程有点跌宕，AI 翻车又翻回来，也算有惊无险。这一期说点轻松的——只用一行提示词，就把网站首页给整出来了，效果还意外地不错。

网站首页制作

项目定位与首页思路

先聊一下项目的定位。目前这个后台管理系统，短期内没有计划做 PC 会员端。

即便以后要做，大概率也会用 Nuxt 来兼顾 SEO，不会直接用原生 Vue3 去写前端页面。

但问题来了——你总不能让人家访问你的站点，直接跳转到后台登录页吧？那也太粗暴了。

未来甚至还需要自定义后台入口地址，把真正的后台藏起来。所以现阶段要做的首页，本质上就是个占位页面，把业务介绍清楚、视觉上过得去就行。

一句话提示词，生成了整个首页

思路明确了，那就让 CC（Claude Code）随便给整一个。从仓库 README 复制了一行项目介绍，直接甩给它，要求用 Vue3 和 Element Plus 来写。提示词原文是这样的：

帮我于 @src/views/index.vue 设计一个简洁大气的首页，使用当前已有依赖包，如 vue 和 element plus；项目是基于 Golang + GORM + TypeScript + Vite + Pinia + Element Plus 等流行技术栈的后台管理系统，目前开发工作以【AI执笔 + 人工逐行雕琢】的模式积极进行中，作者指挥左手 AI，右手同步手搓 Blog，全程记录开发细节。

说实话，看到生成结果的时候，有点惊艳。一共只动了三个文件，效果大家可以自己感受。

虽然 AI 感确实有点强——但这是一句话提示词出来的啊。而且说句实在话，AI 感强又不影响业务。

能把项目定位、技术栈、开发理念这些核心信息交代清楚，视觉上还做得挺好看，这就够了。

顺便说一下，这个首页还是响应式的，不同屏幕尺寸下都能正常展示。

生成代码的质量与发现的问题

从头到尾过了一遍生成的代码，保守估计 90% 以上不需要调整，写得很干净。不过还是找到几个小问题：

SCSS 变量重复定义

AI 在 SCSS 部分开篇就自己定义了一堆变量，比如 $primary、$text-primary 这些。问题在于，Element Plus 本身已经定义好了这些变量，直接引用 var(--el-color-primary) 就行了，没必要再重复声明一遍。

// 这是 AI 生成的冗余代码
$primary: #409eff;
$primary-dark: #337ecc;
$text-primary: #1f2937;
$text-secondary: #6b7280;
$text-muted: #9ca3af;
$bg-light: #f9fafb;
$bg-white: #ffffff;
$border: #e5e7eb;

让 AI 做了一轮全面清理，结果很干净——零诊断，所有 rgba 都是静态值，没有遗留的非法写法，也没有 SCSS 变量残留。

文案调整

剩下的调整几乎都是文案层面的。比如它在介绍 TypeScript 时顺带提到了 Vue3 和 Vite，但下方又有单独介绍 Vue3 的区域，造成信息重复。

还有就是文案太长，需要精简。像“AI 执笔 · 人工雕琢”这个口号，我改成了“AI 做舟 · 人掌分寸”，个人觉得更有味道一些。

页头页脚要不要封装成组件？

不封装。理由很简单，首页就是个占位页面，主要战场在后台，后台用不上这种页头页脚组件。没必要为了“代码复用”而去复用根本用不到的东西。

以上就是这次首页生成的全部过程。完整代码已经开源，有心的开发者可以自己去仓库里 review，有什么改进意见也欢迎提出来。

《夸克》非常好用的免费AI浏览器

下载APP查看