# 店裡週日休息，網站還寫天天營業？用 OpenCode 改公休與電話按鈕

- 網址：https://blog.valenvan.uk/posts/anomalyco-opencode.html
- 發布日期：2026-10-29
- 測試設備：Mac mini M4 Pro（12 核、64GB）
- 專案：anomalyco/opencode（https://github.com/anomalyco/opencode），MIT 授權
- 測試版本：OpenCode CLI 2.2.0；Node.js 22.23.3；opencode/flint-40b-free
- 實測影片：https://www.youtube.com/shorts/3sclyYfPeUA

## 重點摘要

- OpenCode 2.2.0以當日可用的flint-40b-free實際修改自製早餐店HTML，完成公休文字與電話按鈕兩個要求。
- 修改後營業時間為週一至週六06:00–12:00、週日公休，原來65元與55元兩份套餐文字保留。
- 七項HTML檢查通過，瀏覽器核對電話按鈕可見且點擊連結為指定tel號碼；未實際撥號。
- 本次命令執行器量到33.6秒，包含啟動及檔案差異輸出；頁面未部署，不代表任意網站都能同樣快速完成。
- **結論：** 本次自製小頁面的兩個明確修改已完成，改完仍需自行驗看。
- **適合：** 有現成靜態頁面、能指出修改文字與應保留內容並自行驗看的人
- **不適合：** 期待一句話完成正式網站部署、或不願檢視改動的人

| 實測項目 | 結果 |
|---|---|
| 文字與按鈕修改 | 2個要求完成 |
| HTML核對 | 7/7通過 |
| 套餐保留 | 65元與55元 |
| 電話連結 | tel:0212345678（示範，未撥號） |
| 命令含差異輸出時間 | 33.6秒 |
| 網站上線 | 未部署 |

店裡營業時間改了，網站卻還留著舊資訊。打開檔案，眼前是一整串標籤，連想加個「電話訂餐」都不知道該放哪裡。這次我們做了一張早餐店示範頁，讓 OpenCode 直接修改檔案，再用瀏覽器確認結果。它的用途是用自然語言交代程式修改，不是自動替店家經營網站。

## 先說這次真的做了什麼

示範頁原本寫「天天營業 06:00–12:00」，另有蛋餅加豆漿 65 元、吐司加紅茶 55 元。我們一次要求改成週日公休、加上電話訂餐按鈕，並保留原來菜單及價格。店名、電話和內容全是自製示範，沒有真實店家或顧客資料。

測試設備為 Mac mini M4 Pro（12 核、64GB），受測軟體是 OpenCode CLI 2.2.0，Node.js 為 22.23.3。當日未登入帳號的模型清單列出 `opencode/flint-40b-free`，實際執行選的就是這個模型；免費模型名單和供應情況可能改變，請先列出清單，不要照抄不存在的名稱。

![實測錄影抽格：修改前仍寫天天營業](https://blog.valenvan.uk/img/anomalyco-opencode-article_1.png)

## 安裝與準備檔案

依照[官方 README](https://github.com/anomalyco/opencode)的 npm 安裝方式，本文把版本固定成這次受測版本：

```bash
npm install -g @opencode/cli@2.2.0
opencode --version
opencode models
```

接著進入你要修改的網站資料夾。這次只有一個 `index.html`，是單純的靜態頁面，不需要資料庫或網站帳號。先留一份原檔，再交代需求；如果你用的是其他檔名，指令與提示都要一起改。

```bash
cd /你的網站資料夾
cp index.html index.before.html
```

OpenCode 會讀這個資料夾中的檔案，並不是把網頁畫面貼進聊天後再自己複製答案回去。不要先拿正式網站唯一一份檔案試手氣；這次先用副本，就是為了能比較改動前後。

## 把要改與要保留的一起講清楚

以下是本次實際提交的提示。`--standalone` 使用獨立服務；`--format json` 留下逐步工具紀錄。`--auto` 用於這次無人值守的自製示範；一般操作可以拿掉，逐次確認權限。

```bash
opencode run --standalone --auto \
  --model opencode/flint-40b-free --format json \
  'Edit index.html only. This is a synthetic breakfast shop page. Change 天天營業 06:00–12:00 to 週一至週六 06:00–12:00，週日公休. Add a visible button labeled 電話訂餐 with href tel:0212345678. Keep existing menu items, prices, heading, and style intact. Do not use subagents, network tools, packages, or shell commands. Use file read/edit tools only. Write the actual HTML file.' \
  > agent-run.jsonl
```

重點是指定檔案、寫出完整新文字、給定按鈕標籤與連結，並列明菜單價格不能動。只說「幫我改好網站」很難判斷做到什麼；這次的兩個要求則能直接回到頁面逐一核對。

## 改完別只看 AI 說完成

本次執行器量到約 33.6 秒，包含啟動、模型回應及檔案差異輸出，不能當成所有網站都能在相同時間完成。實際結果如下：

| 核對項目 | 實際結果 |
|---|---|
| 營業時間 | 更新為週一至週六、週日公休 |
| 電話按鈕 | 顯示「電話訂餐」，連結為指定的 `tel:` 號碼 |
| 兩份套餐 | 65 元與 55 元的文字保留 |
| 檔案核對 | 七項文字、標題與連結檢查全通過 |

![實測錄影抽格：公休日更新，電話按鈕已出現](https://blog.valenvan.uk/img/anomalyco-opencode-article_2.png)

我們重新開啟頁面，確認公休文字與按鈕可見，再攔截點擊事件核對電話連結，沒有真的撥電話。讀者可先在資料夾執行下面指令，再用瀏覽器開啟顯示的網址；核對完按 Ctrl+C 結束。

```bash
python3 -m http.server 8000
# 瀏覽器開啟 http://127.0.0.1:8000/
```

如果找不到模型，先重跑 `opencode models`；如果改錯檔，先確認目前所在資料夾。頁面沒變時，檢查重新整理後讀的是修改版還是備份版，別只憑模型回覆判定成功。

## 我會怎麼用

這次適合拿來參考的是「現成小頁面的明確修改」：少了一次自己尋找標籤、複製貼上的工作，結果仍由人驗看。它已完成我們的兩個要求，但這不代表網站已經上線。正式主機部署、真實電話撥號、複雜網站與其他模型，本次沒有驗證。

專案：[anomalyco/opencode](https://github.com/anomalyco/opencode)。程式授權為 [MIT](https://github.com/anomalyco/opencode/blob/35a4a6876df1f0979c1123b236bed234ca5e86d2/LICENSE)；查閱的原始碼提交為 `35a4a6876df1f0979c1123b236bed234ca5e86d2`，與安裝包版本分別記錄，未宣稱兩者完全相同。更多操作見[官方 CLI 文件](https://opencode.ai/v2/docs/cli/)與[模型文件](https://opencode.ai/v2/docs/models/)。