一人用AI,开发一款英语学习App

起因：1000天打卡，一句完整的英语说不出来
我在多邻国连续打卡了1000天，快三年。
上个月出差碰到老外问路，脑子一片空白，只蹦出来 “Sorry… I… you go… that way…”，配上手势比划。
回去我就想：这1000天到底学了个啥？
多邻国让我”坚持”了三年，但坚持和有效是两回事。每天做填空选择题，做完就关，学的东西生活中用不上，所以也记不住。
后来我想明白了：我缺的不是学习工具，是真实的使用场景。
如果下周要去纽约出差，要跟酒店前台沟通、在餐厅点菜、打车告诉司机目的地——不用任何人催，我自己就急了。
于是我决定自己做一个场景化的英语学习App，叫「陶语」。

陶语做什么
很简单——你告诉它你要去哪、什么时候出发，它帮你把最实用的英语场景练一遍。
不教语法，不背单词，不搞排行榜。就模拟你出国后真正会遇到的对话：过海关怎么说、点菜怎么说、打车怎么说。每个场景2-3分钟，总共一个多小时全部”通关”。
设好出发日期，App显示”还有7天”，每天推两个场景。到出发那天，最高频的对话你都练过了。海关问你 “What’s the purpose of your visit?”，你脱口而出 “Business trip, five days.”
6个核心场景： 机场入境、交通出行、餐厅点餐、购物、酒店入住、紧急情况。

开发工具：Antigravity
我用 Antigravity 做开发。这是Google推出的AI编程工具，你用大白话告诉它要做什么，它直接帮你写代码、调试、测试。
跟ChatGPT写代码的区别：ChatGPT是你问一句它答一句，代码得自己复制粘贴。Antigravity直接在编辑器里干活——能看到你整个项目，直接改文件、跑命令、测试。像一个坐在旁边的程序员搭档。
目前免费，可以用 Gemini 3 Pro 和 Claude Sonnet 4.5 这些顶级大模型。
要说明：Antigravity不是”不懂代码也能做App”的无代码工具，你还是需要一些编程基础。但有了它，原来需要一个团队干几个月的活，一个人可以很快搞定。

先用AI画一个Demo（使用HTML）看效果

在写真正的代码之前，我先让AI画了一个可以点击的Demo原型。自己先体验一遍流程顺不顺，比在脑子里想一万遍都管用。
方法很简单：给AI写一段描述（Prompt），它直接生成一个可以跑的页面。
下面是我用的Prompt，你可以直接复制到 Antigravity 或 Claude 里试：

帮我创建一个英语学习App的交互式Demo原型，用React单文件组件。
App叫「陶语」，帮用户在出国旅行前速成实用英语口语。

## 设计风格
– 暖白色背景 #FAF7F2，黑色卡片 #1A1A1A，主题色深红 #C23B22
– 金色 #D4A843 用于提示和成就高亮
– 卡片式布局、手绘线稿插画感、印章收集机制
– 整体温暖、鼓励、低压力
– 标题衬线体Georgia，标签等宽字体Courier New，圆角14-16px

## 流程（5个页面）

### 页面1：启动页
– 手绘风自由女神像SVG（黑白线稿）
– 「陶语」大标题 + “为你的美国之旅，定制口语速成计划”
– 「开始准备」按钮

### 页面2：设置出发日期
– 目的地：🇺🇸 美国
– 日期选择器，选好后显示倒计时天数（大字）
– 学习计划预览：Day1-2 机场+交通 / Day3-4 餐厅+购物 / Day5-6 酒店+紧急
– 「生成学习计划」按钮

### 页面3：场景列表
– 顶部倒计时 + 进度条
– 6个场景卡片：emoji + 场景名（中英文）+ 印章位（完成后亮起）
– 第一个场景标「免费」，其他标「¥29.9解锁」
– 底部集邮墙：6个印章位

### 页面4：对话练习
– 聊天界面，场景：机场入境，AI扮演海关官员
– 对话：
 1. AI: “Good morning. May I see your passport, please?”（附中文翻译）
 2. 提示：”递上护照，说 Here you go”
 3. 用户从两个选项中选
 4. AI: “What’s the purpose of your visit?”
 5. 用户选 “Sightseeing” 或 “Business trip”
 6. AI: “How long will you be staying?”
 7. 用户选 “Five days”
 8. AI: “Enjoy your stay!”
– 选对变绿✓，选错变橙带提示
– AI回复前显示打字动画（三个跳动的点）

### 页面5：完成报告
– 🎉 + 正确率/词汇数/对话轮次 三个数据卡
– 学到的关键表达列表
– 「领取印章」按钮

## 技术要求
– React单文件，useState管理状态
– inline style，不需要CSS文件
– 外层手机壳框架390x780px模拟真机
– 页面切换淡入动画

把这段丢给AI，它会生成一个可以跑的React页面——一个手机壳模拟画面，你能点击”开始准备”、设日期、看倒计时、跟AI海关官员对话。

不是程序员也能看效果：