nexu-io/html-anything

✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.

HTML Anything – 에이전트 기반 HTML 편집기

무엇인가 – 어떤 일반 텍스트 형식(Markdown, CSV, JSON, SQL 등)으로든 콘텐츠를 작성하면, 로컬에 설치된 AI 코딩 에이전트(Claude, Cursor, Codex, Gemini, Copilot, OpenCode, Qwen, Aider 또는 IBM Bob)의 도움을 받아 그 입력을 즉시 완전한 단일 파일 HTML 페이지로 바꿔 주는 로컬 우선 데스크톱형 웹 앱입니다. 생성된 페이지는 Tailwind 기반 디자인 시스템으로 스타일링되며, 중국 소셜 플랫폼(WeChat, X, Zhihu)으로 직접 내보내거나 .html/.png로 저장할 수 있습니다.

왜 중요한가 – 현대 AI 어시스턴트는 코드 생성에 뛰어나지만, 대부분의 개발자는 여전히 출력을 Markdown 편집기에 복사해 붙여넣고 게시를 위해 HTML로 변환해야 합니다. HTML Anything은 그 중간 단계를 건너뜁니다. AI가 독자가 실제로 보는 최종 HTML을 작성하며, API 키 없이 기기에서 수행합니다. 따라서 워크플로가 빠르고, 사적이며, 비용도 들지 않습니다(사용자가 이미 가지고 있는 AI 구독 외에는).

주요 기능

  • 에이전트 감지 – 시작 시 앱이 PATH를 스캔해 지원되는 9개의 코딩 에이전트 CLI를 찾고, 사용할 것을 선택할 수 있게 합니다.
  • 75개의 즉시 사용 가능한 스킬 템플릿 – 9가지 표면 유형(잡지 기사, 키노트 덱, 이력서, 포스터, 샤오홍슈 카드, 트윗 카드, 웹 프로토타입, 데이터 보고서, Hyper-frames 비디오)을 위한 사전 정의된 레이아웃과 수십 가지 디자인 변형(스위스 인터내셔널, 귀장 에디토리얼 등).
  • 실시간 스트리밍 렌더 – 에이전트가 JSON 라인 출력을 스트리밍하고, 프런트엔드가 이를 파싱해 iframe 미리보기를 실시간으로 업데이트하므로 페이지가 한 줄씩 만들어지는 모습을 볼 수 있습니다.
  • 원클릭 내보내기 – WeChat용 인라인 CSS("juice"), X/Weibo/샤오홍슈용 고DPI PNG 스크린샷, Zhihu LaTeX 플레이스홀더, 또는 일반 .html/.png 다운로드.
  • 샌드박스 미리보기 – 생성된 HTML은 샌드박스 처리된 iframe 안에서 실행되어 스크립트를 호스트로부터 격리합니다.
  • API 키 불필요 – 선택한 에이전트로 이미 보유한 인증 세션을 재사용합니다(예: claude login).
  • 로컬 또는 Vercel에 배포 가능 – pnpm -F @html-anything/next dev로 실행하거나 프런트엔드를 배포하세요. AI 구성 요소는 항상 사용자 머신에 남아 있습니다.

일반적인 워크플로

  1. 지원되는 코딩 에이전트 CLI를 하나 이상 설치하고 로그인합니다.
  2. 저장소를 복제하고 pnpm install을 실행한 뒤 개발 서버를 시작합니다.
  3. 브라우저에서 스킬/템플릿을 선택합니다(예: 잡지 스타일 기사).
  4. 소스 콘텐츠(Markdown, CSV 등)를 붙여넣고 ⌘+Enter를 누릅니다.
  5. 로컬 에이전트가 HTML을 생성하고, 미리보기로 스트리밍되는 모습을 지켜봅니다.
  6. 원클릭으로 원하는 플랫폼에 내보내거나 파일을 다운로드합니다.

누가 사용해야 하는가 – 수동 CSS 작업 없이 AI가 생성한 게시 가능한 HTML을 원하고, 지원되는 코딩 에이전트 CLI를 이미 사용할 수 있는 콘텐츠 제작자, 마케터, 제품 라이터, 디자이너.

저장소 구조

  • next/ – Next.js 프런트엔드(@html-anything/next).
  • e2e/ – Playwright 엔드투엔드 테스트(@html-anything/e2e).
  • scripts/guard.ts – CI 도우미 스크립트.
  • next/src/lib/agents/ – 각 CLI의 JSON 라인 프로토콜을 공통 인터페이스로 변환하는 어댑터.
  • next/src/lib/templates/skills/ – 75개의 스킬 폴더. 각각 SKILL.md 설명자와 예제 HTML 파일이 있습니다.

라이선스 – Apache-2.0.

위의 모든 세부 사항은 프로젝트 README에서 직접 가져온 것입니다.

관련

  • 프로젝트
    goodnight000/api-anything

    브라우저 자동화 대신 HTTP 요청을 통해 AI 에이전트가 웹사이트와 상호작용하도록 학습시키는 도구로, 지연 시간과 토큰 비용을 절감합니다.

  • 프로젝트
    HKUDS/CLI-Anything

    CLI‑Anything은 어떤 소프트웨어에도 에이전트 친화적인 명령줄 래퍼를 자동으로 생성하는 오픈소스 Python 프레임워크입니다. `cli‑anything‑hub`라는 패키지 매니저를 제공하여 GIMP, Blender, Zoom, GIS 도구 등 수십 개의 커뮤니티가 구축한 CLI를 인덱싱하고, 에이전트가 구조화된 JSON 출력을 통해 자동으로 탐색, 설치, 실행할 수 있도록 합니다. 개발자는 7단계 생성기를 사용해 어떤 애플리케이션에도 새로운 CLI를 만들 수 있으며, AI 에이전트(Claude Code, Cursor, Pi, OpenClaw 등)는 메타스킬을 설치해 레지스트리를 자율적으로 탐색할 수 있습니다. 프로젝트는 적극적으로 유지보수되고 있으며, 2,461개의 통과 테스트를 보유하고 있으며 Apache-2.0 라이선스로 제공됩니다.

  • 프로젝트
    chrisryugj/Docufinder

    Anything은 Windows/macOS용 데스크톱 앱으로, 여러 문서 형식(한국어 HWP 파일 포함)의 전체 텍스트를 로컬에 인덱싱하고 키워드, 파일 이름 또는 자연어 질문으로 검색할 수 있습니다. Gemini 또는 OpenAI 호환 API를 통해 AI 기반 Q&A 및 요약 기능을 제공하지만 완전히 오프라인으로 작동할 수 있습니다. React/Tauri로 구축되었으며, SQLite FTS5를 사용한 키워드 검색과 ONNX 기반 한국어 임베딩을 활용한 의미 검색, 이미지용 OCR 기능을 제공합니다. 특별한 "Lite" 빌드는 모든 네트워크 코드를 제거하여 매우 보안이 강한 환경에 적합합니다.

  • 프로젝트
    SYuan03/Skill-Anything

    Skill‑Anything은 PDF, 동영상, 웹 페이지, 오디오, 코드 리포지토리 등 어떤 소스도 구조화된 12섹션 학습 팩(노트, 퀴즈, 플래시카드, 용어집, 개념도, 선택적 AI 에이전트 스킬 `SKILL.md`)으로 변환하는 Python CLI입니다. 사용 가능한 OpenAI 호환 API를 활용한 병렬 맵-리듀스 파이프라인, 캐싱, 인용 검증 기능을 갖추며, 오프라인 웹사이트, Anki 덱, 또는 `SKILL.md` 번들로 출력 가능합니다.

  • 프로젝트
    aiworkskills/wechat-article-skills

    위챗 공식 계정의 주제 선정부터 작성, HTML 서식 지정 및 게시까지 전체 워크플로우를 자동화하는 오픈소스 AI 에이전트 스킬셋입니다.