AI 驱动构建成果

通过自然语言指令,使用 AI Coding Agent 从零构建的全功能技术博客

4
构建轮次
20+
AI 交互指令
900
最终代码行数
6
技术领域覆盖

⏱ 构建过程

第 1 轮 · 基础搭建

克隆 Jekyll 博客仓库,配置 Git 认证。
替换默认首页为 AI 生成的 3D 星空交互界面(Three.js)。

Three.js交互设计
第 2 轮 · 交互优化

调整拖拽旋转速度和鼠标跟随灵敏度。
添加行星点击→镜头跟随特写→再次点击跳转的双击导航逻辑。
修复选中星球后鼠标移开丢失高亮的 bug。

3D 交互动画调优
第 3 轮 · 内容整合

添加滚动内容区:分类标签 + Jekyll 动态文章列表。
深色星空与浅色博客区形成双主题对比。
滚动时星系缩放,离开视口后自动暂停 Three.js 渲染释放资源。

性能优化滚动设计
第 4 轮 · 视觉特效

引入噪点纹理、CRT 扫描线、CSS 浮动几何形状。
标题故障艺术效果(glitch text)。
文章卡片逐帧入场动画 + 鼠标 3D 倾斜跟随。

CSS 特效参考实现
第 5 轮 · 品牌与 SEO

品牌化:项目名称 → "xvcenh的博客",关于页面个人化。
SEO 全栈优化:meta tags、Open Graph、JSON-LD、robots.txt、sitemap。
关键搜索词:xvcenh、徐辰。

SEO品牌建设
第 6 轮 · XVCENH 拼字动画

集成霓虹几何拼字动画:弹簧物理驱动彩色矩形散落→汇聚拼出"XVCENH"。
替代 Three.js 星系成为首页 Hero,加载更快,品牌感更强。

Canvas 动画轻量替代

⚡ 已实现功能

🎨 XVCENH 霓虹拼字动画

全屏 Canvas 动画,霓虹矩形通过弹簧物理拼出品牌名 "XVCENH"。星空背景 + 粒子连线 + 鼠标斥力。自动循环切换散落/汇聚状态。

Canvas 2DAI 生成动画

📜 滚动博客内容区

粘性布局,动画区固定 + 内容区可滚动。分类标签、文章卡片由 Jekyll 动态渲染。卡片具备入场动画和 3D 倾斜交互。

布局设计Jekyll 集成

✨ 视觉特效系统

SVG 噪点覆盖、CSS 扫描线、5 种浮动几何形状(环/菱/十字/三角)、标题故障文字效果、星空闪烁背景。

CSS 特效3D 变换

🔍 全栈 SEO 优化

Meta description/keywords、Open Graph / Twitter Card、JSON-LD 结构化数据、Canonical URL、Robots.txt、Sitemap 自动生成。针对 "xvcenh" "徐辰" 搜索词优化。

SEO

🎯 交互细节

拖拽感觉调优(降低灵敏度 60%)、双击行星跳转、卡片 3D 倾斜跟随、IntersectionObserver 入场动画、滚动提示箭头。

UX 优化

🛠 技术栈

Jekyll GitHub Pages Canvas 2D API CSS Animations CSS 3D Transforms jekyll-seo-tag jekyll-sitemap IntersectionObserver Liquid Templates Spring Physics

🤖 AI 驱动开发方式

自然语言驱动

通过直接的中文描述表达需求,无需手写代码:
"鼠标拖拽转动速度太快了" → AI 自动找到拖拽系数并调优
"换成比较亮的颜色" → AI 系统性修改全部 CSS 变量 + Three.js 着色器
"怎么能让大家都能搜到我" → AI 完成 SEO 审计并实施全站优化

自然语言

参考实现 → 自主融合

提供 AI 生成的参考文件,AI 分析其效果原理,挑选最适合的部分融入现有项目:
参考 code (7).html → 提取噪点、扫描线、浮动形状、卡片倾斜、故障文字
参考拼字动画 → 完整集成 Canvas 动画并替换 Three.js 星系

代码融合

持续迭代优化

6 轮迭代,每轮根据反馈调整:
拖拽速度 → 相机跟随 → 滚动布局 → 色彩主题 → 视觉特效 → 品牌 SEO
遇到 GitHub 网络中断时自动重试,提交失败时不丢失本地工作。

迭代开发