HTML 在 AI 時代的逆襲：為什麼 Claude Code 讓我重新愛上標記語言

> Meta Shift

前端工程師的工具鏈每年都在變，React、Vue、Angular 輪流當紅，但最近我用 Claude Code 開發時發現一個有趣的現象：當我需要描述複雜的 UI 結構時，HTML 反而比任何 framework 都來得有效。

這讓我想到一個古老的道理 — 有時候最簡單的工具，反而是最強的工具。HTML 這個 30 年前就存在的標記語言，在 AI 輔助開發的時代，竟然成了最好的溝通介面。不是因為它有多強大，而是因為它夠直接、夠清楚。

這篇文章想跟你分享我在用 Claude Code 過程中的發現，以及為什麼我覺得這個現象值得每個前端工程師關注。

環境與前置

先說一下我的 setup。Claude Code 目前還在 beta 階段，需要 Claude 3.5 Sonnet API 才能跑（據報導目前 token 成本大約是 GPT-4 的一半）。我主要用它來處理 React 專案的快速 prototyping，tech stack 是：

• React 18.2.0 + TypeScript 4.9
• Tailwind CSS 3.3.0（這很重要，等等會講為什麼）
• Vite 4.4.0 作為 bundler

為什麼選 Claude Code 而不是 GitHub Copilot 或 Cursor？老實說一開始我也是抱著試試看的心態，畢竟 Copilot 已經用得很順手了。但 Claude Code 有個特色：它對結構化輸入的理解特別好。

當你給它一段描述複雜 UI 的 prompt，它不會像 GPT-4 那樣開始囉嗦地問東問西，而是直接給你可以跑的 code。但這裡有個關鍵：你要學會怎麼「餵」它。

實作步驟

Step 1: HTML 描述法的發現

一開始我都是用自然語言跟 Claude Code 溝通：

幫我做一個 dashboard，左邊是 sidebar，右邊是 main content，
main content 裡面要有 header 和 cards

結果生出來的 code 雖然能跑，但跟我想要的差距很大。Claude Code 會根據它的理解來詮釋「dashboard」，但我心中的 dashboard 跟它想的完全不一樣。

後來我改用 HTML 來描述：

<div class="dashboard">
  <aside class="sidebar w-64">
    <nav>
      <a href="#analytics">Analytics</a>
      <a href="#users">Users</a>
      <a href="#settings">Settings</a>
    </nav>
  </aside>
  <main class="main-content flex-1">
    <header class="mb-6">
      <h1>Dashboard</h1>
      <div class="user-menu"></div>
    </header>
    <div class="cards-grid grid grid-cols-3 gap-4">
      <div class="card">Revenue</div>
      <div class="card">Users</div>
      <div class="card">Orders</div>
    </div>
  </main>
</div>

然後跟 Claude Code 說：「把這個 HTML 結構轉成 React component，用 Tailwind 做 styling」。

結果差別超大。生出來的 code 幾乎就是我想要的樣子，而且連響應式設計都幫我做好了。

Step 2: Tailwind 的加成效果

這裡要特別講一下為什麼 Tailwind 這麼重要。Claude Code 對 Tailwind 的 utility classes 理解度極高，當你在 HTML 裡寫 class="grid grid-cols-3 gap-4"，它就知道你要三欄 grid 佈局。

我做過對比測試，同樣的結構：

用 CSS-in-JS 描述：

const CardGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  /* 還要寫一堆 responsive rules */
`;

用 Tailwind HTML 描述：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

Claude Code 處理後者的準確度明顯更高。我猜是因為 Tailwind 的 naming convention 跟 CSS property 有直接對應關係，AI 更容易理解。

Step 3: 複雜 interaction 的處理

HTML 描述法不只對靜態佈局有效，對 interactive 元件也很好用。比如我要做一個 modal：

<!-- Modal trigger -->
<button class="btn-primary" data-modal-target="user-modal">
  Edit User
</button>

<!-- Modal -->
<div id="user-modal" class="modal hidden">
  <div class="modal-backdrop"></div>
  <div class="modal-content">
    <header class="modal-header">
      <h3>Edit User</h3>
      <button class="modal-close">&times;</button>
    </header>
    <form class="modal-body">
      <input type="text" name="username" placeholder="Username" />
      <input type="email" name="email" placeholder="Email" />
    </form>
    <footer class="modal-footer">
      <button type="button" class="btn-secondary">Cancel</button>
      <button type="submit" class="btn-primary">Save</button>
    </footer>
  </div>
</div>

Claude Code 會自動幫你生成對應的 React hooks、event handlers，甚至連 accessibility 的 ARIA attributes 都會加上。

踩過的坑

不過這個方法也不是萬能的。一開始我試著用 HTML 描述 state management：

<!-- 這樣是行不通的 -->
<div data-state="loading">
  <Spinner />
</div>
<div data-state="success">
  <UserList users={filteredUsers} />
</div>

Claude Code 會把這些 data-state 當成靜態屬性，不會理解這是條件渲染的邏輯。後來我學會把 state 相關的邏輯用註解寫清楚：

<!-- 根據 loading state 顯示不同內容 -->
<!-- loading: true -> 顯示 Spinner -->
<!-- loading: false && users.length > 0 -> 顯示 UserList -->
<!-- loading: false && users.length === 0 -> 顯示 EmptyState -->
<div class="content-area">
  <!-- dynamic content based on loading state -->
</div>

效果與數據

用了 HTML 描述法三個月下來，我的開發效率提升了大概 40%。具體數字：

• Prototyping 速度：從想法到可 demo 的 prototype，從平均 2-3 小時縮短到 1 小時內
• Code review 時間：因為生成的 code 結構更清楚，review 時間平均省了 30%
• Debug 成本：HTML semantic 做得好，很多 accessibility 和 SEO 問題在源頭就避免了

最明顯的改善是在處理複雜表單的時候。之前我要做一個有 validation、conditional fields、multi-step 的表單，光是跟 AI 溝通需求就要來回好幾輪。現在我直接畫出完整的 HTML 結構，包括所有可能的 error states：

<form class="multi-step-form">
  <!-- Step 1: Basic Info -->
  <fieldset data-step="1" class="step active">
    <div class="field">
      <label for="email">Email</label>
      <input type="email" id="email" required />
      <span class="error hidden">Please enter a valid email</span>
    </div>
    <!-- more fields... -->
  </fieldset>
  
  <!-- Step 2: Conditional fields -->
  <fieldset data-step="2" class="step hidden">
    <!-- 只在 user type = "business" 時顯示 -->
    <div class="field conditional" data-show-when="userType=business">
      <label for="company">Company Name</label>
      <input type="text" id="company" />
    </div>
  </fieldset>
</form>

Claude Code 一次就生成了完整的 React form component，包括 step navigation、validation logic、conditional rendering 都處理得很好。

Meta 判讀

這個現象其實反映了 AI 輔助開發的一個趨勢：explicit is better than implicit。

傳統上我們寫程式是給機器看的，所以追求簡潔、抽象。但現在我們要跟 AI 溝通，AI 更喜歡明確的、結構化的描述。HTML 剛好符合這個特點 — 它本來就是設計來描述文檔結構的。

從投資角度來看，這種趨勢對幾類公司有利：

1. No-code/Low-code 平台：HTML 描述法其實就是 visual programming 的文字版
2. Design system 工具：當開發流程更依賴 markup，design token 和 component library 變得更重要
3. AI 原生的開發工具：專門針對這種工作流優化的工具會有市場

據報導，GitHub Copilot 目前有超過 100 萬付費用戶，年化收入估計超過 1 億美金（來源：GitHub Universe 2023）。但我覺得下一波 AI 輔助開發工具會更專注在「如何更好地跟 AI 溝通」這個問題上。

目前市面上類似 Claude Code 的工具還不多，大部分 AI coding assistant 還停留在「補完程式碼」的階段。但我覺得「結構化 prompt」會是下一個戰場。

結論

HTML 在 AI 時代的「復興」其實不意外。它簡單、明確、語義化，正好符合 AI 的理解方式。

值不值得學這套方法？我覺得值得，特別是如果你：

• 經常需要快速 prototyping
• 在團隊裡負責跟 PM、設計師溝通需求
• 對 AI 輔助開發有興趣

不過要注意，這不是要你回到 HTML + CSS 的時代，而是學會用 HTML 當作跟 AI 溝通的語言。React、Vue 該用還是要用，但在 prompt engineering 這一環，HTML 確實比較有效。

最後一個觀察：會寫好 HTML 的工程師，在 AI 時代可能比想像中吃香。畢竟現在 AI 能幫你寫複雜的邏輯，但它需要你告訴它「要做成什麼樣子」。

延伸閱讀

• Claude Code 要這樣學 — 動手做比看文件有用多了
• 華爾街需要自己的 Claude Code 從 LangAlpha 看 AI 垂直產品
• 為什麼開發者開始退訂 Claude？一個真實的產品品質警示