diff --git a/.pages.yml b/.pages.yml new file mode 100644 index 0000000..e1f8ee8 --- /dev/null +++ b/.pages.yml @@ -0,0 +1,153 @@ +# =========================================== +# PagesCMS 配置文件 - Hugo 博客 +# =========================================== + +# 媒体文件配置 +media: + input: static/images/ # 上传文件存储路径（相对于项目根目录） + output: /images # 网站发布后的公共访问路径 + #extensions: [jpg, jpeg, png, gif, svg, webp] # 可显示的文件扩展名的文件 + #categories: [jpg, jpeg, png, gif, svg, webp] # 允许特定类型的文件 + +# 内容配置 +content: + # =========================================== + # 博客文章集合 + # =========================================== + - name: blog + label: 博客文章 + type: collection + path: content/cn/blog + # filename: '{fields.title}.md' + subfolders: true + #exclude: [ _index.md ] # 忽略文件 + format: yaml-frontmatter + view: + fields: [ title, date, categories, tags ] + primary: title + sort: [ date, title ] + default: + #search: '' + sort: date + order: desc + layout: tree # `list`平铺或`tree`树状列表 + node: + filename: _index.md + hideDirs: nodes + fields: + # 基础字段 + - name: title + label: 标题 + type: string + required: true + description: 文章标题，建议简洁明了 + options: + minlength: 2 + maxlength: 100 + + - name: slug + label: URL 别名 + type: string + required: false + # pattern: { message: '只能包含小写字母、数字和连字符', regex: '^[a-z0-9]+(?:-[a-z0-9]+)*$' } + description: 用于生成 URL 的别名，留空则自动生成 + + # 描述和摘要 + - name: description + label: 文章描述 + type: text + required: false + description: 用于 SEO 的页面描述，建议 120-160 字符 + + - name: summary + label: 文章摘要 + type: text + required: false + description: 显示在文章列表的预览摘要 + + # 时间字段 + - name: date + label: 发布日期 + type: date + required: true + description: 文章发布日期 + options: + format: yyyy-MM-dd HH:mm:ss + time: true + step: true + + - name: lastmod + label: 最后修改时间 + type: date + required: false + description: 留空则自动使用文件修改时间 + options: + format: yyyy-MM-dd HH:mm:ss + time: true + step: true + + # 状态字段 + - name: draft + label: 草稿状态 + type: boolean + default: false + description: 勾选后文章为草稿状态，不会在网站显示 + + # 分类和标签 + - name: categories + label: 分类 + type: string + list: true + required: false + description: 文章分类，可以添加多个 + + - name: tags + label: 标签 + type: string + list: true + required: false + description: 文章标签，用于细分主题 + + # 缩略图 + - name: thumbnail + label: 文章缩略图 + type: image + required: false + description: 文章封面图片 + + # 正文内容 + - name: body + label: 正文内容 + type: rich-text + required: true + description: 文章主要内容，支持 Markdown 语法的富文本编辑器 + + # =========================================== + # 关于页面 + # =========================================== + - name: about + label: 关于页面 + type: file + path: content/cn/about.md + format: yaml-frontmatter + fields: + - name: body + label: 页面内容 + type: rich-text + required: true + description: 关于页面的主要内容 + # =========================================== + # 友链页面 + # =========================================== + - name: contact + label: 联系我们 + type: file + path: content/cn/contact.md + format: yaml-frontmatter + fields: + - name: body + label: 页面内容 + type: rich-text + required: true + description: 友链页面内容 + diff --git a/content/cn/blog/2025-10-09-19ai-coding.md b/content/cn/blog/2025-10-09-19ai-coding.md new file mode 100644 index 0000000..772d42a --- /dev/null +++ b/content/cn/blog/2025-10-09-19ai-coding.md @@ -0,0 +1,116 @@ +--- +title: 19天上线网站，插件，桌面应用全家桶，一份非主流AI Coding实战报告 +slug: k7m3p9zax8v6c1n2b4q5 +description: 19天用AI当“结对编程”队友，我是如何从0到1开发出PromptHub项目的？这份硬核实战报告，分享了从架构选型、独创的“原子任务”开发法，到AI也无能为力的数据库与调试踩坑瞬间。探索真实的人机协同开发新模式，看开发者如何从“写代码”转向“做决策”。 +summary: 本文是作者19天内使用AI作为“结对编程”伙伴，从零开发出PromptHub项目的硬核复盘。报告摒弃了“一句话开发”的幻想，提出将AI当“高级脚手架”进行架构选型以消除启动摩擦力，并采用“原子任务”开发法，将AI拆分为不同领域专家并行推进。同时，文章也坦诚记录了在数据库选型、复杂Bug调试、Chrome插件开发中AI的局限性，强调了开发者在决策与底层原理上的核心价值，最终总结出人机协同的未来是开发者转向系统设计与决策。 +date: 2025-10-08 06:06:00 +draft: false +tags: + - AI Coding +thumbnail: /images/640.png +--- + +# 19天上线网站，插件，桌面应用全家桶，一份非主流AI Coding实战报告 + +还记得我之前发起的**AI Coding邀请**吗？这些天过去，项目上线了，脑子也清醒了。今天不扯情怀，不聊心路历程，咱们开诚布公，就硬核地聊聊这19天里，我用AI当“结对编程”的“队友”，是怎么把 **PromptHub** 这个项目从一个想法，变成一堆能跑的代码的。 + +这份报告，可能跟你想的**“Vibe Coding”**不太一样。这里没有魔法，全是工程、取舍，还有一堆踩坑之后才搞明白的“原来如此”。 + +## **架构选型：AI当“脚手架”，我当“决策者”** + +一开始，我就给 **PromptHub** 定了个挺变态的目标：Web、Chrome插件、Electron桌面端，三端同步开发。后端用Next.js的API Route，数据库从SQLite起步，随时准备切生产环境。 + +这套技术栈，换以前，光是把`package.json`配平、各个环境的`tsconfig.json`搞定，就够我喝一壶的。 + +我的做法是，把AI当成一个**超高级的脚手架生成器**。我不是问它“我该用什么技术”，而是直接下命令： + +`“我要一个Next.js项目，用TypeScript。集成Drizzle ORM，数据库用SQLite。给我加上JWT认证，实现Google和GitHub的OAuth登录。再把Stripe的计费框架搭起来，给我留好接口。”` + +9月17号，AI花了大概一个下午，基于简易的多语言模板项目，给我吐出了一个基本可用的后端框架。这不是简单的代码片段，这是**架构的实例化**。它把那些最繁琐、最重复的“胶水代码”给干完了，让我能直接开始写核心业务。 + +**第一个感悟：在项目启动阶段，AI最大的价值是消除“启动摩擦力”。** + +![](/images/111.webp) + +## **开发方法论：告别“Vibe Coding”，拥抱“原子任务”** + +网上那种“Vibe Coding”（一句话开发）的视频，看看就行了，谁信谁天真。企业级的项目开发，靠的是严谨的工程学。我摸索出的模式，我称之为**“原子任务”或者说“搭积木”**。 + +开发一个功能，我会把流程拆解到极致，然后开好几个AI对话窗口，并行推进： + +* • **窗口A（数据库专家）**：“根据我的需求，设计`prompts`表结构，用Drizzle ORM的语法写出来。” + +* • **窗口B（后端专家）**：“这是表结构，给我写出对应的增删改查API，用Next.js的API Route实现，做好权限校验。” + +* • **窗口C（前端专家）**：“这是API接口，用React和Tailwind给我写一个能调用这些接口的管理页面组件。” + + +这种模式的好处是： + +1. 1. **上下文隔离**：每个窗口的AI都只专注于一件事，不会因为上下文过长而“精神错乱”。 + +2. 2. **职责单一**：代码解耦做得特别好，AI很少会写出前后端混杂的意大利面条代码。 + +3. 3. **并行效率**：我在等后端API写好的时候，已经可以开始构思前端组件了。 + + +**第二个感悟：别把AI当成一个无所不能的大神，把它当成一个由多个“领域专家”组成的小团队。** + +![](/images/222.webp) + +## **硬核踩坑：那些AI也救不了我的瞬间** + +AI Coding不是银弹。在某些领域，特别是底层和配置相关的，它犯的错比我还离谱。 + +### **1\. 数据库选型：Turso vs Supabase** + +我一开始为了尝鲜，用了分布式的 **Turso** 数据库。听起来很酷，对吧？结果数据同步延迟高到离谱，用户创建一个提示词，刷新好几次都出不来。我尝试加了`consistency=strong`参数，屁用没有。 + +最后果断弃坑，换回了基于PostgreSQL的 **Supabase**。这个决策，AI给不了你。你必须懂数据库的**一致性模型**，才能明白Turso的异步特性跟我的业务场景是根本冲突的。 + +![](/images/333.webp) + +### **2\. Next.js的**`useEffect`**死循环** + +这是个经典问题。在管理页面，接口被无限循环调用。我把代码丢给Qwen3，它给我改了半天，还是没解决。 + +最后还是得靠自己。我分析了`useEffect`的依赖项，发现里面混入了太多动态的状态，导致了连锁反应。我手动重构了它，只保留了最核心的`user?.personalSpaceId`作为依赖。问题解决。 + +然后，我把**正确的解决方案**喂给AI，告诉它：“以后遇到类似问题，要这样改。” 这其实是在**反向训练AI**，让它学习我的最佳实践。 + +![](/images/444.webp) + +### **3\. Chrome插件的权限黑洞** + +插件开发，AI基本就是个小白。`content.js`死活不加载、`localStorage`数据不通……这些问题，AI给的答案全是错的。 + +最后还是老老实实去翻Chrome开发者文档，搞明白了`host_permissions`和`scripting`权限的区别，才把问题解决。 + +**第三个感悟：AI擅长“实现”，但不擅长“决策”和“调试”。特别是在涉及底层原理、平台特性和性能瓶颈的地方，最终拍板和debug的还得是你自己。** + +## **我的模型“工具箱”** + +我从不迷信任何一个模型。我的策略是动态切换，把合适的工具用在合适的地方。 + +* • **架构设计 & 复杂Bug修复**：首选 **Gemini 2.5 Flash**。免费，而且在解决像Next.js水合错误这种疑难杂症时有奇效。 + +* • **UI/UX代码实现**：**Claude 4.1** 是不二之选。它的CSS审美和代码实现能力是最好的，但也是最贵的，我只在关键页面用它。 + +* • **日常CRUD和组件开发**：**Qwen3 Coder Plus** 性价比最高，干体力活儿任劳任怨。 + +* • **数据处理和脚本生成**：在逆向Google AI Studio的API，做数据迁移时，我用了 **Kilo** 配合Gemini，让它分析JSON结构，自动生成Python脚本，效率极高。 + + +![](/images/555.webp) + +* * * + +总而言之，这19天的开发，与其说是“AI编程”，不如说是一场“**人机协同的极限编程**”。AI是那个敲代码飞快的实习生，而我，是那个需要时刻把控方向、做出关键决策、并在他搞砸时能出手救场的架构师。 + +这种模式下，开发者的核心价值，从“写代码”，转向了**“提问题”、“做决策”和“系统设计”**。 + +这可能，就是我们开发者未来的样子吧。 + +**这是网站链接，有兴趣的可以去试试:** [**https://prompt.hubtoday.app/**](https://prompt.hubtoday.app/) + +也可加我微信进群交流：justlikemaki \ No newline at end of file diff --git a/content/cn/blog/_index.md b/content/cn/blog/_index.md new file mode 100644 index 0000000..98b6890 --- /dev/null +++ b/content/cn/blog/_index.md @@ -0,0 +1,17 @@ +--- +title: 我的博客 +type: blog +cascade: + type: blog +sidebar: + exclude: true +--- + +## 何夕2077的小分享 + +
+{{< hextra/hero-badge link="index.xml" >}} + RSS 订阅 + {{< icon name="rss" attributes="height=14" >}} +{{< /hextra/hero-badge >}} +
\ No newline at end of file diff --git a/hugo.yaml b/hugo.yaml index 088e965..52c036f 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -12,10 +12,10 @@ services: googleAnalytics: ID: "G-SECWWMY8WQ" -# outputs: -# home: [HTML, RSS] -# page: [HTML, RSS] -# section: [HTML, RSS] +outputs: + home: [html] + page: [html] + section: [html, rss] # import hextra as module module: @@ -43,18 +43,21 @@ menu: name: AI日报 pageRef: / weight: 1 + - identifier: blog + name: 博客 + pageRef: /blog + weight: 2 - identifier: about name: 关于我 ↗ url: "https://github.com/justlovemaki" - weight: 2 + weight: 3 - identifier: github name: 同性交友 - weight: 3 + weight: 4 url: "https://github.com/justlovemaki/CloudFlare-AI-Insight-Daily" params: icon: github - params: adsenseId: "ca-pub-8136412975724403" umamiKey: "2b24e36d-6e56-499b-8b7e-aea4d308caff" diff --git a/i18n/en.yaml b/i18n/en.yaml index a4fa381..e765f26 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -3,4 +3,5 @@ search: Search documentation: AI Daily about: About↗ github: GitHub -x: Twitter \ No newline at end of file +x: Twitter +blog: Blog \ No newline at end of file diff --git a/i18n/ja.yaml b/i18n/ja.yaml index 296762d..f91fe3c 100644 --- a/i18n/ja.yaml +++ b/i18n/ja.yaml @@ -3,4 +3,5 @@ search: 検索 documentation: エーアイデイリー about: について↗ github: ギットハブ -x: ツイッター \ No newline at end of file +x: ツイッター +blog: ブログ \ No newline at end of file diff --git a/i18n/zh-cn.yaml b/i18n/zh-cn.yaml index 3b1001e..67a03f4 100644 --- a/i18n/zh-cn.yaml +++ b/i18n/zh-cn.yaml @@ -3,4 +3,5 @@ search: 搜索 documentation: AI日报 about: 关于我 ↗ github: 同性交友 -x: 推特 \ No newline at end of file +x: 推特 +blog: 博客 \ No newline at end of file diff --git a/static/images/111.webp b/static/images/111.webp new file mode 100644 index 0000000..eb78ba4 Binary files /dev/null and b/static/images/111.webp differ diff --git a/static/images/222.webp b/static/images/222.webp new file mode 100644 index 0000000..688ad07 Binary files /dev/null and b/static/images/222.webp differ diff --git a/static/images/333.webp b/static/images/333.webp new file mode 100644 index 0000000..ec3e1c0 Binary files /dev/null and b/static/images/333.webp differ diff --git a/static/images/444.webp b/static/images/444.webp new file mode 100644 index 0000000..62a5e42 Binary files /dev/null and b/static/images/444.webp differ diff --git a/static/images/555.webp b/static/images/555.webp new file mode 100644 index 0000000..5eb0d3c Binary files /dev/null and b/static/images/555.webp differ diff --git a/static/images/640.png b/static/images/640.png new file mode 100644 index 0000000..e60cd27 Binary files /dev/null and b/static/images/640.png differ