Đột nhiên, kiến thức thông thường của bạn sẽ sụp đổ ngay hôm nay. Thành thật mà nói, 99% mọi người vẫn đang dùng Markdown với Claude Code. Một người trong đội ngũ phát triển Claude Code tại Anthropic đã nói: "Dừng lại đi." Anh ấy nói: "Việc xuất ra HTML thay vì Markdown hiệu quả hơn rất nhiều."
Bởi vì khi đầu ra của Claude Code ngày càng phức tạp, Markdown trở nên khó đọc, không truyền tải được thông tin và không thể chia sẻ.
Mặt khác, với HTML:
- Bạn có thể minh họa
- Bạn có thể mã hóa màu sắc
- Bạn có thể tổ chức bằng các tab
- Bạn thậm chí có thể tạo thanh trượt và nút bấm
- Bạn có thể chia sẻ trực tiếp trên trình duyệt
Nói cách khác, để khai thác giá trị thực sự của Claude Code, không chỉ "bạn xuất ra cái gì" mà "bạn xuất ra ở định dạng nào" trở nên cực kỳ quan trọng.
Tôi khẳng định điều này.
Giải pháp tối ưu trong kỷ nguyên Claude Code không chỉ là Markdown, mà là HTML-first.
Trên thực tế, ngay cả trước khi bài viết này ra đời, ClaudeCodeStudio đã tận dụng phương pháp này, đảm bảo các tài liệu slide có chất lượng như thế này chỉ trong một lần 👇
Nếu bạn đọc bài viết này đến cuối, tôi nghĩ bạn sẽ hiểu tại sao điều đó lại khả thi, vì vậy hãy đọc nhé!
Nhân tiện, bạn đã bao giờ gặp trải nghiệm như thế này chưa?
- Bạn đã nhờ Claude Code viết một kế hoạch, nhưng mất hứng thú sau khi nó vượt quá 100 dòng.
- Bạn đã chia sẻ một bản đặc tả Markdown với nhóm, nhưng không ai đọc đến cuối.
- Bạn đã nhìn vào một sơ đồ ASCII art và nghĩ, "...Cái quái gì thế này?"
- Bạn muốn sắp xếp thông tin bằng màu sắc hoặc bố cục, nhưng không thể diễn tả được trong Markdown.
- Bạn đã dán một kế hoạch vào Slack, nhưng nó bị chôn vùi như một tệp đính kèm.
Tất cả những điều này là "vấn đề của định dạng đầu ra."
Một bài viết có tiêu đề "Using Claude Code: The Unreasonable Effectiveness of HTML" được viết bởi Thariq (@trq212), một thành viên của nhóm phát triển Claude Code, hiện đang gây sốt trên X với hơn 11 triệu lượt xem 😳
Thariq là thành viên của nhóm Claude Code tại Anthropic và là một kỹ sư từ YC W20. Nói cách khác, đó là bài viết của một người sử dụng Claude Code hàng ngày ở tuyến đầu tuyên bố: "Tôi đã ngừng sử dụng Markdown."
Lần này, tôi sẽ giải thích nội dung một cách dễ hiểu, bao gồm cả các ví dụ prompt cụ thể 👇
Bài viết gốc tại đây: https://x.com/trq212/status/2052809885763747935
■ Vấn đề với Markdown là gì?
Markdown đã được sử dụng trong nhiều năm như một phương tiện giao tiếp giữa các tác nhân AI và con người. Nó đơn giản, có thể sử dụng ở bất cứ đâu và có thể viết văn bản giàu định dạng ở một mức độ nhất định. Claude Code, tất nhiên, xuất ra Markdown theo mặc định.
Nhưng thành thật mà nói, điều này có quen thuộc không?
Khi Claude Code có khả năng xử lý các tác vụ phức tạp hơn, các kế hoạch và đặc tả nó xuất ra ngày càng dài. Bạn có thực sự đọc một tệp Markdown dài hơn 100 dòng đến cuối không?
Thariq viết trong bài báo:
"Tôi thấy khó đọc một tệp markdown dài hơn một trăm dòng."
Hơn nữa, ngày nay, chúng ta thậm chí còn ít tự mình chỉnh sửa tệp hơn. Chúng ta sử dụng chúng làm tài liệu tham khảo cho các đặc tả hoặc làm đầu ra cho việc động não. Ngay cả khi chỉnh sửa, chúng ta yêu cầu Claude "sửa cái này." Nói cách khác, lợi thế lớn nhất của Markdown—rằng nó "dễ dàng để con người chỉnh sửa bằng tay"—không còn ý nghĩa nữa.
Điều này diễn tả một cách xuất sắc một vấn đề mà nhiều người dùng Claude Code đã cảm thấy một cách vô thức.
■ Tại sao tùy chọn HTML lại "hiệu quả một cách phi lý"
Điều Thariq đề xuất là thay đổi định dạng đầu ra của Claude Code từ Markdown sang HTML.
Bạn có thể nghĩ, "HTML chẳng phải là để tạo trang web sao?" Nhưng sức mạnh biểu đạt của HTML không gì có thể so sánh với Markdown.
Hãy xem những gì có thể diễn đạt cụ thể bằng HTML:
- Dữ liệu có cấu trúc bằng bảng biểu
- Thiết kế và tô màu bằng CSS
- Hình minh họa và sơ đồ bằng SVG
- Các đoạn mã bằng thẻ script
- Tương tác bằng JavaScript và CSS
- Sơ đồ quy trình kết hợp SVG và HTML
- Dữ liệu không gian bằng cách sử dụng định vị tuyệt đối hoặc canvas
- Nhúng hình ảnh bằng thẻ hình ảnh
Thariq khẳng định:
"Tôi có thể nói rằng hầu như không có bộ thông tin nào mà Claude có thể đọc mà bạn không thể biểu diễn một cách khá hiệu quả bằng HTML."
Bất kỳ ai đã từng thử yêu cầu Claude vẽ sơ đồ ASCII hoặc biểu diễn màu sắc bằng ký tự Unicode sẽ hiểu được sức nặng của những lời này. Bạn sẽ được giải phóng khỏi sự kém hiệu quả đó, giống như "lái một chiếc Ferrari đến cửa hàng tiện lợi."
■ Mật độ thông tin khác biệt hoàn toàn
Điểm mạnh lớn nhất của HTML là "mật độ thông tin."
Khi cùng một nội dung được viết bằng Markdown và HTML, HTML có thể truyền tải nhiều thông tin hơn nhiều một cách dễ đọc hơn nhiều. Bạn có thể chuyển đổi bằng tab, mã hóa màu sắc hoặc nhúng sơ đồ.
Ngay cả khi bạn không muốn đọc 100 dòng Markdown, cùng một lượng thông tin được sắp xếp bằng các tab và màu sắc trong HTML sẽ thấm vào đầu bạn ngay lập tức.
Đây không chỉ là "vấn đề về hình thức." Một đặc tả không được đọc cũng giống như một đặc tả không tồn tại. Việc xuất ra ở định dạng được đọc trực tiếp liên quan đến chất lượng của công việc.
■ Dễ dàng chia sẻ
Khi bạn cố gắng chia sẻ một tệp Markdown với ai đó, nó thường diễn ra như thế này:
- Đính kèm dưới dạng tệp vào Slack → Không ai mở nó
- Đính kèm vào email → Không ai mở nó
- Đưa lên GitHub → Những người không phải kỹ sư không thể truy cập
Với HTML, bạn chỉ cần tải nó lên S3 và gửi một liên kết. Bất kỳ ai có trình duyệt đều có thể đọc được. Bạn thậm chí có thể làm cho nó responsive để có thể đọc trên thiết bị di động.
Văn bản gốc của Thariq:
"Cơ hội ai đó thực sự đọc đặc tả, báo cáo hoặc bài viết PR của bạn sẽ cao hơn nhiều nếu nó ở định dạng HTML."
Đây là một điểm tinh tế nhưng cực kỳ quan trọng trong thực tế.
■ Cuộc cách mạng của tương tác hai chiều
Đây là nơi HTML thực sự tỏa sáng.
HTML không chỉ là thứ để "đọc." Nó có thể được vận hành.
Ví dụ, tinh chỉnh một thiết kế. Nếu bạn yêu cầu Claude Code "tạo một tệp HTML có thanh trượt", nó sẽ xuất ra một tệp nơi bạn có thể điều chỉnh tốc độ hoạt ảnh, easing và màu sắc trong thời gian thực. Khi bạn tìm thấy các tham số ưng ý, bạn chỉ cần nhấn nút "sao chép" và dán chúng trở lại Claude Code.
Sự tương tác hai chiều này cho phép các điều chỉnh với mức độ chính xác mà chỉ riêng prompt văn bản không bao giờ có thể đạt được.
Bạn được giải phóng khỏi sự căng thẳng khi phải truyền đạt "sang phải một chút nữa," "nhanh hơn một chút," hoặc "không phải màu này" bằng lời nói. Bạn chỉ cần di chuyển thanh trượt.
■ Các trường hợp sử dụng cụ thể (kèm ví dụ prompt)
Trong bài viết, Thariq giới thiệu các mẫu sử dụng HTML với các ví dụ prompt cụ thể. Chúng thực tế đến mức tôi sẽ giới thiệu nguyên văn.
𝟭. Thiết kế, Lập kế hoạch và Khám phá
Khi làm việc với các tác vụ phức tạp trong Claude Code, thay vì một kế hoạch Markdown, hãy sử dụng nhiều tệp HTML để tạo ra một "mạng lưới khám phá."
Ví dụ prompt:
"Tôi không thể quyết định hướng đi nào cho màn hình giới thiệu (onboarding screen). Hãy tạo 6 cách tiếp cận hoàn toàn khác nhau, thay đổi bố cục, giọng điệu và mật độ, và sắp xếp chúng trong một lưới trong một tệp HTML để tôi có thể so sánh. Viết các đánh đổi (trade-offs) cho từng cách trên các nhãn."
"Tạo một kế hoạch triển khai chi tiết trong một tệp HTML. Bao gồm mockup, luồng dữ liệu và các đoạn mã quan trọng để xem xét. Làm cho nó dễ đọc và dễ tiếp thu."
𝟮. Đánh giá mã và Hiểu mã
Bạn có thể tạo các bài đánh giá mã dễ đọc hơn màn hình diff của GitHub.
Ví dụ prompt:
"Tạo một artifact HTML để đánh giá PR này. Tôi không quen với logic streaming/backpressure, vì vậy hãy tập trung vào phần đó. Hiển thị diff thực tế với các chú thích lề nội dòng, được mã hóa màu sắc theo mức độ quan trọng."
Thariq viết, "Bây giờ, tôi đính kèm một giải thích mã định dạng HTML vào mọi PR."
𝟯. Thiết kế và Tạo mẫu thử (Prototyping)
Cũng giống như nền tảng của Claude Design là HTML, HTML cực kỳ tốt trong việc thể hiện thiết kế. Ngay cả khi triển khai cuối cùng là React hay Swift, một quy trình phác thảo bằng HTML trước rồi viết lại vẫn hiệu quả.
Ví dụ prompt:
"Tôi muốn tạo một nguyên mẫu cho một nút thanh toán mới. Nó sẽ có hiệu ứng hoạt ảnh và chuyển sang màu tím khi được nhấp. Tạo một tệp HTML nơi tôi có thể thử từng tham số hoạt ảnh bằng thanh trượt và các tùy chọn. Bao gồm một nút để sao chép các tham số hoạt động tốt."
𝟰. Báo cáo, Nghiên cứu và Học tập
Claude Code rất giỏi trong việc tổng hợp thông tin từ nhiều nguồn dữ liệu khác nhau và tóm tắt thành một báo cáo dễ đọc. Bạn có thể yêu cầu nó tìm kiếm Slack, cơ sở mã, lịch sử git và internet để tạo báo cáo lãnh đạo hoặc báo cáo sự cố.
Ví dụ prompt:
"Tôi không hiểu cách hoạt động của bộ giới hạn tốc độ (rate limiter). Hãy đọc mã liên quan và tạo một trang giải thích HTML. Bao gồm sơ đồ luồng token bucket, 3-4 đoạn mã quan trọng có chú thích, và cuối cùng là một phần 'cạm bẫy' (pitfalls). Tối ưu hóa nó để tôi có thể hiểu trong một lần đọc."
𝟱. Giao diện chỉnh sửa tùy chỉnh
Đây là trường hợp sử dụng gây sốc nhất đối với cá nhân tôi. Nhận ra các thao tác khó truyền đạt trong một hộp văn bản bằng một trình soạn thảo HTML dùng một lần.
Ví dụ prompt:
"Tôi muốn sắp xếp lại mức độ ưu tiên của 30 ticket Linear. Tạo một tệp HTML nơi mỗi ticket là một thẻ có thể kéo (draggable card) và đặt chúng trong bốn cột: Now / Next / Later / Cut. Sắp xếp chúng dựa trên phỏng đoán ban đầu của bạn. Bao gồm một nút 'Copy as Markdown' để xuất thứ tự cuối cùng kèm một dòng lý do cho mỗi nhóm."
"Tôi đang điều chỉnh system prompt này. Tạo một trình soạn thảo cạnh nhau (side-by-side editor). Ở bên trái, một prompt có thể chỉnh sửa (làm nổi bật các vị trí biến), và ở bên phải, ba đầu vào mẫu để template phản ánh theo thời gian thực. Bao gồm một bộ đếm ký tự/token và một nút sao chép."
Ý tưởng này thật tuyệt vời phải không? Tạo giao diện người dùng cần thiết ngay tại chỗ, chỉ cho tác vụ đó. Nó không cần phải được tái sử dụng. Nó không cần phải hoàn hảo. Nhưng nó hiệu quả gấp 100 lần so với làm việc chỉ bằng văn bản.
■ Câu trả lời cho các câu hỏi thường gặp
Trong bài viết, Thariq cũng trả lời các câu hỏi phổ biến về HTML.
"Nó không kém hiệu quả về token sao?"
→ Đúng là nó sử dụng nhiều token hơn Markdown. Nhưng xem xét sức mạnh biểu đạt và "xác suất thực sự được đọc," nó hiệu quả về tổng thể. Với ngữ cảnh 1 triệu token của Opus 4.7, sự gia tăng ở mức không đáng kể.
"Việc tạo ra không mất thời gian sao?"
→ Mất nhiều thời gian hơn Markdown 2-4 lần. Nhưng bản thân Thariq cảm thấy kết quả xứng đáng với thời gian đó.
"Kiểm soát phiên bản (version control) thì sao?"
→ Đây thực sự là một bất lợi. Diff HTML có nhiều nhiễu hơn Markdown và khó xem xét hơn. Hiện tại, đây là một trong những điểm yếu lớn nhất của HTML.
"Thiết kế cuối cùng trông có vẻ loè loẹt?"
→ Nó sẽ được cải thiện nếu bạn sử dụng plugin thiết kế frontend của Claude Code. Hơn nữa, nếu bạn yêu cầu Claude Code đọc cơ sở mã của công ty bạn để tạo một "tệp HTML hệ thống thiết kế" và sử dụng nó làm tài liệu tham khảo sau đó, bạn có thể thống nhất nó với phong cách của công ty bạn.
■ Tại sao là HTML "ngay bây giờ"?
Lý do bài viết này gây được tiếng vang là thời điểm.
Giờ đây khi Claude Code có thể xử lý các tác vụ phức tạp, đầu ra dài và dày đặc. Việc tiếp tục nhận nó trong Markdown, một định dạng chỉ là "văn bản với một chút điểm nhấn," giờ đây là một nút thắt cổ chai.
Kết luận của Thariq là thế này:
"Tôi cảm thấy mình kiểm soát được nhiều hơn bao giờ hết khi sử dụng HTML."
Thay vì để mọi thứ cho Claude Code, bằng cách làm cho đầu ra là HTML, một vòng lặp "con người hiểu, đánh giá và phản hồi" sẽ quay vòng. Đây là bản chất của sự cộng tác với AI.
■ Tóm tắt các điểm thực hành
- Không cần kỹ năng hoặc cài đặt khó khăn. Chỉ cần yêu cầu Claude Code "tạo một tệp HTML."
- Đừng cố gắng tạo một tệp kỹ năng ngay từ đầu. Trước tiên, hãy thử với các prompt thô.
- Bắt đầu với "những thứ bạn muốn mọi người đọc," chẳng hạn như kế hoạch, đánh giá, báo cáo và nguyên mẫu.
- Hiệu quả tăng gấp đôi khi bạn có ý thức về "tính tương tác," chẳng hạn như thanh trượt và nút sao chép.
- Mở tệp HTML đã tạo trong trình duyệt hoặc tải nó lên S3 để chia sẻ.
Markdown không tệ. Nhưng giờ đây khi đầu ra của Claude Code đã trở nên tiên tiến như vậy, đã đến lúc nâng cấp định dạng của người nhận.
Lần tới khi bạn yêu cầu Claude Code tạo một kế hoạch, hãy thử thêm một dòng: "Làm bằng HTML." Bạn sẽ ngạc nhiên về sự khác biệt.
Dành cho những ai thấy bài viết này hữu ích dù chỉ một chút:
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻 (@ClaudeCode_love) là
một tài khoản được điều hành bởi ba người đam mê Claude Code.
Chúng tôi đăng bài hàng ngày về việc sử dụng CLI thực tế và tự động hóa.
Chúng tôi hiện đang đồng phát triển một tác nhân AI với một công ty niêm yết.
Các bài đăng thông thường của chúng tôi 👇
- Các trường hợp phát triển sản phẩm thực tế sử dụng Claude Code và Claude
- Tổ chức các xu hướng sử dụng Claude Code / Vibe Coding / phát triển
- Thông tin mới nhất về Claude Code từ nước ngoài
Từ triết lý phát triển đến thiết kế, triển khai và cải tiến,
chúng tôi tổng hợp thông tin nước ngoài và thông tin chính thống đến mức đưa một sản phẩm hoạt động được ra thế giới, không chỉ "hoàn thành bản dựng."
Nếu bạn quan tâm, hãy theo dõi và xem thử nhé 👀 Tôi nghĩ nó sẽ có ích đấy!
