元伸科技
過去網站設計只考慮兩種使用者：人類與爬蟲。2025 年起出現第三種：AI Agent——會點按鈕、填表單、完成結帳的 AI。為這類新使用者規劃客製化網頁設計時，必須把語意化標記與表單結構同步納入考量。
ChatGPT Operator、Claude Computer Use、Google Project Mariner 三大都已上線。為 AI Agent 設計的網站，享有早期紅利；沒準備的網站，會被 AI 直接放棄並推薦競品。
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、單頁表單
不要犯的 5 個錯誤
- ❌ 用 div 做按鈕：AI Agent 找不到
- ❌ 表單沒 label：AI Agent 填錯欄位
- ❌ 用 reCAPTCHA v2：擋掉 AI Agent
- ❌ 動態載入沒 aria-live：AI Agent 看不到狀態變化
- ❌ 錯誤訊息過於模糊：AI Agent 不知道怎麼修
結語：第三種使用者需要被設計
過去網站只服務「人類」與「爬蟲」，未來要加上「AI Agent」。三種使用者各有需求，好的網頁設計師同時為三者考量。
元伸科技為客戶建置時，AI Agent 友善測試是 QA 流程的一環——用 Operator、Claude Computer Use 跑關鍵流程，確認任務完成率 90%+ 才上線。這是 2026 年起的新標準。配套追蹤可搭配 AI 引用率量化追蹤方法建立完整能見度儀表板。
