通过自然语言指令,使用 AI Coding Agent 从零构建的全功能技术博客
克隆 Jekyll 博客仓库,配置 Git 认证。
替换默认首页为 AI 生成的 3D 星空交互界面(Three.js)。
调整拖拽旋转速度和鼠标跟随灵敏度。
添加行星点击→镜头跟随特写→再次点击跳转的双击导航逻辑。
修复选中星球后鼠标移开丢失高亮的 bug。
添加滚动内容区:分类标签 + Jekyll 动态文章列表。
深色星空与浅色博客区形成双主题对比。
滚动时星系缩放,离开视口后自动暂停 Three.js 渲染释放资源。
引入噪点纹理、CRT 扫描线、CSS 浮动几何形状。
标题故障艺术效果(glitch text)。
文章卡片逐帧入场动画 + 鼠标 3D 倾斜跟随。
品牌化:项目名称 → "xvcenh的博客",关于页面个人化。
SEO 全栈优化:meta tags、Open Graph、JSON-LD、robots.txt、sitemap。
关键搜索词:xvcenh、徐辰。
集成霓虹几何拼字动画:弹簧物理驱动彩色矩形散落→汇聚拼出"XVCENH"。
替代 Three.js 星系成为首页 Hero,加载更快,品牌感更强。
全屏 Canvas 动画,霓虹矩形通过弹簧物理拼出品牌名 "XVCENH"。星空背景 + 粒子连线 + 鼠标斥力。自动循环切换散落/汇聚状态。
Canvas 2DAI 生成动画粘性布局,动画区固定 + 内容区可滚动。分类标签、文章卡片由 Jekyll 动态渲染。卡片具备入场动画和 3D 倾斜交互。
布局设计Jekyll 集成SVG 噪点覆盖、CSS 扫描线、5 种浮动几何形状(环/菱/十字/三角)、标题故障文字效果、星空闪烁背景。
CSS 特效3D 变换Meta description/keywords、Open Graph / Twitter Card、JSON-LD 结构化数据、Canonical URL、Robots.txt、Sitemap 自动生成。针对 "xvcenh" "徐辰" 搜索词优化。
SEO拖拽感觉调优(降低灵敏度 60%)、双击行星跳转、卡片 3D 倾斜跟随、IntersectionObserver 入场动画、滚动提示箭头。
UX 优化通过直接的中文描述表达需求,无需手写代码:
"鼠标拖拽转动速度太快了" → AI 自动找到拖拽系数并调优
"换成比较亮的颜色" → AI 系统性修改全部 CSS 变量 + Three.js 着色器
"怎么能让大家都能搜到我" → AI 完成 SEO 审计并实施全站优化
提供 AI 生成的参考文件,AI 分析其效果原理,挑选最适合的部分融入现有项目:
参考 code (7).html → 提取噪点、扫描线、浮动形状、卡片倾斜、故障文字
参考拼字动画 → 完整集成 Canvas 动画并替换 Three.js 星系
6 轮迭代,每轮根据反馈调整:
拖拽速度 → 相机跟随 → 滚动布局 → 色彩主题 → 视觉特效 → 品牌 SEO
遇到 GitHub 网络中断时自动重试,提交失败时不丢失本地工作。