html-visual-editor은(는) 무엇을 하나요?
정적 HTML을 시각적으로 편집 가능한 페이지로 변환합니다 — 인라인 텍스트 편집, 색상/글꼴/레이아웃 패널, 사전 설정 테마, 원클릭 내보내기.
개요
이 스킬은 HTML 파일을 로드하여 사용자가 코드를 직접 수정하지 않고도 콘텐츠와 스타일을 편집할 수 있는 대화형 페이지로 만듭니다. 텍스트를 클릭하여 바로 편집하고, 사이드바 패널에서 디자인 요소를 조정하며, 다양한 테마를 적용할 수 있습니다.
주요 기능
- 인라인 텍스트 편집: 페이지 내 텍스트를 클릭하여 직접 수정합니다.
- 색상 패널: 배경색, 텍스트 색상, 강조 색상을 선택합니다.
- 글꼴 패널: 글꼴 종류, 크기, 굵기를 변경합니다.
- 레이아웃 패널: 여백, 정렬, 너비를 조정합니다.
- 사전 설정 테마: 여러 테마를 클릭 한 번으로 적용할 수 있습니다.
- 원클릭 내보내기: 편집된 결과를 HTML 파일로 다운로드합니다.
사용 방법
- HTML 파일을 제공합니다.
- AI 에이전트가 해당 HTML을 분석하고 시각적 편집기를 생성합니다.
- 생성된 페이지에서 원하는 대로 편집합니다.
- 완료되면 내보내기 버튼을 클릭하여 최종 HTML을 저장합니다.
예시
<!-- 입력: 간단한 랜딩 페이지 -->
<div>
<h1>환영합니다</h1>
<p>내용을 편집해 보세요.</p>
</div>
<!-- 출력: 편집 가능한 페이지 (JavaScript 위젯 포함) -->
<html>
<head>
<script src="editor-widget.js"></script>
</head>
<body>
<div class="editable">
<h1>환영합니다</h1>
<p>내용을 편집해 보세요.</p>
</div>
</body>
</html>
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 AI 에이전트 환경
참고 사항
- HTML 파일은 독립형이어야 하며 (외부 리소스에 의존하지 않음), 모든 스타일과 스크립트가 포함되어야 합니다.
- 생성된 편집기는 모던 브라우저에서만 동작합니다 (Chrome, Firefox, Edge 최신 버전).
- 내보내기 시 편집된 내용과 선택한 테마가 최종 HTML에 반영됩니다.