html-anything là gì? Biến dữ liệu thành HTML bằng AI agent

html-anything biến dữ liệu thành HTML bằng AI coding agent — Minh họa workflow dữ liệu → AI coding agent → HTML của html-anything.

html-anything là một dự án mã nguồn mở của tổ chức nexu-io, biến nội dung và dữ liệu thành các trang HTML có bố cục thiết kế bằng cách gọi coding agent CLI đang có sẵn trên máy. Thay vì coi Markdown là “bản cuối”, dự án xem Markdown/CSV/Excel/JSON là đầu vào, còn HTML là sản phẩm để người đọc thực sự nhìn thấy.

Đây là một hướng tiếp cận thú vị cho người làm nội dung, sản phẩm và kỹ thuật: dán dữ liệu vào, chọn một “skill” thiết kế, để agent tạo HTML, xem trong sandbox rồi xuất file HTML hoặc PNG. Tuy nhiên, cần tách bạch giữa điều repo công bố và lời quảng bá: chất lượng thiết kế phụ thuộc rất nhiều vào agent, model, prompt và dữ liệu đầu vào; không có căn cứ chính thức để cam kết kết quả “1:1” với Claude Code hay một chuẩn thiết kế nào.

Minh họa luồng dữ liệu Markdown, bảng tính, JSON và hình ảnh được AI chuyển thành thiết kế HTML — Minh họa: dữ liệu thô đi qua coding agent để trở thành một giao diện HTML có bố cục.

html-anything là gì?

README của dự án gọi đây là “agentic HTML editor”: một ứng dụng local-first, nơi coding agent trên máy tạo HTML và người dùng duyệt/xuất bản thành phẩm. Repo được tạo ngày 11/05/2026, phát hành dưới giấy phép Apache-2.0. Tại thời điểm kiểm tra 23/07/2026, GitHub hiển thị khoảng 7.9K stars và 771 forks.

html-anything có quan hệ kỹ thuật rõ ràng với Open Design: README nói dự án được xây dựng trên kiến trúc agent detection, design-system model và giao thức SKILL.md của Open Design. Vì vậy có thể dùng html-anything như một công cụ chuyên cho đầu ra HTML trong hệ sinh thái đó.

Đính chính nguồn gốc: repository thuộc tổ chức nexu-io. Qua metadata, danh sách commit và contributor công khai, chưa có tài liệu chính thức trong repo xác nhận Tom Huang là tác giả cá nhân của html-anything hoặc Open Design. Vì vậy không nên khẳng định điều này như một sự thật trong bài viết.

Điểm nổi bật đã kiểm chứng

75 skill templates trên 9 dạng đầu ra

Repo công bố 75 skills, mỗi skill nằm trong thư mục riêng theo quy ước SKILL.md và có example.html để mở xem trước. Các nhóm đầu ra chính gồm bài kiểu tạp chí, deck/keynote, résumé, poster, card Xiaohongshu, tweet card, web prototype, data report và Hyperframes video.

Danh mục có các phong cách như Swiss International, Guizang Editorial, Kami parchment và magazine poster. Đây là template/prompt system, không phải thư viện component UI bảo đảm mọi đầu ra giống hệt ví dụ: agent vẫn là bên tạo file cuối.

Tận dụng coding agent CLI đã đăng nhập

Ứng dụng quét các binary CLI trên PATH, bao gồm cả một số thư mục cài đặt phổ biến. README hiện nêu 9 CLI có adapter gọi được: Claude Code, OpenAI Codex, Cursor Agent, Gemini CLI, GitHub Copilot CLI, OpenCode, Qwen Coder, Aider và IBM Bob Shell.

Nếu CLI đã được người dùng đăng nhập từ trước, html-anything có thể gọi lại session đó nên không yêu cầu nhập thêm API key vào ứng dụng. Nhưng “không cần API key” không có nghĩa là miễn phí vô điều kiện: chi phí/quota vẫn theo subscription, tài khoản hoặc cấu hình của CLI bạn chọn.

Code hiện tại còn có danh sách nhận diện rộng hơn, gồm OpenClaw, Qoder, CodeWhale/DeepSeek TUI và một số CLI qua ACP như Hermes, Kimi, Devin, Kiro, Kilo, Vibe, Pi. Quan trọng: chính source ghi rõ adapter ACP/Pi-RPC trong bản này là detection-only, tức có thể hiện trạng thái phát hiện nhưng chưa phải tất cả đều gọi được để sinh nội dung. Vì thế claim “hỗ trợ 18 agent” cần được diễn đạt thận trọng.

Đầu vào file rộng hơn con số 11

Source parser cho thấy dự án xử lý trực tiếp văn bản và code như .md, .txt, .csv, .tsv, .json, .yaml/.yml, .sql, .html; bảng tính .xlsx, .xls, .ods, .xlsm; nhiều loại ảnh như PNG/JPG/JPEG/GIF/WebP/SVG/BMP; và cả PDF với lưu ý giới hạn khi PDF là bản scan nhiều ảnh. Excel được chuyển thành CSV theo từng sheet; ảnh được giữ dưới dạng data URL/asset cục bộ.

Preview sandbox và xuất HTML/PNG

HTML sinh ra được hiển thị trong iframe sandbox. Repo mô tả hỗ trợ CSS inline cho luồng dán sang WeChat/Zhihu và xuất PNG qua screenshot ở scale mặc định 2× (high-DPI). Ngoài tải file HTML/PNG, README còn liệt kê các đích xuất nhanh như WeChat, X và Zhihu; source mới có thêm các module export khác, nhưng trải nghiệm có thể tiếp tục thay đổi vì dự án còn đang phát triển nhanh.

Cài và chạy trên máy

Repo là pnpm workspace với ứng dụng Next.js. Cần cài Node.js và pnpm, sau đó chạy các lệnh chính thức sau tại Terminal:

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev

Mở http://localhost:3000, kiểm tra agent CLI đã login, chọn skill, đưa nội dung vào editor và chạy lệnh tạo. Với Windows, hãy bảo đảm binary của Codex/Claude Code/Gemini… nằm trong PATH hoặc dùng biến override mà dự án hỗ trợ cho từng CLI.

Workflow nên thử

Chuẩn bị một nguồn gọn gàng: brief Markdown, báo cáo CSV/Excel, JSON hoặc nội dung bài viết.
Chọn một skill đúng mục tiêu: data report cho số liệu, deck cho thuyết trình, poster/social card cho mạng xã hội, prototype cho trang web.
Chọn coding agent mà bạn đã có quyền sử dụng; đưa prompt cụ thể về khán giả, ngôn ngữ, màu sắc, cấu trúc và dữ liệu phải giữ nguyên.
Xem preview, yêu cầu agent sửa từng vòng thay vì kỳ vọng lần đầu hoàn hảo.
Kiểm tra dữ liệu, link, ảnh, responsive và khả năng đọc trước khi tải HTML/PNG hay dán sang nền tảng khác.

Ưu điểm và giới hạn thực tế

Ưu điểm: tận dụng được CLI/subscription hiện có; có nhiều hướng thiết kế để bắt đầu nhanh; lưu dữ liệu theo hướng local-first; HTML dễ kiểm soát và chỉnh sửa hơn một ảnh tĩnh; preview sandbox và PNG 2× là hữu ích cho workflow xuất bản.

Giới hạn: chất lượng đầu ra không đồng đều giữa agent/model và prompt; “75 skills” là bộ hướng dẫn/template chứ không thay thế designer; một số agent được nhận diện nhưng chưa có adapter gọi hoàn chỉnh; các output HTML dùng CDN/font/script ngoài có thể hiển thị khác nhau khi đem lên từng nền tảng; export social vẫn nên được thử bằng tài khoản thật trước khi xuất bản rộng rãi.

Lưu ý về quyền truy cập và dữ liệu

Việc “reuse login” giúp đỡ nhập key, nhưng đồng thời ứng dụng sẽ gọi CLI với quyền của phiên đăng nhập hiện có. Chỉ nên chạy trên máy tin cậy, dùng agent có sandbox/quyền tối thiểu, và không đưa dữ liệu nhạy cảm vào prompt nếu bạn chưa hiểu điều khoản của provider/CLI đang dùng. Hãy sao lưu tài liệu nguồn và HTML đầu ra; kiểm tra kỹ trước khi gửi lên mạng xã hội hoặc công cụ xuất bản.

Kết luận

html-anything đáng thử nếu anh muốn biến nội dung, báo cáo hoặc dữ liệu thành một “artifact” HTML có thiết kế thay vì chỉ gửi Markdown. Điểm hấp dẫn nhất không phải lời hứa thiết kế tự động hoàn hảo, mà là pipeline thực tế: data → skill → coding agent quen thuộc → preview → HTML/PNG. Với người dùng Codex, Claude Code hoặc các CLI tương tự, đây là một lựa chọn đáng đặt cạnh các skill frontend/preview hiện có.