Lần mình test html-anything, mình chỉ có một đoạn text về cách dùng thẻ tín dụng không bị bẫy lãi suất. Không ảnh, không design, không Canva template nào mở sẵn. Mình paste đoạn đó vào tool, chọn lần lượt 12 template khác nhau, và bấm generate. Trong vòng chưa đầy 30 phút, mình có 12 file HTML hoàn toàn khác nhau về visual - từ magazine editorial kiểu warm paper, terminal dark aesthetic, blueprint deck cho đến LinkedIn carousel. Cùng một input. Không thêm một câu nào.
Đó là lần đầu mình thực sự hiểu html-anything đang làm gì - và tại sao nó đáng thử.
html-anything hoạt động như thế nào?
Tool này được build trên nền open-design - về bản chất là một lớp UI và skill system ngồi trên các AI CLI agent mà bạn đã cài sẵn. Thay vì tương tác với Claude Code qua terminal, bạn mở browser ở localhost:3000, chọn một template trong thư viện 75 skill, paste content vào, và để agent generate HTML ra trực tiếp với live preview. Điểm khác biệt quan trọng là tool không dùng API key riêng - nó tận dụng session Claude Code đang login trên máy bạn, nghĩa là chi phí thêm gần như bằng 0 nếu bạn đã có subscription.
Cơ chế phía sau khá thẳng: khi bạn bấm Generate, server gửi content cộng với system prompt của skill đến Claude Code qua stdin/stdout. Agent xử lý và trả về HTML dưới dạng JSON-line stream - tool parse stream đó và update iframe preview theo thời gian thực. Bạn có thể ngắt giữa chừng nếu thấy output đi sai hướng, rồi generate lại với template khác. Không có bước deploy hay build nào - output là file HTML standalone mà bạn tải về và dùng ngay.
Giao diện html-anything: bên trái là danh sách template, ở giữa là HTML preview đang render real-time, bên phải là panel thông tin. Input dùng trong test là bài về thẻ tín dụng.
Cùng 1 input - 12 visual output khác nhau
Đây là phần mình thấy thú vị nhất khi test. Thay vì dùng placeholder content, mình dùng một đoạn giải thích thật về thẻ tín dụng - đủ dài, có cấu trúc rõ, và không phải content kỹ thuật dễ format. Kết quả sau khi chạy qua 12 template hoàn toàn khác nhau cả về layout lẫn cảm giác visual: từ warm editorial giống tạp chí in, terminal deck kiểu developer, đến field manual phong cách quân sự, hyperframes cho video overlay.
Bạn có thể explore trực tiếp dưới đây - click từng tab để xem output của mỗi template với cùng một input:
Nếu iframe không load, mở trực tiếp tại đây.
Điều mình nhận ra sau khi so sánh: không có template nào tốt hơn cái kia - mỗi cái phù hợp với một loại content và một kênh phân phối khác nhau. Magazine poster phù hợp với bài educational dài, terminal deck phù hợp với nội dung kỹ thuật, LinkedIn carousel phù hợp để chia nhỏ insight ra từng slide. Thay vì phải biết design để chọn đúng layout ngay từ đầu, bạn có thể generate nhiều variant và chọn sau - đây là cách làm việc khác hẳn so với Canva hay Figma.
Cài đặt trong 5 phút
html-anything chạy hoàn toàn local - không có SaaS, không có account, không có cloud upload. Yêu cầu duy nhất là Node.js và pnpm. Nếu chưa có pnpm thì npm install -g pnpm là xong, sau đó:
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next devMở localhost:3000 là dùng được. Tool tự detect Claude Code qua PATH và chọn làm agent mặc định. Nếu bạn có nhiều CLI agent (Gemini, Cursor, Aider…), bạn switch ngay từ giao diện mà không cần cấu hình thêm gì.
Mình thêm một file start.command trong folder để double-click từ Finder là khởi động ngay - không cần nhớ lệnh mỗi lần dùng:
#!/bin/zsh
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && source "$NVM_DIR/nvm.sh"
cd "$(dirname "$0")"
open http://localhost:3000 &
pnpm -F @html-anything/next devCách này tốt hơn Automator app vì nó load đúng nvm PATH, tự mở browser, và không cần thêm bước nào. Lần sau muốn dùng: click một cái, xong.
Tạo custom skill theo design system riêng
Cái mình thích nhất ở html-anything là bạn có thể thêm template riêng chỉ bằng cách tạo một folder mới trong src/lib/templates/skills/. Không cần đụng vào TypeScript, không cần restart server - dev server tự rescan và template mới xuất hiện ngay trong picker sau khi reload.
Mình tạo 3 skill theo NateCue design system: card-natecue-social (social card 1200x630 dark theme với brand blue #1585e7), card-natecue-carousel (LinkedIn carousel 1080x1080), và article-natecue (long-form article page). Cả 3 đều dùng Poppins font, dark background #050505, và màu accent theo brand book. Mỗi skill mất khoảng 10 phút để viết prompt - chủ yếu là mô tả màu sắc, layout constraint, và quy tắc xử lý content.
Một skill cơ bản trông như thế này:
---
name: card-natecue-social
en_name: "NateCue Social Card"
emoji: "🔵"
category: card
aspect_hint: "1200×630"
tags: ["natecue", "social", "branding"]
---
[Template: NateCue Social Card]
Generate a 1200x630 dark social card. Background #050505,
brand blue #1585e7 for accents. Font: Poppins from Google Fonts...Khi bạn có design system riêng, khả năng này có giá trị thực sự - không phải generate HTML generic mà generate HTML đúng màu, đúng font, đúng layout của brand. Mỗi lần paste text vào template NateCue là ra visual đã on-brand luôn.
Template picker hiển thị 3 custom skill NateCue (lọc theo “natecue” từ thư viện 78 template). Tab đang chọn là OpenAI Codex - minh họa cho khả năng switch agent ngay từ giao diện.
Đánh giá thực tế
Điểm mình thấy có giá trị nhất là multi-agent support. Tool không lock bạn vào Claude Code - bạn switch sang Gemini CLI, Cursor Agent, hay Aider từ cùng giao diện. Khi muốn thử model khác cho cùng một loại output, bạn không phải setup lại workflow từ đầu. Đây là cách thiết kế hiếm gặp ở tool loại này, và nó làm cho html-anything trở thành layer trung lập trên hệ sinh thái AI CLI đang ngày càng đa dạng.
Output HTML standalone cũng là điểm cộng nếu bạn biết dùng đúng chỗ. Mỗi file tự chứa toàn bộ CSS, font, và logic - không phụ thuộc server, copy đi đâu cũng mở được. Với content dạng social card hay article preview để share, đây là format lý tưởng.
Điểm yếu chính là output HTML thuần này không vào được CMS trực tiếp - bạn cần bước chuyển đổi thêm nếu muốn embed vào WordPress hay Webflow. Và vì cài từ source (chưa có npm package), mỗi lần update là git pull thủ công. Không phải vấn đề lớn với developer, nhưng sẽ là friction thực sự nếu bạn không quen terminal.
Tool này phù hợp với ai?
Nếu bạn đã dùng Claude Code hàng ngày và thường xuyên cần tạo visual content từ text - social card, article preview, slide deck, data report - thì html-anything là bổ sung hợp lý không tốn thêm cost. Setup một lần, có thể dùng ngay mà không cần mở thêm Canva hay Figma cho từng output nhỏ lẻ.
Nếu bạn chưa quen terminal và chưa có Claude Code, learning curve sẽ cao hơn mức tool xứng đáng. Trong trường hợp đó, các tool SaaS với template editor trực quan sẽ phù hợp hơn. html-anything rõ ràng được build cho người đã ở trong hệ sinh thái CLI agent - nó không cố gắng thay thế Canva, mà lấp chỗ trống giữa “có text” và “có visual” với ít friction nhất có thể.
Cá nhân mình sẽ dùng chủ yếu cho 2 việc: generate social card từ highlight của bài blog, và tạo nhanh article preview HTML để embed vào demo. Cả 2 đều là việc lặp lại thường xuyên mà trước đây tốn nhiều thời gian hơn.
Bạn đang dùng tool gì để tạo visual content nhanh từ text? Mình tò mò xem còn workflow nào hay hơn không - để lại comment hoặc nhắn mình trên LinkedIn.
Cảm ơn bạn đã đọc bài viết trên NateCue Insights!