技术选型
在博客前台的开发上，我计划从设计到开发也全部交由 AI 完成，采用先设计、后开发的方案，而不是上来就直接写代码——设计过程往往会多次修改甚至重构。设计环节选用了 Open Design，这是一款专注于设计的 AI 软件，开发环节依旧使用 Codex + GPT-5.5。前台开发框架则选择 Nuxt v4，以便更好地支持服务端渲染和 SEO 等需求。
博客设计
页面框架
如果没有特别的风格想法，这里可以直接让AI自己发挥，先设计出一个博客网站的基本页面框架。
页面布局
有框架后，就可以针对每个页面的布局进行设计，但注意的是这里设计的过程不用太注意样式、交互的细节，只设计布局就可以。
示例：
导航栏仅显示首页、所有文章、技术、旅行、杂记，其中文章、旅行、杂记页面中的头部各自定义不同特色的内容，头部内容不要局限于模板，技术的可以显示出代码科技效果，并显眼的地方显示可进入工具页面的入口；旅行的可以显示自然风景，怡然自得的效果，也可以选择把部分照片显示出来，有显示可查看更多照片的入口；杂记的内显示轻松随意的效果，可滚动显示简言，有可进入查看更多简言的入口。
首页头部示例图片显示在左侧，右侧显示四个主入口，图片可使用网络流行图片库代替。
首页下方添加新内容，参考如图内容，显示最新两篇旅行文章，图片可现从流行图片网站上查找代替。
旅行文章页面头部内容重构，左侧显示自然风景图片，右侧显示图片列，有交互，且有进入照片墙的入口。
优化技术、旅行、杂记内的文章展示，标题、副标题修改为标签筛选，去除文章列表下方的内容，文章下方不需要显示额外内容。显示所有分类可看的文章卡片，数量多时需要有分页功能。
…
重构整体风格样式
经过多轮修改确认好基本的页面布局后，这时我们可以选择再让AI保留布局的情况下，直接重构整个项目的样式风格。
重构当前博客，限制保持当前博客的文本内容的布局不变，不可移除当前已有的文本内容，仅对页面的非文本内容进行的重构，调整颜色、边距、边框等样式内容，统一博客的整体风格。
细节调整
之后，再进行细节调整，直到满意为至。
对当前博客的文本以及图片进行优化，根据文本位置分析替换博客应有的文本内容，让文本内容即符合当前真实博客的内容，可以有一定的哲学性，如“活在当下，志在远方”，“技术”修改为“当下”，“旅行”修改"远方"，“杂记”修改为“纸箱”，标题内容带有一点抽象，而不是当前的如“优先放可复用的工程判断、AI 工作流和阅读系统，不堆标题”这类文本。
首页旅行模块不用带有标题、副标题内容，页面底部的简言内容简化，尽可能与页面融为一体，文本前也不需要有多余元素。
photos页面中的显示的照片中移除图片中的所有文字。
…
至此，博客的设计也就基本完成，后续部分细节调整也可以开发阶段进行修改。
初始化项目
这里直接运行nuxt的cli命令来初始化：
npx nuxi@latest init blogger-web
初始化后，将从open design中设计好的原型进行下载，放入项目的temp文件夹中。
生成静态页面
在生成提示词时，有几个关键要点需要注意：要让 AI 在生成过程中做好组件与样式的拆分，这样后续才能方便地针对某些组件的功能进行修改和优化。虽然页面拆分可能会导致部分内容样式出错甚至崩坏，但整体完成度仍能达到 80%。剩下有问题的代码，只需人工稍作处理，或者继续交给 AI 进一步优化即可。
请参考“temp/目录下的原生HTML 文件，将其中的设计系统与页面样式完整还原到当前 Nuxt项目中，要求从最app.vue开始后的每个页面，尽可能做到视觉、布局、间距、颜色、字体、交互状态一致。
具体要求：
1. 先分析“temp/中的 HTML/CSS/JS内容结构，提取可复用的设计系统，包括：
- 颜色、字体、间距、圆角、阴影、动效等设计变量，不可直接复制文件、CSS样式，必须重新按照内容功能进行定义
- Button、Card、Input、 Navigation、Layout 等通用组件
- 页面级布局与响应式规则，根据设计系统给出一套合理的布局代码
- js通用函数方法，如模拟代码输入显示文本
- 将CSS样式提取尽可能提取到组件内维护，公共可复用的CSS样式再抽离到公共样式
2. 在项目中建立清晰的前端架构：
- 尽可能抽象可复用组件、函数
- 避免在页面中重复堆叠样式
3.编写 AGENTS.md’文件，用于说明：
- 项目整体介绍
- 前端目录结构
- 设计系统架构
- 组件复用规范
- 后续开发注意事项
4. 在‘AGENTS.md中明确开发规范：
- 项目整体介绍
- 设计系统架构
- 组件复用规范
- 只有在现有组件无法满足需求时，才新增组件
- 前端目录结构
- 后续开发注意事项
- 变量、函数都需要注释
- 开发页面时，必须优先复用已有组件
- 如果已有组件可以通过 props、slot、emit 等方式扩展，应优先扩展，而不是重新创建相似组件
5.新增一个"设计系统预览"页面：
- 仅用于开发环境查看
- 用于验证组件复用效果和样式还原质量
- 采用纯前端渲染
- 展示颜色、字体、按钮、卡片、表单、布局等核心组件
最终目标：
1.将"temp/中的前端完整在当前Nuxt中还原
2. 将temp/中的前端迁移为 Nuxt 项目中的可维护、可复用、可扩展的前端组件体系
像这里已经崩坏的，就让ai再重新读取原设计页面内容，重新生成这一部分的代码即可。
根据@temp的内容重构当前的TechHero.vue组件内容，让其功能样式与temp设计一致。
接入后端接口
此时博客内容还是静态的，要成为动态的网站就要从后端接入接口进行内容显示，这里我们回到后端服务项目中，开始生成博客所需的接口API。
/ecc:plan 根据当前的数据库表开发个人博客网站所需的接口，无权限，无登录也可调用，接口仅读。
接口生成后，同时生成API文档，回到博客项目中
根据当前的api文档以及已经配置好的代理地址接入数据：
- 需要适当对接口进行集中管理
- 注意数据的时间格式转化
- ”当下“文章的分类slug是”knowledge“，”远方“文章的分类slug是”travel”，“纸箱”文章的分类slug是"other"
- 首页需要动态数据的有：当下最近模块中的文章列表（通过获取当下分类中的前3条数据进行显示）；链接内的链接卡片（通过链接接口获取的前3条显示）；远方故事模块中的两张卡片（通过获取远方分类中的前2条数据进行显示）；页面底部短句（通过note接口获取的笔记内容进行显示）；其余都是静态内容
- 当下文章页面的头部侧栏的的轮播切换数据来源为链接接口获取的前几条数据进行循环切换；当下文章的标签筛选栏是标签接口获取当下分类的所有标签；文章列表为对应选择标签的当下分类文章列表接口；其余都是静态内容
- 远方文章页面的头部图片是照片接口按照权重排序获取的前3张照片，用于切换显示；远方文章的标签筛选栏是标签接口获取远方分类的所有标签；文章列表为对应选择标签的远方分类文章列表接口；其余都是静态内容
- 纸箱文章页面的头部弹幕文本是笔记接口按照权重排序获取的数据进行循环弹出显示；纸箱文章的标签筛选栏是标签接口获取纸箱分类的所有标签；文章列表为对应选择标签的纸箱分类文章列表接口；其余都是静态内容
- 全部文章页面则根据文章列表接口接入进行筛选查找；文章可选标签根据文章分类id进行动态显示，每次切换文章分类时，标签重置
- 文章详情页的显示内容则是根据文章详情接口获取显示，其中文章内容使用markdown进行显示；文章详情中的同类回声是根据当前文章详情的标签id查找调用文章列表查询同标签的文章进行显示
- 照片墙、桌边纸箱、纸箱短句页面都是根据照片接口、链接接口、笔记接口进行查询显示
再做一些优化，便完成了博客项目的搭建。
修改照片墙的布局：
- 不修改照片的内容样式，仅修改为如图的布局
- 优化后移除当前的不必要的photo.shape逻辑
- 图片需要增加触底查询更多图片，控制每次仅查询20张
优化配置，实现开发环境与生产环境的配置分离。具体要求：
1. 在nuxt.config.ts 中配置环境变量读取逻辑，根据环境标识动态加载对应配置
2. 在 package.json 的 scripts 命令中通过环境变量参数区分环境
3. 创建 .env.dev 和 .env.prod 文件存放环境特定变量
4. 确保运行时配置能正确读取对应环境的变量值，敏感信息通过环境变量注入而非硬编码