AI 时代想法比技术更重要,我是如何使用AI搭建＂科技早报＂这个产品的
作者：微信文章你好，我是小四。
在上一篇文章中，我给大家介绍了我做的这个"科技早报"产品：把Hacker News和Product Hunt的每日榜单做成了5分钟中文播客。
链接如下：我把Hacker News和 Product Hunt的每日榜单，做成了5分钟中文播客 (免费，内含产品具体教学）
不少朋友都很好奇，我是怎么做出来的。
今天，我就把整个制作过程尽量写的大家都能看懂。
先说结论：在整个开发过程中，我几乎没有手写过代码。 所有的功能实现，都是通过与AI对话完成的。
并且为了验证AI 辅助编程工具哪个更好，我使用了google 的 gemini aistudio，cursor 编辑器，字节的 Trae 海外版编辑器。
为了让没看过上一篇的用户，也能了解到我做的是什么什么产品，并能更好的理解下面的内容，我把产品地址贴一下：
产品访问地址：https://book.xuezhu.wang/ai-news/
在 AI 的加持下，从 0 到 1 开发一个项目
首先声明一下：我自己是专业的程序员，但是为了验证是否可以不用手动编写代码就能从 0 完成一个项目，我几乎没有手写。
为了让技术同学了解整个项目的架构，我这里简单说一下，非技术同学可忽略：
前端开发：React + TypeScript + Vite后端数据处理：Node.js脚本AI服务集成：Google Gemini API语音合成：MiniMax TTS数据获取：Hacker News API + Product Hunt GraphQL部署上线：腾讯云
整个比较复杂，下面我只说一下前端是如何用 ai 做的，整个项目没有后端，部署到一个服务器即可。
一下 5 个部分是我觉得最值得记录的和最核心的功能。
第一部分：选择的是 Gemini 的 studio生成项目框架
选择 Gemini studio 的原因，主要是因为可以直接预览结果，不用本地跑。给大家看一下他的界面
（对话区、代码区、预览区，很清晰的界面）
因为历史记录没了，所以我只能尽量基于我的记忆来模拟曾经和 AI 的对话：
我的第一个对话：
我想做一个网站，能自动获取Hacker News和Product Hunt的每日热门内容，针对每一条用AI翻译总结成中文，然后把当日所有的新闻或者产品生成播客。
AI 立马给我从 0 创建了整个项目，
项目结构：
├── 数据获取脚本 (Node.js)
├── AI处理服务 (内容总结 + 语音合成)
├── 前端展示 (React)
...
当然这个我很不满意，因为他搞得有点过了，前端后端都有，但是我其实不想要后端，作为程序员，我知道这个项目，有个定时脚本，跑完的数据存到json 中，前端直接获取 json 展示就行，没必要搞后端，所以有了如下的对话：
我的第二个对话：
我不想要后端服务，搞个定时脚本，把每天的摘要内容全部跑出来之后存到 json 文件中，前端直接获取就行
项目结构：
├── components (前端组件)
├── script（定时脚本和摘要任务）
├── data (准备好的json 存储)
...
然后整个项目进行了一次完整的重构，是我想要的样子。
到此，我先说一下我的感受
gemini studio 如果作为一个验证性的项目，或者目标用户具备翻墙的能力，这个工具很方便，可以直接部署到 google cloud。对意思的理解、写代码的质量都很好，非常好如果懂点技术使用 AI 编程会更好，能评估出来项目架构/技术方案如何，并且能指导 AI 优化。当然如果不懂，基于手上的资源，比如没有 server 端，也能直接告诉 AI,我相信他也能满足要求的进行重构和优化
第二部分：数据获取 - 让AI写爬虫
这部分到最后，都是本地使用 cursor 和 Trae 编辑器利用 AI 编写的了（用的 claude-4），主要是为了对比下 Gemini 的效果。
如果让我自己写代码，最复杂的应该就是这块了，不是有多难，是得先知道。（Hacker News有API，但Product Hunt需要处理GraphQL查询，这些都是 AI 很容易的，我得查很多资料）
我的问题：
"帮我写一个脚本，获取Hacker News和Product Hunt的前10条热门内容，包括标题、链接、评论数和正文内容。"
AI直接给出了完整的代码：
// 获取Hacker News热门故事
asyncfunction fetchCurrentTopStoriesFirebase() {
try {
const response = await fetch(HN_TOP_STORIES_URL_FIREBASE);
const topStoryIds = await response.json();
const topStories = awaitPromise.all(
topStoryIds.slice(0, TOP_STORIES_TO_PROCESS).map(async (id) => {
const storyResponse = await fetch(HN_ITEM_URL_FIREBASE(id));
returnawait storyResponse.json();
})
);
return topStories.filter(story => story && story.title);
} catch (error) {
console.error('获取Hacker News数据失败:', error);
return [];
}
}
结果很完美，我自己都不知道应该去调用什么API，AI 都知道，并且http request、GraphQL都非常对。
这个环节后续有个问题值得记录一下，问题是 Hacker News 的GraphQL调试和文档都无法访问了，所以有些字段有问题，但是我又不想自己去检查。
我做了如下操作解决：
找到Hacker news 的GraphQL github 项目，然后把 yaml 保存到本地的一个txt 文件中告诉 AI 参考这个，给我检查和修正返回字段
这就很好的解决了，AI 会读取这个文件做理解，其实这也是目前开源的技术提供给 AI 学习的一种变形形式，比如 claude 就提供了一个专门的 llm.txt 文件给 AI 看，辅助程序员编写 MCP 代码。现在 vite也使用了这种方式。
第三部分：AI相关代码处理 - 翻译和总结
接下来是核心功能：用AI把英文内容翻译总结成中文。
我的需求：
"我需要把这些英文文章总结成150-200字的中文摘要，适合播客阅读。"
AI帮我设计了详细的提示词：
const systemInstruction = `
你是 Hacker News 播客的编辑助理，擅长将文章整理成简洁、易于阅读的摘要。
摘要要求：
1. 核心内容（2-3句）：准确概括文章的中心论点
2. 关键要点：如果包含重要数据、结论或建议，请明确指出
3. 篇幅控制：总长度控制在150-200字
4. 语言：使用简体中文
写作原则：
- 使用简洁、专业的语言，避免冗余
- 保持客观中立的语气
- 优先提炼对读者最有实用价值的信息
`;
更厉害的是，在我要求 AI 去获取新闻和产品的摘要时，要先去真实的网站上获取内容，这样摘要和总结的更全面。基于我的认知，我自己做肯定是获取对应的官网 HTML，然后用正则去删除所有的 html 标签，获取真实的 AI 可看的内容，但是 AI 不是这么干的，AI直接使用的Jina Reader API：
// 智能内容获取
const fullUrl = story.url.startsWith('http')
? `https://r.jina.ai/${story.url}`
: story.url;
这个也给了我不少的惊喜，他比我的思路开阔，了解的东西更多，方案就可以超出我的预期，给更合适的。
第四部分：播客生成 - 从文本到语音
这是最有意思的部分。我想要生成自然的对话式播客，而不是机械的朗读。
我的想法：
"我希望生成的播客是两个人对话的形式，一个引导者，一个分析者，让内容更生动。"
AI不仅理解了我的需求，还帮我设计了对话框架：
const podcastSystemPrompt = `
你是一个专业的播客制作人，需要将科技新闻制作成生动的对话形式播客。
角色设定：
- 引导者：负责开场、串联、总结，语言亲切自然
- 分析者：负责深度解读、提供见解，专业但易懂
对话要求：
1. 开场要吸引听众注意力
2. 每个话题都要有互动交流
3. 适当加入个人观点和行业洞察
4. 总时长控制在5-8分钟
5. 语言要口语化，避免书面语
`;
AI生成的播客稿非常自然：
引导者：今天我们来聊聊一个很有趣的项目...
分析者：这确实很有意思，我觉得这个趋势代表了...
引导者：你这么一说，我想到了另一个角度...
然后用MiniMax的语音合成API，把文本转换成两个不同声音的音频，最后用FFmpeg合并。
这些都是 AI 做的，我只是把 MiniMax 网站的API 文档复制发给 AI。
音频其实也有不小的工作量：
要把内容全部解析出引导者和分析者每一个角色每句话都要单独生成音频然后再把所有的音频有序的合并
不过这些AI 都是可以搞定的，自己写代码的话估计要废不少功夫
第五步：前端页面优化和新增功能
前端部分我完全交给了AI。我只需要描述我想要的界面：
我的描述：
"我想要一个干净简洁的页面，左侧有信息来源 tab，可切换。顶部有每日播客播放器，样式要好看，下面是卡片式的文章列表。"
AI帮我用React + TypeScript实现了完整的前端：
const AppHackerNews: React.FC = () => {
const = useState<SummarizedArticle[]>([]);
const = useState(false);
const = useState('');
// AI生成的完整状态管理逻辑
// 包括音频播放控制、数据获取、错误处理等
};
连CSS样式都是AI写的，使用了Tailwind CSS，界面美观现代。
当然这块花了我不少的时间去对话让 AI 优化 UI，以及添加我觉得有用的前端功能，比如海报下载/复制发送到微信等等。
站在一个程序员的角度看 AI 编程（只是我个人的看法，不具有代表性）
先说好的地方
搭建前端项目非常快，也都是目前的最佳实践（vite+react/vue）有很多超出预期的地方，比如用Jina去获取 html 到 markdown 的转化，Hacker news 和 product hunt 的 API 爬虫。只要表达的够清晰，AI 的理解完全没问题前端功能和 UI 的修改非常全面，且高质量对一个新项目而言，至少能提升 50% 的开发效率gemini 2.5 pro 和 claude 4 没有给我非常明显的差别，也许是因为我这个项目比较简单
再说下不好的地方
太容易让人有依赖感了，发展到最后，改几个文案的问题我都懒得自己动手了。🤣未来规划：持续进化
现在这个项目已经稳定运行，每天为我提供高质量的科技资讯，我没有推广渠道，至少我个人每日都听，每天都能发掘到自己感兴趣的产品或者黑客话题。
接下来我计划：
增加更多高质量信息源（Reddit、YouTube、播客等）每天用播客的形式，解读一本高分书籍收集和分类每日新闻（社会/军事/民生等）增加个性化设置
这些功能，我同样会通过与AI协作来实现，不一定能全部实现，先列下目标。
AI时代的新可能
这个项目让我深深感受到，AI已经把编程的门槛降到了前所未有的低度。
你不需要：
精通各种编程语言了解复杂的技术架构有多年的开发经验
你只需要：
清晰的产品思路善于与AI沟通持续学习和迭代的心态
在AI时代，AI 编程从写代码到部署都会越来越成熟， 想法比技术更重要。
每个有想法的人，都有机会把创意变成现实。
产品访问地址：https://book.xuezhu.wang/ai-news/
如果你也在尝试AI编程，或者对我的这个项目有问题，欢迎一起交流
页:
[1]