一个用户退款后，我用 GPT Image 2 和 Codex 重做了英语学习页

哈罗，大家好，我是涛哥，上市公司程序员裸辞，All in AI，探索 AI 编程更多可能，主要使用 Codex、Claude Code 等 AI 工具进行开发，打造一人公司，立志在 AI 时代做出世界级产品。

前段时间文章断更了很久，主要是一直在忙两个事情：一个是继续打磨英语学习产品的核心学习页，另一个是做 SEO 站点的内容和页面优化。产品一旦真的上线，就会发现开发只是第一步，后面大量时间其实都花在体验细节、页面质感、用户反馈和转化路径上。

今天这篇文章，想把上个月做的一次学习页大改版完整复盘一下。

这次改版的起因比较突然，被一个用户退款把我刺激到了。这个退款理由还挺直接：他觉得另一个类似产品的界面更好看，所以想把我的退掉，去买那个。

刚看到这个理由的时候，我肯定是不太舒服的。因为我自己知道这个产品背后做了很多事情：视频资料库、字幕处理、逐句播放、跟读、听写、重点词汇、生词本、租户后台、兑换码、资料库管理、AI 辅助制作流程等等。结果用户还没有真正深入使用，就因为别人界面看起来更高级，决定退款。

但后来我认真看了他发来的竞品宣传图，又不得不承认一个事实：对方的界面确实更像一个成熟产品，而我的学习页虽然功能不少，但视觉质感还停留在“能用”的阶段。

这件事让我重新思考了一个问题：一个产品到底是“功能能用”就够了，还是必须让用户第一眼就觉得“这东西像个正经产品”。

最后我做的事情是：用 GPT Image 2 重新设计英语口语学习平台的学习页，再用 Codex 把设计图落地成可切换的 8 套主题，并且接入真实学习页、移动端适配、字幕高亮、词汇交互、租户权益和后台预览。

听起来像是一个 UI 优化，但真正做下来后，我最大的感受是：AI 编程已经不只是写功能，它可以参与一个产品从视觉探索、产品方案、工程实现，到商业化配置的一整套升级流程。

这篇文章我会把整个过程尽量完整拆出来。如果你也在做自己的产品，尤其是独立开发者、一个人做 SaaS、做学习平台、做内容工具，这套流程应该有不少可以直接参考的地方。

旧版本界面：

旧版本的学习页

新版多主题界面：

新版移动端和ipad端学习页界面1

新版移动端和ipad端学习页界面2

一个让我很不服气的退款理由

先讲一下事情的起因。

我之前在多个平台宣传自己的英语学习资料库产品，也发了一些英语学习相关的视频。陆陆续续开始有人关注我、加我微信、咨询产品。其中有一个用户，在第一天上午加我微信后，付款购买了我的英语资料库产品。

结果第二天一大早，他就来找我要退款。

我刚开始以为是不是产品打不开，或者内容权限没有开通，再或者是他进去看了一下，发现这种学习方式不适合自己。因为资料库产品毕竟不是所有人都能立刻适应，有些人想要的是课程，有些人想要的是打卡陪伴，有些人想要的是现成计划，而我的产品更偏工具和资料库。

但他给出的理由不是这些。

他说他在抖音上看到了另一个跟我类似的产品，对方的界面更好看、更上档次，所以他想把我的退了，去买那个。

这个理由让我当时很难接受。

我心里会觉得，你买的是英语学习资料库，不是买一张海报。一个学习产品真正重要的，不应该是里面有没有好的素材、学习流程是否合理、逐句播放和跟读是否方便、字幕和词汇是否能辅助学习吗？怎么会因为别人界面更好看，就直接退款呢？

但他后面给我发了那个产品的宣传图片。

我看完之后，又不得不承认一件事：对方宣传图里的界面，确实比我当时那个学习页更有高级感。

这件事刺痛我的地方，不是退款金额本身。真正让我不舒服的是，它说明我之前对“产品价值呈现”的理解还是太偏技术了。

我一直在做很多底层能力，比如字幕切分、词汇抽取、学习模式、租户后台、兑换码、资料库管理、AI 辅助制作工具。这些东西我自己很清楚，开发起来也很花时间，但用户第一眼是看不到这些的。

用户第一眼看到的是界面。

尤其是资料库产品，很多成交不是发生在用户深度体验 3 天之后，而是发生在宣传图、短视频、朋友圈截图、小红书图片里。用户还没真正开始学习，就已经在心里做了一个判断：

这个产品看起来值不值钱？

这个平台是不是专业？

我把钱付给这个人，靠不靠谱？

最后我看他也就买了一晚上的时间，确实也看不了多少内容，就给他退款了。但退款之后，我没有把它当成一个普通售后问题处理掉，而是开始想一个问题：不能再让这种事情重复发生。

如果一个用户会因为界面更高级去买另一个产品，那说明学习页不只是学习页，它也是产品交付的一部分，也是销售素材的一部分。它既承担学习体验，也承担信任建立。

所以我决定重做学习页。

而且不是简单换个颜色，不是把按钮改圆一点、阴影加重一点，而是把学习页整体的视觉、交互、多端适配和主题能力都升级一遍。

为什么不是只改一个皮肤，而是做多主题？

为了让你更好的理解我做的这个产品，我建议你可以亲自去体验一下，以便能够更好的理解下面的内容：

把真实英文视频拆成可以逐句训练的学习页面，支持逐句精听、影子跟读、盲听、听写训练和重点词汇沉淀。

首页：https://www.yueshu365.com/

英语口语素材库（素材库的内容可以点击直接进入体验）：https://www.yueshu365.com/library/

影子跟读资料库：https://www.yueshu365.com/library/shadowing-materials/

视频学英语指南：https://www.yueshu365.com/guides/how-to-learn-english-with-videos/

刚开始我也想过最简单的方案：直接把默认学习页改得更好看一点。

这个方案实现成本最低，只要选一套更高级的颜色，把字幕高亮调一调，把 tab 和底部按钮重新设计一下，再适配一下移动端，应该就能解决大部分视觉问题。

但我想了一下，觉得这个方案还是不够。

原因很简单：我的产品不是只服务我自己的一个英语资料库，它未来要服务不同的资料库、不同的老师、不同的内容产品。

有的资料库适合深色沉浸感，比如看美剧、看 vlog、做影子跟读，深色背景会让注意力更集中，也更适合晚上学习。有的资料库适合浅色干净感，比如商务英语、考试资料、系统课程，看起来要更清爽、更轻一点。

有的老师希望页面看起来更温暖，不要太冰冷；有的老师希望页面更科技、更高级；有的学员晚上学习，偏好暗色；有的学员白天学习，偏好亮色。

如果我只做一个默认皮肤，其实还是把所有资料库、所有老师、所有学员都绑在同一个审美里。

所以我决定做成多主题。

这次最终预置了 8 个主题：

不过我也不想把它做成简单的“点击按钮换颜色”。

我真正想做的是一个平台级能力：

学习页本身支持多主题；PC、iPad、移动端都适配；字幕高亮、词汇标签、播放按钮、设置面板都跟随主题变化；租户后台可以选择默认主题；学员是否能切换主题由租户决定；付费主题可以作为租户权益购买；购买前可以打开真实学习页预览效果；未来故事学习页也能接入同一套主题能力。

做到这里，它就不是简单 CSS 了，而是一个完整的产品功能。

下面我就把整个过程拆开讲。

第一步：先把我的页面和竞品页面喂给 GPT Image 2

过去我做界面，更多是让 AI 直接生成 Vue 页面，或者让它参考一些现有组件库。这样做的结果通常是：页面能跑，功能也能用，但质感比较普通。

后来我逐渐意识到一个问题：如果你自己没有一个明确的视觉方向，直接让 Codex 写页面，它大概率只能写出“能用但普通”的界面。

因为代码模型擅长工程实现，但它不是天然的 UI 设计师。它可以把一个布局写出来，可以帮你拆组件，可以帮你处理状态，但你要让它凭空判断什么样的界面更高级、更有产品感，它不一定稳定。

所以这次我把视觉探索先交给 GPT Image 2。

我准备了 8 张图（需要上传到GPT上）：

• 我的 PC 学习页亮色模式
• 我的 PC 学习页暗色模式
• 我的手机端学习页亮色模式
• 我的手机端学习页暗色模式
• 竞品 PC 学习页亮色模式
• 竞品 PC 学习页暗色模式
• 竞品手机端学习页亮色模式
• 竞品手机端学习页暗色模式

这些截图的作用很大。

只给一张图，AI 很容易只针对当前画面做局部优化。但如果你同时给它 PC、移动端、亮色、暗色，以及竞品对照，它就能更完整地理解这个产品是什么形态，哪些区域必须保留，哪些地方可以优化，竞品好在哪里，我的页面差在哪里。

我给 GPT Image 2 的核心要求很直接：

我上面提供了我的英语口语学习网站和竞品网站页面主题和布局。
我发现我的网站主题色和样式需要优化，比如字幕高亮的黄色太难看了，
上面几个 tab 按钮不好看，下面的按钮也太简陋。

我希望你能帮我设计几种不同的界面配色方案给我进行参考。

这里有一个关键点：

我没有让它泛泛地“帮我做一个好看的页面”。

我明确告诉它当前页面哪里不好，竞品哪里可以参考，我想优化的是主题色、字幕高亮、tab、底部按钮和整体质感。

这样 GPT Image 2 输出的内容就不会太飘。

它最后给了我 8 张不同风格的设计图。

这一步的价值不是直接上线，而是帮我打开视觉方向。以前我自己脑子里可能只有“亮色”和“暗色”两个概念，但它给了我 8 个不同气质的方向：有深色沉浸的，有浅色温暖的，有冷色科技感的，也有更柔和的。

这些设计图不一定每一张都能直接用，但它们足够让我确定一件事：学习页不应该只有一种气质，它完全可以根据内容和场景产生不同的视觉风格。

Image

第二步：让 GPT Image 2 把设计图还原成 HTML

拿到设计图之后，我没有直接把图片扔给 Codex，说“你照着实现”。

这一步很容易出问题。

图片只能表达视觉效果，但代码实现还需要知道布局结构、响应式规则、组件层级、颜色变量、按钮状态。如果只给图片，Codex 可能会根据自己的理解去猜，一旦猜错，后面再去修改会很麻烦。

所以我又做了第二步：让 GPT Image 2 把每一张设计图还原成 HTML。

我用的提示词大概是这样，每次上传一张图，再配上下面这个提示词：

这张图片是 UI 给我设计的学习页界面图。你需要按照它的主题配色方案，
帮我 100% 还原成网页，同时适配 PC 端和移动端。

这样做的好处是，最终我不是只拿到 8 张图片，而是拿到了 8 个可以打开的 HTML 原型。

这些 HTML 也是不能直接拿去生产环境用的，但它们有几个很重要的价值。

第一，它能让我看到真实网页里的布局比例。设计图看着很好，但落到浏览器里，视频区、字幕区、底部按钮区的高度比例是否合理，只有打开 HTML 才能看出来。

第二，它能提供移动端和 PC 端的大致适配方式。很多页面在 PC 上好看，但移动端完全崩。HTML 原型至少能提供一个参考。

第三，它能提取颜色、阴影、面板、按钮、tab 的视觉语言。后面做主题 token 的时候，这些原型就成了很重要的素材。

第四，它能让 Codex 有更具体的参考，而不是只靠图片猜。

接下来，我把这些 HTML 文件统一放到前端仓库：

docs/vlog-learning-style-page/raw/

里面包括：

根据设计图生成的html代码

这里一定要注意：AI 生成的 HTML 原型不是最终代码，而是设计素材。

如果你直接把它们复制进项目，后面一定会崩。因为真实项目里还有路由、接口、播放器、字幕、词汇、权限、移动端、iPad、状态管理。

所以正确做法是，把这些 HTML 当成设计参考，然后让 Codex 基于真实代码重新设计工程方案。

第三步：先让 Codex 写方案，不要直接写代码

这一步非常重要。

很多人用 AI 编程，最大的问题就是太急。明明是一个复杂功能，一上来就写：

帮我实现多主题学习页。

这种提示词大概率会翻车。

因为多主题学习页不是一个小功能，它至少包含页面布局、响应式设计、主题变量、主题切换器、旧学习页功能迁移、真实接口接入、后台配置、租户权益判断。

如果直接让 AI 写代码，它很容易做出一个看起来像 demo 的东西。页面有了，按钮也有了，但一接真实业务就到处是漏洞。

所以我先让 Codex 写技术方案。

我的提示词大概是这样：

相关素材文件：
8 种不同主题的视频学习页源码：docs/vlog-learning-style-page/raw
当前使用的原始学习页代码：apps/user-app/src/views/EpisodeLearn.vue

上面的 8 种不同主题的视频学习页里，有很多我需要保留的组件在不同页面中。
我现在需要你根据我的要求，先组装出一个页面组件功能框架，先用假数据，不用接入接口。

后面再考虑接入主题切换功能模块，支持在这个框架页面的基础上切换不同主题。

基本要求：
- 适配移动端、iPad 横屏、iPad 竖屏、PC 端
- 页面必须包含导航栏、菜单栏、视频区域、字幕区域、学习模式区域、底部控制区域
- 主题系统要支持 8 种主题，并保留未来扩展能力

请先帮我设计学习页框架实现方案和主题切换工具方案，形成详细文档，
放到 docs/vlog-learning-style-page 目录下。

这一步 Codex 最重要的输出不是代码，而是方案文档：

docs/vlog-learning-style-page/learning-page-framework-theme-plan.md

这个方案里有一个核心原则，我觉得非常重要：框架层和主题层完全解耦。

框架层只负责布局、组件关系、交互区域、响应式规则、数据流、播放控制。

主题层只负责颜色、阴影、圆角、字体、边框、背景氛围、局部装饰变体。

这样以后新增主题，不需要改业务逻辑。

如果你正在做自己的产品，这一点一定要记住：不要让样式和业务缠在一起。

今天你可能只是做 8 个主题，明天可能就是租户自定义主题、节日主题、品牌主题。如果一开始没有拆开，后面会非常痛苦。

第四步：先做页面框架，再接真实业务

有了方案之后，我让 Codex 先做一个学习页框架。

这里依然不是直接接真实接口，而是先用假数据把页面结构搭起来。

为什么要这样做？

因为在复杂页面里，布局和业务最好分开验证。如果一开始就接接口，一边调接口，一边调播放器，一边调字幕，一边调移动端，一边调主题，最后你根本不知道问题出在哪里。

所以我当时的顺序是：

1. 先用 mock 数据做出新版学习页框架
2. 验证 PC、iPad、移动端布局
3. 加主题切换能力
4. 调整 8 套主题的视觉变量
5. 再把旧学习页功能迁移过来
6. 最后接真实接口

新版学习页被拆成了很多组件，比如：

EpisodeLearnFramework.vue
LearnTopNav.vue
LearnSideMenu.vue
LearnVideoStage.vue
LearnSubtitleList.vue
LearnEntryPanel.vue
LearnSettingsSheet.vue
ThemeSwitcherTool.vue

这样拆的好处是，每个区域都能单独优化。

字幕列表当前句高亮不明显，就改 LearnSubtitleList；主题切换入口不合理，就改 ThemeSwitcherTool 和 LearnSettingsSheet；词汇弹窗体验不好，就改 LearnEntrySheet。

如果全部堆在一个页面里，前期看起来开发很快，后面维护会非常痛苦。

我现在越来越觉得，AI 编程时代反而更需要模块化思维。因为 AI 写代码很快，如果你不给它边界，它很容易越写越大，把一个页面写成几千行。短期能跑，长期会变成烂摊子。

第五步：PC、iPad、手机是三套体验，不是一套页面缩放

这次开发里，最耗时间的其实不是界面的主题颜色，而是多端适配。

学习页和普通后台页面不一样。普通后台页面滚一滚问题不大，但学习页不行。

学习页的核心区域是视频、当前字幕、字幕列表、播放控制和学习模式。如果整体页面可以随便上下滚动，用户学习时就很容易迷失。特别是在手机和 iPad 上，如果视频滚出去了，字幕滚一半，控制按钮又在底部，整个体验会很割裂。

所以我给 Codex 的要求是：学习页整体必须尽量一屏展示完，不允许整个页面上下滚动。只有字幕列表、重点词汇、生词本、目录这些内部区域可以滚动。

这个要求看起来简单，但是实现起来有很多细节需要被考虑到。

因为它要同时兼容 PC 宽屏、PC 窄屏、iPad 横屏、iPad 竖屏、手机、不同浏览器高度、16:9 视频、竖屏视频、顶部导航展开和收起、底部按钮区固定高度。

我在开发过程中给 Codex 反复提了很多细节问题，比如：

• 顶部导航收起后不能继续占高度
• iPad mini 横屏时视频不能挤压字幕区
• 移动端视频不要圆角，要占满宽度
• 移动端底部按钮不能太高
• 重点词和生词本数字不能挤成两行
• 视频必须保持 16:9，不能因为头部展开收起出现黑边

这一步我最大的感受是：AI 可以很快做出 60 分页面，但 80 分体验一定来自真实设备上的反复使用。

很多问题你不拿 iPad 打开、不拿手机打开，是发现不了的。

比如移动端一个按钮高了 4px，可能就会导致字幕少显示一行；视频区域多出一点空白，整个学习节奏就会被破坏；底部菜单的数字换行，看起来就是廉价。

这些都不是大 bug，但它们会影响用户对产品的第一印象。

而这次退款，本质上就是用户第一印象输了。所以这次我对这些细节非常敏感。

第六步：主题不是 CSS 换肤，而是语义 token 系统

多主题最容易犯的错误，就是每个主题写一堆 CSS。

比如：

.theme-dark .button {}
.theme-light .button {}
.theme-blue .button {}

短期看能跑，长期一定维护不下去。

这次我让 Codex 做的是主题 token。

简单理解，就是先定义一套语义变量：

--lp-bg
--lp-panel-bg
--lp-border
--lp-text
--lp-muted-text
--lp-accent
--lp-current-line-bg
--lp-current-word-bg
--lp-chip-word
--lp-chip-phrase
--lp-chip-grammar

组件里不关心当前是 midnight-indigo 还是 warm-ivory （主题名称）。组件只使用这些语义变量。

比如字幕当前句高亮，就用当前句背景、当前句边框、当前句阴影、当前词高亮背景。至于不同主题下这些变量是什么颜色，由主题注册表提供。

这样 8 套主题就能共用一套组件。

这一步解决了我之前学习页一个很大的问题：高亮词汇颜色很杂，尤其是黄色高亮看起来很土。

在新版主题里，词汇 chip、挖空填空、当前播放词、当前字幕卡片，都能跟随当前主题变化。

比如暗色主题下，高亮不能太刺眼；浅色主题下，当前句不能只靠淡淡的阴影，否则在高亮屏幕上根本看不出来；盲听模式的毛玻璃遮罩，在不同主题下也要调强度，不然用户可能透过遮罩看到句子。

这就是为什么我说，多主题不是换颜色。

它是一整套视觉语义系统。

一开始我也低估了这件事，觉得主题就是几套色值。但真正落到学习页这种页面时，会发现几乎每个学习状态都和主题有关：当前字幕、当前单词、已学习句子、未学习句子、播放按钮、禁用按钮、底部设置面板、词汇标签、听写输入框、盲听遮罩、目录抽屉。

如果这些地方没有统一设计，页面看起来就会杂乱，会有一种廉价感。

第七步：把旧学习页能力迁移回来

页面好看只是第一步。

如果新版学习页只有皮肤，没有原来的学习功能，那就变成“漂亮但残废”的 demo。

所以后面我又让 Codex 对照旧的学习页页面 EpisodeLearn.vue，把原来的关键能力迁移回来。

旧版学习页面功能

包括：

• 双语 / 原文 / 译文切换
• 跟读
• 挖空听写
• 全句听写
• 字幕逐词高亮
• 目录抽屉
• 生词本
• 重点词汇
• 字幕字体大小调整
• 播放速度调整
• 单句循环
• 词级时间轴偏移

这里有一个很重要的经验：做新版页面时，不要只问“新页面有什么”，还要列清楚“旧页面不能丢什么”。

我在提示词里经常会明确写：

请参考 apps/user-app/src/views/EpisodeLearn.vue 中已有能力，
新版页面需要保持对应交互一致。

比如跟读模式，一开始新版页面只是样式上有一个 tab，但交互并没有和旧页面一致。我就继续要求 Codex：

跟读 tab 下的功能和按钮样式，要和 EpisodeLearn.vue 页面中一样。
跟读容器下方不需要显示当前句以外的字幕数据，只显示当前字幕文本信息。

再比如双语切换，一开始新版页面是三个按钮：双语、原文、译文。但旧页面的交互是点击一个主按钮循环切换，用户已经习惯了。我就继续让 Codex 调整成旧页面一致。

这种迁移不是一次完成的，而是一轮一轮对齐。

所以在流程里，这一步一定要单独列出来：新页面上线前，必须拿旧页面做功能对照表。

否则你很容易做出一个视觉升级、体验降级的版本。

这个问题在产品重构里非常常见。开发者会觉得新版页面更好看、更现代，但老用户进入后发现熟悉的按钮不见了，原来的学习习惯被打断了，他不会觉得你升级了，只会觉得你把功能做没了。

第八步：把设置项统一成底部 sheet

这次学习页里还有一个比较大的交互升级，就是底部设置面板。

以前很多按钮都是直接点一下切换，或者散落在不同地方。这样做功能上没问题，但页面会显得很工具化，缺少一个完整产品的精致感。

这次我希望它更像一个真实产品，而不是 demo。

比如：

• 点击倍速，从底部划出面板，里面有滑杆和快捷倍速
• 点击字体，从底部划出面板，支持 12px 到 32px 调整
• 点击循环，从底部划出面板，选择 1、3、5、10、无限循环
• 点击词偏移，从底部划出面板，调整逐词时间轴偏移
• 点击主题，从底部划出主题卡片列表

这样做以后，底部控制区就可以保持简洁，具体设置放到 设置面板 里完成。

这里我也踩了一个坑。

AI 一开始很喜欢在设置面板里写很多说明文字。比如告诉用户“你可以通过调整这个滑块来改变字幕字体大小”。这在 demo 里看起来好像很贴心，但是在真实产品里就是废话。

用户点进来就是要调东西，不是来读说明书。

所以我后面明确要求：

字幕字体大小这个调整框中的废话太多了。给用户用的应该简洁、直观，
而不是用过多的文本说明。
播放速度调整面板、循环与重复等其他面板也一样，帮我优化。

这也是一个经验：AI 默认会把页面写得像说明文档，真实产品要把文案删到只剩必要信息。

很多时候页面高级感不是加出来的，而是删出来的。该说明的地方说明，不该解释的地方不要解释。按钮、滑杆、选项本身如果足够清晰，就不需要旁边再堆一段话。

第九步：接入真实接口，不要停留在 mock

前面框架和主题都做好后，接下来就是接真实数据。

学习页主数据并不简单，涉及：

• 剧集详情
• 字幕列表
• 单词级时间轴
• 重点词汇
• 生词本状态
• 学习进度
• 当前播放状态
• 下一期预加载
• 权限判断
• 租户主题配置

我让 Codex 参考了旧学习页和接口数据文档：

apps/user-app/src/views/EpisodeLearn.vue
docs/vlog-learning-style-page/framework/api-data.md

然后把数据适配层单独抽出来：

useLearnPageData.js

这样页面组件不用直接关心接口细节。它只消费处理好的状态：

• 当前剧集
• 当前字幕
• 当前词汇
• 当前学习模式
• 当前主题
• 当前权限
• 当前目录
• 当前播放状态

这个做法也很适合复杂页面：不要让页面组件直接堆接口调用，先做一个数据适配层。

否则后面换接口、加预加载、加缓存、加权限，页面会越来越乱。

我以前做页面，有时候会直接在 Vue 页面里请求接口、处理数据、控制状态、渲染 UI，短期很快。但只要页面变复杂，这种写法很容易变成一个大泥球。

这次学习页是产品核心页面，后面还会不断迭代，所以我不希望它继续变成一个几千行的大文件。把数据适配、主题系统、组件布局拆开，后面才有继续优化的空间。

第十步：把主题能力接到租户后台

如果只是用户自己切换主题，那这个功能还只是一个学习体验优化。

Image

但我的产品有租户体系，不同资料库、不同老师都可以拥有自己的学习页。所以主题能力最终还要接到租户后台里。

我希望租户可以做几件事：

第一，设置默认学习页主题。

第二，控制学员是否允许自行切换主题。有些老师可能希望所有学员看到统一页面，不希望学生自己乱切；有些老师则希望学生自由选择。

第三，付费主题可以作为租户权益。

第四，购买前可以预览。这个非常重要，因为主题是视觉能力，不能只靠文字介绍。租户购买前必须能打开真实的学习页，看到这个主题落到真实内容里是什么效果。

所以后面我又让 Codex 继续扩展后台能力，包括主题权益配置、主题预览入口、租户默认主题字段、前端读取租户主题配置等。

这里我也再次感受到，产品功能一旦接上商业化，就不能只站在技术角度看。

从技术角度看，多主题就是主题注册表加 CSS token。但从产品角度看，它可以变成租户权益、付费能力、品牌展示能力、资料库差异化能力。

很多功能做出来之后，到底只是一个“功能”，还是能变成“商品的一部分”，取决于你有没有把它放到商业化路径里思考。

第十一步：这套流程怎么复制？

如果你也想用 Codex + GPT Image 2 升级自己的产品界面，可以按下面这个流程来。

准备截图

至少准备这几类：

• 你自己产品的 PC 端截图
• 你自己产品的移动端截图
• 你自己产品的亮色和暗色截图
• 竞品的 PC 端截图
• 竞品的移动端截图
• 竞品的亮色和暗色截图

不要只给一张图。

多端截图越完整，AI 越容易理解你的真实产品形态。很多页面在 PC 上好看，移动端就不一定成立；很多亮色模式没问题，暗色模式一看就很廉价。你给 AI 的素材越完整，它越不容易乱发挥。

让 GPT Image 2 先做多方向设计

不要一上来就要最终稿。

可以这样说：

我提供了我的产品页面和竞品页面。请你从产品质感、字幕高亮、
按钮样式、tab 样式、移动端布局几个角度，
帮我设计 6 到 8 种不同风格的界面方案。要求每种方案都保持学习页的核心功能区域不丢失，
同时让界面看起来更专业、更有高级感。

这一步的目标不是直接生成最终设计稿，而是打开方向。你先看哪些风格适合你的产品，再决定往哪个方向深入。

让 GPT Image 2 把满意方案还原成 HTML

选出你喜欢的方向后，再让它还原 HTML：

这张图片是 UI 设计出来的学习页界面图。你需要按照它的主题配色方案，尽可能还原成网页。

要求：
- 适配 PC 和移动端
- 保留视频区、字幕区、控制区、学习模式、词汇区
- 样式尽量接近设计图
- 输出完整 HTML/CSS

HTML 原型不要直接进生产项目，但它可以作为很好的设计素材。

把所有素材整理进 docs

这一点非常重要。

不要把素材散落在聊天记录里。聊天记录越长，后面越难找，AI 也很难稳定参考。

我这次的做法是：

docs/vlog-learning-style-page/raw/               # 8 套 HTML 原型
docs/vlog-learning-style-page/gpt-多主题沟通.md   # GPT 沟通记录
docs/学习页主题样式-切换功能.md                     # Codex 开发提示词
docs/vlog-learning-style-page/learning-page-framework-theme-plan.md  # 技术方案

AI 编程想要稳定，核心不是某一句神奇 prompt，而是上下文管理。

先让 Codex 写方案

不要直接写代码。先让它输出：

• 页面结构
• 组件拆分
• 响应式策略
• 主题 token 设计
• 主题切换逻辑
• 旧功能迁移清单
• 验收标准

方案写清楚后，再让它按阶段实现。

再分阶段实现

推荐顺序是：

1. mock 数据页面框架
2. PC 和移动端布局
3. 主题切换器
4. 8 套主题 token
5. 旧功能迁移
6. 真实接口接入
7. 移动端 / iPad 细节打磨
8. 后台权益和预览

不要一次性全做。

复杂页面最怕一锅炖。AI 很强，但它一次处理太多上下文，也会乱。

最后做真实设备验收

至少检查：

• PC 宽屏
• PC 窄屏
• iPad 横屏
• iPad 竖屏
• 手机
• 页面中的每个重要功能都要在各个端上进行验收

这一步很耗时间，但非常值得。

因为用户觉得“高级”，往往不是因为某一个大功能，而是这些小细节没有崩。

这次迭代里，我对 AI 编程的新理解

这次多主题学习页做完后，我对 AI 编程有了一个更深的理解。

以前我更多把 AI 当成写代码工具。比如我要做一个接口、一个页面、一个组件、一个脚本，就让 Claude Code 或 Codex 帮我实现。

但这次流程跑下来，我越来越觉得，AI 可以参与的是完整产品流程：

• GPT Image 2 负责视觉探索
• Codex 负责工程拆解和代码实现
• docs 负责沉淀上下文
• git 提交记录负责记录迭代过程
• 真实用户反馈负责告诉你哪里还不够好

这几者结合起来，一个人就能完成过去一个小团队才能做的事情。

但前提是，你不能只会问一句“帮我写代码”。

你要能把问题拆清楚：

• 为什么做？
• 给谁用？
• 参考什么？
• 当前问题在哪里？
• 旧功能不能丢什么？
• 新功能怎么分阶段？
• 哪些是框架？
• 哪些是主题？
• 哪些是权益？
• 怎么验收？

AI 很强，但它需要你给它一个清晰的产品系统。

我之前对 AI 编程的理解，更多还是“提升开发效率”。现在我会更愿意把它理解成“一人公司操作系统”的一部分。它不是替你自动创业，而是把设计、开发、文档、测试、迭代这些环节的成本都大幅压低。

真正的关键反而变成了人自己：你能不能发现问题，能不能拆解问题，能不能判断 AI 的输出是否靠谱，能不能在用户反馈和产品迭代之间形成闭环。

写在最后

回到最开始那个退款用户。当时我确实很不爽。

因为我觉得自己的产品明明做了很多功能，明明不是一个简单 UI 页面，为什么用户只看界面就要退款？

但现在回头看，我反而要感谢这次刺激。

它让我意识到：产品不是你做了多少功能，而是用户感知到了多少价值。

你写了 100 个功能，用户第一眼看到的是界面；你做了复杂的字幕系统，用户第一眼看到的是高亮好不好看；你做了租户后台和制作工具，用户第一眼看到的是宣传图像不像一个高级产品；你觉得自己技术很强，用户只会问：这个东西值不值得我付钱？

所以这次我用 Codex + GPT Image 2 重做了学习页，不仅仅是为了多几个皮肤，更是为了让产品从“能用”走向“值得相信”。

对独立开发者来说，这件事非常重要。

因为我们没有大公司品牌背书，没有设计团队，没有销售团队，用户判断我们的窗口很短。很多时候，就是一张截图、一个 demo 页面、一次打开体验。

如果第一眼输了，后面再多功能也没机会展示。

所以，如果你也在用 AI 编程做产品，我建议你不要只盯着功能列表。下一次迭代时，可以问自己一个问题：

这个页面截图发出去，用户会不会觉得它像一个值得付费的产品？

如果答案不确定，那就该升级了。

这次退款让我亏了一单，但也逼我把学习页升级了一个 level。

从这个角度看，这单退得也不算亏。