用户故事 · John Pavulon

“以前要花一周的事,现在两个晚上就够了。

John 很清楚 BarthMoney 应该是什么感觉。OpenDesign 在几秒内给出可直接用于生产的视觉方案 — 一个打磨过、能用的界面,可以直接带进代码。

几分钟
就有一个连贯的视觉方向可以起步
60–70%
UI 原型时间减少
几天内
把核心 UI 方向搬进 Flutter
业余时间

每一个花在挪边距上的晚上,都是产品没有推进的晚上。

John 的本职是创意方向和视觉系统,不是全职做软件。下班之后,他把这份视觉直觉用在自己的实用应用上。所以每一个小时都很金贵。

BarthMoney 起于一个明确的观点:个人理财应该让人平静、即时。John 见过的替代品要么是长疯了的表格,要么塞满广告。他想要一个专注的移动应用,记一笔当天的开销这件事可以快、清楚、不被打扰。

John 知道这个界面需要他所说的“灵魂”。难点在于把这个方向变成一套连贯、可实现的移动端 UI。一张空白的 Figma 画布,或者直接用代码写界面,都可能在颜色、间距、对齐上耗掉整晚,而产品本身一步没动。

盯着 Figma 的空白画布,或者从零用代码写 UI 布局,一个人在下班后单干时,这些都太慢了。
John Pavulon · 独立开发者
第一次突破

一句提示词,变成了一套他可以据以开工的视觉语言。

John 从这块屏幕的感觉和用途出发:“一个现代的暗色模式记账仪表盘,带分类明细。”结果不只是一个好看的仪表盘。它确立了暗色底、金色点缀、金额的层级,以及 AI 辅助录入和手动录入这两条不同的路径。

BarthMoney 交互原型的三个完整状态:仪表盘、AI 辅助的开销确认、离线快速添加
取自 John 公开的交互原型:仪表盘、AI 辅助确认、离线快速添加。
工作方法

这份稿子成了他可以据以开工的规格说明。

John 不会让某一个 agent 从头到尾把产品想出来。他给每个工具一个明确的活儿,产品决策留给自己。

01 · 意图先说清楚感觉。

这块屏幕的用途、层级、气质和约束,先用大白话写出来。

02 · OpenDesign让它看得见。

John 打磨生成的 HTML 和 CSS,直到界面有了连贯的方向。

03 · 系统把参照定下来。

组件、间距、颜色、层级,变成一份共享的视觉规格。

04 · Cursor + Flutter把产品做出来。

这套结构在 John 的代码库里变成模块化的 widget 和应用逻辑。

OpenDesign 主导界面John 主导产品
工作流依据 John 的书面自述还原。
精致界面之外

AI 是可选的。确认不是。

BarthMoney 最强的地方不是屏幕数量,而是把它们连起来的那组决策:什么时候自动化有帮助,什么时候它该让开,以及在用户还没输入任何东西之前,产品先承诺了什么。

AI 辅助

先建议,再询问。

聊天窗能识别出开销、分类和汇率 — 但最终确认权仍在用户手里。

离线优先

始终留一条直路。

Quick Add 不需要 AI、也不需要云账号就能用,因为速度和隐私比自动化的表演更重要。

首次使用

空状态本身就是一个承诺。

在还没有数据的时候,BarthMoney 就说清楚了哪些数据留在本地,并给出一个不会认错的首个动作。

多屏流程和共享状态仍然更费劲 — 而这正是 John 希望 OpenDesign 接下来能变简单的那部分。

改变了什么

稀缺的从来不是点子,是不被打断的时间。

John 估计 OpenDesign 把他的 UI 原型时间砍掉了 60–70%。一周的视觉折腾变成了两个晚上,而核心 UI 方向在最初构想后几天内就可以搬进 Flutter。

收获的不只是速度。它让一个业余时间开发者有了足够的视觉信心,不再围着界面打转,回到只有他能做的那件事:决定 BarthMoney 该长成什么样。

BarthMoney 不是孤例。John 还用 OpenDesign 做了 现在承载这些作品的个人网站 — 又一次把一个视觉方向变成具体的东西。

结论
“如果你是没有专职设计师的独立开发者或 indie hacker,OpenDesign 就是你的不公平优势。
— John Pavulon,独立开发者 · “这样你就能专心构建和交付。”
P.S. · 下班后还在做
John 本地跑的 BartX 生成器,正在做一个赛博朋克风格的落地页实验
John 的配文很简单:“我的副业项目哈哈。”本地跑着的 BartX,又一次让人看见他下班后不断做出来的那些古怪而具体的界面。
下一步

把脑子里的界面拿出来 — 直接放进构建里。

OpenDesign 免费、开源,跑在你自己的机器和你自己的 key 上。

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows