给 CacheKV 做了个官网，全程用 AI 搞定

接上篇：《用 Amazon Q AI 写了个 PHP 缓存库，解决”若无则获取并回填”这个老问题》

起因

CacheKV 库写完发布到 Packagist 后，觉得光有个 README 不太够，想着做个简单的官网展示一下功能。主要是现在很多开源项目都有自己的官网，看起来比较正式。

既然上次用 AI 写库效果不错，这次做官网也继续用 AI。

需求很简单

就想要个静态页面，能展示：

• 库的核心功能

• 几个代码示例

• 安装和使用方法

• 看起来不要太丑

没想搞得太复杂，毕竟就是个缓存库。

AI 帮忙选技术栈

我问 AI 用什么技术做官网比较好，它建议：

• 纯 HTML + CSS + JS

• 不用任何框架

• GitHub Pages 免费托管

• Prism.js 做代码高亮

理由是简单、免费、维护成本低。确实，没必要用 Vue/React。

AI 设计页面结构

我告诉 AI 想要什么内容，它给了个标准的开源项目官网结构：

- 顶部：项目名 + 一句话介绍

- 功能特性：几个卡片展示主要功能

- 代码示例：基础用法、批量操作、删除缓存

- 快速开始：安装 -> 配置 -> 使用

- 底部：GitHub 链接

样式上 AI 建议用毛玻璃效果，看起来现代一点。我说行，然后它就开始写代码了。

AI 帮忙部署

GitHub Actions 配置

我说想自动部署到 GitHub Pages，AI 直接给了完整的 workflow 文件：

name: Deploy to GitHub Pages

on:

push:

branches: [ main ]

permissions:

contents: read

pages: write

id-token: write

jobs:

deploy:

environment:

name: github-pages

url: ${{  steps.deployment.outputs.page_url  }}

runs-on: ubuntu-latest

steps:

- name: Checkout

uses: actions/checkout@v4

- name: Setup Pages

uses: actions/configure-pages@v4

- name: Upload artifact

uses: actions/upload-pages-artifact@v3

with:

path: '.'

- name: Deploy to GitHub Pages

id: deployment

uses: actions/deploy-pages@v4

本地化资源

AI 建议把 CDN 的文件都下载到本地，避免外部依赖，还给了具体命令：

curl  -o  assets/css/prism-tomorrow.min.css

https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css

AI 的工作流程

整个过程中，AI 的工作方式很有意思：

1. 理解需求：我说想要什么，它能准确理解

2. 技术选型：基于需求给出合理的技术方案

3. 代码生成：直接写出可用的代码

4. 问题诊断：根据错误信息快速定位问题

5. 方案优化：不断改进直到满意

感觉就像有个很有经验的前端开发在旁边帮忙。

最终效果

网站地址：g1012415019.github.io/CacheKVOffic...

功能：

• 响应式设计，手机上也能看

• 代码高亮正常工作

• 所有示例都是真实可用的 API

• 加载速度还行

总结

从开始到部署完成，大概花了 2 小时，其中大部分时间是在等 AI 写代码和调试。

AI 的优势：

1. 速度快，几分钟就能生成完整页面

2. 经验丰富，知道各种最佳实践

3. 调试能力强，能快速定位问题

4. 不会偷懒，让它改什么就改什么

我的工作：

1. 提需求和反馈

2. 测试和发现问题

3. 最终的决策和确认

感觉现在做这种标准化的项目，AI 已经能承担大部分工作了。我主要负责想法和质量把控，具体实现交给 AI 就行。

对于个人开发者来说，这种协作模式效率很高。以前可能要花一两天做的事，现在几个小时就搞定了。

对于小项目来说，有个简单的官网确实能提升一些专业度。虽然不知道有多少人会看，但至少自己觉得完整了。

项目链接：

• 官网：g1012415019.github.io/CacheKVOffic...

• 库：github.com/g1012415019/CacheKV

• Packagist：packagist.org/packages/asfop/cache...

本作品采用《CC 协议》，转载必须注明作者和本文链接