傾下你嘅想法
教學收藏 ／ 工餘創作筆記
CODEX 實作 · 第一部分約 8 分鐘閱讀

一段 Prompt，
先做出你的
收支 Dashboard。

不懂寫程式，也可以先把想法變成可操作的畫面。複製我們用過的 Prompt，讓 Codex 建立虛構資料示範，再由你親手測試。

作者：Rap · 示範與教學整理：

直接複製 Prompt 先看練習步驟

本篇製作本機前端原型；示範資料均為虛構，尚未建立永久儲存。

01 複製原 Prompt02 Codex 建立本機示範03 你親手測試

01BEFORE YOU START

這次，你會做出甚麼？

這是一個小生意收支 Dashboard 的本機草稿。完成後，你應看到「客戶」、「項目」、「收入」、「收據／支出」及「總覽」五個部分。你可以打開項目，看看已收款、已確認支出和收支差額，也可以從支出記錄查看虛構收據原圖。

你需要準備

一部電腦、可使用 Codex 的 ChatGPT 桌面應用程式，以及一個新的練習資料夾。

你毋須準備

程式碼、Excel、客戶名單或假收據資料。原 Prompt 已要求 Codex 建立並標示虛構資料。

首次使用 Codex，先登入桌面應用程式，再選擇一個讓它工作的資料夾；建立軟件原型時，選用 Codex 對話。介面名稱可能隨版本調整，可先閱讀 Rap3HK 的 Codex 安裝與首次設定教學，或查閱 OpenAI 官方入門說明。

兩個詞，先看懂。

Prompt 是交給 Codex 的工作指示；本機預覽 是在自己電腦上打開的測試畫面。這一步不會把 Dashboard 發布到互聯網。

02THE ORIGINAL PROMPT

複製這段已實測的 Prompt。

在 Codex 開啟新對話，將下方整段原文貼上並送出。這就是製作 Rap3HK 本機示範時使用的要求；原本的廣東話措辭保留不變。你不需要先設計資料表，也不需要重新起草指示。

RAP3HK / COPY & TRY

小生意收支 Dashboard · 完整 Prompt

你係我嘅全端開發助手。我冇 IT 底子，請用香港繁體中文同簡單廣東話解釋，但要實際建立可運行嘅示範 Dashboard，唔好只交計劃。

我想示範一個小生意用嘅收支 Dashboard，流程係：
1. 新增客戶資料；
2. 喺客戶下面新增項目；
3. 為項目填寫收入，分清「預計收款」同「已收款」；
4. 用手機選取一批支出收據相片，之後可以將每筆支出分配去相應項目；
5. 喺 Dashboard 睇每個項目嘅已收款收入、已確認支出同收支差額。

請先用明確標示嘅假資料完成前端畫面，包括「客戶」、「項目」、「收入」、「收據／支出」同「總覽」五個部分。表格和表單要方便手機使用。每個項目頁面要列出相關收入及支出，並能由支出記錄打開原收據圖片。

請先定清楚資料關係：一個客戶可以有多個項目；每筆收入屬於一個項目；每筆支出可以屬於一個項目，未能判斷時顯示「未分配」，讓我之後手動選擇。唔好靠商戶名稱自動決定支出屬於邊個項目。

總覽要分開顯示：已收款收入、已確認支出、待覆核收據、未分配支出。項目收支差額只用該項目已收款收入減已確認而且已分配嘅支出。先用 HKD，其他貨幣標示待處理，唔好直接加埋。

現階段只用假資料；唔好聲稱資料已永久保存。完成後啟動本機預覽，讓我睇到實際畫面，並列出已完成同未完成嘅功能。

原 Prompt 要求五個畫面、清楚的資料關係、嚴格分開的收支狀態，以及一個可打開的本機預覽。

03OPEN THE RESULT

等 Codex 完成，再打開畫面。

Codex 回覆時，先找三件事：它建立了甚麼、怎樣打開本機預覽，以及哪些功能尚未完成。按它提供的連結或啟動說明打開頁面。本機網址可能以 localhost 或 127.0.0.1 開頭；每次使用的數字可以不同，請以你這次任務收到的網址為準。

如果只收到計劃，還沒有畫面

在同一段 Codex 對話補充以下一句，請它繼續完成原要求：

請按原本要求完成可運行的前端示範，啟動本機預覽，並給我實際打開畫面的方法。

打開後，先確認五個部分是否齊全。名稱、顏色和金額可以與本篇圖示不同；這段 Prompt 固定的是功能與計算規則，沒有指定每筆假資料。你亦可以縮窄電腦瀏覽器視窗，先檢查手機版排版。電腦的 localhost 網址一般不能直接在另一部手機開啟。

04HANDS-ON

現在，親手試一次流程。

先使用 Codex 生成的虛構記錄練習，毋須另做資料檔。每做完一步，回到總覽或項目明細，看看畫面有沒有照預期更新。

  1. 01

    由客戶走到項目

    打開一位示範客戶，再進入其項目。確認每個項目有自己的收入與支出。想多試一步，可以新增一位虛構客戶及其項目。

  2. 02

    分清預計收款與已收款

    在「收入」找出兩種狀態。預計收款不應立即加入已收款差額。你可以新增一筆虛構的預計收入，再改為已收款，觀察總覽變化。

  3. 03

    打開收據原圖

    在「收據／支出」找一筆示範記錄，按「看原圖」核對圖片。原型內的起始收據是虛構圖片，並非真實交易證明。

  4. 04

    手動分配一筆支出

    找出「未分配」支出，打開「覆核／分配」，自行選擇所屬項目並儲存。回到總覽，查看未分配金額及項目差額有沒有更新。商戶名稱不能代你判斷項目。

  5. 05

    有安全圖片才試批量上載

    如果手上有不含個人或商業資料的測試圖片，可以一次選取多張，看看它們會否逐張成為「待覆核」記錄，再逐筆核對和分配。沒有圖片也可先完成以上核心練習。

完成檢查0 / 5 項完成

這份清單只記錄在目前頁面，方便你邊做邊核對。

05CHECK THE NUMBERS

看見數字，還要知道怎樣算。

項目收支差額只用該項目的 HKD 已收款收入，減去 已確認、已分配到該項目的 HKD 支出。例如 Rap3HK 本機示範的一個項目，已收款 HKD 36,000，相關已確認支出 HKD 6,800，差額就是 HKD 29,200。

HKD 36,000已收款收入−HKD 6,800已確認及已分配支出=HKD 29,200項目收支差額

待覆核收據不應直接計入已確認支出。已確認但未分配的支出要另列出來，不能扣減任何項目的差額。USD 等其他貨幣亦不能直接與 HKD 相加。這裏的「差額」只是原型中的簡化收支指標，不是完整會計利潤。

06WHAT THIS VERSION IS

第一版，先用來驗證想法。

Rap3HK 這次本機原型已能新增記錄、批量選相、覆核、手動分配及查看虛構收據；它仍沒有永久儲存、OCR 自動辨認、登入或外幣換算。起始資料均為虛構；重新整理頁面後，當前操作會還原。你自行生成的版本也要逐項查看 Codex 的交付說明，不能單憑畫面判斷資料已保存。

完成這篇教學的標準

你能指出五個部分、親手分配一筆支出、解釋差額怎樣計算，並知道重新整理後資料會怎樣。把想改善的地方記下來，就有具體依據規劃下一版。

完成本機草稿後，可以接著閱讀第二部分：註冊 Supabase，讓 Dashboard 登入後讀回資料。下一步會用獨立測試專案，逐項檢查資料和私人收據權限。

新手常見問題

我需要懂得寫程式嗎？

這一部分不用。你負責說清楚需求、打開成果和驗證流程；Codex 負責建立示範。遇到不明白的技術說明，可以在同一對話請它用簡單中文解釋。

我需要先準備 Excel 或假資料嗎？

不用。原 Prompt 已要求 Codex 用明確標示的假資料建立畫面，練習時先使用它生成的記錄即可。

為甚麼我的畫面與示範圖不同？

原 Prompt 定義功能和規則，沒有固定每筆假資料或每個像素。先核對五個部分、操作流程和計算結果，再把具體的視覺修改要求交給 Codex。

可以立即用來管理真實生意嗎？

這一版是本機前端示範，沒有正式的資料保存、權限及備份流程。先完成測試，再規劃真實資料如何安全地加入。

資料來源與示範範圍

Codex 入門步驟依據 OpenAI 官方 Quickstart。畫面功能、假資料計算及未完成項目依據 Rap3HK 的本機示範與原始 Prompt。每位讀者生成的畫面和金額可能不同，請親自檢查。

繼續學習：Codex 安裝與首次設定 · 遇到術語時查閱 Vibe Coding 圖鑑

返回頂部 ↑