Vì Sao HTML Hiệu Quả Bất Ngờ Khi Dùng Claude Code
Điểm chính
- HTML cho Claude nhiều không gian biểu đạt hơn Markdown, từ bố cục, biểu đồ, SVG, tương tác cho đến tài liệu nhiều lớp ngữ cảnh.
- Tài liệu HTML dễ đọc hơn, dễ chia sẻ hơn và thường khiến người khác thật sự mở ra xem thay vì bỏ qua vì quá dài.
- Khi cần review code, thiết kế, báo cáo, nghiên cứu hay tạo giao diện chỉnh sửa tạm thời, HTML thường là định dạng hợp với Claude Code hơn hẳn.
Nếu bạn đã quen dùng Markdown cho plan, spec hay ghi chú kỹ thuật, bài viết này sẽ khiến bạn nhìn lại thói quen đó. Với Claude Code, HTML không chỉ là thứ để làm web. Nó có thể trở thành một “canvas” giàu ngữ cảnh để Claude biểu đạt, sắp xếp, giải thích và thậm chí tương tác với thông tin theo cách mà Markdown khó làm được.
Điểm cốt lõi ở đây không phải là HTML đẹp hơn về mặt thẩm mỹ. Cái chính là nó hữu ích hơn cho kiểu công việc mà Claude Code đang làm ngày càng nhiều: đọc nhiều nguồn, tổng hợp thông tin, dựng kế hoạch, tạo bản giải thích, review code, prototype giao diện và xuất ra thứ người khác thật sự dùng được.
Vì sao dùng HTML?
Có vài lý do khiến HTML hợp hơn Markdown cho kiểu công việc này.
Mật độ thông tin
HTML biểu đạt được nhiều kiểu thông tin phong phú hơn Markdown rất nhiều. Markdown làm tốt phần cấu trúc cơ bản như tiêu đề, in đậm, danh sách hay trích dẫn. Nhưng HTML còn có thể mô tả:
- Dữ liệu dạng bảng bằng thẻ table
- Dữ liệu thiết kế qua CSS
- Minh họa bằng SVG
- Đoạn code đi kèm script tag
- Tương tác bằng các phần tử HTML kết hợp JavaScript và CSS
- Workflow trực quan bằng SVG và HTML
- Dữ liệu không gian bằng position tuyệt đối và canvas
- Hình ảnh bằng thẻ img
Theo cách nhìn của tác giả, hầu như không có loại thông tin nào Claude đọc được mà không thể biểu diễn hiệu quả bằng HTML. Điều đó khiến HTML trở thành một cách rất hiệu quả để model truyền đạt nội dung chuyên sâu cho bạn, và cũng là cách để bạn đọc lại nội dung đó dễ hơn.
Khi không có HTML, model thường sẽ phải làm những thứ kém hiệu quả hơn trong Markdown, như vẽ sơ đồ ASCII hoặc, vui nhất là, ước lượng màu bằng ký tự Unicode.
Rõ ràng về mặt trực quan và dễ đọc
Khi Claude bắt đầu xử lý những việc phức tạp hơn, nó cũng phải viết những spec và plan dài hơn. Nhưng thực tế là rất ít người đọc một file Markdown dài hơn 100 dòng một cách kỹ lưỡng. Và càng khó hơn nếu bạn muốn người khác trong tổ chức thật sự đọc nó.
HTML giải quyết vấn đề đó tốt hơn vì Claude có thể tổ chức cấu trúc một cách trực quan: có tab, minh họa, liên kết, bố cục rõ ràng. Tài liệu cũng có thể responsive, nên bạn đọc khác nhau tùy thiết bị và kích thước màn hình.
Dễ chia sẻ
Markdown không phải định dạng dễ chia sẻ. Nhiều trình duyệt không render Markdown tốt theo cách mặc định, nên bạn thường phải đính kèm nó trong email hoặc tin nhắn.
Với HTML, chỉ cần tải file lên là bạn có thể chia sẻ link ngay. Đồng nghiệp của bạn mở ở đâu cũng được và có thể tham chiếu lại rất dễ. Khả năng một người thật sự mở spec, report hoặc PR writeup của bạn cũng cao hơn nhiều nếu nó ở dạng HTML.
Tương tác hai chiều
HTML còn cho phép bạn tương tác trực tiếp với tài liệu. Ví dụ, bạn có thể yêu cầu nó thêm slider hoặc knob để chỉnh một thiết kế, hoặc thay đổi các biến trong thuật toán để xem kết quả ra sao. Bạn cũng có thể bảo nó tạo nút sao chép để đẩy lại thay đổi vào prompt rồi dán ngược về Claude Code.
Khi cần, bạn có thể tạo ra một môi trường chỉnh sửa riêng cho đúng vấn đề mình đang xử lý. Đó là một dạng làm việc rất khác so với việc chỉ đọc một file tĩnh.
Khả năng nạp ngữ cảnh
Một lý do lớn nữa để dùng Claude Code tạo HTML thay vì dùng Claude.ai hay Claude Design là lượng ngữ cảnh mà Claude Code có thể nạp vào.
Khi viết bài này, tác giả đã nhờ Claude Code đọc thư mục code, tìm tất cả file HTML đã tạo, phân loại chúng rồi dựng một file HTML khác có các sơ đồ đại diện cho từng loại. Những sơ đồ bạn thấy trong bài viết cũng được sinh ra từ đó.
Ngoài file system, Claude Code còn có thể tìm thêm ngữ cảnh từ MCPs của bạn, như Slack, Linear, trình duyệt web với Claude in Chrome, và cả lịch sử git.
Bắt đầu thế nào?
Điều đáng chú ý là bạn không cần làm gì quá phức tạp để khiến Claude tạo HTML kiểu này. Chỉ cần prompt thẳng kiểu:
“Hãy tạo một file HTML.”
hoặc
“Hãy tạo một HTML artifact.”
Điều quan trọng nhất là bạn phải biết artifact đó cần làm gì và bạn sẽ dùng nó như thế nào. Về lâu dài, có thể sẽ hợp lý khi xây một skill cho những pattern lặp lại. Nhưng bắt đầu bằng cách prompt từ đầu vẫn là một cách tốt để cảm nhận nó hoạt động ra sao trong nhiều use case khác nhau.
Các tình huống sử dụng
Để cụ thể hơn, dưới đây là những tình huống mà theo kinh nghiệm của tác giả, HTML hợp hơn Markdown.
Spec, planning và khám phá
HTML là một “canvas” rất giàu thông tin để Claude đào sâu vào một vấn đề. Khi bắt đầu một bài toán, thay vì chỉ viết một plan Markdown đơn giản, tác giả thường tạo ra một mạng lưới các file HTML.
Ví dụ, có thể bắt đầu bằng việc nhờ Claude brainstorm và tạo ra vài hướng khám phá khác nhau. Sau đó, chọn một hướng và yêu cầu mở rộng thêm, có thể kèm mockup hoặc ví dụ về interface. Khi đã thấy ổn, tiếp tục nhờ viết một implementation plan. Và khi plan đủ tốt, mở một session mới rồi đưa toàn bộ file đó vào để thực thi.
Khi cần verify, một verification agent cũng có thể đọc lại các file này và có ngữ cảnh rộng hơn về điều cần làm.
“Tôi chưa chắc nên đi theo hướng nào cho màn hình onboarding. Hãy tạo 6 cách tiếp cận thật khác nhau — thay đổi layout, giọng điệu và mật độ thông tin — rồi đặt tất cả trong một file HTML duy nhất.”
“Hãy tạo một plan triển khai kỹ lưỡng trong file HTML, nhớ thêm mockup, mô tả data flow và chèn các đoạn code quan trọng mà tôi nên xem lại. Làm cho nó dễ đọc và dễ tiêu hóa.”
Review code và hiểu code
Code có thể rất khó đọc nếu chỉ nằm trong Markdown. Với HTML, bạn có thể render diff, annotation, flowchart và module theo cách trực quan hơn nhiều.
HTML hữu ích khi bạn muốn hiểu code mà agent đã viết, review code, hoặc giải thích một PR cho người khác.
“Hãy review PR này bằng cách tạo một HTML artifact mô tả nó. Tôi không rành phần logic streaming/backpressure, nên hãy tập trung vào đó. Render diff thật với chú thích ở lề, tô màu finding theo mức độ nghiêm trọng và thêm bất cứ thứ gì cần thiết để truyền đạt rõ ý.”
Thiết kế và prototype
Claude Design cũng được xây trên HTML vì HTML cực kỳ mạnh cho việc mô tả thiết kế, ngay cả khi đầu ra cuối cùng của bạn không phải HTML. Claude có thể phác thảo thiết kế bằng HTML rồi viết lại sang ngôn ngữ bạn cần, như React hoặc Swift.
Bạn cũng có thể prototype tương tác như animation, action hoặc các biến thể UI khác. Nếu muốn, cứ bảo Claude tạo slider, knob, hoặc nút sao chép để bạn thử các phương án và lấy lại cấu hình tốt nhất.
“Tôi muốn prototype một nút checkout mới: khi bấm thì chạy hiệu ứng rồi chuyển sang màu tím nhanh chóng. Hãy tạo một file HTML với vài slider và tùy chọn để tôi thử các biến thể animation khác nhau, và thêm nút copy để sao chép tham số hoạt động tốt.”
Báo cáo, nghiên cứu và học tập
Claude Code rất mạnh trong việc tổng hợp thông tin từ nhiều nguồn và biến nó thành báo cáo dễ đọc.
Bạn có thể yêu cầu Claude tìm trong Slack, codebase, git history hoặc internet rồi dựng thành một tài liệu HTML dễ tiêu hóa. Tài liệu đó có thể là report dài, explainer tương tác, hoặc thậm chí là một deck/slideshow.
Nếu cần, hãy bảo Claude dùng SVG để minh họa sơ đồ.
“Tôi không hiểu bộ rate limiter của chúng ta hoạt động thế nào. Hãy đọc code liên quan và tạo một trang HTML giải thích duy nhất: sơ đồ luồng token bucket, 3–4 đoạn code quan trọng có chú thích, và một phần ‘gotchas’ ở cuối. Tối ưu cho người chỉ đọc một lần.”
Giao diện chỉnh sửa tùy biến
Đôi khi rất khó diễn đạt điều mình muốn chỉ bằng ô nhập văn bản. Với trường hợp này, tác giả thường nhờ Claude dựng một editor dùng một lần cho đúng thứ mình đang làm.
Đó không phải sản phẩm, cũng không phải công cụ tái sử dụng. Nó chỉ là một file HTML duy nhất, được thiết kế riêng cho một tập dữ liệu hoặc một nhiệm vụ cụ thể.
Mấu chốt luôn là phải có nút xuất ra cuối cùng: “copy as JSON” hoặc “copy as prompt”, để mọi thứ bạn chỉnh trong UI có thể quay về dạng có thể dán vào Claude Code hoặc commit vào file.
Bạn vẫn ở trong vòng lặp, nhưng vòng lặp ngắn hơn và sát hơn.
“Tôi cần sắp xếp lại 30 ticket Linear. Hãy tạo một file HTML với mỗi ticket là một thẻ có thể kéo thả giữa các cột Now / Next / Later / Cut. Hãy tự sắp xếp sơ bộ theo phán đoán tốt nhất của bạn. Thêm nút ‘copy as Markdown’ để xuất thứ tự cuối cùng kèm một câu giải thích ngắn cho mỗi nhóm.”
Câu hỏi thường gặp
Có phải như vậy sẽ kém hiệu quả hơn không?
Markdown thường dùng ít token hơn, đúng. Nhưng tác giả thấy HTML có độ biểu đạt cao hơn rất nhiều, và quan trọng hơn là khả năng người đọc thật sự mở nó lên và đọc cũng cao hơn. Với context window 1MM của Opus 4.7, chi phí token tăng lên cũng không còn quá đáng kể trong thực tế.
Khi nào bạn vẫn dùng Markdown?
Thật lòng mà nói, tác giả gần như đã ngừng dùng Markdown cho hầu hết mọi thứ. Dù vậy, đây cũng là góc nhìn khá “HTML maximalist”, nên không phải ai cũng sẽ đi xa đến mức đó.
Có phải đây là cách bạn thay thế việc lập kế hoạch không?
Không hẳn. Thay vì chỉ có một plan duy nhất, tác giả thường có vài file HTML cho các phần hoặc giai đoạn khác nhau của kế hoạch. Ví dụ: một file cho implementation plan, một file cho khám phá UI, và một file khác liệt kê toàn bộ phương án thiết kế. Những file này cũng được giữ lại để tham chiếu về sau và phục vụ việc verify.
Luôn ở trong vòng lặp cùng Claude
Tất cả những điều trên rốt cuộc quay về một lý do rất đơn giản: HTML giúp bạn cảm thấy mình đang ở trong vòng lặp cùng Claude nhiều hơn.
Khi Claude đảm nhiệm ngày càng nhiều, bạn rất dễ đọc lướt plan thay vì thực sự theo sát các quyết định của nó. HTML cho bạn một cách để vẫn tham gia vào quá trình đó, thay vì chỉ giao hết rồi chờ kết quả.
Theo tác giả, HTML đã trở thành thứ giữ cho anh ấy gắn bó hơn với lựa chọn của Claude. Và đó mới là lý do thật sự khiến nó hiệu quả.
Bài viết này được viết bởi Thariq Shihipar, thành viên technical staff của Anthropic, và phản ánh quan điểm cá nhân của anh ấy về việc dùng HTML file với Claude Code.
Kết luận
HTML không chỉ là định dạng để dựng trang web. Khi đi cùng Claude Code, nó trở thành một lớp biểu đạt giàu ngữ cảnh hơn Markdown rất nhiều.
Nếu bạn cần tài liệu dễ đọc, dễ chia sẻ, dễ tương tác và đủ mạnh để chứa spec, plan, review, report hoặc prototype, HTML rất đáng để thử. Nó không chỉ giúp Claude tạo ra đầu ra tốt hơn mà còn giúp bạn đọc và kiểm soát đầu ra đó tốt hơn.
Nói ngắn gọn: nếu Markdown là ghi chú nhanh, thì HTML có thể là không gian làm việc thực sự của bạn với Claude.
Bình luận