OpenCode + Astro：用 AI 加速前端开发

背景

我需要一个技术博客。传统方式是：调研框架 → 搭架子 → 写样式 → 加功能 → 部署。用 OpenCode 代理后：

实际流程

1. 项目创建（2 分钟）

> 创建一个 Astro 6 项目，用 Vite 插件接入 Tailwind v4，
  主题参考 IndieHackers 深色风格

AI 自动执行：创建目录 → 写 package.json → 写 astro.config.mjs → 安装依赖。

2. 页面构建（10 分钟）

> 创建首页，包含 Hero 区、文章网格、分类筛选。
  文章列表从 Content Collections 读取，卡片 hover 效果用 Tailwind。

AI 自动生成完整的 .astro 页面，包括数据查询和响应式布局。

3. 搜索功能（5 分钟）

> 添加搜索页，输入框防抖 300ms，
  调用 /api/posts/search API，
  结果用卡片列表展示。

AI 写了前端搜索 UI + 后端 Hono API 路由。

4. 主题切换（3 分钟）

> 把全站从亮色主题改成 IndieHackers 深色风，
  蓝色强调 #3B82F6，背景 #0F0F1A。

AI 一次性更新了所有 12 个文件——CSS 变量、Header、Footer、每个页面的 Tailwind class。

5. 部署（2 分钟）

> 部署到 Cloudflare Pages，项目名 fisherhub-blog

AI 执行 build → wrangler deploy → 返回 URL。

关键技巧

1. 先描述整体，再细化局部：不要一开始就纠结细节
2. 给具体的设计参考：URL 比描述管用
3. 利用迭代修正：不满意就说「改颜色」「调间距」
4. 一次性给全部要求：比多次小改动高效

总结

一个下午，从零到部署。我做的只是描述需求、审核结果、调整细节。代码不是我写的——但产品是我的。

这就是 AI 辅助开发的意义：你不需要写每一行代码，但你需要知道每一行代码在做什么。