详情

导航

详情

首页手游攻略 从 PHP 到 AI + Golang：程序员自救转型手记（二十四）：一行提示词抽出完美网站首页

从 PHP 到 AI + Golang：程序员自救转型手记（二十四）：一行提示词抽出完美网站首页

佚名 2026-07-14 09:14:58
这是一个系列 Blog，作者将以一个 PHP 全栈工程师的身份，利用 AI 工具（claude code、codex、deepseek、豆包等）：从零开始学习 golang 语言，并最终完成 ai-go-admin 开源项目的制作，取文章内源代码可以搜索进仓库，欢迎 star，全程记录分享。

在上一期，我们已经完成 “登录接口整合点选验证码（AI 大翻车）”，本期将完成：一行提示词抽出完美网站首页

# 网站首页制作

本项目目前并不确定是否制作 PC 会员端，就算做应该也会使用更兼容 SEO 的 Nuxt，而不是原生 VUE3 代码编写。

但是访问站点，又不能直接跳转到后台登录页面（未来甚至需要自定义后台入口以达到隐藏后台的目的），所以此时我们要做的首页，其实就是个占位的页面，随便弄一下就行了。

这里让 CC 随便给我们做一个，先看看效果：作者于仓库 README 复制了一行介绍，然后要求它使用 `vue3` 和 `element plus`，如下：

```bash

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

```

我去，不错，真不错啊，我先看了代码，一共只动了三个文件，然后是效果，大家自己看吧：

> 虽然 AI 感有点强，不过这是一句提示词出来的，而且 AI 感强又不影响业务，能把业务介绍清楚还好看就行了

![1.png](https://developer.qcloudimg.com/http-save/yehe-7863164/5f16c0f81b50aad0a3da7e931ed3d257.png)

![2.png](https://developer.qcloudimg.com/http-save/yehe-7863164/1cc16451df3cb23b9a8816398ce6b9ee.png)

![3.png](https://developer.qcloudimg.com/http-save/yehe-7863164/e8b839e9b309cf36f22597780a907dc4.png)

还是响应式的，自然兼容不同屏幕的设备。

作者目检了每一行代码，保守一点，90% 以上无需调整，代码非常干净，找到这么几个问题：

#### scss 变量重复定义

AI 在 scss 部分开篇就定义了后续需要用的变量，不过 `$primary`、`$text-primary` 这些都是 `element plus` 自带有的，这边要求它直接使用 el 定义好的变量

```scss

```

```bash

● 最后全面检查：确认没有遗漏的非法 rgba(var(...)) 写法，也没有 SCSS 变量残留。

Thought for 2s, searched for 1 pattern, called ide (ctrl o to expand)

● 零诊断，全部干净。剩余的 rgba() 都是静态值（rgba(255,255,255, X) 和 rgba(0,0,0, X)），无需 CSS 变量参与，完全合法。

```

#### 文案调整

接下来几乎所有的调整，都是文案上的，比如它在介绍 TypeScript 时，提到了 Vue3 和 Vite，而下方又有单独的 Vue3 介绍，然后就是文案过长，和优化，比如 `AI 执笔 · 人工雕琢` 我改为了 `AI 做舟 · 人掌分寸`，都是很细枝末节的问题。

#### 页头页脚封装为组件？

否，正如本文开篇所述，首页都只是一个占位页面，主要的是后台，后台用不上这种页头页脚组件。

#### 代码开源

> 完整代码已开源于github 和 gitee，需要的也可以搜索查阅。

本次生成的首页完整代码如下，有兴趣的开发者，可以再帮忙 `review` 一遍：

```vue

```","createTime":1783416486,"ext":{"closeTextLink":1,"comment_ban":0,"description":"","focusRead":0},"favNum":0,"html":"","isOriginal":0,"likeNum":0,
相关资讯
点击查看更多
游戏推荐

ANITABImap地图

闹鬼殡仪馆

家有好医

智子风暴

漫社堂

胡闹西游

爱贝孕育

顶级富豪

国际校讯通

坦克来了

切片相机

csp绘画

龙兽争霸4深海狂魔

真实赛车3满级版

人生回忆录APP

他们来了

精灵识字

快递头条

汽车公司大亨

全栈证件照制作

木材雕刻3D

碎片记忆

集光行

交通巡回赛
推荐专题
热门阅读
推荐下载

Copyright©2010-2019 All rights reserved | 波波三国游戏官网