HTML Tools Pattern: Viết app đơn file mà AI có thể đọc hiểu

Kỹ thuật viết HTML tools — ứng dụng đơn file HTML/CSS/JS — và tại sao chúng trở thành pattern lý tưởng để làm việc với AI coding assistants.

Gần đây tôi bắt gặp một pattern cực kỳ thú vị: HTML tools — ứng dụng web viết trong một file HTML duy nhất, kết hợp HTML, CSS, và JavaScript. Không build step, không node_modules, không config hell. Chỉ một file.

Ban đầu nghe có vẻ ngược đời với tư duy component-based hiện đại. Nhưng sau khi thử nghiệm, tôi nhận ra đây là pattern đặc biệt phù hợp với thời đại AI coding.

Tại sao single-file HTML lại hợp với AI?

Khi bạn prompt Cursor hoặc GitHub Copilot để viết code, AI cần đọc toàn bộ context để hiểu đúng. Với codebase 50 file, AI phải đoán xem file nào liên quan. Với một file HTML duy nhất — AI đọc từ đầu đến cuối, hiểu toàn bộ logic ngay lập tức.

"HTML tools are the perfect unit of AI-readable code. Everything in one context window."

Đây cũng là lý do tại sao Galaxy.ai và nhiều AI workspace khác đang thúc đẩy pattern làm việc với "artifacts" — những đoạn code tự chứa, dễ iterate.

Cấu trúc của một HTML Tool tốt

Đây là template tôi dùng cho hầu hết HTML tools:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON Formatter</title>
  <style>
    /* === RESET & VARIABLES === */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --color-bg: #0f172a;
      --color-surface: #1e293b;
      --color-accent: #3b82f6;
      --color-text: #e2e8f0;
      --radius: 8px;
    }

    /* === LAYOUT === */
    body {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: system-ui, sans-serif;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2rem;
    }

    .card {
      background: var(--color-surface);
      border-radius: var(--radius);
      padding: 2rem;
      width: 100%;
      max-width: 800px;
    }

    /* === COMPONENTS === */
    textarea {
      width: 100%;
      min-height: 200px;
      background: var(--color-bg);
      color: var(--color-text);
      border: 1px solid #334155;
      border-radius: var(--radius);
      padding: 1rem;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      resize: vertical;
    }

    button {
      background: var(--color-accent);
      color: white;
      border: none;
      padding: 0.5rem 1.5rem;
      border-radius: var(--radius);
      cursor: pointer;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>JSON Formatter</h1>
    <textarea id="input" placeholder="Paste JSON đây..."></textarea>
    <button onclick="format()">Format</button>
    <textarea id="output" readonly></textarea>
  </div>

  <script>
    // === STATE ===
    const input = document.getElementById('input');
    const output = document.getElementById('output');

    // === LOGIC ===
    function format() {
      try {
        const parsed = JSON.parse(input.value);
        output.value = JSON.stringify(parsed, null, 2);
      } catch (e) {
        output.value = 'Error: ' + e.message;
      }
    }

    // Auto-format on paste
    input.addEventListener('paste', () => setTimeout(format, 0));
  </script>
</body>
</html>

Khi nào dùng HTML tools, khi nào dùng framework?

HTML tools không thay thế React hay Next.js — chúng giải quyết bài toán khác:

Dùng HTML tools khi: Internal tools cho team, quick prototypes, utilities không cần auth, scripts chạy offline
Dùng framework khi: Product cần scale, có user authentication, cần SEO, data phức tạp

Tôi hiện có một thư mục ~/tools/ với khoảng 20 HTML tools: color picker, JSON diff, base64 encoder, regex tester... Tất cả đều viết với Cursor trong dưới 10 phút mỗi cái.

Kết hợp với AI Workspace

Pattern này shine đặc biệt khi dùng với AI workspace như Galaxy.ai. Bạn có thể iterate nhanh, share tool với đồng nghiệp qua một URL, và AI luôn có đủ context để cải thiện code vì tất cả nằm trong một file.

Đây không phải kỹ thuật mới — nhưng trong thời đại AI coding, nó đang được "tái sinh" với một use case mạnh mẽ hơn bao giờ hết.

HTML Tools Pattern: Viết app đơn file mà AI có thể đọc hiểu

Tại sao single-file HTML lại hợp với AI?

Cấu trúc của một HTML Tool tốt

Khi nào dùng HTML tools, khi nào dùng framework?

Kết hợp với AI Workspace

Bình luận (0)

Bài viết liên quan

Copilot vs Cursor: Which AI Coding Tool Should Frontend Developers Use in 2026?

10 Cursor Tips Tôi Ước Biết Sớm Hơn (Từ Góc Nhìn Senior FE Dev)

Claude Code Hooks — Biến AI thành đồng đội thực sự trong frontend workflow