html-anything
무엇인가
HTML Anything은 로컬 코딩 에이전트가 입력 문서를 그대로 배포할 수 있는 단일 파일 HTML로 출력하도록, 산출물 표면별 레이아웃·타이포그래피·색·데이터 사용 규칙을 고정한 스킬 팩이다. 규율하는 문제 영역은 문서의 최종 포맷 결정, CSS 인라인 처리, 그리드 정렬, 폰트 스택, 명암비, 더미 데이터 사용 금지다. 마크다운을 중간 산출물로 두고 사람이 다시 손보는 단계를 제거하는 쪽에 규칙을 몰아 둔다.
어떻게 동작하나
각 스킬은 SKILL.md 프런트매터와 실제 결과물인 example.html 한 쌍으로 구성된다. 프런트매터의 recommended 순위가 선택기 상단 노출 순서를 결정한다. 실행 시 PATH에 있는 코딩 에이전트 CLI를 자동 감지해 이미 로그인된 세션을 재사용하고, ⌘+Enter 입력 후 에이전트 stdout의 JSON-line을 SSE로 파싱해 텍스트 델타를 iframe srcdoc에 실시간으로 반영한다. 모든 SKILL.md에 공통으로 들어가는 하드 제약은 CJK 우선 폰트 스택, 8px 베이스라인 그리드, 명암비 4.5 이상, 실제 데이터 사용 강제다.
무엇과 다른가
프롬프트를 직접 쓰거나 CLAUDE.md 한 파일에 규칙을 몰아넣는 방식과 달리, 표면(매거진·덱·포스터·SNS 카드·프로토타입·데이터 리포트·Hyperframes) × 시나리오(디자인·마케팅·엔지니어링·제품·개인)로 분류된 템플릿 카탈로그에서 고른다. 템플릿마다 example.html이 동봉되어 결과물을 사전에 열어볼 수 있고, 생성된 CSS는 juice로 인라인되어 WeChat·Zhihu에 별도 수정 없이 붙여넣힌다. PNG 내보내기는 iframe을 고해상도로 캡처하는 경로를 쓴다.
어떻게 쓰나
저장소를 클론해 로컬에서 실행한다. API 키는 필요 없고, PATH에 로그인된 에이전트 CLI를 자동 감지한다. 화면은 상단에 감지된 CLI 목록, 좌측 편집기, 중앙 템플릿·디자인 시스템 선택기, 우측 라이브 iframe 미리보기로 나뉜다. 입력은 Markdown·CSV·Excel·JSON·SQL·raw notes를 받고, 출력은 WeChat·X·Zhihu 전송 또는 .html·.png 다운로드다.
전제와 한계
Claude Code, Cursor Agent, Codex, Gemini CLI, GitHub Copilot CLI, OpenCode, Qwen Coder, Aider, IBM Bob 중 최소 하나가 PATH에 로그인된 상태여야 한다. HTML 자체를 에이전트가 생성하므로 결과 품질은 연결된 모델에 종속된다. Hyperframes 계열 스킬은 .mp4를 직접 만들지 않고 1920×1080 프레임 스토리보드와 전환 마커, 자동 재생 스크립트를 출력하며, 실제 영상 렌더링은 외부 렌더러에 넘긴다.