2026和AI一起寫程式： Cursor 實作 1 - image viewer app by using kotlin multiplatform

7月 11, 2026

2026和AI一起寫程式： Cursor 實作 1 - image viewer app by using kotlin multiplatform

前篇：2026和AI一起寫程式 - 實戰篇 - 2 再談和 AI 協作軟體開發 - AI 團隊定義建立

前篇是二月時做的, 經過這快半年, 變化很大;

Cursor 也被 SpaceX 用 600 億美元購買 - TechOrange 新聞鏈結

而最近 SpaceXAI 推出 Grok 4.5, 可以在 Cursor 上使用

https://cursor.com/zh-Hant/blog/grok-4-5

於是興起測試 Cursor 的念頭

===

先說感想, 結果真的令人驚艷, 的確可以人完全不用寫程式, 全交給 AI 去做;

看來和 AI 一起寫程式, 可以改成讓 AI 自己寫程式了...

底下這張圖是我請 AI 從我原本的程式, 改寫出一個簡單的圖片瀏覽程式, 所用的測試圖;

從和 Cursor AI 對話的過程中可以發現，AI 它會去編譯和執行看看有沒有問題, 正確時才交付結果; 而且因為不是從完全新的程式, 而是改寫我的程式, 這表示 AI 它得先了解我原本大致的程式架構;

另外因為我的 Cursor 是免費版的, 所以其實模型無法選到 Grok 4.5, 而是用它比較基礎的模型 Composer 2.5 Fast, 這表示頂尖的大模型的能力比這更強 !

不過真的很花 token, 光做這ㄧ個, 就花掉我免費版贈送的 28%, 得一個月後才會重置...

實作流程紀錄如下：

===

1. 先在 Github 上建一個專案

一開始下載設定 Cursor 後, 會有和 Github 的連結環節設定; 我先設定了一個 repository 給 Cursor : https://github.com/neojou/test-cursor

用以前 kotlin multiplatform 經驗, 從以前專案搬了些基本的檔案, 在 IDEA 下可執行

PS: IntelliJ IDEA 也出新版了

PS: 很久沒跑, 有些地方都快忘記, 記錄一下：

(1) gradle 用 9.1 版

% ./gradlew --version
% ./gradlew wrapper --gradle-version=9.1.0

(2) IDE 內執行可以用 grade 的這指令：gradle :composeAPP:run

2. Cursor 裝好後, 在左上角會有個 Settings 選項：

目前有些模型, 但我是先用 Hobby 免費方案, 很多收費的或許不能用？

https://cursor.com/zh-Hant/pricing

https://cursor.com/cn/docs/models-and-pricing

3. 因為之前沒用過 Cursor, 想想既然是 AI, 乾脆直接問它該怎麼做：

選到 Ask :

直接問：“我是 Cursor 的初學者, 第一次使用 Cursor; 我有建立一個 project repository , test-cursor, 採用 kotlin multiplatform 架構, 執行時會簡單在 macbook 上開一個視窗, 顯示 test cursor 文字; 想將這程式改成像預覽程式, 可以開圖片檔並顯示圖片; 這在 cursor 上要如何操作? "

還不錯, 真的會回答, 但也花掉我 9% ...

== 回答如下, 先記錄起來 ==

你的 test-cursor 專案在 /Users/neojou/Github/test-cursor，是 Kotlin Multiplatform + Compose Multiplatform，macOS 桌面版會開一個視窗，目前主要 UI 在 TestCursor.kt，只顯示 "Test Cursor" 文字。

下面分兩部分：在 Cursor 裡怎麼操作，以及程式大概要改什麼。

一、在 Cursor 裡的操作流程（初學者版）

1. 開啟專案

開啟 Cursor
選 File → Open Folder…（或 Cmd + O）
選 /Users/neojou/Github/test-cursor
左側檔案總管會看到 composeApp/、build.gradle.kts 等

2. 先熟悉專案結構

和你這次改動最相關的檔案：

檔案	用途
`composeApp/src/desktopMain/.../Main.kt`	macOS 桌面程式進入點，建立視窗
`composeApp/src/commonMain/.../App.kt`	根 UI，初始化後顯示主畫面
`composeApp/src/commonMain/.../TestCursor.kt`	目前主畫面，只顯示文字

3. 用 Cursor 請 AI 幫你改（建議用 Agent 模式）

你現在是 Ask 模式，AI 只能回答、不能改檔案。

要真的改程式，請：

切到 Agent 模式（聊天面板上方，或 Cmd + . 切換）
在聊天框用中文清楚描述需求，例如：

請把 test-cursor 改成圖片預覽程式。在 macOS 桌面版可以： 1. 按「開啟圖片」按鈕選取本地圖片（jpg、png 等） 2. 在視窗中顯示選到的圖片 3. 若還沒選圖，顯示提示文字專案路徑：/Users/neojou/Github/test-cursor

AI 會提出修改方案並改檔案
右側或 diff 視窗逐段檢視，確認後 Accept
在終端機執行桌面版：

cd /Users/neojou/Github/test-cursor
./gradlew :composeApp:run

4. Cursor 實用快捷鍵

快捷鍵	功能
`Cmd + L`	開啟 Chat
`Cmd + I`	開啟 Composer / Agent
`Cmd + P`	快速開檔案（例如輸入 `TestCursor.kt`）
`Cmd + Shift + P`	命令面板

5. 和 AI 協作的小技巧

@ 檔案：在聊天輸入 @TestCursor.kt，讓 AI 鎖定該檔
分段改：先說「加開檔按鈕」，再說「加圖片顯示」，比一次講一>大段容易成功
出錯時：把終端機錯誤訊息貼回聊天，請 AI 修正

二、程式上要改什麼（概念說明）

目標是像 macOS「預覽程式」：選檔 → 顯示圖片。在 Compose Desktop 上大致需要：

1. 選檔（Desktop 專用）

「開啟檔案」是平台相關功能，通常放在 desktopMain，用 expect/actual 或直接在 desktop 實作：

用 java.awt.FileDialog 或 JFileChooser 選圖
回傳檔案路徑給 UI

2. 讀取並顯示圖片

在 TestCursor.kt（或新的 ImageViewer.kt）：

用 remember { mutableStateOf<ImageBitmap?>(null) } 存目前圖片
讀檔後轉成 ImageBitmap（例如 Skia 的 Image.makeFromEncoded）
用 Compose 的 Image(painter = BitmapPainter(bitmap), ...) 顯示

3. UI 大致長這樣

┌─────────────────────────────┐
│  [ 開啟圖片 ]                │
│                             │
│     ┌───────────────┐       │
│     │   顯示的圖片   │       │
│     └───────────────┘       │
│                             │
│  或：「請選擇一張圖片」       │
└─────────────────────────────┘

4. 你現有程式會怎麼接

目前 App.kt 初始化完成後會呼叫 TestCursor()：

            AppInitState.Ready -> TestCursor()

TestCursor.kt 現在只有文字，這裡最適合改成圖片預覽 UI。

三、建議的實作步驟（給 Agent 模式用）

若你切到 Agent 模式，可以依序請 AI 做：

Step 1：在 desktopMain 加 openImageFile(): String?（檔案選擇器）
Step 2：加 loadImageBitmap(path: String): ImageBitmap?（讀檔）
Step 3：改 TestCursor.kt — 按鈕 + 圖片顯示 + 空狀態提示
Step 4：執行 ./gradlew :composeApp:run 測試

四、進階（之後可加）

拖放圖片到視窗
支援縮放、適合視窗大小
支援多種格式（jpg、png、gif、webp）
用選單列 File → Open 開檔

總結

你想做的事	在 Cursor 怎麼做
開啟專案	File → Open Folder → 選 `test-cursor`
讓 AI 改程式	切到 Agent 模式，描述「圖片預覽、可開本地圖片」
執行測試	終端機跑 `./gradlew :composeApp:run`
只問問題、不改檔	維持 Ask 模式（你現在就是）