# GUI and LLM coding

AI 無法幫你做你不會的事，他只能加速你已經會的事。

Goal: keep add new feature O(1)

---
title: MVVM from user
---
flowchart
	n1["View"]
	n2["ViewModel"]
	n1 --> n2
	n2
	subgraph s1["model"]
		n4["service"]
		n3["repository"]
	end
	n3
	n2 --> n3
	n3 --> n4

* 同層可互連
* view 可連 不同的 viewModel
* 至少目前可以。

---

* why
* 精確
* UI 是2D，文字描述不精確
* Wireframe 不精確
* 很容易在**錯誤的層級實現**
* GUI天生就很多層
* 在那一層實現，很多時候是看場景的上下文，甚至主觀。
* --> 架構直接亂掉。
* 測試覆蓋力有限
* feature, widget, integration test
* mocking 導致被繞過。
* e.g. GUI 開啟一個檔案。
* GUI 狀態管理本就複雜
* 審核AI代碼非常重要
* 迭帶次數 反比 開發速度

GUI 目前的最大問題是精確度。畫面很難用文字描述，wireframe 已經比文字費時很多。精度不到真UI，還是有誤差。

有 wireframe，一樣難表達交互, 動畫。

很多邏輯習以為常，甚至不知道要敘述。

容易變成鼓勵 先講大概，LLM 做一版，再 迭代 prompt，這讓速度大受限制。因為這讓確認的次數爆增。

---

而且改壞掉的機率也大增，就算 widget 本身有 test，widget 的連動也只有e2e能確認，而 e2e 不可窮舉。UI code 特性上一點差異，就會完全不同。

是否加入 widgets 之間的 test，去測連動性？感覺沒完沒了，只是增加測試速度，GUI volatile 天生繼承。

e.g. kIsWeb 可以放在這 N 層的任意一層，最常是只放在 View。但如果要抽象成不同平台的不同行為，也可以考慮 repository。

## 開發流程

以下是目前**實驗**出來的流程。

---
title: workflow of hierarchy BDD on MVVM
---
flowchart LR;
	n1["user story"]
	n2["use cases"]
	n3["UI use cases(UUC)"]
    n7["wireframe"]
    n8["view_sketch"]
	subgraph s1["MVVM"]
		n4["model"]
		n6["viewModel"]
		n5["view"]
	end
	n1 --> n2
	n2 --> n3
    n8 --> n3
	n2 --> n4
	n7 --> n8
    n8 --> n5
	n4 --> n6
	
	n5 --> n6
	n4 -.-> n2
	n1 --> n7

	n3 --> n6
	n6 -.-> n3

	n3 --> n5
	n5 -.- n3

use cases 和 wireframe 其實更像是相互依賴。wireframe 需要基於 use case 場景。 use case 需要 follow 良好 UX，並確保 UI 能夠滿足假設的場景。

魔改 BDD，加入 UI use cases。否則單靠 use cases，LLM 很難想像要如何 wire up UI 和 repo。UUC 也是 widget test，形成 loop 有利 LLM iteration。

突破兩倍的上限，達到4X 是 ok。