上一期我们完成了登录接口与点选验证码的整合，虽然过程中 AI 出现过失误，但最终顺利解决。本期带来一个轻松的话题——仅需一行提示词，就成功生成了后台管理系统的首页，而且效果出乎意料地好。
网站首页制作：一行提示词打造专业占位页面
先明确项目定位：目前这个后台管理系统短期内没有计划开发 PC 会员端，即便未来需要，大概率也会采用 Nuxt 来兼顾 SEO，而不会直接用原生 Vue3 编写前端页面。
然而，如果访问者直接进入后台登录页显然不够友好。未来甚至需要自定义后台入口地址，把真实后台隐藏起来。因此当前阶段的首页本质上是一个占位页面，只需清晰介绍业务，视觉上达到基本要求即可。
确定思路后，我让 Claude Code 根据仓库 README 中的一行项目描述，使用 Vue3 和 Element Plus 快速生成首页。以下是完整的提示词：
```bash 帮我于 @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 进行了一次全面清理，效果出色——零诊断报告，所有 rgba 均为静态值，无非法写法残留，也没有遗留 SCSS 变量。
文案层面的优化调整
剩余调整主要集中在文案方面。例如，在介绍 TypeScript 时同时提及了 Vue3 和 Vite，但下方又有单独介绍 Vue3 的区域，导致信息重复。另外，部分文案过长，需要精简。我将原有的口号"AI 执笔 · 人工雕琢"改为"AI 做舟 · 人掌分寸"，个人认为更富韵味。
页头页脚是否封装为组件？决策原因分析
决定不封装。理由明确：首页仅为占位页面，核心功能在后端管理系统，后台无需使用此类页头页脚组件。没有必要为了追求代码复用而封装实际用不到的组件。
以上即为本次首页生成的全部流程。完整代码已开源，感兴趣的开发者可前往仓库审查，欢迎提出改进建议。
