用Flutter做背单词APP-00前言

作者:雪隐_上班了

原文:juejin.cn/user/143341...

本文欢迎分享、聚合讨论,但不接受整篇搬运。圈子不大,写文不易,急用可联系授权。

背景

痛点很简单:

背单词 App,好用的功能全要钱。

我想背词组?没有。

问客服,客服态度很好:"确实没有这个功能呢,以后可能会加哦~"

翻译一下:"以后"≈"下辈子"。

最近,正好失业了。

想着反正闲着也是闲着,不如学点设计,万一以后......用得上呢?

再加上我手头正好会一点点 Flutter、一点点 NestJS,

家里还有一台 5060Ti 16G 的电脑。

那还等什么?

自己干一个软件不就完了。

凭什么非得给 App 交赎金?

于是就问了下 AI

我:设计咋搞?

AI:用 Figma。

我:怎么学?

AI:

  • 第一周:读《Refactoring UI》核心思想,B 站/YouTube 看几个 Figma 教程。
  • 第二周:打开 Figma,去 Dribbble 找个卡片设计,复刻它。
  • 第三周:用 Vue + Tailwind CSS 把卡片写出来,感受"设计稿"到"代码"的转化。

我心想:三周?太久了。

于是半天 刷完了 Figma 入门视频。

《Refactoring UI》那本书太长?让 AI 帮我浓缩成 500 字 ------

喝杯咖啡的功夫,我就"读完了"一本设计神书。

(AI:你礼貌吗?)

然后就去做吧

1. 先用 FigJam 画脑图

反正自己看得懂就行。

2. 发现 Figma 有个"Make"功能

这玩意儿竟然能用 AI 直接生成设计稿!

点击→等待→出来一个网页版设计稿:

设计稿地址

我当时就笑了:

这设计,不能说好看,只能说 "AI 尽力了"。

但它能导出 HTML!

有 HTML 就好办,AI 不是擅长写代码吗?

3. 让 AI 生成 Flutter 代码 + 数据库 + 后台

我把 HTML 往对话框里一扔:

"给我转成 Flutter 项目,顺便把后端也写了。"

AI:行。

......

你猜怎么着?

这项目竟然跑起来了!

你敢信?

一个失业人员,半天学 Figma,五分钟生成设计稿,再让 AI 写代码------

App 真的能在模拟器里打开了。

虽然......

和设计稿长得完全不一样。

设计稿:极简主义大师。

实际画面:赛博坦风格拼贴画。

不过没关系,能跑就是胜利。

写在最后

你看到这里,是不是以为我要说:

"完结撒花!AI 太强了!我三天做出一个 App!"

不。

这个专栏还没开始写,就已经"完结"了。

你们不会真以为上面这样就能交付一个能用的软件吧?

完全不可能。

AI 生成的代码,大概率:

  • 后端接口飘忽不定
  • 数据库字段第二天就变了
  • Flutter 页面点两下就崩
  • 你问 AI 为什么,它说:"抱歉,我可能记错了。"

所以,一步一个脚印 。

该自己写的代码,一行都跑不掉 。

AI 是副驾驶,方向盘还得你握着。

别让 AI 替你写诗,

别让 AI 替你背锅,

更别让 AI 替你上班------那我还失业干嘛?

我们下篇(真正的技术实现篇)再见。

如果还有下篇的话。

相关推荐
Java爱好狂.1 小时前
Java初学者如何一周速通SpringBoot!
java·spring boot·后端·spring·高并发·架构师·java面试
XCDoris2 小时前
郴州logo设计机构
大数据·人工智能·python
Goboy2 小时前
一个人带三个Agent,我用全新TRAE从0到1搭了个资讯周刊站
人工智能·trae
俊哥V2 小时前
每日 AI 研究简报 · 2026-10-19
人工智能·ai
AI_AGENT_DEV_AI2 小时前
AI英语教培智能体的开发
人工智能
物联网软硬件开发-轨物科技2 小时前
【技术白皮书】光伏清检一体化机器人系统解决方案技术白皮书
大数据·运维·网络·人工智能·机器人
海宇数据3 小时前
零信任架构实战:基于海宇网上踪迹欺诈行为识别构建自动化信贷资信评估网关
运维·人工智能·架构·自动化
冬奇Lab3 小时前
开源项目第242期:HyperFrames —— 写 HTML 就能渲染视频,专为 AI Agent 设计的确定性视频框架
人工智能·开源·音视频开发
ShineWinsu3 小时前
对于JavaScript:操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
zyseo83 小时前
谷歌SEO 准首页词挖掘脚本:找出排在第 8-20 名的隐藏流量
大数据·数据库·人工智能