小咖啡廳自己做耳掛包印刷檔產生器：從零搭建 AI Agent 工作流程

一位開咖啡館的好朋友，看完我做的耳掛包封面產生器，傳來一句話。

「感覺我也需要。」

每一批豆子，都有自己的名字、產區、焙度、風味、烘焙日。每一次換豆，封面就要重排一次。客人想要客製一款給公司、給婚禮、給活動，又是一整輪的排版、校字、對尺寸、送印。

小店沒有設計部。

排版的人，通常就是烘豆的人，也是回訊息、出貨、記帳的那個人。

這篇寫給他，也寫給每一間有同樣困擾的小咖啡廳。我會用那台耳掛包印刷檔產生器當例子，從安裝工具開始，一步一步講怎麼搭起自己的 AI agent 工作流程。文章最後，有可以直接貼給 agent 的分段指令，照著做，就能做出你自己品牌的產生器。

01成果展示：大杯居的耳掛包封面產生器

先看成品，比較好想像要做到哪裡。

這是大杯居自己在用的產生器。每一批豆子只要填五樣資料：豆名、烘焙程度、風味關鍵字、一兩句說明、烘焙日。

填完，右邊的預覽立刻跟著變。正面是品牌與豆名，背面是風味、說明、賞味期與法規欄位。

設計上有幾個刻意的選擇：

• 品牌與法規欄位鎖死。品牌句、法規小字、QR code 都是寫死在程式裡的常數，填表的人改不到，不會有人不小心把品牌文案改掉。
• 只有會變的資料開放填寫。豆名、焙度、風味、說明、日期，每批不同，才讓人填。
• 日期自己算。只填烘焙日，賞味期與有效日期由程式推算。
• 風味決定圖騰。第一個風味關鍵字對應到一組型染圖騰，換豆子，封面的圖案跟著換。
• 字大、好讀。袋子的讀者包含長輩，豆名、焙度、日期都挑最大的字級排。

按下匯出，正反兩面各產生 PDF、AI、SVG、PNG 四種格式，打包成一個 ZIP。PDF 給印刷，AI 給習慣用 Illustrator 的人，SVG 與 PNG 給其他軟體或網路用。

整個產生器是一個純靜態網頁，所有排版都在瀏覽器裡完成，不需要伺服器，也不會把填寫的資料傳到任何地方。

封面上那兩款豆子，都是大杯居現在正在賣的豆子。

看看大杯居的咖啡豆與耳掛包

02先懂架構：你、規則、agent、工具

動手之前，先花五分鐘看懂整套東西怎麼運作。這一章看懂了，後面每一步都會變得很好理解。

聊天 AI 和 agent，差在一雙手

多數人用 AI，是在網頁或手機上跟它聊天。問一個問題，它回一段答案。要把答案變成東西，還是得自己複製、貼上、打開軟體。

agent 在你的電腦上工作。它可以打開資料夾裡的檔案、修改內容、在終端機下指令、跑程式，看到執行結果不對，自己回頭改，再跑一次。

所以你交給 agent 的是目標：做到什麼樣子、怎樣算完成。步驟由它排，你負責驗收。

四層架構

四層裡面，模型最容易被換掉，每隔幾個月就有新版本。規則與記憶留在你自己的資料夾裡，換模型、換工具，照樣接得上。

值得花時間經營的，是第二層。

03Claude Code 與 Codex 的角色

Claude Code 是 Anthropic 的 agent，Codex 是 OpenAI 的 agent。兩個都在終端機裡工作，能力很接近，選一個開始就好。

我自己的分工是這樣：

• Claude Code 是主線：需求討論、規劃、寫程式、驗收、部署，大部分在這裡完成。它能同時派出多個子 agent 分頭做事，也能在動手前先把整份計畫攤開給我批准。
• Codex 是第二位同事：負責生圖（這篇文章的插圖就是 Claude Code 叫 Codex 畫的），以及在 Claude Code 用量額度用完時接手。

兩個工具讀的是不同名稱的規則檔，但可以讓它們讀同一份內容：

04安裝：準備工作環境

需要準備的東西：

步驟 1：打開終端機

步驟 2：安裝 Node.js 與 Git

xcode-select --install

winget install --id Git.Git -e --source winget

裝完之後關掉終端機、重新打開，輸入下面三行，每一行都印出版本號就代表成功：

node -v
npm -v
git --version

步驟 3：安裝 agent

兩個選一個。要兩個都裝也可以。

curl -fsSL https://claude.ai/install.sh | bash

irm https://claude.ai/install.ps1 | iex

curl -fsSL https://chatgpt.com/codex/install.sh | sh

powershell -ExecutionPolicy ByPass -c "irm https://chatgpt.com/codex/install.ps1 | iex"

步驟 4：註冊 GitHub 與 Cloudflare

這兩個帳號由你自己在瀏覽器註冊、登入。之後 agent 需要部署時，會跑一個登入指令，瀏覽器跳出授權頁，由你本人按下同意。密碼從頭到尾不經過 agent。

步驟 5：讓 agent 幫你檢查

打開 agent，貼上這一段：

請用唯讀指令檢查這台電腦的開發環境，不要安裝或修改任何東西：
1. 作業系統與版本
2. node -v、npm -v、git --version 的結果
3. 目前所在的資料夾路徑
把結果整理成一張表。缺少的項目，告訴我官方下載頁網址，由我自己安裝。

05建立工作流程骨架

工具裝好了，接下來替 agent 準備一個會延續的大腦。全部是資料夾和文字檔。

06實戰：用 agent 做出耳掛包產生器

先被問清楚，再寫規格

我給 agent 的第一句話很簡單：「幫我做一個耳掛包封面的產生器，每批豆子換資訊，其他版面鎖死。」

它沒有馬上開始寫。它先一組一組地問：袋子實際尺寸多少？印刷用什麼機器、收什麼檔？法規要標哪些欄位？哪些資料每批不同？哪些東西刻意不做？

問完，它把答案整理成一份規格：目標、做什麼、不做什麼、怎樣算完成、出錯了怎麼退回。我讀過、說批准，它才動手。

返工最多的地方，幾乎都是一開始沒講清楚的地方。被問清楚的那十分鐘，常常省下後面好幾個小時。

開發過程中的三次查證

做的過程裡，有三件事特別能說明 agent 該怎麼工作。

分段指令包

下面分成七段，一次貼一段。這一段做完、你親自確認沒問題，再貼下一段。每一段都要求 agent 先給你看計畫，你批准才動手。

你是我的 AI 工作流程建置助理。這一段只做訪談：不要建立、修改或刪除任何檔案，也不要安裝任何東西。

我的背景：我經營一間小咖啡廳，自己烘豆，想做一個「耳掛包封面印刷檔產生器」：每一批豆子只要填資料，就能產生可以直接送印的正反面封面檔案，品牌與法規欄位固定不變。

請照下面的方式訪談我：
1. 一次只問一組問題（2～4 題），每題附 2～4 個選項讓我挑；有建議的選項排第一並說明理由。
2. 能用唯讀指令自己查的事（作業系統、已安裝的工具與版本），先說要跑什麼指令，再自己查，不要問我。
3. 要問清楚的事：
   - 品牌素材：Logo 檔案格式、品牌名稱與標語、指定字型與配色
   - 袋子：成品尺寸（公釐）、正反面、封邊與安全範圍
   - 每批會變的資料：豆名、產區、處理法、焙度、風味、說明、烘焙日，還有哪些
   - 固定的資料：法規標示欄位、聯絡資訊、QR code 要連到哪裡
   - 印刷：自己用印表機印還是送印刷廠、需要哪些檔案格式、是否需要出血與裁切線
   - 誰會使用這個產生器、在電腦還是手機上用
   - 刻意不做的事
4. 訪談結束，整理成「需求摘要」（條列，500 字以內）給我確認。我說確認之前，不要進下一步。

請在目前資料夾建立工作流程骨架。先列出要建立的檔案與每個檔案的完整內容草稿，我說「批准」才建立。

1. AGENTS.md（所有 agent 共用的規則正本），至少包含：
   - 一律用繁體中文回覆。
   - 改檔、安裝軟體、刪除檔案前，先說明要做什麼、影響哪些檔案、出錯怎麼還原，等我批准。
   - 價格、規格、法規、軟體功能，一律查官方來源，附網址與查證日期；查不到就說查不到。
   - 能用指令、檔案、官方文件完成的事，不要改用看螢幕點按鈕。
   - 密碼、API 金鑰、登入權杖不寫進任何檔案，也不要求我貼到對話裡。
   - 部署上線、傳訊息給任何人、刪除資料，最後一步由我自己執行或明確批准。
   - 做完一件事，先實際驗證（跑測試、打開檔案、量尺寸），回報時說清楚驗證了什麼。
   - 發現的問題與解法寫進 memory/，並更新 memory/MEMORY.md 索引。
   - 事情做到一半要暫停，在 records/ 寫接續紀錄。
2. CLAUDE.md：內容只有一行 @AGENTS.md。
3. memory/MEMORY.md，並把上一段的需求摘要存成 memory/requirements.md。
4. records/README.md：接續紀錄格式（目的、進度、下一步、碰過的檔案、決定與理由）。
5. .agents/skills/ 空資料夾。
6. 初始化 git，建立 .gitignore（排除 node_modules、輸出檔、任何 .env 與金鑰檔），做第一次提交。
完成後列出資料夾結構，並確認 CLAUDE.md 只有那一行。

讀 memory/requirements.md，寫一份 docs/spec.md 規格文件，這一段只寫文件、不寫程式。

規格要包含：
1. 版面：正面與背面各一張版面圖說（用文字加座標描述即可），單位一律公釐，標出成品尺寸、出血、安全範圍、每個元素的位置與最小字級。
2. 欄位表：每個欄位是「固定」還是「每批填寫」、字數上限、超過上限時怎麼處理（縮字級、換行、或提示使用者精簡）。
3. 法規標示：依我販售的產品，查《食品安全衛生管理法》第 22 條與衛生福利部食品藥物管理署的官方說明，列出包裝上必須標示的項目，每一項附官方網址與查證日期；不確定是否適用的項目標明「需要人工確認」，不要自行判斷。
4. 輸出格式：PDF（送印用，文字轉外框、嵌入正確尺寸）、AI（說明現代 .ai 與 PDF 的關係並附官方來源）、SVG、PNG（300dpi），以及打包成 ZIP 的檔名規則。
5. 技術選擇：純靜態網頁（HTML、CSS、JavaScript，瀏覽器內完成排版，不需要伺服器、不上傳資料），選用的函式庫與授權（字型也要確認授權允許嵌入與商用）。
6. 驗收條件：列 5～8 條可以實際檢查的條件，例如「最長的豆名排得下」「PDF 尺寸量起來正確」「QR code 手機掃得到」。
7. 刻意不做的事。
寫完給我看，我批准之前不要開始寫程式。

照 docs/spec.md 做出第一個可以印的版本，範圍只到這裡：
1. 網頁表單：每批填寫的欄位，填完即時預覽正面與背面。
2. 「下載 PDF」：正反面各一頁，尺寸與 spec 相同，文字轉成外框。
3. 固定欄位（品牌、法規小字）寫成程式裡的常數，表單上改不到。
4. 寫自動測試：至少測「欄位上限的最長內容排得下或會提示」「PDF 頁面尺寸正確」。

完成後：
- 跑測試並貼出結果。
- 用本機預覽開啟，截一張填好示範資料的畫面給我看。
- 產生一份 PDF 樣張，告訴我檔案位置，由我親自打開檢查、試印一張。
- 做一次 git 提交。
我確認樣張沒問題之前，不要進下一段。

在已確認的最小版本上，一次加一個功能，每加完一個就跑測試、給我看樣張、做一次 git 提交：
1. 圖騰：依第一個風味關鍵字對應一組裝飾圖案（對照表寫成獨立的設定檔，方便之後增加）。圖案若是點陣圖要轉成向量，轉完檢查節點數量不要暴增。
2. QR code：連到 spec 指定的網址，印出後用手機實際掃描確認。
3. 日期推算：只填烘焙日，其他日期依 spec 規則自動算出。
4. 多格式匯出：AI、SVG、PNG（300dpi），與 PDF 共用同一份排版結果，逐一打開確認內容一致。
5. 打包 ZIP：正反面所有格式一次下載，檔名依 spec 規則。
6. 排版壓力測試：用我目前所有豆子的資料（我會提供清單）逐一跑一次，列出排不下或需要精簡的項目。
遇到錯誤時，先查官方文件、套件原始碼或 issue 找原因，把原因與解法寫進 memory/，不要用猜的繞過去。

把產生器部署成一個網址，讓店裡的人都能用。先給我看計畫，批准後再做。

1. 在 GitHub 建立一個私有儲存庫，把專案推上去（需要登入時，請我自己在瀏覽器完成授權）。
2. 用 Cloudflare Workers 的靜態資產（static assets）部署：查 Cloudflare 官方文件，設定 wrangler 設定檔只上傳網頁需要的檔案。
3. 執行 wrangler login 時請我自己在瀏覽器授權；wrangler deploy 之前先把要上傳的檔案清單給我看，我說「部署」才執行。
4. 部署後用 curl 或瀏覽器實際打開網址，確認頁面、字型、下載功能都正常，並在手機上測一次。
5. 如果我有自己的網域，查官方文件說明如何綁定自訂網域，一步一步帶我做。
6. 把部署方式與注意事項寫進 memory/deploy.md。

1. 把「出一批新豆子的封面」這件事寫成 skill：.agents/skills/drip-label/SKILL.md。開頭 YAML frontmatter 要有 name 與 description，description 寫清楚什麼時候使用，包含我可能會說的話（例如「出新豆子的封面」「做耳掛包印刷檔」）。內文寫步驟、驗收方式、常見問題。先給我看草稿。
   如果你是 Claude Code：另外在 .claude/skills/drip-label 建立指向正本的連結；無法建立連結時複製一份，並在第一行註明正本位置。
2. （兩個 agent 都裝好時才做）請另一個 agent 做唯讀審查：
   - 你是 Claude Code：用 codex exec 交辦；你是 Codex：用 claude -p 交辦。
   - 交辦內容：「閱讀 docs/spec.md、.agents/skills/drip-label/SKILL.md 與程式碼，只讀不改。檢查：驗收條件是否都有對應的測試、法規欄位是否都附官方來源、有沒有把密碼或金鑰寫進檔案。條列問題並附上檔案中的原句。」
   - 執行前先把完整指令給我看。拿到回報後，由你判斷哪些成立、列出建議修改，等我批准再改。

07部署：把產生器放上網路

產生器是純靜態網頁：只有 HTML、CSS、JavaScript 和字型、圖騰這些檔案，所有運算都在使用者的瀏覽器裡完成。這種網頁放在 Cloudflare Workers 的靜態資產服務上，免費方案就足夠。

08Web coding 的核心：結果導向、持續學習、追蹤出處

AI 會「幻覺」，一本正經地講出不存在的東西。這在做印刷檔這種要實際印出來的東西時，代價特別高。

我用三件事對付它：

1. 結果導向。給 agent 的目標都是能被檢查的結果：印得出來、尺寸對、QR 掃得到、法規欄位寫對、手機上不跑版。講得很漂亮但跑不起來，就是還沒做完。
2. 卡住就去學。遇到不懂的，讓 agent 去翻官方文件、套件原始碼、法規原文。前面那個字型變形的問題，就是一路追到原始碼才解開。學到的寫進記憶。
3. 追蹤出處。每一個價格、每一條規定、每一個工具能做什麼，都附上來源與查證日期。查不到的，老實說查不到。

三件事疊在一起，AI 還是會講錯，但講錯的東西過不了驗收。

09讓 agent 用指令列互相派工

Claude Code 的 claude -p 和 Codex 的 codex exec，都能在終端機下一行指令，把一件事交出去，做完就結束。

這表示一個 agent 可以叫另一個 agent 做事：

• 生圖：這篇文章第一張卡的小獅妹插圖，是 Claude Code 把畫面需求、角色外觀描述、要排除的錯誤特徵寫成提示詞檔，用 codex exec 交給 Codex 畫，畫完存進資料夾，再由 Claude Code 打開逐項比對角色。
• 互相審查：一方寫好的規格或程式，交給另一方唯讀檢查。兩家公司訓練的模型盲點不一定相同，是很便宜的第二道檢查。

10效能上的幾個發現

• 貴的模型只用在刀口上。最強、最貴的模型負責規劃與驗收；量大、規格清楚的工作，分派給便宜一點的模型同時去做。
• 長對話最花錢的是重讀。agent 每回一句話，都要把前面整段對話重新讀一遍。雖然重讀的部分有快取折扣，對話一長，每一輪仍越來越貴，後段也越容易忘記前面的細節。一件事做完就寫接續紀錄、開新對話。
• 能用指令就不看畫面。agent 也能操作瀏覽器、點按鈕，但那是最慢、最容易出錯的方式。有指令、API、網址參數可以做的事，一律先用那些。
• 自我檢查不算數。有一次我請子 agent 替一批截圖打馬賽克，它回報全部完成，我逐張打開，有四張漏遮。從此規則裡多了一條：驗收一定親自做，涉及個資、金額、要對外發送的東西，不抽查，全部看。

11安全邊界

• 密碼、API 金鑰、登入權杖：不貼進對話、不寫進任何檔案、不推上 GitHub。登入一律由本人在瀏覽器完成。
• 會碰到外面世界的動作（網站上線、傳訊息給客人、刪除資料）：agent 準備好、預覽給你看，最後一步由你執行或明確批准。
• 客人的姓名、電話、地址：不寫進規則、記憶與接續紀錄。
• 每次大改之前先用 git 提交，改壞了可以退回。

12費用

兩家都是月訂閱，用量上限以「每五小時」與「每週」的額度計算，依方案不同。

部署端：GitHub 私有儲存庫免費；Cloudflare Workers 靜態檔案請求免費且不限次數，連結 GitHub 自動建置的免費額度為每月 3,000 分鐘。

13Q&A

門檻

費用與工具

印刷

安全與維護

14最後

寫這篇的時候，我一直想像那位好朋友店裡的某個早上：新的一批豆子剛下烘豆機，他打開產生器，填上豆名、烘焙日，按一下，封面就排好了。省下來的那一個小時，他可以拿去試烘一支新豆子，或者只是好好喝一杯咖啡。

工具是為了把時間還給人。

如果你也想喝喝看封面上的那兩支豆子，歡迎來大杯居逛逛。

到大杯居選豆子

阿瑋 記於 2026 年 9 月