Sử dụng Claude Code: Hiệu quả bất ngờ của HTML

Markdown đã trở thành định dạng tệp chủ đạo mà các tác nhân sử dụng để giao tiếp với chúng ta. Nó đơn giản, dễ di chuyển, có một số khả năng văn bản phong phú và dễ dàng để bạn chỉnh sửa. Claude thậm chí còn trở nên khá giỏi trong việc sử dụng ASCII để tạo sơ đồ bên trong các tệp markdown.

Nhưng khi các tác nhân ngày càng mạnh mẽ hơn, tôi cảm thấy markdown đã trở thành một định dạng hạn chế. Tôi thấy khó đọc một tệp markword dài hơn một trăm dòng. Tôi muốn có hình ảnh trực quan phong phú hơn, màu sắc và sơ đồ, và tôi muốn có thể chia sẻ chúng một cách dễ dàng.

Tôi cũng ngày càng không tự chỉnh sửa các tệp này, mà sử dụng chúng như các thông số kỹ thuật, tệp tham khảo, đầu ra động não, v.v. Khi tôi thực sự chỉnh sửa, tôi thường yêu cầu Claude chỉnh sửa chúng, điều này loại bỏ một trong những lợi ích lớn nhất của markdown.

Tôi đã bắt đầu ưu tiên sử dụng HTML làm định dạng đầu ra thay vì Markdown và ngày càng thấy điều này được những người khác trong nhóm Claude Code sử dụng, đây là lý do tại sao.

(nếu bạn muốn bắt đầu với một số ví dụ, bạn có thể xem một số tại đây: https://thariqs.github.io/html-effectiveness, chỉ cần nhớ quay lại đọc thêm về lý do)

Tại sao lại là HTML?

Mật độ thông tin

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

• Dữ liệu dạng bảng bằng bảng
• Dữ liệu thiết kế với CSS
• Hình minh họa với SVG
• Đoạn mã với thẻ script
• Tương tác sử dụng các phần tử HTML với javascript + CSS
• Quy trình làm việc sử dụng SVG và HTML
• Dữ liệu không gian sử dụng vị trí tuyệt đối và canvas
• Hình ảnh sử dụng thẻ image

Tôi thậm chí 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 khá hiệu quả bằng HTML. Điều này làm cho nó trở thành một cách hiệu quả cao để mô hình truyền đạt thông tin chuyên sâu cho bạn và để bạn xem xét.

Tôi nhận thấy rằng nếu không làm được điều này, mô hình có thể làm những việc kém hiệu quả hơn trong markdown như sơ đồ ASCII hoặc, điều tôi thích nhất, ước tính màu sắc bằng các ký tự unicode như trong ảnh chụp màn hình này từ Claude Code.

Claude Code cố gắng hiển thị màu sắc trong markdown

Rõ ràng trực quan & Dễ đọc

Khi Claude có thể thực hiện các công việc phức tạp hơn, nó cũng viết các thông số kỹ thuật và kế hoạch ngày càng lớn hơn. Trong thực tế, tôi nhận thấy tôi thường không thực sự đọc một tệp markdown dài hơn 100 dòng, và chắc chắn tôi không thể khiến bất kỳ ai khác trong tổ chức của mình đọc nó.

Nhưng các tài liệu HTML dễ đọc hơn nhiều, Claude có thể tổ chức cấu trúc một cách trực quan để lý tưởng cho việc điều hướng bằng tab, hình minh họa, liên kết, v.v. Nó thậm chí có thể thích ứng với thiết bị di động để bạn có thể đọc nó khác nhau dựa trên hình thức thiết bị của mình.

Dễ dàng chia sẻ

Các tệp Markdown khá khó chia sẻ vì hầu hết các trình duyệt không hiển thị chúng tốt một cách tự nhiên. Bạn thường phải thêm chúng dưới dạng tệp đính kèm vào email hoặc tin nhắn.

Với HTML, miễn là bạn tải tệp lên (ví dụ lên S3), bạn có thể dễ dàng chia sẻ liên kết. Đồng nghiệp của bạn có thể mở nó ở bất cứ đâu họ muốn và dễ dàng tham khảo nó.

Khả năng ai đó thực sự đọc thông số kỹ thuậ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ó ở dạng HTML.

Tương tác hai chiều

HTML có thể 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 nó thêm thanh trượt hoặc núm vặn để điều chỉnh thiết kế hoặc cho phép bạn tinh chỉnh các tùy chọn khác nhau trong thuật toán để xem điều gì xảy ra. Bạn cũng có thể yêu cầu nó cho phép bạn sao chép những thay đổi này vào một prompt để dán lại vào Claude Code.

Đọc thêm về bài viết playgrounds của tôi để xem ví dụ về tương tác hai chiều này: https://x.com/trq212/status/2017024445244924382

Tiếp nhận dữ liệu

Tại sao sử dụng Claude Code để tạo tệp HTML thay vì ClaudeAI hay Claude Design chẳng hạn? Một trong những lý do lớn nhất là tất cả bối cảnh mà Claude Code có thể tiếp nhận.

Ví dụ, khi viết bài viết này, tôi đã yêu cầu Claude Code đọc qua thư mục mã của tôi và tìm tất cả các tệp HTML tôi đã tạo, nhóm và phân loại chúng, sau đó tạo một tệp HTML với tất cả các sơ đồ đại diện cho từng loại. Các sơ đồ bạn thấy trong bài viết này là kết quả trực tiếp của việc đó.

Bên cạnh hệ thống tệp, Claude Code có thể tìm thêm bối cảnh bằng cách sử dụng MCP của bạn (như Slack, Linear, v.v.), trình duyệt web của bạn (với Claude trong Chrome), lịch sử git của bạn, v.v.

Nó mang lại niềm vui

Tạo tài liệu HTML với Claude thú vị hơn và khiến tôi cảm thấy gắn bó và đầu tư hơn vào quá trình sáng tạo, và bản thân điều đó đã là đủ.

Cách bắt đầu

Tôi hơi sợ rằng mọi người sẽ đọc bài viết này và biến nó thành một kỹ năng /html hay gì đó. Mặc dù điều đó có thể có giá trị, nhưng tôi muốn nhấn mạnh rằng bạn không cần làm nhiều để Claude thực hiện điều này. Bạn chỉ cần yêu cầu nó "tạo một tệp HTML" hoặc "tạo một artifact HTML".

Bí quyết là biết bạn muốn artifact làm gì và bạn có thể sử dụng nó như thế nào. Theo thời gian, bạn có thể tạo một kỹ năng, nhưng hiện tại tôi khuyên bạn nên bắt đầu từ đầu để làm quen với cách sử dụng nó trong các trường hợp khác nhau.

Các trường hợp sử dụng

Để cụ thể hơn, tôi đã tạo nhiều tệp HTML khác nhau cho các trường hợp sử dụng khác nhau. Bạn có thể xem tất cả chúng tại đây: https://thariqs.github.io/html-effectiveness/ nhưng đây là tổng quan.

Thông số kỹ thuật, Lập kế hoạch & Khám phá

HTML là một canvas phong phú để Claude đi sâu vào một vấn đề. Khi tôi bắt đầu làm việc trên một vấn đề, thay vì một kế hoạch markdown đơn giản, tôi mong đợi tạo ra một mạng lưới các tệp HTML. Ví dụ, tôi có thể bắt đầu bằng cách yêu cầu Claude Code động não và tạo ra một số khám phá về các tùy chọn khác nhau. Sau đó, tôi sẽ yêu cầu nó mở rộng thêm vào một tùy chọn, có thể tạo mockup hoặc đoạn mã. Cuối cùng, khi tôi cảm thấy ổn, tôi sẽ yêu cầu nó viết một kế hoạch triển khai. Khi tôi hài lòng với kế hoạch, tôi sẽ tạo một phiên mới và chuyển tất cả các tệp này cho nó để triển khai.

Khi xác minh, tôi cũng sẽ yêu cầu tác nhân xác minh đọc các tệp và nó sẽ có bối cảnh rộng hơn nhiều về những gì cần thiết.

Ví dụ Prompt:

• Tôi không chắc nên đi theo hướng nào cho màn hình giới thiệu. Hãy tạo 6 cách tiếp cận khác biệt rõ ràng — thay đổi bố cục, giọng điệu và mật độ — và sắp xếp chúng thành một tệp HTML duy nhất trong một lưới để tôi có thể so sánh chúng cạnh nhau. Dán nhãn cho mỗi cách với sự đánh đổi mà nó đưa ra.
• Tạo một kế hoạch triển khai chi tiết trong một tệp HTML, hãy đảm bảo tạo một số mockup, hiển thị luồng dữ liệu và thêm các đoạn mã quan trọng mà tôi có thể muốn xem xét. Làm cho nó dễ đọc và dễ hiểu.

Các trường hợp sử dụng:

• Khám phá các cách khác để triển khai điều gì đó trong mã
• Khám phá nhiều thiết kế trực quan

Đánh giá mã & Hiểu mã

Mã có thể khó đọc trong một tệp Markdown. Nhưng với HTML, chúng ta có thể hiển thị diff, chú thích, sơ đồ luồng, mô-đun, v.v. Sử dụng điều này để hiểu mã mà tác nhân đã viết, để được đánh giá mã hoặc để giải thích PR cho ai đó đang xem xét mã của bạn. Tôi thấy điều này thường hiệu quả hơn chế độ xem diff mặc định của Github, và tôi đính kèm một trình giải thích mã HTML vào mọi PR tôi tạo bây giờ.

Ví dụ prompt:

Hãy giúp tôi xem xét PR này bằng cách tạo một artifact HTML mô tả nó. Tôi không quen thuộc lắm với logic streaming/backpressure, vì vậy hãy tập trung vào đó. Hiển thị diff thực tế với chú thích lề nội dòng, mã hóa màu các phát hiện theo mức độ nghiêm trọng và bất cứ điều gì khác có thể cần thiết để truyền đạt khái niệm tốt.

Các trường hợp sử dụng:

• Tạo PR
• Xem xét PR
• Hiểu một chủ đề trong Mã

Thiết kế & Nguyên mẫu

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 cuối cùng của bạn không phải là HTML. Claude có thể phác thảo một thiết kế trong HTML và sau đó viết nó bằng ngôn ngữ bạn chọn, có thể là React, Swift, v.v.

Bạn cũng có thể tạo nguyên mẫu cho các tương tác, chẳng hạn như hoạt ảnh, hành động, v.v. Hãy cân nhắc yêu cầu Claude tạo thanh trượt, núm vặn, v.v. để tinh chỉnh chính xác những gì bạn đang tìm kiếm.

Ví dụ prompt:

Tôi muốn tạo nguyên mẫu cho một nút thanh toán mới, khi được nhấp vào, nó sẽ phát hoạt ảnh và sau đó chuyển sang màu tím nhanh chóng. Tạo một tệp HTML với một số thanh trượt và tùy chọn để tôi thử các tùy chọn khác nhau trên hoạt ảnh này, cho tôi một nút sao chép để sao chép các tham số đã hoạt động tốt.

Sử dụng cho:

• Tạo artifact hệ thống thiết kế
• Điều chỉnh các thành phần
• Trực quan hóa thư viện thành phần
• Tạo nguyên mẫu cho các hoạt ảnh vui nhộn

Báo cáo, Nghiên cứu & Học tập

Claude Code cực kỳ giỏi trong việc tổng hợp thông tin từ nhiều nguồn dữ liệu khác nhau và chuyển đổi nó thành một báo cáo dễ đọc. Bạn có thể yêu cầu Claude tìm kiếm Slack, cơ sở mã, lịch sử git, internet, v.v. của bạn và sử dụng nó để tạo ra các báo cáo cực kỳ dễ đọc cho chính bạn, cho lãnh đạo, cho nhóm của bạn, v.v.

Bạn có thể tập hợp điều này dưới dạng một tài liệu HTML dài, một trình giải thích tương tác hoặc thậm chí là một slideshow/bài thuyết trình. Yêu cầu Claude sử dụng SVG cho các sơ đồ để giúp trực quan hóa nó.

Ví dụ, cho các bài viết của tôi về prompt caching, tôi đã yêu cầu Claude chuẩn bị một tệp nghiên cứu chuyên sâu bằng HTML để tôi đọc về tất cả các thay đổi của chúng tôi đối với prompt caching sau khi đọc lịch sử git.

Ví dụ prompt:

Tôi không hiểu bộ giới hạn tốc độ của chúng ta thực sự hoạt động như thế nào. Hãy đọc mã liên quan và tạo một trang giải thích HTML duy nhất: sơ đồ luồng token-bucket, 3–4 đoạn mã chính có chú thích và phần "gotchas" ở cuối. Tối ưu hóa nó cho người đọc một lần.

Sử dụng cho:

• Tóm tắt cách một tính năng hoạt động
• Giải thích một khái niệm cho tôi
• Báo cáo trạng thái hàng tuần cho sếp của bạn
• Báo cáo sự cố cho lãnh đạo của bạn
• Hình minh họa SVG, sơ đồ luồng, sơ đồ kỹ thuật, v.v.

Giao diện chỉnh sửa tùy chỉnh

Đôi khi thật khó để mô tả những gì bạn muốn chỉ trong một hộp văn bản. Trong trường hợp này, tôi sẽ yêu cầu Claude xây dựng cho tôi một trình chỉnh sửa dùng một lần cho chính xác thứ tôi đang làm việc. Không phải là một sản phẩm, hay một công cụ có thể tái sử dụng, mà là một tệp HTML duy nhất, được xây dựng có mục đích cho một phần dữ liệu này.

Bí quyết là luôn kết thúc bằng một bước xuất: một nút "sao chép dưới dạng JSON" hoặc "sao chép dưới dạng prompt" để biến bất cứ điều gì tôi đã làm trong giao diện người dùng trở lại thứ tôi có thể dán vào Claude Code.

Ví dụ prompt:

• Tôi cần sắp xếp lại thứ tự ưu tiên của 30 ticket Linear này. Hãy tạo cho tôi một tệp HTML với mỗi ticket là một thẻ có thể kéo được qua các cột Now / Next / Later / Cut. Sắp xếp trước chúng theo dự đoán tốt nhất của bạn. Thêm một nút "sao chép dưới dạng markdown" để xuất thứ tự cuối cùng kèm lý do một dòng cho mỗi nhóm.
• Đây là cấu hình feature flag của chúng ta. Xây dựng một trình chỉnh sửa dựa trên biểu mẫu cho nó, nhóm các flag theo khu vực, hiển thị sự phụ thuộc giữa chúng, cảnh báo tôi nếu tôi bật một flag có điều kiện tiên quyết đang tắt. Thêm một nút "sao chép diff" để chỉ cung cấp cho tôi các khóa đã thay đổi.
• Tôi đang tinh chỉnh system prompt này. Tạo một trình chỉnh sửa cạnh nhau: prompt có thể chỉnh sửa ở bên trái với các ô biến được đánh dấu, ba đầu vào mẫu ở bên phải hiển thị lại mẫu đã điền trực tiếp. Thêm bộ đếm ký tự/token và một nút sao chép.

Sử dụng cho:

• Sắp xếp lại thứ tự, phân loại hoặc nhóm bất cứ thứ gì (ticket, trường hợp kiểm thử, phản hồi)
• Chỉnh sửa cấu hình có cấu trúc (feature flag, biến môi trường, JSON/YAML có ràng buộc)
• Tinh chỉnh prompt, mẫu hoặc bản sao với xem trước trực tiếp
• Quản lý bộ dữ liệu, phê duyệt/từ chối hàng, gắn thẻ ví dụ, xuất lựa chọn
• Chú thích tài liệu, bản ghi hoặc diff và xuất chú thích
• Chọn các giá trị khó diễn đạt bằng văn bản: màu sắc, đường cong easing, vùng cắt, lịch cron, regex.

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

Tôi đã nói với nhiều người về việc tôi đã chuyển sang HTML và tôi thấy một vài câu hỏi lặp lại.

Nó không kém hiệu quả về token sao?

Mặc dù markdown thường sử dụng ít token hơn, nhưng tôi nhận thấy rằng khả năng biểu đạt bổ sung của HTML và khả năng tôi đọc nó cao hơn nhiều đồng nghĩa với việc tôi nhận được đầu ra tổng thể tốt hơn. Với cửa sổ ngữ cảnh 1MM trong Opus 4.7, việc tăng sử dụng token không thực sự đáng chú ý trong cửa sổ ngữ cảnh.

Khi nào bạn sử dụng markdown bây giờ?

Thành thật mà nói, tôi đã ngừng sử dụng markdown hoàn toàn cho hầu hết mọi thứ, nhưng có lẽ tôi đang ở phía cực đoan của HTML.

Làm thế nào để xem tệp HTML?

Tôi thường chỉ mở nó trong trình duyệt cục bộ (bạn có thể yêu cầu Claude mở nó), hoặc tải lên S3 nếu bạn muốn có một liên kết có thể chia sẻ.

Việc này không mất nhiều thời gian hơn để tạo so với markdown sao?

Việc này thực sự mất nhiều thời gian hơn! HTML có thể mất gấp 2-4 lần so với Markdown, nhưng tôi thấy kết quả xứng đáng.

Còn kiểm soát phiên bản thì sao?

Đây thực sự là một trong những nhược điểm lớn nhất của HTML, diff HTML rất ồn và khó xem xét so với Markdown.

Làm thế nào để Claude phù hợp với gu thẩm mỹ của tôi / không làm cho nó xấu xí?

Plugin thiết kế giao diện người dùng giúp Claude tạo các tệp HTML tốt. Nhưng để phù hợp với phong cách công ty riêng của bạn, bạn có thể tạo một tệp HTML hệ thống thiết kế duy nhất bằng cách hướng Claude vào cơ sở mã của bạn. Sau đó, bạn có thể sử dụng tệp hệ thống thiết kế đó làm tài liệu tham khảo cho các tệp HTML khác.

Luôn cập nhật

Tất cả những điều trên có nghĩa là tôi nghĩ lý do thực sự tôi sử dụng HTML là tôi cảm thấy mình luôn nắm bắt được tình hình với Claude. Tôi đã bắt đầu lo sợ rằng vì tôi đã ngừng đọc kế hoạch một cách chi tiết, tôi sẽ chỉ đơn giản là để Claude tự đưa ra lựa chọn.

Nhưng tôi rất vui khi nói rằng thay vào đó, tôi cảm thấy nắm bắt được tình hình hơn bao giờ hết khi sử dụng HTML. Tôi hy vọng bạn cũng vậy.