我如何建立一套 Vibe Coding 工作流，把 Tiqlo 从 Idea 真正做到 App Store

我如何建立一套 Vibe Coding 工作流，把 Tiqlo 从 Idea 真正做到 App Store

Tiqlo brings crisp pixel geometry to every clock face, panel, button, outline, and shadow. Run it fullscreen—free, ad-free, and without an account.

分享我如何使用 Codex 和 Flutter，通过 Vibe Coding 从一个想法开始，设计并开发 Tiqlo 像素风时钟 App，包含产品设计、Flutter 架构、Pixel UI、Focus 专注模式和真实 AI 编程实践。

视频

https://youtu.be/rjSiGf9YHv0

https://www.bilibili.com/video/BV19iY56SEzi/

01 为什么我要做 Tiqlo

时钟几乎是我每天都会用到的工具。我喜欢把电子时钟摆在桌面上，手里又有几台闲置的旧手机，正好让它们发挥一下余热。

为了找一个顺手的时钟 App，我在商店里试了不少产品。有的广告太多，有的主要在卖皮肤，还有的功能没问题，但样式始终不是我想要的。

既然都到了 Vibe Coding 的时代，那就自己做一个吧。

于是有了 Tiqlo：从一个自己想用的桌面时钟出发，用 Flutter 开发，配合 GPT、Codex 和自己的 Skills，一步步做到上架 App Store。

我想要的东西很简单：界面干净、交互简洁，再加上一点自己喜欢的像素风。

下面是 Tiqlo 的两种视觉风格。

像素风

Tiqlo Pixel style (default): Flip Clock, Digital Clock, and Focus Timer

常规风格

Tiqlo Standard style: Flip Clock, Digital Clock, and Focus Timer

这篇文章就聊聊我的开发过程，希望给想用 AI 做一个完整产品的朋友一些参考。

02 我的 Vibe Coding 工作流

先把整个流程放出来：

vibe-coding-流程图

这套流程里，AI 会参与研究、设计和编码，而我负责判断：做什么、先做什么，以及做出来的东西是否符合预期。

前面的定位和原型，是为了让方向更清楚；中间的任务拆分和工程规则，是为了让开发过程可控；后面的真机体验和发布，则是把代码变成真正能用的产品。

实际做的时候也会往回走。界面跑起来后觉得不舒服，就继续调整；发现需求想复杂了，就先收一收范围。

03 GPT：竞品研究 + PRD

一开始，我的想法只有三个字：桌面时钟。

这个范围太大了。我会先和 GPT 一起梳理竞品，再逐步明确 Tiqlo 的定位。

最初想法：做一个桌面时钟
      ↓
竞品有哪些？
Flip Clock / Focus / StandBy 类产品
      ↓
它们分别解决什么问题？
      ↓
哪些体验是我需要的？哪些让我觉得不舒服？
      ↓
Tiqlo 应该有什么不同？

我现在主要用 GPT 做竞品调研。

搜竞品

做产品规划

产品规划

这一轮梳理后，我把方向收敛到三个点：

  • 首先把 Flip Clock 翻页时钟做好。
  • UI 和交互尽量简洁，让时间本身成为主角。
  • 视觉上干净、有辨识度，加入自己喜欢的像素风。

方向确定后，再把它整理成 PRD，也就是产品需求文档。

对于这种个人项目，PRD 可以先写得简短一些，但要说清楚：给谁用、在什么场景下用、第一版包含哪些功能，以及做到什么程度算完成。

GPT 在这个阶段的价值，是帮我把零散的想法整理成可以讨论和执行的需求。竞品细节仍然要结合实际体验核对，最后做哪些功能，也需要自己取舍。

04 Image / HTML：快速验证 UI

有了需求，我会先看界面大概长什么样，再进入 Flutter 开发。

现在做个人项目，我比较少专门开 Figma；如果是有设计师协作的企业项目，还是按团队的设计流程来。像 Tiqlo 这样的小产品，用 UI 图片或者 HTML 原型快速试方向，对我来说更直接。

Idea
  ↓
Prompt
  ↓
UI Image / HTML Prototype
  ↓
看效果、调整
  ↓
Flutter 实现

翻页界面

先画出几个核心界面：

  • Flip Clock：翻页时钟。
  • Digital Clock：数字时钟。
  • Theme：样式切换。
  • Settings：设置。

图片适合看整体风格，比如配色、字体和布局；HTML 原型则可以进一步尝试菜单、切换和页面之间的交互。

这个阶段先确认大方向：时间是否足够醒目，页面是不是太满，常用操作是否容易找到。方向看顺眼了，再进入 Flutter，后面仍然要根据真机效果继续调整。

05 猫哥 Skills：给 Codex 建立工程规则

直接让 AI 开始写代码，经常会遇到一些不可控的地方：组件选型、目录结构、架构深度，以及后续是否方便维护。

所以我习惯先准备一个可以复用的基础模板，把自己常用的工程约定固定下来，再让 Codex 在这个基础上开发。

Skills 就是承载这些规则的一种方式。对我来说，值得提前约定的内容包括：

  • 项目如何初始化，目录如何组织。
  • 常用依赖和状态管理方案如何选择。
  • 页面、组件和业务逻辑如何拆分。
  • 完成修改后，需要做哪些检查。

以前我喜欢用 VS Code 插件做这类自动化，现在可以把流程整理进 Skills，交给 AI 执行，并配合检查和必要的测试确认结果。

当然，模板和 Skills 也需要持续维护。自己的开发习惯变了，或者项目里发现了更合适的做法，就把规则一起更新。

这部分先准备好，后面做功能时就能把更多精力放在产品体验上。

这套代码基础我也是免费开源的，通过 skills 方式使用。

关于猫哥 Skills 的使用，可以参考：Flutter AI Skills：Riverpod 项目初始化。

06 PRD → Tasks → Codex 编码

PRD 明确方向之后，还需要把它拆成 Codex 可以逐步完成的任务。

我的习惯是拆成 3～5 个可以验收的小阶段。每个阶段都有一个明确结果，完成后能运行、能体验，再继续下一步。

以 Tiqlo 的核心开发部分为例：

一、实现 Flip 翻页时钟
二、实现 Digital 数字时钟
三、补齐设置和样式切换
四、实现像素皮肤并统一视觉细节

具体交给 Codex 时，任务还要再描述清楚一点。例如，实现翻页时钟，除了显示时间，还要考虑翻页效果、布局，以及如何验证运行结果。

一个任务可以按下面的方式组织：

目标：这一轮要完成什么
范围：涉及哪些页面或组件
约束：遵循哪些工程和设计规则
验收：运行后应该看到什么、能操作什么

这样每一轮结束，我都能判断当前进度。如果效果不对，也能及时调整，避免等一大批功能都写完了才回头返工。

拆解任务可以参考 mattpocock/skills https://ducafecat.com/blog/flutter-matt-pocock-skills-unsplash-tool 。

07 Run → Feel → 微调：Vibe Coding 的核心循环

对我来说，Vibe Coding 最关键的一段发生在代码跑起来之后。

Run：运行应用
      ↓
Feel：自己上手体验
      ↓
微调：把感受转成具体修改
      ↓
再次运行

时钟 App 看起来简单，但它会长时间摆在桌面上。字体大小、数字间距、翻页动画，哪怕只有一点不舒服，也很容易被注意到。

所以每完成一个阶段，我都会运行起来，放到真机上看，再把问题具体地反馈给 Codex。

原稿里记下的微调点就有这些：

  • 翻页动画有没有抖动。
  • 字体大小和页面比例是否协调。
  • 菜单弹出是否自然。
  • 像素字体、边角和整体 UI 的感觉是否一致。

反馈越具体，下一轮越容易接近预期。比如，可以把“动画看着不舒服”描述成“翻页时数字的位置有轻微跳动，请检查切换前后的对齐和尺寸”。

AI 可以快速完成修改，而我需要不断观察和判断。很多体验上的细节，就是在这一轮轮运行和微调里逐渐确定下来的。

08 Pixel UI：Tiqlo 的视觉特色怎么做

Pixel UI

像素风是我想给 Tiqlo 保留的一点个性。

真正做的时候，需要一起考虑字体、边角、间距、菜单和动画。只要其中一部分风格不协调，整个界面就容易显得拼凑。

我会重点看这几个方面：

  • 像素字体：先保证时间清晰易读，再看风格是否合适。
  • 边角处理：边框、圆角或阶梯状边角，需要有一致的视觉逻辑。
  • 布局留白：时间是主角，装饰不能抢走注意力。
  • 菜单和设置：主界面之外的控件，也要和整体风格衔接。
  • 动态效果：静态截图看着顺眼之后，还要检查切换和动画的实际观感。

Tiqlo 同时保留了常规风格和像素风格。对于像素风，我更在意的是：它能不能在保持时钟清晰、好用的前提下，让人觉得有一点趣味。

这也需要回到前面的循环里，放到真机上反复看，逐项微调。

09 Landing Page：把项目变成一个真正的产品

产品落地页

App 做完后，我还给 Tiqlo 做了一个 Landing Page，并部署到 Cloudflare。

产品页地址：tiqlo.link。

有一个独立页面，就可以集中介绍产品、展示界面，并给用户一个明确的下载入口。分享项目的时候，也有一个方便打开的地址。

这部分需要整理的内容包括：

  • 文案：一句话讲清楚 Tiqlo 是什么，再介绍核心功能。
  • 配图：展示实际界面，让用户直观看到常规风格和像素风。
  • 域名和部署：给产品一个固定入口。
  • 多语言内容：让不同语言的用户都能看懂介绍。
  • Clock Web App：提供网页时钟体验入口。

做到这里，需要考虑的事情已经从“功能写好了吗”，延伸到了“用户怎么认识它、体验它、下载它”。

10 TestFlight → App Store

上架苹果店

接下来就是发布。这次非常顺利一把就过了，提交完第4天审核，当天就过。

提交的资料也是 gpt 帮我写的，我直接复制填表。

这一阶段除了检查功能，还需要准备图标、启动页、商店截图、产品描述和隐私信息。可以把准备工作按下面的顺序梳理：

开发完成
  ↓
真机测试
  ↓
App Icon / Launch Screen
  ↓
App Store 截图和描述
  ↓
隐私信息
  ↓
TestFlight 测试
  ↓
提交审核
  ↓
正式发布

到了 TestFlight 阶段，重点是用接近正式发布的版本走一遍完整体验，检查有没有遗漏的问题，再进入商店审核。

商店里的介绍也要和 App 的实际表现对应。截图展示什么，文案承诺什么，用户安装后就应该能找到相应的体验。

Tiqlo 最终上架了 App Store。从最初想给旧手机找个时钟，到现在有一个可以下载、可以分享的产品，这个流程才算完整走通。

关于具体的上架操作，可以参考我的课程：Flutter 上架指南：Apple Store、Google Play。

11 我对 Vibe Coding 的理解

做完 Tiqlo，我对 Vibe Coding 的理解更具体了一些：用 AI 缩短想法到可运行结果之间的距离，再通过自己的体验和判断，把产品一点点做好。

在这套工作流里，GPT 帮我整理想法和需求，图片或 HTML 原型帮我快速看方向，Skills 固定工程规则，Codex 完成功能开发。

而我需要持续做决定：哪些功能值得做，当前效果是否满意，哪里需要调整，以及什么时候可以发布。

AI 让尝试变快了，但产品的取舍和体验判断，还是要自己投入时间。尤其是这种每天都会看到、用到的小工具，很多细节只有真正用起来才会发现。

对我来说，这也是做 Tiqlo 最有意思的地方：从自己的一个小需求出发，边做边体验，最后做出一个自己愿意使用的产品。

感谢阅读。如果你也在用 Vibe Coding 做产品，欢迎在评论区聊聊你的工作流，或者给 Tiqlo 提点建议。

关键词：Codex, Flutter, Vibe Coding, AI Coding, AI 编程, Flutter App, 独立开发, Pixel UI, 像素风 UI, Tiqlo

本文链接：https://ducafecat.com/blog/flutter-vibe-coding-tiqlo-codex

猫哥作品

flutter 学习路径

© 猫哥
ducafecat.com

end

posted @ 2026-09-14 15:15  ducafecat  阅读(2)  评论(0)    收藏  举报