Repolode
제출하기
plannotator

plannotator/effective-html

코딩 에이전트가 독립 실행형 HTML 와이어프레임, 인터랙티브 프로토타입, 계획, 다이어그램을 만들도록 안내하는 에이전트 스킬 모음입니다.

GitHub에서 보기웹사이트
스타
3,685
포크
249
열린 이슈
2
마지막 커밋
3일 전

어떤 프로젝트인가요?

Effective HTML은 긴 텍스트 대신 HTML 산출물을 만들기 위한 선택형 에이전트 스킬 모음입니다. 레이아웃, 계층 구조, 내비게이션을 검증하는 저해상도 와이어프레임, 실제와 유사한 상태와 키보드 지원 및 반응형 동작을 갖춘 작동 프로토타입, 원본의 약속을 그대로 유지하는 계획과 로드맵, 아키텍처·시퀀스·상태·타임라인 다이어그램을 다룹니다.

스킬은 용도별로 나뉘어 있습니다. 범용 html 스킬은 요청을 전문 스킬로 전달하고, design-artifact는 고정된 기본 스타일을 강요하지 않으면서 주제별 창작 방향을 제시합니다. 각 스킬은 독립적으로 사용할 수 있습니다. npx skills add로 설치할 수 있으며, Claude Code와 Codex용 플러그인 항목도 제공됩니다.

스킬이 만드는 모든 산출물은 독립 실행형이고 반응형이며 접근성을 갖추고, 브라우저에서 확인하도록 설계되었습니다. 이 프로젝트는 MIT 라이선스를 따르며, 로컬 HTML을 렌더링하고 주석을 추가하는 Plannotator 도구와 함께 사용할 수 있습니다.

핵심 기능

  • 01요청을 전문 스킬로 전달하는 범용 html 스킬을 제공합니다.
  • 02콘텐츠 계층 구조와 내비게이션을 검증할 저해상도 와이어프레임을 생성합니다.
  • 03인터랙션, 키보드 지원, 반응형 동작을 갖춘 작동 프로토타입을 만듭니다.
  • 04원본의 약속을 그대로 유지하는 계획과 로드맵을 작성합니다.
  • 05아키텍처, 시퀀스, 상태, 타임라인 다이어그램을 HTML로 생성합니다.

활용 사례

  • UI를 구현하기 전에 검토자와 함께 레이아웃 선택지를 살펴봅니다.
  • 기능 요청을 이해관계자 피드백을 받을 수 있는 클릭 가능한 프로토타입으로 만듭니다.
  • 시스템 아키텍처나 요청 흐름을 공유 가능한 HTML 다이어그램으로 문서화합니다.
  • 에이전트가 따를 수 있는 구현 단계별 배포 계획을 작성합니다.

토픽

#agent-skills#html#prototyping#wireframe#diagrams#claude-code#codex#html-artifacts#html-prototype#html-wireframe

자주 묻는 질문

effective-html은(는) 무엇인가요?
코딩 에이전트가 독립 실행형 HTML 와이어프레임, 인터랙티브 프로토타입, 계획, 다이어그램을 만들도록 안내하는 에이전트 스킬 모음입니다. Effective HTML은 긴 텍스트 대신 HTML 산출물을 만들기 위한 선택형 에이전트 스킬 모음입니다. 레이아웃, 계층 구조, 내비게이션을 검증하는 저해상도 와이어프레임, 실제와 유사한 상태와 키보드 지원 및 반응형 동작을 갖춘 작동 프로토타입, 원본의 약속을 그대로 유지하는 계획과 로드맵, 아키텍처·시퀀스·상태·타임라인 다이어그램을 다룹니다.
effective-html은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
effective-html은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
effective-html은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. effective-html의 마지막 커밋은 2026년 10월 15일입니다.
effective-html은(는) 어디에 사용할 수 있나요?
UI를 구현하기 전에 검토자와 함께 레이아웃 선택지를 살펴봅니다. 기능 요청을 이해관계자 피드백을 받을 수 있는 클릭 가능한 프로토타입으로 만듭니다. 시스템 아키텍처나 요청 흐름을 공유 가능한 HTML 다이어그램으로 문서화합니다. 에이전트가 따를 수 있는 구현 단계별 배포 계획을 작성합니다.
effective-html은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/plannotator/effective-html

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트