元伸科技
過去網站設計只考慮兩種使用者：人類與爬蟲。2025 年起出現第三種：AI Agent——會點按鈕、填表單、完成結帳的 AI。為這類新使用者規劃客製化網頁設計時，必須把語意化標記與表單結構同步納入考量。
跟客戶聊時最常聽到的反應是：「AI 自己操作我的網站？這還太早吧？」老實說，半年前我也這樣想；但實際用 Operator 跑了幾個客戶網站後，發現現在沒準備的網站，已經會被 AI 直接放棄並改推薦競品。ChatGPT Operator、Claude Computer Use、Google Project Mariner 三大都已上線——為 AI Agent 設計的網站，享有早期紅利。
AI Agent 與 AI 爬蟲的差別
| AI 爬蟲 | AI Agent | |
|---|---|---|
| 行為 | 讀取內容 | 操作網站 |
| 目的 | 訓練 / 引用 | 完成任務 |
| 互動 | 無 | 點擊、填表單、結帳 |
| 代表工具 | GPTBot、ClaudeBot | Operator、Computer Use |
| 影響 | 引用率 | 任務完成率 |
對網站而言，AI Agent 是新型態的使用者——要為它設計。
6 個面向 AI Agent 的設計考量
考量 1：語意化按鈕與連結
✅ 好的做法：
<button type="submit" aria-label="加入購物車">加入購物車</button>
<a href="/checkout">前往結帳</a>
❌ 不好的做法：
<div class="btn" onclick="addToCart()">加入購物車</div>
<span class="link" onclick="goCheckout()">前往結帳</span>
AI Agent 找的是 <button> 與 <a>，用 div 模擬按鈕讓 AI Agent 找不到。
考量 2：明確的表單 label
每個輸入欄位都要：
- 明確的
<label>連到for屬性 - 或
aria-label描述 - 或
aria-labelledby連到標題
<!-- 好 -->
<label for="email">Email 地址</label>
<input type="email" id="email" name="email" required>
<!-- 也好 -->
<input type="email" name="email" aria-label="Email 地址" required>
<!-- 不好 -->
<input type="text" name="field1" placeholder="Email">
AI Agent 透過 label 找對應欄位。沒 label 的表單 AI Agent 只能猜，填錯資料的機率大幅上升。
考量 3：避免 captcha 阻擋
| Captcha 類型 | AI Agent 影響 |
|---|---|
| reCAPTCHA v2（點圖片） | ❌ 阻擋 |
| hCaptcha（點圖片） | ❌ 阻擋 |
| reCAPTCHA v3（背景評分） | ✅ 通過 |
| Cloudflare Turnstile | ✅ 多數通過 |
| Honeypot 隱形欄位 | ✅ 通過 |
| 行為分析 | ✅ 通過 |
改用智慧化方案：reCAPTCHA v3 背景評分風險、Honeypot 騙 spam bot、Cloudflare Bot Management 行為分析——三者組合擋 spam 但放行 AI Agent。
考量 4：清晰的 ARIA 屬性
ARIA（Accessible Rich Internet Applications）原本是無障礙設計，現在 AI Agent 也用：
<!-- 對話框 -->
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<h2 id="dialog-title">確認結帳</h2>
<p id="dialog-desc">您的訂單總額為 NT$ 5,800</p>
<button aria-label="確認結帳">確認</button>
<button aria-label="取消結帳">取消</button>
</div>
<!-- 載入中狀態 -->
<div role="status" aria-live="polite">處理中...</div>
<!-- 錯誤訊息 -->
<div role="alert">Email 格式不正確</div>
AI Agent 透過 role、aria-* 理解元素角色，特別是動態變化的 UI（如載入中、錯誤訊息）。這部分與無障礙設計與 AI-Ready 的重疊紅利有 80% 共用標記，做一次工程兩種收益。
考量 5：單頁式關鍵流程
多步驟流程（如結帳 4 步）對 AI Agent 容易迷失：
❌ 不好（多步驟）：
Step 1: 收件資訊
Step 2: 配送方式
Step 3: 付款方式
Step 4: 確認訂單
Step 5: 完成
✅ 好（單頁）：
[結帳頁]
- 收件資訊（內嵌）
- 配送方式（內嵌）
- 付款方式（內嵌）
- [確認結帳] 按鈕
- 完成頁
或如果一定要多步驟，每步顯示明確進度與「下一步按鈕」：
<div role="progressbar" aria-valuenow="2" aria-valuemax="4">
Step 2 of 4: 配送方式
</div>
考量 6：明確的成功與錯誤訊息
AI Agent 需要回饋判斷下一步：
<!-- 成功 -->
<div role="status" aria-live="polite" class="success">
✓ 訂單已成立，訂單編號 #20260517001
</div>
<!-- 錯誤 -->
<div role="alert" class="error">
✗ 信用卡號錯誤，請重新輸入
</div>
<!-- 警告 -->
<div role="alert" class="warning">
⚠ 此商品庫存只剩 2 件
</div>
訊息要明確、文字要完整——「錯誤」太模糊，「信用卡號錯誤」AI Agent 才知道要修哪裡。這對網路購物平台的結帳流程尤其關鍵，回饋訊息差會直接被 AI Agent 放棄。
元伸測試實戰
實際拿 OpenAI Operator 跑了元伸自家網站作為示範案例：
任務：「幫我預約元伸科技 AI-Ready 顧問諮詢」
修正前（傳統設計）：
- Operator 完成率：60%（卡在 captcha）
- 平均時間：3:45
- 失敗原因：reCAPTCHA v2 阻擋
修正後（AI Agent 友善設計）：
- Operator 完成率：95%
- 平均時間：1:20
- 改善：reCAPTCHA v3、清晰 label、單頁表單
中壢一家電商客戶後來也跟著測，原本的多步驟結帳 Operator 走到一半就放棄，調整成單頁式之後，連同人類使用者的棄單率也跟著下降——這就是「為 AI Agent 設計反而讓真人更順手」的典型案例。
老闆最常踩的 5 個坑
- ❌ 用 div 做按鈕：「視覺上一樣啊」——但 AI Agent 找不到，連無障礙也掛掉
- ❌ 表單沒 label：用 placeholder 充當 label 是設計師的偷懶，AI Agent 會填錯欄位
- ❌ 堅持用 reCAPTCHA v2：「擋 spam 比較有感」——但同時擋掉 AI Agent 與真實客戶
- ❌ 動態載入沒 aria-live：loading 動畫做得很漂亮，但 AI Agent 不知道網站在做什麼
- ❌ 錯誤訊息只寫「錯誤」：講白一點，這是工程師偷懶，連客服都會接到一堆問題電話
我會建議什麼時候該優先做？
實際上看下來，這幾類網站不能拖：
- 電商與訂位平台：AI Agent 比價購物已經在發生，現在不做就是把訂單推給競品
- B2B 詢價表單：歐美買主已經習慣用 ChatGPT 代填表單，captcha 卡住就直接掉單
- 客服與支援頁：AI Agent 會代客戶查問題，找不到答案就會推薦其他供應商
除非你的網站完全沒有「需要被操作」的關鍵流程（如純展示型 landing page），否則 2026 年我會建議都要做一輪 AI Agent 測試。
結語：第三種使用者需要被設計
過去網站只服務「人類」與「爬蟲」，未來要加上「AI Agent」。三種使用者各有需求，好的網頁設計師同時為三者考量。
元伸科技為客戶建置時，AI Agent 友善測試是 QA 流程的一環——用 Operator、Claude Computer Use 跑關鍵流程，確認任務完成率達標才上線。這是 2026 年起的新標準。配套追蹤可搭配 AI 引用率量化追蹤方法建立完整能見度儀表板。
如果你想知道自家網站在 AI Agent 眼中長什麼樣，歡迎找我們聊聊測試結果。
📞 03-366-1000 ｜ 🌐 www.ozchamp.com ｜ 免費諮詢 24hr 回覆
