你是否也有過這種困擾：想找一個好用、順手的語言學習工具？網路上 App 很多，但每個都少了點什麼，總是沒辦法完全符合自己的使用習慣。

以我自己為例，我想背日文單字時，用過不少單字卡（flashcard）App。大多數的流程都是：你先輸入問題，翻面後顯示答案。但背日文時，我常常需要同時背漢字和平假名，用一般的單字卡 App，通常得拆成兩張卡，但理論上應該一張卡片就可以了，然後讓那張卡片支援兩種測驗方式就好。

再比如學文法，我也希望能用不同角度來練習：只看文法記中文、在例句中把文法挖空做填空、或把文法高亮起來，考我整句的意思。這種「依照自己的學習方式客製化」的需求，市面上的軟體通常卻很難做到。

幸運的是，現在 AI 發展得很快。你可能聽過 ChatGPT、Gemini，而在「vibe coding（氛圍程式開發）」這條路上，像 Codex、Claude Code 這類工具，能讓你用對話的方式快速做出 App 原型。就算你不會寫程式，也可以先把需求講清楚，讓 AI 先做出一個能跑的版本，再透過來回對話逐步修到你想要的樣子。

在這篇文章裡，我會分享我怎麼用 AI 工具打造一個「完全符合自己習慣」的日語學習 App，有了自己專屬的學習工具之後，學習也變得更有效率了！

app demo

AI 工具

先介紹一下我們可以使用的 AI 工具。大部分的人都可能用過 ChatGPT 或 Gemini 之類的 AI 聊天工具，而這邊要介紹更偏向「寫程式」的 AI 工具，例如 Codex 和 Claude Code，它們也被稱為 AI coding agent（AI 程式開發代理專員）。

和一般聊天型助理不同，AI coding agent 的功能是實際幫你動手做事，像是改文件、改程式碼、執行一些系統命令等等。對於開發者來說，可以拿來新加功能、修 bug、建立新系統等等；對於不寫程式的人（例如設計師、建築師、語言學習者等），我們也可以讓它來幫我們寫程式，像聊天一般地告訴 AI 你的需求，讓它來進行開發。這種行為也稱為 vibe coding，你只需要用自然語言告訴 AI 要做什麼樣子的程式，再透過對話反覆調整，直到程式最終變成你想要的樣子。整個過程中，你幾乎不需要親手寫程式碼，甚至不需要去檢閱或理解程式碼。

光是這樣描述可能單純覺得很神奇，並且不太好想像，所以接下來我們可以來進行實作看看。

Claude Code

不管是 Codex 或 Claude Code 都可以進行 vibe coding，這邊我就只以 Claude Code 來做示範，因為 Claude Code 目前有支援 macOS 和 Windows 的桌面應用程式，對非開發者會比較友善。至於開發者，可以直接選擇使用終端機 CLI 的版本就好。

首先你會需要建立一個 Claude 帳號，並且訂閱 pro 或 max 方案，然後進入 Claude 的桌面應用程式下載的頁面，根據你的作業系統來下載正確的版本。

下載好 App 之後，進入「Code」的畫面（應用程式主畫面上方可選），在中央的文字輸入框左下角可以選擇要使用的專案資料夾。此時你可以建立一個新的資料夾，為了接下來教學方便，你可以就命名為「japanese-app」，然後在輸入框中輸入一些提示詞，感受一下 Claude 的威力，例如「幫我生成一個簡單的日語學習 App」。

但是如果一切就這麼簡單的話，我們就想得太美好了對吧？你可以先稍微玩一下 Claude，看看這樣叫 Claude 幫你生出一個 App 會發生什麼事情。但我們可以預見效果大概不會太好，所以接下來我會告訴你，要如何讓我們的日文學習 App 變得跟我們想像中的一模一樣。

Claude Code example

打造一個日語學習 App

建立計畫

當我們把 vibe coding 的工具裝好之後，就可以開始用 AI 來進行程式開發。在這個過程中，你會不會寫程式不一定是最重要的事情，反而是你心中有沒有一個清楚的產品框架會更關鍵。

你會更像是一個產品經理，先想好功能清單、每個畫面大概長怎麼樣，以及希望使用者怎麼操作、得到什麼互動體驗。這些越清楚，後面越省事。

這邊我會建議你先寫下一份產品規格書或規劃書。比方說，以我想做的日語學習 App 來說，我會先列下幾個最核心的需求：

  • 這個單字 App 要能讓我背單字，而且要支援兩種出題方式：用日文漢字考中文、用平假名考中文。
  • 這個 App 也要能練文法，並提供多種測驗模式，例如：只看文法記意思、例句文法填空、例句文法高亮等。
  • 操作體驗要接近市面上常見的學習 App。
  • 這個 App 要能建立並管理自己的資料庫。

以上是最基本的規格，你也可以針對視覺與互動體驗寫得更明確。比如你希望整體風格是亮色系或暗色系、卡片風格偏可愛或偏簡潔。這類指示越清楚，AI 通常越容易做出你喜歡的結果。

一開始的規格書會非常重要，因為它就像是在幫建築打地基。今天你如果只打算蓋小房子，那地基自然不會為高樓大廈做準備，但如果你一開始就把地基打好，後面要加蓋、要擴充才會順。

因此，一開始的功能與需求想得越明確越好，避免之後要大幅度重構。不是說不能改，但通常會變得很沒效率，程式架構也更容易變得混亂、出錯。

舉例來說，我在開發這個 App 時，規格書如下。我原文用英文寫，這邊使用 GPT 翻譯成中文方便大家理解。使用 AI 時可以用中文或英文，但一般來說用英文會比較精確，因為 AI 的原始資料大多是英文。

我想做一個用來學習日文的單字卡（Flashcard）應用程式，類似「Quizlet」這樣的 App。
請先把開發計畫寫成 plan.md。
另外請告訴我是否有遺漏的地方，並提出需要釐清的問題。

## 基本需求

- 純 Web App，使用 React 開發
- 所有 JSON 資料都放在 data 目錄中，可以使用 category 或 level 來篩選資料集
- 需要基本的記憶演算法與洗牌機制
- 將學習進度儲存在瀏覽器儲存空間中

## 日文單字（Japanese Vocabulary）

用於學習與測驗單字。

資料格式為 JSON，如下：

{
    "name": "name of dataset",
    "category": "vocabulary",
    "level": "N3",
    "data": [
        {
            "id": "xxx",
            "japanese": "株式",
            "hiragana": "かぶしき",
            "simple_chinese": "股份",
            "full_explanation": "...."
        }
    ]
}

每筆資料可進行以下測驗方式：

- 只顯示日文漢字 -> 答案為中文
- 只顯示日文平假名 -> 答案為中文
- 顯示中文 -> 答案為日文（完整解釋為選填）
我可以選擇測驗時使用漢字或平假名。

## 文法（Grammar）

用於學習與測驗文法。

資料格式為 JSON，如下：

{
    "name": "name of dataset",
    "category": "grammar",
    "level": "N3",
    "data": [
        {
            "id": "xxx",
            "japanese": "うちに",
            "simple_chinese": "在～過程中／趁～",
            "full_explanation": "some example sentences..."
        }
    ]
}

測驗方式包括：

- 只顯示日文文法 -> 答案為簡體中文
- 顯示包含文法高亮的例句 -> 答案為簡體中文
- 顯示簡體中文翻譯 -> 答案為日文（完整內容為選填）
- 顯示例句但將文法部分挖空（移除測驗部分），並顯示中文翻譯 -> 答案為日文（完整內容為選填）

注意到，我的規格書裡會刻意包含一些比較細的技術規範，例如要使用 React、而且必須是一個純前端（pure front-end）的 Web App。這類要求通常是有一點開發經驗的人才比較知道怎麼描述，如果你完全不會寫程式，也可以先跳過技術細節，但 AI 產出的方向就可能比較不可控。

比方說你只說「我要做一個背單字的 App」，AI 可能會以為你要做 iOS 或 Android，就算是 Web App，也可能幫你生出需要後端與資料庫的架構。以我這個例子來說，因為我希望它可以直接放到網路上，不需要額外架設伺服器，所以我會特別強調要做成純前端 Web App。

另外我也指定使用 React，因為之後如果我想自己微調程式碼或讓 AI 改，都會比較簡單一點。

對於完全沒有程式背景的人來說，我建議你可以先跟 ChatGPT 聊聊，把你想要的 App 的輪廓描述清楚，請它跟你討論、釐清需求，順便補一些必要的技術概念。你不需要學得很深入，只要大概懂一些核心差異，就足以寫出一份更清楚的規格書。

同時你也要事先想多一點，例如我們要打造一個日語學習的 App，代表我們需要放入學習資料，所以我們也得先想好之後放入的資料格式該長怎樣，如果你什麼程式概念都不懂，你可以參考其他商業軟體是怎樣讓一般使用者操作的，像是你可以模仿 Anki 的資料作法，定義 CSV 或 TXT 格式的檔案，而這邊我採用比較「geek」一點的 JSON 格式，該格式為一般開發者常用的資料型態。

現在你可以打開任何文字編輯器（Word、Google 文件、筆記本都可以），把我上面的範例複製貼上，並自己動手加上一些改動，例如畫面的流程、視覺風格、測驗機制的調整等等。

讓 AI 照計畫執行

接著，你只需要把剛剛編輯好的計畫書複製貼上到 Claude Code 即可。模型建議直接選用 Opus 4.6，這個模型最貴，但表現也會最好。當我們從零開始讓 AI 寫一個程式的時候，最好用聰明一點的 AI，不然你的 App 很可能會變成海砂屋。

接著 AI 就會開始照著你的計畫書去做程式開發的規劃，你可以稍微看一下需不需要改，AI 也可能會跟你確認一些規劃的細節。

然後 AI 就會開始跑了。AI 跑的過程中會需要很多權限來進行程式開發，大部分情況下你都可以直接點同意就好。除非特別碰到要刪除檔案、讀取私密文件、或是你看到 rm 關鍵字（代表要刪除文件），你則要特別小心。不太確定的動作，你也可以反問它為什麼要這樣做，或是先查一下執行的指令在做什麼。

AI 會馬不停蹄地幫你完成計畫書的內容，過程可能會花費數分鐘到數十分鐘，完成之後它會告訴你已經結束了。此時你可以直接給提示詞：「打開 App 供我確認」，這樣就算你自己不知道怎麼開程式，AI 也會幫你打開。以我們的 Web App 來說，就會是用瀏覽器打開一個開發用的網址，然後你就會看到做好的 App 了。

例如你會看到以下的網頁：

web app example

或是你可以點 Claude Code 右上角的「preview」功能，它也會幫你開啟程式的瀏覽器視窗。

持續修改程式

接著，你可以去玩玩看你剛開發好的程式。過程中你會發現有很多地方跟你想像的不一樣：不管是你當初在寫計畫書時就沒想到的，或是 AI 在實作的時候沒有處理好甚至你在玩的過程中，也會冒出一些新的點子。總之，你會發現有很多想要改動的地方。

以我的開發經驗為例，除了原始的計畫之外，我後續加上一些功能，像是「發聲」來聽日文怎念，讓手機上也可以「滑動卡片」，或是新增「深色模式」保護眼睛等等。

這時候你就可以繼續在 Claude Code 裡面跟 AI 對話，把你想怎麼修正講清楚告訴它，AI 就會幫你一個一個完成。完成之後你再檢查它是否有做對，如此這般不斷反覆迭代，直到出現你滿意的版本。

進階學習

你可能會發現 AI 有時候會越改越爛，甚至一發不可收拾，這時候程式碼的版本控制就顯得額外重要，版本控制就像時光機器一樣，我們隨時可以回去先前的版本，然後從原本還好端端的樣子重新出發。

另外你也會發現，我們雖然開發好一個網頁程式，但你卻不知道如何放到網路上，畢竟一個網頁程式最終目標就是要在網路上公開給人用，你會需要學習怎樣將靜態網站放到伺服器上。

如何找到好的日語資料也可能會蠻重要的，可能是從網路上爬，也可能是讓 AI 生成，找到資料後還要進行一些處理、優化、自動化，並且確保資料可以被你剛剛開發好的程式使用，相信你在這過程中也會學到很多。

雖然你一開始並不會寫程式，但一旦你開始嘗試使用 AI 來寫程式之後，就會發現寫程式其實是一件很好玩的事情，而且有時候你親自下手處理程式碼，還比使用 AI 更有效率，也更有趣。此時你將會需要去學習更深入的「程式設計」，甚至程式設計以外的技能。《程式設計原來不只有寫 CODE！》會是一本很不錯的入門書。

結論

在如今 AI 發達的社會，程式開發不再是工程師的專利，任何人都有辦法利用 AI 來辦到。以前學習語言的時候，我們可以抱怨沒有環境、沒有資源、沒有工具，但時代不同了──AI 就是最好的老師，也是最好的幫手。我們能利用它學習語言，不管是問它翻譯、解釋、例句，甚至可以讓它幫我們打造專屬的學習軟體！

不只是語言學習，其實 AI 可以應用在各行各業的任何地方：一個幫你分析股票的軟體、一個幫你記帳的工具、一個幫你處理文件的腳本，全部都可以讓 AI 來辦到。本文的方法適用於任何你想得到的場景！

「日語學習卡」成品分享

大家可以實際去看一下「日語學習卡」的成品，該程式免費公開給所有日語學習者使用，原始碼也完全公開，甚至原始的開發計畫書都在 repo 裡面，你也可以看 commit 紀錄來了解我過程中是如何開發的。

我會持續更新此軟體，資料的部分，目前我只處理好 N5-N3 的詞彙部分。

我將「日語學習卡」嵌入在本文中（iframe），所以你可以直接在這邊玩玩看，但手機的讀者比較建議點連結開新的分頁體驗。

日語學習卡：