Thay thế Markdown bằng HTML: Trải nghiệm thực chiến của đội ngũ Claude Code (song song Anh - Việt)

*Sử dụng Claude Code: Tính hiệu quả đáng kinh ngạc của HTML*

Tác giả: Thariq Shihipar (trưởng nhóm kỹ thuật Claude Code tại Anthropic) | Bản song ngữ Anh - Việt

Markdown đã trở thành định dạng file chủ đạo để các agent giao tiếp với con người. Nó đơn giản, di chuyển dễ dàng, có một số khả năng rich text và dễ chỉnh sửa. Claude hiện còn khá giỏi trong việc dùng ký tự ASCII để vẽ sơ đồ ngay trong file Markdown.

Markdown hiện đã trở thành định dạng file phổ biến nhất mà các AI agent dùng để trao đổi với con người. Nó đơn giản, tiện lợi, có một mức độ phong phú về văn bản khá tốt, và rất dễ chỉnh sửa thủ công. Thậm chí Claude hiện đã giỏi lạ lùng trong việc vẽ các biểu đồ bằng ASCII trong file Markdown.

Nhưng khi các agent ngày càng mạnh hơn, tôi nhận thấy Markdown lại càng trở nên giới hạn. Cụ thể, tôi thấy khó đọc một file Markdown dài hơn một trăm dòng; tôi muốn dùng Claude tạo ra các trực quan hóa, màu sắc và đồ họa phong phú hơn; và tôi muốn chia sẻ những đầu ra này dễ dàng hơn.

Nhưng cùng với việc AI agent càng lúc càng mạnh hơn, tôi nhận thấy Markdown ngày càng chật hẹp. Cụ thể, tôi thấy khó đọc các file Markdown quá trăm dòng; tôi muốn Claude sinh ra trực quan hóa, màu sắc và đồ họa phong phú hơn; và tôi cũng muốn chia sẻ kết quả đó dễ dàng hơn.

Tôi cũng ngày càng ít khi tự chỉnh sửa các file này, thay vào đó dùng chúng như tài liệu đặc tả và tài liệu tham chiếu. Khi tôi cần chỉnh sửa, thường tôi sẽ prompt Claude làm thay, điều này làm mất đi một trong những lợi thế lớn nhất của Markdown là “dễ sửa thủ công”.

Tôi cũng ngày càng ít tự chỉnh trực tiếp các file này, thay vào đó dùng chúng như tài liệu đặc tả (Spec) và tài liệu tham chiếu. Ngay cả khi chỉnh sửa, tôi hầu như luôn nhờ Claude thực hiện theo prompt; như vậy lợi thế lớn nhất của Markdown là “dễ chỉnh tay” gần như biến mất.

Vì thế, tôi đã bắt đầu ưu tiên HTML làm định dạng đầu ra thay cho Markdown và ngày càng thấy cách tiếp cận này cũng đang được nhiều người khác trong đội Claude Code áp dụng. Trong bài viết này, tôi chia sẻ lý do và cách đội tôi dùng HTML để tạo ra các đầu ra của Claude Code giàu nội dung hơn, dễ đọc hơn.

Vì vậy, thay vì Markdown, tôi đã bắt đầu ưu tiên HTML làm định dạng đầu ra; đồng thời nhận thấy đội Claude Code cũng dùng cách này nhiều hơn. Bài viết này là chia sẻ về lý do và cách chúng tôi dùng HTML để tạo đầu ra Claude Code phong phú và dễ đọc hơn.

Nếu bạn mới dùng Claude Code, bài Giới thiệu công cụ CC Switch có thể giúp bạn chuyển nhanh giữa nhiều công cụ Claude; để biết cách đóng gói năng lực của Claude thành các Skill có thể tái sử dụng, tham khảo Mở đầu chuyên mục Skill.

1. Tại sao dùng HTML? / Vì sao chọn HTML?

Có một vài điểm khiến HTML phù hợp hơn Markdown cho kiểu công việc tôi đang làm với Claude Code.

Dưới đây là những lý do khiến HTML phù hợp hơn Markdown cho kiểu công việc tôi đang làm cùng Claude Code.

1. Mật độ thông tin / Mật độ thông tin

HTML có thể truyền đạt thông tin phong phú hơn rất nhiều so với Markdown. Tất nhiên, HTML cũng xử lý được cấu trúc tài liệu cơ bản như tiêu đề và định dạng, nhưng nó còn biểu diễn được rất nhiều loại thông tin khác như:

HTML có thể truyền tải lượng thông tin giàu hơn nhiều so với Markdown. Tất nhiên, HTML có thể làm được cấu trúc tài liệu cơ bản như heading và formatting, nhưng nó còn biểu diễn được rất nhiều loại thông tin khác như:

• Dữ liệu dạng bảng bằng các bảng
• Thiết kế bằng CSS
• Minh họa bằng SVG
• Mảnh mã với thẻ <script>
• Tương tác bằng phần tử HTML kết hợp JavaScript + CSS
• Quy trình công việc bằng SVG và HTML
• Dữ liệu không gian bằng tọa độ tuyệt đối và canvas
• Hình ảnh bằng thẻ <img>

• Trình bày dữ liệu bảng bằng <table>
• Biểu diễn chi tiết thiết kế bằng CSS
• Vẽ minh họa bằng SVG
• Nhúng snippets mã bằng thẻ <script>
• Tạo tương tác bằng phần tử HTML + JavaScript + CSS
• Mô tả workflow bằng SVG và HTML
• Trình bày dữ liệu không gian bằng vị trí tuyệt đối và canvas
• Chèn ảnh trực tiếp bằng thẻ <img>

Theo tôi, gần như không có loại thông tin nào mà Claude đọc được mà bạn không thể biểu diễn hiệu quả bằng HTML. Điều này giúp HTML trở thành cách giao tiếp rất hiệu quả cho mô hình để truyền đạt thông tin sâu, và cho bạn thuận tiện khi rà soát.

Theo tôi, gần như không có loại thông tin nào mà Claude đọc được mà không thể biểu diễn hiệu quả bằng HTML. Nhờ vậy, HTML là một phương thức cực kỳ hiệu quả để mô hình truyền đạt thông tin chuyên sâu cho bạn, và để bạn xem xét lại chúng một cách thuận tiện.

Tôi nhận thấy nếu không có HTML, mô hình có xu hướng làm những cách thay thế kém hiệu quả trong Markdown, như vẽ biểu đồ ASCII hoặc, cách yêu thích của tôi, ước lượng màu sắc bằng ký tự Unicode.

Tôi nhận ra khi không có HTML, model thường phải “quay” sang các cách xử lý kém hiệu quả hơn trong Markdown, như dùng ASCII vẽ biểu đồ hoặc, yêu thích của tôi, dùng ký tự Unicode để mô phỏng bảng màu một cách ngô nghê.

2. Tính rõ ràng trực quan và dễ đọc / Độ rõ trực quan và khả năng đọc

Khi Claude làm được những công việc ngày càng phức tạp hơn, nó cũng có thể viết các spec và kế hoạch lớn dần lên. Tôi thấy rằng bản thân tôi thường không đọc được một file Markdown dài hơn 100 dòng, và chắc chắn tôi cũng không thể khiến người khác trong tổ chức đọc hết.

Khi Claude đủ khả năng xử lý công việc phức tạp hơn, nó cũng viết được các spec và kế hoạch càng ngày càng dài hơn. Tôi nhận thấy mình thường không đọc trọn một file Markdown quá 100 dòng, và chắc chắn không thể đòi hỏi ai đó trong tổ chức đọc hết.

Nhưng tài liệu HTML dễ đọc hơn rất nhiều vì Claude có thể tổ chức cấu trúc trực quan để tối ưu việc điều hướng bằng tab, hình minh họa và liên kết. Nó còn có thể responsive trên mobile để bạn đọc tốt hơn trên từng thiết bị khác nhau.

Nhưng tài liệu HTML dễ đọc hơn rất nhiều vì Claude có thể sắp xếp cấu trúc theo kiểu trực quan: tab, minh họa, liên kết để việc duyệt nội dung trở nên tiện lợi. Thậm chí nó còn có thể responsive trên thiết bị di động để bạn đọc tốt trên nhiều kích thước màn hình khác nhau.

3. Dễ chia sẻ / Dễ chia sẻ

File Markdown tương đối khó chia sẻ vì phần lớn trình duyệt không render Markdown một cách mượt mà. Thường bạn phải đính kèm chúng trong email hoặc tin nhắn.

File Markdown khá khó chia sẻ vì hầu hết trình duyệt không render Markdown tốt. Bạn thường phải đính kèm trong email hay tin nhắn.

Chỉ cần tải file HTML lên, bạn có thể chia sẻ liên kết rất dễ dàng. Đồng nghiệp có thể mở ở bất kỳ đâu và tham chiếu dễ dàng.

Chỉ cần upload file HTML, bạn có thể chia sẻ liên kết một cách dễ dàng. Đồng nghiệp có thể mở ở bất kỳ nơi nào mong muốn, trên bất kỳ thiết bị nào.

Khả năng ai đó thật sự đọc spec, report hay bài viết PR của bạn sẽ cao hơn nhiều nếu ở dạng HTML.

Khả năng người khác thực sự đọc spec, báo cáo hay bài viết giải trình PR của bạn cao hơn đáng kể khi nó ở định dạng HTML.

4. Tương tác hai chiều / Tương tác hai chiều

HTML còn cho phép bạn tương tác với tài liệu; ví dụ, bạn có thể yêu cầu thêm slider hay knob để chỉnh thiết kế, hoặc cho phép tinh chỉnh các tham số thuật toán để xem kết quả thay đổi như thế nào. Bạn cũng có thể nhờ nó tạo nút để sao chép các thay đổi này thành prompt rồi dán lại vào Claude Code.

HTML cũng cho phép bạn tương tác thực sự với tài liệu; ví dụ, bạn có thể yêu cầu thêm slider hoặc knob để điều chỉnh thiết kế, hoặc cho phép chỉnh các tùy chọn thuật toán để xem điều gì xảy ra. Bạn cũng có thể yêu cầu tạo một nút copy các thay đổi đó thành prompt để dán trở lại vào Claude Code.

Khi cần thiết, cách này cho phép bạn tạo ra môi trường chỉnh sửa riêng cho vấn đề cụ thể bạn đang xử lý.

Khi hữu ích, điều này giúp bạn tạo các môi trường chỉnh sửa riêng cho từng vấn đề cụ thể.

5. Hấp thụ dữ liệu / Thu thập dữ liệu đầu vào

Một trong những lý do lớn khiến tôi dùng Claude Code tạo file HTML thay vì Claude.ai hay Claude Design là toàn bộ ngữ cảnh mà Claude Code có thể nạp vào. Chẳng hạn, khi viết bài này, tôi đã yêu cầu Claude Code đọc qua thư mục code của mình, tìm tất cả HTML mà nó đã sinh, gom nhóm và phân loại rồi tạo một file HTML kèm các biểu đồ biểu diễn từng loại. Những sơ đồ trong bài là sản phẩm trực tiếp của quy trình đó.

Một trong những lý do lớn nhất để dùng Claude Code tạo HTML thay vì 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ôi đã nhờ Claude Code duyệt toàn bộ thư mục code của tôi, tìm tất cả file HTML đã sinh ra, gom nhóm và phân loại, rồi tạo một file HTML mới với các biểu đồ đại diện cho từng kiểu. Những sơ đồ bạn thấy trong bài này chính là kết quả trực tiếp của quy trình đó.

Ngoài hệ thống file, Claude Code còn có thể lấy thêm bối cảnh thông qua MCP của bạn (như Slack, Linear, v.v.), trình duyệt web (với Claude trong Chrome), và lịch sử git.

Ngoài file system, Claude Code còn có thể lấy thêm bối cảnh từ MCP (như Slack, Linear, v.v.), trình duyệt web (với Claude trong Chrome), và lịch sử git.

2. Bắt đầu / Bắt đầu sử dụng

Một điểm đáng lưu ý: bạn không cần làm gì nhiều để khiến Claude tạo HTML như vậy. Bạn chỉ cần prompt nó “make an HTML file” hoặc “make an HTML artifact”. Điều quan trọng nhất là bạn cần rõ mình muốn artifact đó làm gì và bạn sẽ dùng nó ra sao. Theo thời gian, có thể hợp lý khi xây một skill xung quanh các mẫu lặp lại, nhưng bắt đầu bằng cách prompt từ đầu là cách tốt để cảm nhận cách nó hoạt động trên nhiều trường hợp.

Một điểm đáng lưu ý là bạn không cần cấu hình phức tạp mới khiến Claude tạo được HTML như vậy. Chỉ cần nhắc nó “make an HTML file” hoặc “make an HTML artifact”. Điểm mấu chốt là bạn phải hiểu artifact cần làm gì và bạn sẽ dùng nó như thế nào. Theo thời gian có thể nên xây một skill cho các pattern lặp lại, nhưng khởi đầu bằng prompt từ đầu là cách tốt để nắm cách vận hành trong nhiều use case khác nhau.

3. Các tình huống sử dụng / Use Cases

Để minh họa cụ thể hơn, dưới đây là một số use case mà tôi cho rằng dùng HTML hợp lý hơn Markdown.

Để làm rõ hơn, dưới đây là một số trường hợp sử dụng mà theo tôi HTML phù hợp hơn Markdown.

1. Đặc tả, kế hoạch và khám phá / Specs, Planning, and Exploration

HTML là một canvas phong phú để Claude đào sâu một vấn đề. Khi bắt đầu làm một vấn đề, thay vì kỳ vọng một Markdown plan đơn giản, tôi thích tạo ra một “mạng lưới” các file HTML. Chẳng hạn, tôi có thể bắt đầu bằng cách nhờ Claude Code brainstorm và tạo vài hướng tiếp cận khác nhau. Sau đó tôi yêu cầu mở rộng một hướng, có thể tạo mockup hoặc ví dụ cho các giao diện kiểu này. Cuối cùng, khi đã ổn thì nhờ nó viết kế hoạch triển khai. Khi hài lòng với kế hoạch, tôi mở phiên mới và nạp tất cả các file này để triển khai.

HTML là một canvas phong phú để Claude đi sâu vào một vấn đề. Khi bắt đầu làm việc, tôi thường không chỉ chờ một plan Markdown đơn thuần mà tạo ra một mạng lưới các file HTML. Ví dụ, tôi sẽ yêu cầu Claude Code bắt đầu bằng brainstroming rồi tạo một số hướng tiếp cận khác nhau. Sau đó tôi yêu cầu đi sâu hơn vào một hướng, có thể làm mockup hoặc ví dụ giao diện. Cuối cùng khi thấy ổn, tôi yêu cầu viết kế hoạch triển khai. Khi thấy kế hoạch đã ổn, tôi mở một phiên mới và đưa toàn bộ các file đó vào để triển khai.

Khi kiểm tra, tôi cũng nhờ verification agent đọc các file này để nó có bối cảnh rộng hơn về điều cần làm.

Khi xác thực, tôi cũng yêu cầu verification agent đọc các file đó để có bối cảnh rộng hơn về những gì cần thực hiện.

Ví dụ prompt / Example prompts:

Tôi chưa chắc hướng tiếp cận nào cho màn hình onboarding. Tạo 6 phương án thật khác nhau—thay đổi bố cục, giọng điệu và mật độ thông tin—và sắp xếp chúng vào một file HTML duy nhất theo dạng lưới để tôi so sánh song song. Hãy gắn nhãn rõ ràng mức đánh đổi của mỗi phương án.

Tôi chưa chắc hướng đi nào cho màn hình onboarding. Hãy tạo 6 cách tiếp cận rõ rệt—phân biệt về layout, tone và density thông tin—và đặt chúng trong cùng một file HTML theo lưới để tôi có thể so sánh bên cạnh nhau. Hãy ghi nhãn tradeoff mà từng cách đang ưu tiên.

Hãy tạo một kế hoạch triển khai chi tiết trong file HTML, nhớ làm vài mockup, thể hiện luồng dữ liệu và thêm các đoạn code snippet quan trọng mà tôi có thể muốn xem xét kỹ. Hãy trình bày dễ đọc, dễ tiếp nhận.

Tạo một kế hoạch triển khai chi tiết trong một file HTML, đảm bảo có vài mockup, hiển thị data flow và thêm các đoạn code snippet quan trọng tôi có thể cần review. Hãy làm cho nó dễ đọc và dễ tiếp thu.

Dùng cho / Use this for:

• Khám phá các cách khác nhau để triển khai một phần mã / Exploring other ways to implement something in code
• Thử nghiệm nhiều thiết kế trực quan cùng lúc / Experimenting with multiple visual designs at once

2. Code review và hiểu mã / Code Review and Understanding

Code có thể rất khó đọc trong Markdown, nhưng với HTML chúng ta có thể render diff, annotation, flowchart và modules. Dùng HTML để hiểu mã mà agent viết, để review code, hoặc giải thích một PR cho người review.

Mã thường khó đọc trong Markdown; với HTML, chúng ta có thể render diff, annotation, flowchart và module. Dùng HTML để hiểu code do agent sinh ra, review code, hoặc giải thích PR cho người đánh giá.

Ví dụ prompt / Example prompt:

Hãy giúp tôi review PR này bằng cách tạo một HTML artifact mô tả nó. Tôi không quen với logic streaming/backpressure, nên hãy ưu tiên phần đó. Hãy render diff thực tế với annotation trong biên lề, đánh dấu mức độ nghiêm trọng bằng màu sắc và thêm bất kỳ thứ gì cần thiết để truyền đạt ý tưởng rõ ràng.

Hãy giúp tôi review PR này bằng cách tạo một HTML artifact mô tả nó. Tôi chưa quen với logic streaming/backpressure, nên hãy tập trung vào phần đó. Vui lòng render diff thực tế với annotation trên lề, tô màu kết quả theo mức độ nghiêm trọng và thêm bất kỳ phần trực quan nào giúp truyền đạt ý tưởng tốt hơn.

Dùng cho / Use this for:

• Tạo tài liệu giải thích PR / Creating a PR
• Review PR / Reviewing a PR from teammates or AI
• Hiểu một chủ đề trong mã / Understanding a topic in code

3. Thiết kế & dựng mẫu / Design and Prototypes

Claude Design dựa trên HTML vì HTML cực kỳ biểu cảm trong thiết kế, ngay cả khi bề mặt đầu ra cuối cùng không phải HTML. Claude có thể phác một thiết kế bằng HTML rồi viết lại bằng ngôn ngữ bạn chọn, bất kể là React, Swift, v.v.

Claude Design dựa trên HTML vì HTML thể hiện thiết kế cực kỳ tốt, kể cả khi sản phẩm cuối cùng không chạy trên web. Claude có thể phác thảo thiết kế bằng HTML trước, rồi chuyển sang ngôn ngữ bạn chọn như React, Swift, v.v.

Bạn cũng có thể dựng prototype cho tương tác như animation, action, v.v. Hãy nghĩ đến việc yêu cầu Claude tạo slider, knob, v.v. để tinh chỉnh chính xác những gì bạn đang muốn.

Bạn cũng có thể tạo prototype tương tác như animation, action, v.v. Hãy cân nhắc yêu cầu Claude thêm slider, knob để tinh chỉnh đúng những gì bạn đang cần.

Ví dụ prompt / Example prompt:

Tôi muốn làm prototype một nút checkout mới; khi nhấn vào nó sẽ chạy animation rồi nhanh chóng chuyển sang màu tím. Tạo một file HTML với vài slider và tùy chọn để tôi thử các biến thể khác nhau của animation, và cho tôi một nút copy để sao chép các tham số hoạt động tốt nhất.

Tôi muốn làm prototype cho nút checkout mới: khi nhấp vào thì nó phát animation và sau đó nhanh chóng chuyển sang màu tím. Hãy tạo một file HTML với vài slider và tùy chọn để tôi thử các cấu hình khác nhau của animation, đồng thời cho tôi một nút copy để sao chép các tham số hiệu quả nhất.

Dùng cho / Use this for:

• Tạo tài sản cho hệ thống thiết kế / Creating design system artifacts
• Điều chỉnh component / Adjusting components
• Trực quan hóa thư viện component / Visualizing component libraries
• Dựng prototype animation / Prototyping animations

4. Báo cáo, nghiên cứu và học tập / Reports, Research, and Learning

Claude Code rất hiệu quả trong việc tổng hợp thông tin từ nhiều nguồn và chuyển thành báo cáo dễ đọc. Bạn có thể nhắc Claude tìm trên Slack, codebase, lịch sử git, hoặc internet rồi dùng nó tạo report dễ đọc.

Claude Code rất hiệu quả trong việc tổng hợp thông tin từ nhiều nguồn và chuyển thành báo cáo dễ đọc. Bạn có thể nhắc Claude tìm trong Slack, codebase, lịch sử git hoặc cả internet rồi tạo một báo cáo dễ đọc.

Bạn có thể gom lại thành một tài liệu HTML dài, một bài giải thích có tương tác, hoặc thậm chí một slideshow/deck. Hãy bảo Claude dùng SVG cho biểu đồ để giúp trực quan hóa nội dung.

Bạn có thể xây nó dưới dạng một tài liệu HTML dài, một trang giải thích tương tác hoặc cả slide deck. Hãy yêu cầu Claude dùng SVG cho đồ thị để tăng khả năng trực quan.

Ví dụ prompt / Example prompt:

Tôi không hiểu rõ cách limiter của chúng ta hoạt động. Hãy đọc mã liên quan và tạo một trang giải thích HTML đơn: một sơ đồ luồng token-bucket, 3–4 snippet code quan trọng có chú thích, và một mục “gotchas” ở cuối. Tối ưu hóa để đọc một lần là đủ nắm.

Tôi không hiểu limiter hoạt động như thế nào. Hãy đọc code liên quan và tạo một trang giải thích HTML đơn, có một sơ đồ luồng token-bucket, 3-4 snippet code quan trọng kèm chú thích, và một phần “gotchas” ở cuối trang. Tối ưu hóa để người đọc chỉ cần đọc một lần là hiểu.

Dùng cho / Use this for:

• Viết tóm tắt tính năng / Writing feature summaries
• Tạo tài liệu giải thích / Generating explainers
• Soạn báo cáo trạng thái hàng tuần / Drafting weekly status reports
• Tạo báo cáo sự cố / Creating incident reports
• Sinh SVG illustrations, flowchart, technical diagram / Producing SVG illustrations, flowcharts, and technical diagrams

5. Giao diện chỉnh sửa tùy biến / Custom Editing Interfaces

Đôi khi khó diễn đạt đúng ý chỉ bằng textbox. Với use case này, tôi thường nhờ Claude xây cho mình một editor tạm thời cho đúng công việc đang làm: không phải sản phẩm, cũng không phải tool tái dùng, mà là một file HTML đơn lẻ, được tạo riêng cho đúng phần dữ liệu này.

Đôi khi mô tả mong muốn chỉ qua textbox rất khó. Với trường hợp này, tôi hay nhờ Claude làm một trình biên tập nhanh dùng một lần cho đúng vấn đề đang làm: không phải là sản phẩm, không phải tool tái sử dụng, mà là một file HTML duy nhất được thiết kế riêng cho tập dữ liệu này.

Mấu chốt luôn là kết thúc bằng phần export: một nút “copy as JSON” hoặc “copy as prompt” để chuyển bất kỳ thay đổi nào trong UI trở lại dạng có thể dán vào Claude Code hoặc commit vào file. Bạn vẫn giữ được vòng lặp, nhưng vòng lặp sẽ chặt chẽ hơn rất nhiều.

Mấu chốt luôn là luôn kết thúc bằng một hành động xuất ra: nút “copy as JSON” hoặc “copy as prompt” để biến bất kỳ thao tác nào bạn làm trên UI trở lại định 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 sẽ trở nên chặt chẽ hơn.

Ví dụ prompt / Example prompts:

Tôi cần sắp xếp lại mức ưu tiên của 30 ticket Linear. Tạo một file HTML với mỗi ticket là một thẻ có thể kéo qua các cột Now / Next / Later / Cut. Hãy pre-sort theo đánh giá tốt nhất của bạn. Thêm nút “copy as Markdown” để xuất thứ tự cuối cùng theo từng bucket kèm một lý do một dòng mỗi bucket.

Tôi cần phân loại lại ưu tiên của 30 ticket Linear này. Hãy làm cho tôi một file HTML, mỗi ticket là một card có thể kéo thả qua bốn cột Now / Next / Later / Cut. Bạn có thể tự sắp xếp trước theo dự đoán tốt nhất của mình. Cuối cùng thêm nút “copy as Markdown” để xuất ra thứ tự cuối cùng và kèm một lý do ngắn một dòng cho mỗi bucket.

Đây là cấu hình feature flag của chúng tôi. Hãy tạo một editor dựa trên form cho nó, nhóm các flag theo khu vực, hiển thị dependency giữa chúng, cảnh báo nếu tôi bật flag nhưng prerequisite của nó đang tắt. Thêm nút “copy diff” chỉ xuất các key đã thay đổi.

Đây là cấu hình feature flag của chúng tôi. Tạo một editor dạng form, nhóm các flag theo khu vực, hiển thị dependency giữa các flag, và cảnh báo nếu bật flag mà tiền điều kiện (prerequisite) chưa bật. Thêm nút “copy diff” chỉ xuất các key đã thay đổi.

Tôi đang chỉnh system prompt này. Hãy làm một editor bên cạnh: bên trái là prompt có thể chỉnh và highlight các biến slot, bên phải có 3 mẫu input để render template theo thời gian thực khi tôi chỉnh prompt. Thêm counter character/token và nút copy.

Tôi đang tuning system prompt. Hãy tạo một editor hiển thị song song: bên trái là prompt có thể chỉnh và các biến slot được highlight; bên phải có 3 input mẫu để render trực tiếp template đã điền theo thời gian thực. Thêm bộ đếm ký tự/token và nút copy.

Dùng cho / Use this for:

• Sắp lại thứ tự, sàng lọc, hoặc gom nhóm bất kỳ thứ gì / Reordering, triaging, or bucketing anything
• Chỉnh sửa config có cấu trúc / Editing structured config
• Tuning prompt và template với preview trực tiếp / Tuning prompts and templates with live preview
• Tổ chức dataset / Curating datasets
• Gắn annotation cho tài liệu, transcript hoặc diff / Annotating documents, transcripts, or diffs
• Chọn các giá trị khó diễn đạt bằng text / Picking values painful to express in text

Câu hỏi thường gặp

Đây là những câu hỏi tôi thường gặp nhất khi dùng HTML với Claude Code, kèm theo những thói quen thực tế hàng ngày mà tôi đã đúc kết.

Dưới đây là các câu hỏi thường gặp nhất về việc dùng HTML với Claude Code, cùng với những thói quen thực tế tôi áp dụng hằng ngày.

Vậy có lãng phí thêm token không?

Q: Không hiệu quả hơn sao?

Mặc dù Markdown thường dùng ít token hơn, tôi thấy khả năng biểu đạt phong phú của HTML và khả năng đọc được cao hơn của tôi khiến chất lượng đầu ra tổng thể tốt hơn. Với cửa sổ ngữ cảnh 1MM của Opus 4.7, lượng token tăng thêm gần như không đáng kể trong context window.

Mặc dù Markdown thường dùng ít token hơn, tôi thấy HTML giàu biểu đạt hơn và khả năng đọc lại của tôi cao hơn, nên hiệu quả tổng thể lại tốt hơn. Với context window 1MM của Opus 4.7, lượng token tăng thêm không gây ảnh hưởng đáng kể trong cửa sổ ngữ cảnh.

Khi nào vẫn dùng Markdown?

Q: Bạn vẫn dùng Markdown trong trường hợp nào?

Nói thật, tôi đã gần như ngừng dùng Markdown cho hầu hết mọi thứ, nhưng có lẽ tôi đã đi xa theo hướng “HTML maximalist”.

Nói thật, tôi đã gần như dừng dùng Markdown cho gần như mọi thứ, nhưng có thể tôi đã nghiêng về phía cực đoan HTML khá nhiều.

Làm sao xem file HTML đã tạo?

Q: Làm thế nào để xem file HTML đã tạo ra?

Tôi thường mở nó trong trình duyệt local (bạn cũng có thể yêu cầu Claude mở giúp). Nếu muốn chia sẻ link, tôi chỉ cần upload lên S3.

Tôi thường mở cục bộ trong trình duyệt (bạn thậm chí có thể nhờ Claude mở hộ). Nếu muốn chia sẻ link, chỉ cần upload lên S3.

Tạo HTML có chậm hơn Markdown không?

Q: Việc tạo HTML có mất thời gian hơn không?

Có! HTML có thể mất 2-4 lần lâu hơn khi tạo so với Markdown, nhưng theo thử nghiệm của tôi, chất lượng đầu ra luôn đáng để chờ.

Có, HTML có thể mất nhiều thời gian hơn Markdown từ 2 đến 4 lần, nhưng trong các thử nghiệm của tôi thì kết quả tạo ra thường xứng đáng với thời gian chờ.

Version control thì sao?

Q: Thế còn kiểm soát phiên bản thì sao?

Thẳng thắn mà nói, đây là một trong những điểm đau lớn nhất của HTML. Diff của HTML trong các công cụ version control khá lộn xộn hơn so với Markdown sạch sẽ, làm review code khó hơn.

Thẳng thắn, đây là một trong những điểm khó nhất của HTML. Diff của HTML trong công cụ quản lý phiên bản rối hơn nhiều so với Markdown sạch sẽ, khiến code review khó hơn.

HTML có thay thế hoàn toàn planning không?

Q: Đây có phải cách bạn đã thay thế planning chưa?

Tôi nhận ra thay vì giữ một kế hoạch duy nhất, tôi thường có vài file HTML khác nhau cho các phần/các giai đoạn khác nhau của kế hoạch. Ví dụ, tôi có thể tạo một implementation plan dạng HTML rồi làm một file khác cho phần khám phá UI, rồi cuối cùng tạo một component HTML liệt kê mọi thiết kế. Tôi thường giữ lại các file này để tham chiếu về sau, cũng như dùng trong xác thực.

Tôi thấy rằng thay vì chỉ có một kế hoạch duy nhất, tôi hay tạo một vài file HTML cho từng phần hoặc giai đoạn của kế hoạch. Chẳng hạn, tôi có thể làm một implementation plan bằng HTML, rồi làm thêm một file cho việc exploration UI, và cuối cùng tạo một component HTML liệt kê mọi thiết kế. Tôi thường giữ các file này để tham khảo sau này, đồng thời dùng trong bước verification.

Làm sao khiến trang Claude tạo ra đẹp hơn?

Q: Làm sao để Claude tạo ra trang trông đẹp?

Năng lực thiết kế frontend tích hợp sẵn của Claude đã cho phép nó tạo ra những trang HTML khá đẹp. Nhưng nếu bạn muốn trang khớp đúng brand của công ty, bạn có thể yêu cầu Claude scan codebase và tạo một file HTML cho design system. Sau đó đưa file đó làm tham chiếu mỗi khi cần Claude tạo thêm HTML, nó sẽ giữ được phong cách nhất quán.

Năng lực thiết kế frontend tích hợp sẵn của Claude đã cho phép tạo ra những trang HTML khá đẹp. Nhưng nếu bạn muốn trang phù hợp với brand của công ty, bạn có thể yêu cầu Claude scan codebase rồi tạo một file HTML hệ thống thiết kế. Sau đó dùng file đó làm tài liệu tham chiếu mỗi khi cần tạo trang HTML khác, nó sẽ giữ được phong cách nhất quán.

5. Giữ được sự tương tác con người - máy móc / Staying in the Loop with Claude

Những gì tôi đã nói ở trên cho thấy lý do thật sự tôi dùng HTML thay cho Markdown là nó giúp tôi cảm thấy gắn kết hơn nhiều với Claude. Khi Claude làm nhiều hơn, tôi nhận thấy mình đọc kế hoạch kém tập trung hơn, nên tôi cần một cách để vẫn theo dõi các lựa chọn của nó thay vì chỉ giao việc rồi thôi. HTML hóa ra là đúng vậy. Giờ tôi thấy mình tham gia sâu hơn bao giờ hết.

Tóm lại, lý do đằng sau việc tôi dùng HTML thay vì Markdown là nó giúp tôi cảm thấy mình vẫn “ở trong vòng lặp” khi làm việc với Claude. Khi Claude làm nhiều hơn, tôi nhận ra mình đọc kế hoạch ngày càng ít và tôi muốn một cách để theo dõi quyết định của nó thay vì chỉ chuyển giao xong. HTML đã đúng như vậy. Hiện giờ, tôi thấy mình tham gia sâu hơn bao giờ hết.

*Bài viết gốc của Thariq Shihipar (trưởng nhóm kỹ thuật Claude Code tại Anthropic), thể hiện quan điểm cá nhân và sở thích cá nhân của ông ấy.*

*This article was written by Thariq Shihipar, engineering lead for Claude Code at Anthropic, and represents his personal opinions and preference for using HTML files with Claude Code.*

Tài liệu tham khảo

• Using Claude Code: The Unreasonable Effectiveness of HTML (bản gốc)
• Thư viện file HTML mẫu
• Bài đăng gốc Thariq Shihipar trên X (Twitter)
• Phân tích và tóm tắt của Simon Willison