Claude Code và hiệu quả bất thường của HTML Artifacts
Markdown đã thắng giai đoạn đầu của cộng tác với agent vì nó đơn giản.
Nó dễ tạo, dễ diff, dễ dán vào pull request và đủ tốt cho hầu hết ghi chú. Vì vậy nó trở thành mặc định tự nhiên cho coding agents: kế hoạch, tóm tắt, spec, ghi chú review, postmortem và checklist triển khai đều kết thúc dưới dạng Markdown.
Bài viết mới nhất của Anthropic về Claude Code cho rằng mặc định này đang bắt đầu lộ giới hạn.
Vấn đề không phải Markdown tệ. Vấn đề là Claude Code giờ có thể làm nhiều hơn việc viết một file văn bản dài, và HTML cho mô hình một bề mặt làm việc tốt hơn: mật độ thông tin cao hơn, cấu trúc trực quan rõ hơn, artifacts dễ chia sẻ hơn và tương tác nhẹ.
Đây là một thay đổi thực tế với developer. Nó thay đổi thứ chúng ta nên yêu cầu Claude Code tạo ra.
Ý tưởng cốt lõi
Trong bài vi ết chính thức, Thariq Shihipar từ đội Claude Code giải thích vì sao anh bắt đầu ưu tiên file HTML hơn Markdown cho nhiều đầu ra của Claude Code.
Lý do rất trực tiếp: khi Claude Code đảm nhận nhiệm vụ lớn hơn, đầu ra cũng lớn hơn.
Một checklist Markdown 30 dòng thì ổn. Một kế hoạch triển khai, báo cáo nghiên cứu, review code, giải thích kiến trúc hoặc khám phá UI dài 300 dòng thì không ổn chỉ vì nó vẫn render được.
HTML cho Claude Code nhiều không gian hơn để tổ chức cùng một lượng thông tin:
- bảng cho so sánh mật độ cao
- CSS cho phân cấp thị giác
- SVG cho sơ đồ
- hình ảnh cho tham chiếu
- JavaScript cho tương tác cục bộ
- tab và section cho điều hướng
- nút sao chép prompt, JSON, diff hoặc cài đặt được tạo ra
Điều đó khiến HTML giống một workbench dùng một lần hơn là một định dạng tài liệu.
Với workflow agent, khác biệt này rất quan trọng.
Vì sao điều này quan trọng với người dùng Claude Code
Claude Code khác giao diện chat thông thường vì nó có thể đọc project cục bộ, kiểm tra lịch sử git, làm việc với file, dùng MCP servers và tạo artifacts ngay trong workspace nơi công việc kỹ thuật thật sự diễn ra.
Điều đó khiến nó đặc biệt phù hợp để tạo HTML artifacts hữu ích từ ngữ cảnh thật.
Ví dụ, thay vì hỏi:
Write a plan for refactoring the billing module.
bạn có thể hỏi:
Create an HTML artifact that explains the billing refactor.
Include a module map, the key file changes, risks by severity,
a staged migration plan, and a copyable implementation prompt.
Hai prompt này có thể có cùng yêu cầu nền, nhưng prompt thứ hai yêu cầu một định dạng dễ kiểm tra hơn, dễ chia sẻ hơn và dễ dùng làm tham chiếu trong phiên Claude Code sau.
Đó là lợi thế thật sự: HTML có thể trở thành ngữ cảnh dự án bền vững, không chỉ là một câu trả lời dùng một lần.
Bốn nơi HTML vượt Markdown
1. Spec và lập kế hoạch
Lập kế hoạch là nơi Markdown bắt đầu đuối trước tiên.
Kế hoạch triển khai dài thường kết hợp kiến trúc, đoạn code, dependency, sơ đồ, tradeoff, screenshot và câu hỏi mở. Markdown có thể chứa tất cả, nhưng không giúp người đọc điều hướng.
HTML cho phép Claude Code chia kế hoạch thành một bề mặt dễ review hơn:
- overview ở đầu
- flow diagram cho hệ thống
- bản đồ thay đổi theo từng file
- bảng rủi ro
- kế hoạch rollout theo giai đoạn
- câu hỏi chưa trả lời
- prompt follow-up có thể sao chép
Điều này đặc biệt hữu ích khi kế hoạch cần tồn tại qua nhiều session. Agent trong tương lai có thể đọc file HTML làm ngữ cảnh, còn con người có thể scan mà không phải đọc một bức tường chữ.
2. Code review và hiểu code
Code review không chỉ là văn bản. Nó là cấu trúc.
Một review tốt thường cần diff, nhãn mức độ nghiêm trọng, module bị ảnh hưởng, call path, data flow và giải thích ngắn về lý do vấn đề quan trọng. Markdown có thể mô phỏng điều đó, nhưng HTML có thể render trực tiếp.
Với Claude Code, điều này gợi ý một workflow tốt hơn:
Review this PR by creating an HTML artifact.
Show the diff with inline annotations, group findings by severity,
and include a small diagram of the streaming/backpressure path.
Như vậy đầu ra review gần giống một gói review tương tác hơn. Nó vẫn có thể là tạm thời, nhưng dễ chuyển cho kỹ sư khác hơn.
3. Thiết kế và prototype
HTML là đích tự nhiên cho Claude Code khi đầu ra có yếu tố thị giác hoặc tương tác.
Ngay cả khi app production là React, Swift, Kotlin hoặc công nghệ khác, HTML vẫn là cách nhanh để phác layout, so sánh hướng thiết kế, thử motion và tinh chỉnh tham số UI.
Bài viết gốc nhắc đến sliders, knobs và copy buttons như các primitive hữu ích. Đó là đúng mental model. Claude Code có thể tạo một giao diện dùng tạm để chọn những giá trị khó mô tả bằng văn bản:
- bảng màu
- easing curves
- mật độ component
- vùng crop
- biến thể prompt
- tổ hợp feature flag
- độ ưu tiên ticket
Phần quan trọng là export. Một HTML artifact tốt nên kết thúc bằng thứ hữu ích: copy as JSON, copy as Markdown, copy as prompt hoặc copy diff.
Nếu artifact không đưa được output trở lại workflow kỹ thuật, nó chỉ là demo.
4. Báo cáo, nghiên cứu và học tập
Claude Code có thể tổng hợp từ codebase, lịch sử git, docs, Slack qua MCP, Linear qua MCP và nguồn web. Markdown có thể tóm tắt ngữ cảnh đó, nhưng HTML làm nó dễ đọc hơn.
Với explainer nội bộ, postmortem, weekly status, audit dependency và onboarding guide, HTML cho mô hình đủ không gian thị giác để hiển thị quan hệ thay vì chỉ mô tả chúng.
Đây là lúc HTML trở thành định dạng học tập:
- đoạn code có annotation
- sơ đồ hệ thống
- glossary callout
- timeline view
- risk matrix
- bảng quyết định
Kết quả không cần trở thành sản phẩm bóng bẩy. Nó chỉ cần đủ dễ đọc để có người thật sự dùng.
Điểm ẩn: HTML giữ con người trong vòng lặp
Phần mạnh nhất của bài viết Anthropic không phải luận điểm về định dạng, mà là luận điểm về workflow.
Khi Claude Code xử lý nhiệm vụ lớn hơn, developer có nguy cơ đọc ít hơn những gì agent tạo ra. Kế hoạch Markdown dài rất dễ được duyệt mà không review sâu. Điều đó nguy hiểm, vì kế hoạch có thể chứa giả định yếu, bỏ sót edge case hoặc thay đổi mà developer thật ra sẽ không chọn.
HTML có thể giảm failure mode đó vì nó cho con người nhiều điểm bám hơn:
- scan overview
- kiểm tra sơ đồ
- so sánh các lựa chọn cạnh nhau
- nhảy đến phần rủi ro
- chỉnh slider
- sao chép output đã chọn trở lại Claude Code
Điều đó không loại bỏ nhu cầu review. Nó làm review dễ xảy ra hơn.
Với workflow agent nghiêm túc, đây không phải trang trí. Đây là một phần của kiểm soát.
Khi Markdown vẫn là lựa chọn tốt hơn
HTML không nên thay thế Markdown ở mọi nơi.
Markdown vẫn tốt hơn khi artifact cần:
- nhỏ
- dễ diff
- thường xuyên được sửa thủ công
- nhúng vào README
- dán vào issue hoặc PR description
- được công cụ kỳ vọng là Markdown tiêu thụ
Quy tắc thực tế rất đơn giản:
Dùng Markdown khi đầu ra chủ yếu là văn bản và sẽ được con người chỉnh sửa.
Dùng HTML khi đầu ra cần layout, sơ đồ, so sánh mật độ cao, tương tác hoặc trải nghiệm đọc tốt hơn.
Điều đó giúp HTML không trở thành một mặc định bị lạm dụng khác.
Một pattern prompt đơn giản
Nếu muốn thử trong Claude Code, hãy bắt đầu bằng prompt trực tiếp:
Create a single HTML artifact for this task.
It should be readable in a browser, self-contained, and optimized for review.
Use tables, diagrams, and sections where useful.
Add copy buttons for any output I may want to paste back into Claude Code.
Keep all source references visible.
Sau đó làm mục đích cụ thể hơn:
For this refactor, include:
- a dependency map
- the proposed file changes
- migration steps
- risks by severity
- test plan
- open questions
Theo thời gian, các pattern lặp lại nên trở thành skills hoặc templates. Nhưng bước đầu không cần hạ tầng. Nó chỉ cần thói quen yêu cầu Claude Code tạo artifact tốt hơn.
Team nên làm gì tiếp theo
Cơ hội ngắn hạn không phải là xây lại toàn bộ hệ thống tài liệu nội bộ quanh HTML.
Bước hữu ích hẹp hơn:
- Xác định những output Claude Code mà team thực tế không đọc kỹ.
- Chuyển một output đó thành HTML artifact.
- Yêu cầu artifact export được thứ hữu ích trở lại workflow.
- Giữ artifact trong repo khi nó giúp các session sau.
- Xóa nó khi nó chỉ hữu ích cho một quyết định.
Điểm cuối rất quan trọng. Nhiều HTML artifacts nên là disposable. Giá trị của chúng nằm ở việc giúp con người đưa ra quyết định tốt hơn ngay lúc đó.
Kết luận
Hiệu quả bất thường của HTML không nằm ở việc nó là ngôn ngữ markup tốt hơn Markdown.
Nó nằm ở việc HTML cho Claude Code một bề mặt cộng tác phong phú hơn.
Với ghi chú nhỏ, Markdown vẫn là công cụ đúng. Nhưng với spec, code review, giải thích kiến trúc, khám phá thiết kế, báo cáo nghiên cứu và giao diện chỉnh sửa tùy chỉnh, HTML có thể làm đầu ra của agent dễ đọc hơn, dễ chia sẻ hơn và dễ hành động hơn.
Khi Claude Code có thể xử lý các khối công việc lớn hơn, định dạng đầu ra trở thành một phần của thiết kế workflow. Những team coi artifacts là bề mặt review hạng nhất sẽ giữ quyền kiểm soát tốt hơn những team tiếp tục duyệt các bức tường Markdown.
Nguồn
- Claude blog: Using Claude Code: The unreasonable effectiveness of HTML
https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html