这是一个系列 Blog作者将以一个 PHP 全栈工程师的身份利用 AI 工具claude code、codex、deepseek、豆包等从零开始学习 golang 语言并最终完成 ai-go-admingithub | gitee开源项目的制作全程记录分享。在上一期我们已经完成 “登录接口整合点选验证码AI 大翻车”本期将完成一行提示词抽出完美网站首页网站首页制作本项目目前并不确定是否制作 PC 会员端就算做应该也会使用更兼容 SEO 的 Nuxt而不是原生 VUE3 代码编写。但是访问站点又不能直接跳转到后台登录页面未来甚至需要自定义后台入口以达到隐藏后台的目的所以此时我们要做的首页其实就是个占位的页面随便弄一下就行了。这里让 CC 随便给我们做一个先看看效果作者于仓库 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自带有的这边要求它直接使用 el 定义好的变量$primary:#409eff;$primary-dark:#337ecc;$text-primary:#1f2937;$text-secondary:#6b7280;$text-muted:#9ca3af;$bg-light:#f9fafb;$bg-white:#ffffff;$border:#e5e7eb;// ...● 最后全面检查确认没有遗漏的非法 rgba(var(...))写法也没有 SCSS 变量残留。 Thoughtfor2s, searchedfor1pattern, called ide(ctrlo toexpand)● 零诊断全部干净。剩余的 rgba()都是静态值rgba(255,255,255, X)和 rgba(0,0,0, X)无需 CSS 变量参与完全合法。文案调整接下来几乎所有的调整都是文案上的比如它在介绍 TypeScript 时提到了 Vue3 和 Vite而下方又有单独的 Vue3 介绍然后就是文案过长和优化比如AI 执笔 · 人工雕琢我改为了AI 做舟 · 人掌分寸都是很细枝末节的问题。页头页脚封装为组件否正如本文开篇所述首页都只是一个占位页面主要的是后台后台用不上这种页头页脚组件。代码开源完整代码开源于github | gitee本次生成的首页完整代码如下有兴趣的开发者可以再帮忙review一遍template div classhome-page !-- 导航栏 -- header classnavbar div classnavbar-inner span classlogoAI GO MALL/span nav classnav-links a hrefhttps://github.com/ai-go-hub/ai-go-admin target_blank classnav-linkGitHub/a a hrefhttps://gitee.com/ai-go-hub/ai-go-admin target_blank classnav-linkGitee/a /nav /div /header !-- 主视觉区 -- section classhero div classhero-bg-deco div classdeco-blob deco-blob-1 / div classdeco-blob deco-blob-2 / div classdeco-grid / /div div classhero-content div classbadge-row span classai-badge el-iconCpu //el-icon AI 做舟人掌分寸 /span /div h1 classhero-title span classtitle-lineAI GO MALL/span /h1 p classhero-desc基于 Golang GORM TypeScript Vite Element Plus 等流行技术栈/p div classhero-actions el-button sizelarge typeprimary round click$router.push(/admin) 进入后台 /el-button el-button sizelarge round clickscrollToTech 了解技术栈 /el-button /div /div div classscroll-hint clickscrollToTech span向下滚动/span el-icon classbounce-arrowArrowDown //el-icon /div /section !-- 技术栈 -- section reftechSection classtech-section div classsection-header h2技术栈/h2 p流行、稳定、高效的技术选型/p /div div classtech-grid div v-foritem in techStack :keyitem.name classtech-card div classtech-icon :style{ background: item.gradient } el-icon :size28component :isitem.icon //el-icon /div h3{{ item.name }}/h3 p{{ item.desc }}/p /div /div /section !-- 开发理念 -- section classphilosophy-section div classsection-header h2开发理念/h2 pAI 执笔快速构建人掌分寸雕琢商用级电商工程/p /div div classphilosophy-content div classphilosophy-card human div classcard-icon el-icon :size40UserFilled //el-icon /div h3人工指挥/h3 p作者以丰富的开发经验把控项目架构与方向确保每一行代码都经过深思熟虑杜绝 AI 幻觉带来的隐患。/p /div div classphilosophy-divider div classdivider-line / span classdivider-plus el-icon :size24Plus //el-icon /span div classdivider-line / /div div classphilosophy-card ai div classcard-icon el-icon :size40Cpu //el-icon /div h3AI 执笔/h3 pClaude Code 作为主力编码助手高效完成重复性工作与代码生成大幅提升开发效率与代码质量。/p /div /div /section !-- 博客链接 -- section classblog-section div classsection-header h2开源博客/h2 p全程记录开发细节与社区共同成长/p /div div classblog-cards a hrefhttps://github.com/ai-go-hub/ai-go-blog target_blank classblog-card div classblog-card-icon github svg viewBox0 0 24 24 fillcurrentColor classgithub-svg path dM12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.385-1.335-1.755-1.335-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.605-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 21.795 24 17.295 24 12 24 5.37 18.63 0 12 0z / /svg /div div classblog-card-body h3GitHub/h3 pgithub.com/ai-go-hub/ai-go-blog/p /div el-icon classexternal-iconArrowRight //el-icon /a a hrefhttps://gitee.com/ai-go-hub/ai-go-blog target_blank classblog-card div classblog-card-icon gitee svg viewBox0 0 24 24 fillcurrentColor classgitee-svg path dM11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.778c-.328 0-.593-.266-.592-.593V5.926a.594.594 0 0 1 .593-.592h8.296zm-4.63 4.815h4.63c.328 0 .593.266.593.593v1.482a.594.594 0 0 1-.593.592H9.778a.594.594 0 0 1-.593-.592v-1.482a.594.594 0 0 1 .593-.593h3.667zm4.63 3.852c.328 0 .593.266.593.593v1.482a.594.594 0 0 1-.593.592H9.778a.594.594 0 0 1-.593-.592v-1.482a.594.594 0 0 1 .593-.593h8.296z / /svg /div div classblog-card-body h3Gitee/h3 pgitee.com/ai-go-hub/ai-go-blog/p /div el-icon classexternal-iconArrowRight //el-icon /a /div /section !-- 页脚 -- footer classfooter div classfooter-inner div classfooter-brand span classfooter-logoAI GO ADMIN/span span classfooter-taglineAI 做舟 · 人掌分寸/span /div div classfooter-links a hrefhttps://github.com/ai-go-hub/ai-go-admin target_blankGitHub/a span classfooter-divider·/span a hrefhttps://gitee.com/ai-go-hub/ai-go-admin target_blankGitee/a span classfooter-divider·/span a hrefhttp://beian.miit.gov.cn/ target_blank渝ICP备8888888号-1/a /div p classfooter-copycopy; {{ new Date().getFullYear() }} AI GO ADMIN. All rights reserved./p /div /footer /div /template script setup langts import { ArrowDown, ArrowRight, Coin, Connection, Cpu, DataBoard, Grid, Monitor, Plus, Setting, UserFilled } from element-plus/icons-vue import { ref } from vue const techSection refHTMLElement | null(null) function scrollToTech() { techSection.value?.scrollIntoView({ behavior: smooth }) } interface TechItem { name: string desc: string icon: any gradient: string } const techStack: TechItem[] [ { name: Golang, desc: 高性能后端语言Gin 框架 GORM 泛型驱动的服务端架构, icon: Monitor, gradient: linear-gradient(135deg, #00ADD8, #00ADD8cc), }, { name: TypeScript, desc: 类型安全的 JavaScript 超集前端顶流Vue3 使用它编写, icon: DataBoard, gradient: linear-gradient(135deg, #3178C6, #3178C6cc), }, { name: PostgreSQL, desc: 强大的开源关系型数据库GORM AutoMigrate 自动建表读写分离, icon: Coin, gradient: linear-gradient(135deg, #4169E1, #4169E1cc), }, { name: Vue 3 Pinia, desc: 渐进式前端框架搭配轻量级状态管理setup 语法糖 Vite 构建, icon: Connection, gradient: linear-gradient(135deg, #4FC08D, #4FC08Dcc), }, { name: Element Plus, desc: Vue 3 生态最流行的组件库统一的 UI 风格国际化开箱即用, icon: Grid, gradient: linear-gradient(135deg, #409EFF, #409EFFcc), }, { name: Claude Code, desc: AI 驱动的编码助手负责代码生成、重构与审查人机协同高效开发, icon: Setting, gradient: linear-gradient(135deg, #D97706, #D97706cc), }, ] /script style scoped langscss // 导航栏 .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .navbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; } .logo { font-size: 18px; font-weight: 700; color: var(--el-text-color-primary); letter-spacing: -0.5px; } .nav-links { display: flex; align-items: center; gap: 16px; } .nav-link { font-size: 14px; color: var(--el-text-color-regular); text-decoration: none; transition: color 0.2s; :hover { color: var(--el-color-primary); } } // 主视觉区 .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 96px 32px 64px; } .hero-bg-deco { position: absolute; inset: 0; pointer-events: none; } .deco-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; } .deco-blob-1 { top: -20%; right: -10%; width: 500px; height: 500px; background: color-mix(in srgb, var(--el-color-primary) 15%, transparent); } .deco-blob-2 { bottom: -10%; left: -10%; width: 400px; height: 400px; background: color-mix(in srgb, var(--el-color-primary) 10%, transparent); } .deco-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, color-mix(in srgb, var(--el-color-primary) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--el-color-primary) 4%, transparent) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); } .hero-content { position: relative; z-index: 10; text-align: center; max-width: 720px; } .badge-row { margin-bottom: 24px; } .ai-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; background: color-mix(in srgb, var(--el-color-primary) 8%, transparent); color: var(--el-color-primary); font-size: 13px; font-weight: 500; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--el-color-primary) 15%, transparent); } .hero-title { margin-bottom: 24px; .title-line { display: block; font-size: 56px; font-weight: 800; color: var(--el-text-color-primary); letter-spacing: -1.5px; line-height: 1.2; } } .hero-desc { font-size: 16px; color: var(--el-text-color-regular); line-height: 1.8; margin-bottom: 40px; max-width: 560px; margin-left: auto; margin-right: auto; } .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--el-text-color-secondary); font-size: 12px; cursor: pointer; z-index: 10; transition: color 0.2s; :hover { color: var(--el-color-primary); } } .bounce-arrow { animation: bounce 2s infinite; } keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } // 通用 section 头部 .section-header { text-align: center; margin-bottom: 56px; h2 { font-size: 32px; font-weight: 700; color: var(--el-text-color-primary); letter-spacing: -0.5px; margin: 0 0 12px; } p { font-size: 16px; color: var(--el-text-color-regular); margin: 0; } } // 技术栈 .tech-section { padding: 100px 32px; background: var(--el-fill-color-light); } .tech-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tech-card { background: var(--el-bg-color); border-radius: 16px; padding: 32px 28px; border: 1px solid var(--el-border-color-light); transition: all 0.3s ease; :hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); } .tech-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 20px; } h3 { font-size: 18px; font-weight: 600; color: var(--el-text-color-primary); margin: 0 0 8px; } p { font-size: 14px; color: var(--el-text-color-regular); line-height: 1.7; margin: 0; } } // 开发理念 .philosophy-section { padding: 100px 32px; } .philosophy-content { max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 32px; } .philosophy-card { flex: 1; text-align: center; padding: 40px 28px; border-radius: 16px; border: 1px solid var(--el-border-color-light); transition: all 0.3s ease; :hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); } .card-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } h3 { font-size: 20px; font-weight: 600; color: var(--el-text-color-primary); margin: 0 0 12px; } p { font-size: 14px; color: var(--el-text-color-regular); line-height: 1.8; margin: 0; } } .philosophy-card.human { background: var(--el-bg-color); .card-icon { background: color-mix(in srgb, var(--el-color-primary) 8%, transparent); color: var(--el-color-primary); } } .philosophy-card.ai { background: linear-gradient(135deg, #1f2937, #111827); h3 { color: #f9fafb; } p { color: #9ca3af; } .card-icon { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } } .philosophy-divider { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; } .divider-line { width: 1px; height: 40px; background: var(--el-border-color-light); } .divider-plus { width: 40px; height: 40px; border-radius: 50%; background: var(--el-fill-color-light); border: 1px solid var(--el-border-color-light); display: flex; align-items: center; justify-content: center; color: var(--el-text-color-secondary); } // 博客链接 .blog-section { padding: 100px 32px; background: var(--el-fill-color-light); } .blog-cards { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .blog-card { display: flex; align-items: center; gap: 20px; padding: 24px 28px; background: var(--el-bg-color); border-radius: 16px; border: 1px solid var(--el-border-color-light); text-decoration: none; transition: all 0.3s ease; :hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); } } .blog-card-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; .github { background: #24292e; } .gitee { background: #c71d23; } } .github-svg, .gitee-svg { width: 28px; height: 28px; } .blog-card-body { flex: 1; h3 { font-size: 16px; font-weight: 600; color: var(--el-text-color-primary); margin: 0 0 4px; } p { font-size: 13px; color: var(--el-text-color-secondary); margin: 0; font-family: SF Mono, Fira Code, monospace; } } .external-icon { color: var(--el-text-color-secondary); flex-shrink: 0; transition: all 0.2s; .blog-card:hover { color: var(--el-color-primary); transform: translateX(2px); } } // 页脚 .footer { padding: 48px 32px; border-top: 1px solid var(--el-border-color-light); background: var(--el-bg-color); } .footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; } .footer-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; } .footer-logo { font-size: 16px; font-weight: 700; color: var(--el-text-color-primary); } .footer-tagline { font-size: 13px; color: var(--el-text-color-secondary); padding: 2px 10px; background: var(--el-fill-color-light); border-radius: 100px; } .footer-links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; a { font-size: 13px; color: var(--el-text-color-secondary); text-decoration: none; transition: color 0.2s; :hover { color: var(--el-color-primary); } } } .footer-divider { color: var(--el-text-color-primary); } .footer-copy { font-size: 12px; color: var(--el-text-color-secondary); margin: 0; } // 响应式 media (max-width: 900px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } .philosophy-content { flex-direction: column; } .philosophy-divider { flex-direction: row; .divider-line { width: 40px; height: 1px; } } } media (max-width: 640px) { .hero-title { .title-line { font-size: 36px; } } .hero-desc { font-size: 14px; } .tech-grid { grid-template-columns: 1fr; } .section-header h2 { font-size: 24px; } .hero-actions { flex-direction: column; align-items: center; } } /style