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 的處理