国庆用 Gemini 写了一个工具网站，体验挺不错

工具链接： https://oconvertor.com/zh

背景

在运营 O.Translator 的过程中，遇到一些需求： 1 、针对 PDF 文档，经常会有字体的问题，比如字体乱码、字体覆盖等，这时需要提取并预览排查 PDF 中的字体； 2 、在音频翻译流程中，需要给用户提供从本地视频中提取音频的工具，主打快捷； 3 、用户要求只翻译 PDF 的某些页，虽然在翻译流程中已经支持了相关配置，但是发现用的人也不多，干脆做个 PDF 拆分合并的工具算了； 4 、...
这些需求，大部分是我们自己研发需要，有些也是用户需要，正好国庆这几天有时间，从里面选择几个浏览器本地能做的，尝试让 AI 来做。 于是就有了 O.Convertor 这个网站，整个过程体验感还是不错，下面是大体的流程。

流程步骤

1 、先用 Gemini Web 生成单页面工具

先在 Gemini Web 上生成 index.html ，好处是可以直接在 canvas 预览 UI ；

在这一步的经验是： 在 Prompt 中，要清晰地告诉 Gemini “要做什么”，而不是“要怎么做”。 你可以让 Gemini 生成一个包含所有代码的 index.html ，也可以要求它拆分成 index.html 、script.js 、style.css 三个独立文件，它都能很好地处理。 我选择生成 index.html 、script.js 、style.css 3 个文件，方便后面处理； 然后，不管是生成单个 index.html 还是“3 剑客”，直接下载到本地，浏览器打开 index.html 调试功能 用 Gemini 生成 HTML ，也是为了方便调试； 这一步，UI 可能需要慢慢调试，符合你的审美（ Gemini 的审美还是在线的），交互逻辑的完成度还是很高；

2 、转换成 react 组件

对于静态网站，第一步生成的单页面工具就能直接放到服务器使用了，但我希望这些工具页面都有共同的导航 Header 和 Footer ，Header 和 Footer 是项目中的 React 组件，所以我继续将这些 HTML 转成 React 组件。 最开始，我是将 UI 和 js 逻辑都进行转换，但是这样效率不高：

1. 会有各种 ts 报错；
2. 修改原始 js ，重新生成组件之后，大概率会带来新的未知问题；

所以，就有之前提到的，将单 index.html 分解成 index.html 、script.js 和 style.css 3 个文件，只将 index.html 进行转换，通过 Script 引入 script.js ，能避免很多问题；

大量的交互操作是在 script.js 中通过纯 js 做的，所以只要调试好 script.js ，即使后续要修改工具能力，重新生成 index.html 对应的组件，成本要小很多；

第二步，是使用 Gemini-cli 在项目本地完成的；

并不是必须要转成 React 组件，像 i18n ，可以直接用 O.Translator 翻译整个 HTML 和 js 文件；像 SEO ，也可以直接写在 index.html 中；我只是想在每个工具页面统一 Header 和 Footer 而已，并且这两个组件会不断的修改；

整体就是以上这两步，但在转换成 React 组件的时候会有其他细节需要处理： 1 、用 lingui 做 i18n ； 2 、UI 风格统一、SEO 内容加强的控制； 3 、第三方库资源加载逻辑； 这些细节，会有一些指令控制的技巧，但整体难度不大，以后有时间再针对聊聊；

结尾

这次给我最大的感受是，Gemini 对于需求的理解，代码逻辑完成度很高，半年前会出现，你让他改 A ，他会改到 B 的情况，现在基本不存在了； 模型大部分是 Gemini-2.5-pro, 小部分是 Gemini-2.5-flash ，即使是 flash ，也能完成任务。 最后，作为老前端切图仔，瑟瑟发抖。