html-anything

HTML Anything
Open Design 팀이 만든 프로젝트 — 40k★ · 200+ 기여자, 프로덕션급이며 더 빠르게 개선 중. html-anything은 에이전트 시대에 집중한 HTML 에디터입니다. 마음에 든다면, 같은 팀이 대규모로 제공하는 Open Design이 있습니다.

라이브 페이지: open-design.ai/html-anything/ — 클론하기 전에 개요, 서피스 모드, 쇼케이스를 확인하세요.

Markdown은 초안입니다. HTML은 사람이 읽는 것입니다. 로컬 에이전트가 작성합니다. 에이전트 시대의 HTML 에디터 — 에이전트 시대에는 더 이상 문서를 직접 편집하지 않으므로, 출력 형식은 독자가 실제로 원하는 것이어야 합니다: HTML. 로컬 우선, API 키 불필요, 이미 로그인된 CLI 세션을 재사용 — PATH에서 9개의 코딩 에이전트 CLI 자동 감지 (Claude Code · Cursor Agent · Codex · Gemini CLI · GitHub Copilot CLI · OpenCode · Qwen Coder · Aider · IBM Bob), 9개의 결과물 서피스(매거진 기사 · 키노트 덱 · 이력서 · 포스터 · 샤오홍슈 카드 · 트윗 카드 · 웹 프로토타입 · 데이터 리포트 · Hyperframes 영상)에 걸친 75개의 조합 가능한 스킬 템플릿으로 구동됩니다. WeChat / X / Zhihu로 원클릭 내보내기, 또는 .html / .png 다운로드.

English · 简体中文

Showcase
피커의 Featured / 推荐 그룹 상단에 표시되는 8개의 스킬 — SKILL.md frontmatter의 recommended: 순위 기준 정렬(낮을수록 우선). 각 스킬은 인증이나 설정 없이 저장소에서 바로 열 수 있는 실제 example.html을 제공합니다.

deck-guizang-editorial · deck · recommended: 1
매거진 × e-ink 에디토리얼 덱, op7418/guizang-ppt-skill에서 영감을 받음 — 10개의 고정 레이아웃 × 5개의 팔레트(Ink / Indigo Porcelain / Forest Ink / Kraft / Dune). 슬라이드 덱이 아니라 인쇄된 아트진처럼 읽힙니다.

deck-swiss-international · deck · recommended: 2
Swiss International 덱 — 16컬럼 그리드 + 하나의 채도 높은 액센트(Klein Blue / Lemon / Mint / Safety Orange), 22개의 고정 레이아웃 전반에 적용. 차갑고, 이성적이며, 제도적. 열리는 순간 "디자이너가 만든" 느낌이 나는 덱입니다.

doc-kami-parchment · doc · recommended: 3
따뜻한 양피지 에디토리얼 문서, tw93/kami에서 영감을 받음. #f5f4ed 바탕 + 잉크 블루 액센트 + 단일 세리프 보이스 — 긴 에세이, 리포트, 원페이저에서 순백색 markdown보다 눈에 띄게 편안한 읽기 표면.

magazine-poster · poster · recommended: 4
신문 일요판 포스터 — 과장된 세리프 헤드라인, 2단 본문, 6개의 번호 매긴 섹션, 도트 패턴 크림색 바탕. 웹페이지가 아니라 인쇄된 대형 신문처럼 읽힙니다.

video-hyperframes · frame / video · recommended: 5
Hyperframes / Remotion 호환 스토리보드 — 숨겨진 duration + transition 마커와 자동 재생 스크립트가 포함된 6–10개의 순차적 1920×1080 프레임. heygen-com/hyperframes 또는 Remotion에 그대로 넘겨 .mp4로 렌더링하세요.

frame-glitch-title · frame · recommended: 6
글리치 타이틀 프레임 — 시안/마젠타 색수차 오프셋, CRT 스캔라인, 손상된 데이터 서브타이틀, 모서리의 ASCII 노이즈. 사이버펑크 히어로 카드 또는 영상 전환용.

vfx-text-cursor · vfx · recommended: 7
VFX 텍스트 커서 오프너 — 커서가 캔버스 위를 "타이핑"하며, 각 글자가 핫핑크 × 시안 색수차 트레일과 방향성 광원 누출로 드러납니다. 인용문을 넣으면 영화급 오프닝 프레임이 완성됩니다.

frame-logo-outro · frame · recommended: 8
로고 아웃트로 프레임 — 로고가 조각별로 조립되며 글로우 블룸, 태그라인이 올라오고, CTA가 나타납니다. 제품 공개나 브랜드 필름의 클로징 카드.

전체 스킬 카탈로그(모드별 정리)는 아래 Skills에 있습니다.

Why this exists
Anthropic의 Claude Code 팀은 내부 문서를 Markdown으로 작성하는 것을 중단했다고 발표했습니다 — 이제 HTML로 제공합니다. 그 논리는 단순합니다:

Markdown
HTML

작성자에게 좋음
독자에게 좋음

레이아웃이 렌더러에 제한됨
레이아웃이 내 것

트윗에 스크린샷하면 못생김
이미 디자인된 이미지처럼 보임

WeChat / Zhihu / 뉴스레터용으로 다시 흘려야 함
원클릭 형식 변환

HTML은 인간을 위한 최종 형태입니다. Markdown은 작성 중의 중간 상태일 뿐입니다.

하지만 "HTML 작성"은 예전엔 CSS 쓰고, 타입 스케일 고르고, 그리드에 맞추고, 반응형 처리하는 것을 의미했습니다 — 대부분의 사용자는 하지 않고, 디자이너는 귀찮아하며, 작가는 인내심이 없습니다. 그래서 우리가 만든 것: ⌘+Enter를 누르면 로컬 AI 에이전트가 어떤 입력(Markdown / CSV / Excel / JSON / SQL / 원시 노트)이든 몇 초 만에 바로 출시 가능한 단일 파일 HTML로 변환하고, 원클릭으로 WeChat / X / Zhihu / 어디든 보냅니다. "출시 가능"이 기준입니다 — 생성이 끝나면 그 결과물이 곧 청중이 실제로 보는 것입니다. "나중에 다듬을게" 단계는 없습니다.

우리는 네 개의 오픈소스 어깨 위에 서 있습니다:

nexu-io/open-design — 에이전트 감지 레이어, 디자인 시스템 모델, SKILL.md 프로토콜. next/src/lib/agents/ 와 next/src/lib/templates/skills/* 가 이 아키텍처를 직접 미러링합니다.
mdnice/markdown-nice — juice로 인라인된 CSS가 플랫폼별 수동 수정 없이 WeChat과 Zhihu에 깔끔하게 붙여넣어진다는 증명.
gcui-art/markdown-to-image — iframe → 고해상도 PNG 내보내기 경로.
alchaincyf/huashu-md-html — 모든 SKILL.md 내부의 하드 제약(CJK 우선 폰트 스택, 8px 베이스라인 그리드, 대비 ≥ 4.5, 실제 데이터 필수 규칙)으로 매핑되는 안티 AI 슬롭 규율.

At a glance

무엇을 얻나

코딩 에이전트 CLI (8)
Claude Code · Cursor Agent · OpenAI Codex · Gemini CLI · GitHub Copilot CLI · OpenCode · Qwen Coder · Aider — 시작 시 PATH 전반을 스캔( ~/.local/bin , ~/.bun/bin , /opt/homebrew/bin , ~/.npm-global/bin 포함 — GUI로 실행된 Node 프로세스가 보통 놓치는 디렉터리), 상단 바 피커에서 교체.

API 키 불필요
claude login · cursor login · gemini auth로 이미 로그인된 세션을 재사용합니다. 기존 구독이 일을 하고, 한계 비용은 $0 .

75개 스킬 템플릿
prototype (웹 / SaaS 랜딩 / 대시보드 / 데이터 리포트) · deck (Swiss International, Guizang Editorial, XHS Pastel, Hermes Cyber, Replit, Magazine Web 등 20개 키노트 스킬) · frame (10개 Hyperframes 영상 프레임 — 리퀴드 히어로, NYT 데이터 차트, 스티키노트 플로우차트, 글리치 타이틀, 시네마 라이트릭, macOS 알림, 로고 아웃트로…) · social (X / 샤오홍슈 / Spotify / Reddit 카드) · office (PM 스펙 · 엔지니어링 런북 · 재무 리포트 · HR 온보딩 · 인보이스 · OKR · 주간 업데이트 · 회의록 · 칸반) · doc (Kami 따뜻한 양피지 에디토리얼) · mockup (3D 기기 프레임) · vfx (텍스트 커서 효과).

9개 서피스 모드
📖 매거진 기사 · 🎬 키노트 덱 · 📄 이력서 · 🖼️ 포스터 · 📱 샤오홍슈 카드 · 🐦 트윗 카드 · 🛠️ 웹 프로토타입 · 📊 데이터 리포트 · 🎞️ Hyperframes 영상. 각각 선택할 수 있는 여러 스킬이 있습니다.

원클릭 내보내기
juice가 CSS를 인라인 → 재포맷 없이 WeChat 붙여넣기 · modern-screenshot이 iframe을 2× PNG로 렌더링 → ClipboardItem → 트윗 작성기에 바로 드롭 · <mjx-container> → data-eeimg 플레이스홀더 → Zhihu 수식 자동 렌더링 · 독립형 .html 다운로드 · 고해상도 .png 다운로드.

스트리밍 렌더
SSE를 통한 POST /api/convert. 에이전트의 stdout JSON-line 스트림에서 텍스트 델타를 파싱 → 서버 전송 이벤트 → 클라이언트가 추가 → iframe srcdoc이 실시간 업데이트. AI 생성을 기다리는 것이 실시간으로 타이핑되는 것을 보는 것처럼 느껴집니다.

샌드박스 미리보기
<iframe sandbox="allow-scripts allow-same-origin"> . 사용자가 생성한 HTML은 격리된 오리진에서 실행 — Tailwind CDN / Google Fonts / 인라인 스크립트는 작동하지만, 쿠키와 localStorage는 호스트로부터 격리됩니다.

형식 자동 감지
에디터는 Markdown / CSV / TSV / JSON / SQL / 일반 텍스트를 받습니다. papaparse + xlsx가 브라우저에서 표 형식 데이터를 파싱 — 아무것도 업로드되지 않습니다.

배포 가능 대상
로컬( pnpm -F @html-anything/next dev ) · 웹 레이어용 Vercel(에이전트는 항상 노트북에 남음).

License
Apache-2.0

Demo

엔트리 뷰 — 상단 바는 설치된 CLI를 보여주고, 왼쪽 패널은 에디터, 가운데는 템플릿 + 디자인 시스템 피커, 오른쪽은 라이브 iframe 미리보기. 같은 서피스가 매거진, 덱, 포스터, 웹 프로토타입, Hyperframes 프레임 스크립트를 생성합니다.

75개 템플릿, 검색 및 필터 가능 — 모드(prototype / deck / frame / social / office / doc) × 시나리오(design / marketing / engineering / product / personal)로 선택. 모든 스킬은 에이전트가 생성할 결과를 보기 위해 저장소에서 바로 열 수 있는 example.html을 제공합니다.

SSE 스트리밍 — 에이전트 stdout JSON-line에서 텍스트 델타를 파싱하여 iframe srcdoc에 실시간으로 추가. 페이지가 한 줄씩 렌더링되는 것을 지켜봅니다. 방향이 마음에 들지 않나요? 중단하고 다시 프롬프트하세요 — 전체 생성 낭비 없음.

원클릭 내보내기 — WeChat(juice 인라인 CSS) · X / Weibo / 샤오홍슈(modern-screenshot → 2× PNG → ClipboardItem ) · Zhihu(LaTeX 이미지 플레이스홀더) · .html 다운로드 · .png 다운로드. 수동 포맷팅의 두 번째 단계 없이 바로 붙여넣기.

덱 모드 — 20개 키노트 스킬, Swiss International(Helvetica 그리드 맥시멀리즘), Guizang Editorial(매거진 잉크), Open Slide Canvas(1920×1080 에이전트 네이티브), Magazine Web, XHS Pastel, Hermes Cyber, Replit Style 포함. ←/→로 슬라이드 탐색, 발표자 노트, PDF 내보내기.

Hyperframes 프레임 — 10개 모션 프레임 스크립트(리퀴드 히어로, NYT 데이터 차트, 스티키노트 플로우차트, 글리치 타이틀, 시네마 라이트릭, macOS 알림, 브랜드 로고 아웃트로, 텍스트 커서 VFX, 3D 기기 목업, …)가 heygen-com/hyperframes 를 준수; .mp4 렌더링을 위해 Remotion에 바로 넘기세요.

Quickstart
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
# → http://localhost:3000
브라우저를 여세요 → 상단 바가 이미 로그인된 코딩 에이전트 CLI를 자동 감지 → 템플릿 선택 → 콘텐츠 붙여넣기 → ⌘+Enter.

API 키가 필요 없습니다. 이미 로그인된 세션을 재사용합니다(Claude / Cursor / Codex / Gemini / Copilot 구독 모두 작동).

Workspace
이 저장소는 작은 pnpm 워크스페이스입니다:

next/ 는 완전한 Next 앱( @html-anything/next )입니다.
e2e/ 는 브라우저 테스트 패키지( @html-anything/e2e )이며 Playwright 케이스의 유일한 진실 공급원입니다.
루트는 CI, 문서, scripts/guard.ts 를 소유합니다; 루트 package.json은 의도적으로 앱이나 e2e 명령을 프록시하지 않습니다.

저장소 루트에서 패키지 명령을 실행하세요:

pnpm exec tsx scripts/guard.ts
pnpm -F @html-anything/next dev
pnpm -F @html-anything/next typecheck
pnpm -F @html-anything/next test
pnpm -F @html-anything/next build
pnpm -F @html-anything/e2e typecheck
pnpm -F @html-anything/e2e test
Supported coding agents
시작 시 PATH를 스캔하고( ~/.local/bin , ~/.bun/bin , /opt/homebrew/bin , ~/.npm-global/bin 포함 — GUI로 실행된 Node가 보통 놓치는 디렉터리) 인식하는 모든 CLI를 표시합니다:

Agent
감지 바이너리
호출

Claude Code
claude
claude -p --output-format stream-json

OpenAI Codex
codex
codex exec --json --sandbox workspace-write

Cursor Agent
cursor-agent
cursor-agent --print --output-format stream-json --force --trust

Gemini CLI
gemini
gemini --output-format stream-json --yolo

GitHub Copilot CLI
copilot
copilot --allow-all-tools --output-format json

OpenCode
opencode-cli / opencode
opencode run --format json --dangerously-skip-permissions -

Qwen Coder
qwen
qwen --yolo -

Aider
aider
aider --no-pretty --no-stream --yes-always --message-file -

IBM Bob
bob
bob --output-format stream-json --hide-intermediary-output

감지 전략과 CLI별 어댑터 형태는 nexu-io/open-design 및 multica-ai/multica에서 직접 차용했습니다: 하나의 권한 있는 프로세스가 CLI를 스폰하고, JSON-line이 와이어 프로토콜이며, 모든 CLI는 next/src/lib/agents/argv.ts 에 얇은 어댑터를 가집니다.

터미널에서 이미 claude login / cursor login / gemini auth를 했다면, HTML Anything은 그 세션을 재사용합니다. API 키의 두 번째 복사본이 필요 없습니다.

Community integrations
Floatboat
Floatboat는 인앱 커뮤니티 통합으로 제공됩니다. Floatboat Combo Skill Store에서 html-anything Combo Skill을 설치한 후 Floatboat 내에서 사용하세요.

인앱 워크플로 — Floatboat에서 작업 컨텍스트, HTML Anything 워크스페이스, 생성된 페이지를 나란히 검토하세요.

결과물 미리보기 — 브리프를 세련된 HTML 페이지로 바꾸고 Floatboat에서 결과를 검토하세요.

Skills
next/s 아래 75개 스킬…