📄에이전트
AI 에이전트가 Notion 스타일 문서를 작성하게 만드는 방법
AI 에이전트가 생성하는 문서에 Notion 스타일의 세련된 디자인을 적용하는 오픈소스 스킬
↗ 원본 링크#Notion#AI에이전트#문서디자인#Claude
notion-doc이란?
AI 에이전트에게 문서를 만들어달라고 하면 보통 화려한 그라데이션, 과도한 이모지, 그림자가 있는 카드 등 전형적인 AI 스타일 디자인이 나옵니다.
notion-doc은 AI 에이전트가 생성하는 문서에 Notion과 같은 깔끔하고 세련된 디자인을 자동으로 적용해주는 스킬입니다.
주요 특징
포함된 디자인 요소
▸
기본 요소: 이모지 페이지 아이콘, 태그 필, 메타 정보, 브레드크럼
▸
Callout 박스: 5가지 색상 (파랑-핵심, 회색-노트, 초록-완료, 노랑-주의, 빨강-경고)
▸
레이아웃: 목차, 테이블, 2단 레이아웃, 버튼
▸
인터랙티브: 토글(`<details>`), 체크리스트, 인용구, 북마크 카드
▸
코드: Prism 기반 문법 강조, 라이트/다크 테마 지원
▸
텍스트: 인라인 코드, 5가지 색상 (파랑, 빨강, 주황, 초록, 보라)
▸
한국어 최적화: 단어 단위 줄바꿈 (`word-break: keep-all`)
▸
인쇄 지원: PDF 출력 레이아웃
하나의 템플릿으로 일관된 스타일
에이전트가 매번 CSS를 생성하는 것이 아니라, 미리 정의된 template.html을 복사하고 내용만 채웁니다.
▸콘텐츠 너비: 720px
▸텍스트 색상: `#2C2C2B`
▸Notion 라이트/다크 컬러 팔레트
▸사용자 테마에 따라 자동 전환
설치 방법
Claude Code에서 플러그인으로 설치
text
/plugin marketplace add heyman333/agent-notion-template-docs
/plugin install notion-doc@agent-notion-template-docs설치 범위 선택
기본값은 user 범위로, 모든 프로젝트에 적용되며 팀원에게는 영향을 주지 않습니다.
bash
# 현재 프로젝트에만 적용 (로컬)
claude plugin marketplace add heyman333/agent-notion-template-docs --scope local
claude plugin install notion-doc@agent-notion-template-docs --scope local
# 팀 전체에 적용 (프로젝트)
claude plugin marketplace add heyman333/agent-notion-template-docs --scope project
claude plugin install notion-doc@agent-notion-template-docs --scope project왜 유용한가?
AI 에이전트는 콘텐츠와 구조를 담당하고, notion-doc은 시각적 표현만 담당합니다. 이를 통해:
▸일관되고 전문적인 문서 디자인
▸AI 티가 나지 않는 자연스러운 스타일
▸라이트/다크 모드 자동 지원
▸인쇄 및 PDF 출력 최적화