html-anything: Khi AI Agent viết HTML thay bạn - từ Markdown thô đến bài đăng WeChat trong vài giây

TL;DR

html-anything là agentic HTML editor local-first, miễn phí, open-source (Apache-2.0). Thay vì bạn phải viết CSS hay reflow Markdown thủ công, tool tự động dùng AI agent đã có sẵn trên máy (Claude Code, Codex, Cursor, Gemini, v.v.) để chuyển bất kỳ input nào thành HTML ship-ready, rồi export 1-click lên WeChat, X, Zhihu, hoặc download file.

• 8 coding-agent CLIs được tự động detect trên PATH
• 75 skill templates × 9 loại output (magazine, deck, poster, social card, prototype, data report...)
• Marginal cost: $0 - reuse session đã login sẵn, không cần API key mới
• 1.1k sao GitHub sau 4-5 ngày ra mắt

Vấn đề mà tool này giải quyết

Anthropic Claude Code team có một thông báo gây chú ý gần đây: họ đã ngừng viết tài liệu nội bộ bằng Markdown và chuyển hoàn toàn sang ship HTML. Lý do thực tế:

Markdown có layout bị giới hạn bởi renderer, trông xấu khi screenshot cho social media, và phải reflow thủ công mỗi khi muốn đăng WeChat hay Zhihu. HTML thì ngược lại: layout hoàn toàn kiểm soát, screenshot đã ra ảnh có thiết kế, và convert 1-click sang mọi platform.

Vấn đề là "viết HTML" từng đồng nghĩa với viết CSS, chọn type scale, grid responsive - phần lớn writer hay designer không có thời gian. html-anything giải quyết đúng điểm này: AI agent viết HTML, bạn chỉ cần paste input và nhấn ⌘+Enter.

Cách hoạt động

Flow cực đơn giản:

1. Mở browser - top bar tự scan PATH, detect các CLI agent đã install
2. Chọn skill template phù hợp từ 75 lựa chọn
3. Paste input (Markdown, CSV, Excel, JSON, SQL, hoặc raw notes)
4. Nhấn ⌘+Enter - agent bắt đầu generate qua SSE streaming, bạn xem HTML "vẽ" real-time trong iframe preview
5. Export 1-click sang WeChat, X, Zhihu, hoặc download file

Điểm đặc biệt: tool không cần API key mới. Nó detect và reuse session bạn đã login trong terminal (claude login, cursor login, gemini auth...). Subscription Claude Pro hay Codex bạn đang dùng hàng ngày? Tool này dùng lại đúng session đó, không tốn thêm đồng nào.

Architecture phía sau:

Browser (Next.js 16) → GET /api/agents (detect CLI trên PATH)
                     → POST /api/convert (SSE streaming)
                          ↓
                    Local code agent (reuses session)
                          ↓
                    stdout JSON-line
                          ↓
                    iframe srcdoc (real-time update)

75 templates - tại sao con số này quan trọng

Phần có giá trị nhất của tool không phải là agent bridge - mà là 75 skill template với hard constraints chống AI slop. Mỗi template đều hard-code:

• 8px baseline grid: mọi spacing, line-height, font-size là bội số của 8
• Color contrast ≥ 4.5: đảm bảo accessibility
• CJK-first font stack: Noto Sans/Serif SC, Inter/Manrope - không phải font random
• Dùng data thật: tuyệt đối không lorem ipsum - agent bị buộc phải dùng content của bạn

Catalog template phân theo mode:

• prototype: web app, SaaS landing, dashboard, mobile app (iPhone 15 Pro chrome), waitlist form
• deck: 20 keynote skills - Swiss International, Guizang Editorial, Hermes Cyber, Replit style, XHS Pastel...
• frame: 10 Hyperframes video scripts - liquid hero 1920×1080, NYT data chart, glitch title, logo outro
• social: X quote card 1600×900, Xiaohongshu card, Spotify-Wrapped style, carousel 3-card 1080×1080
• office: PM spec, OKR scoresheet, finance report, invoice, eng runbook, kanban board

Output có kích thước cụ thể theo platform: desktop prototype 1440×900, magazine poster 1080×1920, X card 1600×900. Không phải AI "freestyle" - đây là deliverable có specs rõ ràng.

Export 1-click - hết cần "chỉnh thêm sau"

Đây là điểm thực dụng nhất của tool. Mỗi platform được handle theo cách riêng:

• WeChat MP: thư viện juice inline toàn bộ CSS vào HTML - paste vào editor WeChat là style giữ nguyên, không cần fix tay
• X / Weibo / Xiaohongshu: modern-screenshot render iframe thành 2× high-DPI PNG, đặt vào clipboard - thả thẳng vào composer
• Zhihu: tương tự WeChat + tự replace các công thức LaTeX thành image placeholder (Zhihu không render KaTeX live)
• Download .html: single-file, assets inline, mở bằng browser bất kỳ
• Download .png: high-DPI screenshot, chia sẻ ở đâu cũng được

Và khi generation đang chạy, bạn xem real-time qua SSE streaming - không thích hướng đi của AI thì interrupt ngay, không lãng phí token vào cả generation không cần.

Ai nên dùng ngay

Tool này phù hợp nhất với:

• Writer và content creator: không cần biết CSS, chỉ cần có Claude Code hay Cursor đã login - dán content, chọn template, export
• Founder và solo dev: cần SaaS landing page, pitch deck, data report mà không có budget thuê designer - $0 marginal cost, dùng subscription sẵn có
• Team với dữ liệu nhạy cảm: local-first, data không bao giờ rời khỏi máy - phù hợp codebase NDA, fintech, healthcare
• PM và ops team: biến CSV/Excel thô thành visual dashboard hay finance report chuyên nghiệp trong vài giây

Roadmap và cách dùng thử

Tool hiện ở trạng thái "early but real" - pipeline cốt lõi stable hoàn toàn, một số tính năng đang build:

• In progress: multi-template compare (generate 4 candidates, chọn 1 tốt nhất), Hyperframes → .mp4 handoff qua Remotion
• Planned: browser extension, history/versioning, skill marketplace, export thêm (Notion, Linear, Telegraph, WeChat Channels)

Để chạy thử:

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm dev
# → http://localhost:3000

Yêu cầu duy nhất: có ít nhất 1 trong 8 CLI đã install và authenticated (claude login, cursor login, codex, hoặc gemini auth). Web layer deploy được lên Vercel, agent layer vẫn cần chạy local.

Repo từ team đứng sau Open Design (40k sao, 200+ contributors) - nếu html-anything phù hợp workflow của bạn, Open Design là phiên bản production-grade đầy đủ tính năng hơn. via github.com/nexu-io/html-anything