小小免责声明
：本文是新手向实践记录，不是标准前端工程教程。不同模型和编辑器跑出来的结果可能不同，建议把它当作一个可参考的流程，而不是唯一正确答案。本文会尽量写得保姆级一些，方便没写过网页的读者也能跟着跑；技术大佬请轻喷，也欢迎绕道阅读其他硬核文章~

有一天，我在知名交友网站闲逛，发现@极客杰尼发了一套组合 SKILL：我正在用 AI Coding 重构自己的网站，分享三个技能。

找到合适的设计风格： https://getdesign.md
找到动画设计要求：huashu-design，这里直接发给 Agent 学习设计规范： https://github.com/alchaincyf/huashu-design
superpowers:brainstorming，开启头脑风暴，让 Agent 给你设计网站风格草图。用它打开 Visual Companion，这一步很重要，它会在浏览器里给你并排放 2-3 个视觉方向的真实 mockup。比如截图里，手机端的真机模拟图，效果很赞。 https://github.com/obra/superpowers

这套组合 SKILL 很让我心动，加上听说厉害的技术人都是人手一个 blog。虽然我不是大佬，但我打算按照这个思路做个网站。一瞥日历，发现明天就是母亲节了，也没啥好送母上大人的。要不，个人博客改成家庭记忆，给母上大人送一个关于彼此的温馨记忆。毕竟个人博客什么时候都能搭，母亲节过一年少一年。

说干就干，我们开始搭建家庭记忆站点。本文不涉及购买域名、服务器、部署站点等部署环节，只记录如何建立一个本地能打开的站，方便后续放到 GitHub Pages / Cloudflare Pages 等免费托管平台。

废话不多说，进入正题：

初始化

打开 IDE，或者任意支持 AI Coding 的编辑器，新建一个文件夹。由于时间的关系，这里应节命名为“HAPPY-MOTHER'S-DAY”，此外再建立 4 个文件和 1 个文件夹：

DESIGN.md：用来放置站点的设计样式
index.html：网页入口，直接点击就能看到本地效果
script.js：控制这个站点的交互逻辑
styles.css：控制这个站点的样式
assets：图片文件夹，用来放置这个站点的图片

新建之后，和下面类似：

目录结构创建完成之后，大致如下：

happy-mother's-day/
  ├── index.html
  ├── styles.css
  ├── script.js
  ├── DESIGN.md
  └── assets/

下面我们把下面的 prompt 贴到你所用的 AI Coding 的编辑器中：

我想做一个母亲节家庭记忆站。
它不是商业网站，也不是普通个人博客。
它的目标是记录妈妈和孩子们之间的家庭记忆。
技术要求：
- 纯 HTML / CSS / 原生 JS
- 不使用 npm
- 不使用 Node.js
- 不使用 React / Vue / Next.js
- 不引入复杂依赖
- 可以直接本地打开
- 适合部署到 GitHub Pages 或 Cloudflare Pages
请先不要写代码。
请先帮我规划：
1. 这个网站适合包含哪些页面模块
2. 每个模块记录什么内容
3. 页面整体信息顺序
4. 适合的视觉方向
5. 哪些地方适合用轻量动效
6. 哪些地方应该避免做得太像节日贺卡

等模型跑完你的需求，在它反馈的大量结果中，看一下结果里是否包含站点整体规划。参考下面：

我建议最终页面顺序是：
封面
最近的记忆
时间线
相册
孩子们的话
妈妈的小事
记忆物件
家庭地点
每年的母亲节
页脚

站点样式设计

这一步不是为了写漂亮文档，而是给 AI 一个明确的设计边界。用过 AI 的小伙伴都知道，它很容易出一次性成果。可能会把页面做成通用模板，或者做成一次性的母亲节贺卡。

用下面的 Prompt 来约束下 AI，生成这个记忆站的对应样式：

很好，请基于刚才的规划，继续生成一份完整的 DESIGN.md。
这个网站定位是：
从母亲节出发，但不止服务母亲节的家庭记忆站。
它不是节日贺卡，而是一个可以长期维护的家庭档案，用来记录妈妈、孩子们、家庭照片、时间线、地点、小事和每年的母亲节。
技术约束：
- 纯 HTML / CSS / 原生 JS
- 不使用 npm
- 不使用 Node.js
- 不使用 React / Vue / Next.js
- 不引入复杂依赖
- 可以直接本地打开
- 适合部署到 GitHub Pages 或 Cloudflare Pages
请输出 DESIGN.md，内容包括：
1. 网站定位
2. 设计原则
3. 页面结构
4. 每个模块的数据字段
5. 视觉风格
6. 色彩规范
7. 字体和排版规范
8. 图片展示规范
9. 时间线样式规范
10. 卡片样式规范
11. 锚点导航规范
12. 动效规范
13. 移动端适配规范
14. 文件结构建议
15. 实现顺序
16. 禁止事项
风格要求：
- 温暖但不煽情
- 像家庭档案，不像节日贺卡
- 有老相册和家书感
- 低饱和、暖白、留白
- 真实照片优先
- 适合长辈在手机上阅读
- 可以长期维护和持续更新
请使用 Markdown 格式输出。

GPT-5.5 跑完了，由于篇幅的原因，这里截图给你示意下，这里要注意右侧方框 GPT-5.5 给出的反馈：

生成站点

设计样式已经有了，剩下就是实现部分了，继续让 G 老师给我打工。施加下面的魔法：

请基于 DESIGN.md 和刚才的数据结构，开始生成第一版网站。
请创建或修改以下文件：
- index.html
- styles.css
- script.js
技术要求：
- 纯 HTML / CSS / 原生 JS
- 不使用 npm
- 不使用 Node.js
- 不使用任何前端框架
- 不引入外部依赖
- 可以直接双击 index.html 打开
- 适合部署到 GitHub Pages / Cloudflare Pages
实现要求：
1. 使用单页长页面
2. 顶部使用锚点导航
3. 每个模块都有清晰 id，方便跳转
4. 页面内容先使用示例数据
5. 照片暂时使用占位路径 assets/photos/xxx.jpg
6. 相册点击后可以打开简洁灯箱
7. 支持滚动淡入
8. 支持当前导航项高亮
9. 移动端优先保证阅读舒适
10. 严格遵循 DESIGN.md，不要做成节日贺卡风
请先完成第一版可运行页面。

没想到 G 老师边打工边吐槽，这里空空如也，你要我从零开始：

需求比较简单，5 分 55 秒跑完了

浏览下效果

https://www.bilibili.com/video/BV1DERQBYEBw/

优化图片显示逻辑

预览效果的时候，我们会发现整个站点主要是靠图片撑起来的。所以，我们先来优化图片显示逻辑，不要一股脑都把图片丢在 assets，我们按照模块来进行文件夹命名：

happy-mother's-day/
  ├── index.html
  ├── styles.css
  ├── data.js
  ├── script.js
  ├── DESIGN.md
  ├── README.md
  └── assets/
      └── photos/
          ├── 01-cover/
          │   └── cover.jpg
          ├── 02-recent-memory/
          │   └── recent-dinner.jpg
          ├── 03-timeline/
          │   ├── timeline-2001.jpg
          │   ├── timeline-2008.jpg
          │   ├── timeline-2016.jpg
          │   └── timeline-2026.jpg
          ├── 04-album/
          │   ├── album-01.jpg
          │   ├── album-02.jpg
          │   └── album-03.jpg
          ├── 05-letters/
          │   ├── letter-01.jpg
          │   └── letter-02.jpg
          ├── 06-mom-details/
          │   └── soup.jpg
          ├── 07-memory-objects/
          │   ├── object-ticket.jpg
          │   ├── object-album.jpg
          │   └── object-note.jpg
          ├── 08-family-places/
          │   ├── place-kitchen.jpg
          │   ├── place-school.jpg
          │   └── place-park.jpg
          └── 09-mothers-day/
              └── mothers-day-2026.jpg

图片对应结构如下：

页面模块	图片文件夹
封面区	01-cover/
最近的记忆	02-recent-memory/
时间线	03-timeline/
家庭相册	04-album/
孩子们的话	05-letters/
妈妈的小事	06-mom-details/
记忆物件	07-memory-objects/
家庭地点	08-family-places/
每年的母亲节	09-mothers-day/

给 G 老师递个需求：

现在请在当前项目基础上增加一个“方便后续更新”的结构。
这个教程是面向新手的，所以不要做复杂自动化，也不要引入脚本扫描文件夹。
目标：
以后更新这个家庭记忆站时，不需要改 index.html，也尽量不改 styles.css 和 script.js。
只需要：
1. 把图片放进对应模块的文件夹
2. 在 data.js 里新增或修改内容记录
重要要求：
图片文件夹必须按照页面模块来管理，而不是按照泛泛的图片类型来管理。
文件夹顺序要和页面模块顺序一致，方便新手理解。
请帮我重构项目。
要求：
1. 新增 data.js
2. 把 script.js 里的 siteData 移动到 data.js
3. script.js 只保留渲染逻辑和交互逻辑
4. index.html 需要同时引入 data.js 和 script.js
5. data.js 必须在 script.js 前加载
6. 保持页面视觉和交互不变
7. 保持纯 HTML / CSS / 原生 JS
8. 不使用 npm
9. 不使用 Node.js
10. 不引入外部依赖
11. 代码注释要适合新手理解，不要写太多专业术语
新的图片目录结构请使用：
family-memory-site/
  ├── index.html
  ├── styles.css
  ├── data.js
  ├── script.js
  ├── DESIGN.md
  ├── README.md
  └── assets/
      └── photos/
          ├── 01-cover/
          ├── 02-recent-memory/
          ├── 03-timeline/
          ├── 04-album/
          ├── 05-letters/
          ├── 06-mom-details/
          ├── 07-memory-objects/
          ├── 08-family-places/
          └── 09-mothers-day/
图片路径请统一调整成这种形式：
- assets/photos/01-cover/cover.jpg
- assets/photos/02-recent-memory/recent-dinner.jpg
- assets/photos/03-timeline/timeline-2001.jpg
- assets/photos/04-album/album-01.jpg
- assets/photos/05-letters/letter-01.jpg
- assets/photos/06-mom-details/soup.jpg
- assets/photos/07-memory-objects/object-ticket.jpg
- assets/photos/08-family-places/place-kitchen.jpg
- assets/photos/09-mothers-day/mothers-day-2026.jpg
请完成后说明：
1. 哪些文件被修改
2. data.js 负责什么
3. script.js 负责什么
4. index.html 里为什么要先引入 data.js，再引入 script.js
5. 每个图片文件夹对应页面里的哪个模块
6. 我以后如何新增一张相册照片
7. 我以后如何新增一条时间线
8. 我以后如何替换封面图

3 分 39 秒之后，完成，我们现在来看下图片结构：

基本上完成了我们的需求。图片可以按照文件来更新对应模块的内容了。最后一个问题是，现在这个页面内容是固定的，也就是说页面被代码写死了。我们要增加记忆的话，得重新改代码。这就很不方便，毕竟爸妈都是不懂代码的人，我们让 AI 改一下逻辑：

页面更新逻辑

现在页面需要自带一个“编辑模式”，爸妈可以在网页里新增记忆、上传图片、修改文字；爸妈这边上传的内容先保存在当前浏览器的本地存储里；接着，可以一键导出 memory-data.json，发给子女，由子女替换到网站里重新部署。

现在我想让这个家庭记忆站支持“新手可用的自定义更新功能”。
背景：
目前页面内容是写在 data.js 里的。虽然已经比写死在 HTML 里好，但对不懂代码的爸妈来说，新增一段记忆仍然需要改代码。
目标：
在不使用 npm、不使用 Node.js、不使用后端、不使用数据库的前提下，让普通用户可以在网页里新增、编辑和保存家庭记忆。
请在当前项目基础上增加“编辑模式”。
技术要求：
- 纯 HTML / CSS / 原生 JS
- 不使用 npm
- 不使用 Node.js
- 不使用 React / Vue / Next.js
- 不引入外部依赖
- 不使用后端
- 不使用数据库
- 可以直接双击 index.html 打开
- 适合 GitHub Pages / Cloudflare Pages 静态部署
核心功能：
1. 页面右下角增加一个“编辑记忆”按钮
2. 点击后打开编辑面板或编辑页面
3. 编辑面板里可以选择要更新的模块：
   - 最近的记忆
   - 时间线
   - 家庭相册
   - 孩子们的话
   - 妈妈的小事
   - 记忆物件
   - 家庭地点
   - 每年的母亲节
4. 每个模块提供对应表单
5. 用户填写后，可以点击“添加到页面”
6. 新增内容会立即显示在当前页面
7. 点击“保存到本机”后，数据保存到 localStorage
8. 下次打开同一个浏览器，仍然能看到保存的内容
9. 支持“导出数据”：下载一个 memory-data.json 文件
10. 支持“导入数据”：选择 memory-data.json 后恢复页面内容
11. 支持“恢复默认示例数据”
12. 所有操作都要有简单提示，适合不懂代码的人使用
图片处理要求：
- 由于纯静态网页不能直接把图片写进项目文件夹，所以图片字段先支持填写图片路径
- 表单里提示用户：如果要正式发布，需要先把图片放进对应模块文件夹，再填写相对路径
- 图片路径仍然按照模块管理，例如：
  - assets/photos/01-cover/cover.jpg
  - assets/photos/02-recent-memory/recent-dinner.jpg
  - assets/photos/03-timeline/timeline-2026.jpg
  - assets/photos/04-album/album-01.jpg
  - assets/photos/05-letters/letter-01.jpg
  - assets/photos/07-memory-objects/object-ticket.jpg
  - assets/photos/08-family-places/place-kitchen.jpg
  - assets/photos/09-mothers-day/mothers-day-2026.jpg
文件调整要求：
1. 保留 data.js，用作默认数据
2. script.js 负责：
   - 读取默认数据
   - 读取 localStorage 里的用户数据
   - 渲染页面
   - 处理编辑、新增、导入、导出、恢复默认
3. styles.css 增加编辑面板样式
4. index.html 增加编辑按钮和编辑面板结构
5. 不要破坏当前页面视觉
6. 编辑功能的视觉也要遵循 DESIGN.md：温暖、清晰、克制，不要像后台管理系统
交互体验要求：
- 表单字段要用中文标签
- 必填项要标注
- 按钮文案要清楚，比如“添加到页面”“保存到本机”“导出数据”“导入数据”“恢复默认”
- 保存成功要有提示
- 导入前要提醒会覆盖当前本机数据
- 恢复默认前要二次确认
- 移动端也能使用编辑面板
完成后请说明：
1. 新增了哪些功能
2. 修改了哪些文件
3. 数据现在是怎么保存的
4. 为什么本地保存不等于线上同步
5. 爸妈如何新增一条家庭记忆
6. 子女如何把爸妈导出的数据同步到正式网站

需要注意的是，这个功能不是云端同步。这里内容保存到本机，指的是保存到当前浏览器。如果换手机、换浏览器，或者清理浏览器数据，本地内容可能就看不到了。想让全家都看到某个成员的新动态，记得和家里人说一声及时导出数据，网页入口更新到正式站点。

下面，我们来测试下这个功能：

https://www.bilibili.com/video/BV1uWRQBcE4j/

最后，我们看下所有图片替换之后，整站的画风。由于时间关系，母上大人在我手机里的图片并不多，这里先放上我家猫崽子的照片作为替身：

https://www.bilibili.com/video/BV1eXRQBgEXQ/

至此，希望你也能用手里的照片、几段文字，搭起一个属于自己家的记忆册。

它不一定精致，也不一定完整。重要的是，从今天开始，家里的那些照片、话语和小事，有了一个可以慢慢留下来的地方。

最后，送上祝福：母亲节快乐^ ^。祝每一位正在照顾家庭、记录家庭的人，节日快乐。如果你为人母，请收下小七的祝福：你辛苦了，母亲节快乐 💐；如果你为人父，也别忘了认真和孩子的妈妈说一声：母亲节快乐 🌱。

这个家庭记忆册目前功能尚不完美，如果你有兴趣的话，可以加入七牛 vibe coding 群，我们继续优化这个项目(⁎⁍̴̛ᴗ⁍̴̛⁎)

ITPub博客

不写框架、不用 npm，我用 AI Coding 做了一个家庭记忆站

初始化

站点样式设计

生成站点

浏览下效果

优化图片显示逻辑

页面更新逻辑

最新文章