kyeongmin
33bd3a56c6
DA-12: 1단계 Kei 실장 — 꼭지 2~5개 추출 + 레이어/강조/배치/이미지/표/자세히보기 판단 DA-13: 2단계 디자인 팀장 — catalog 연동 + 블록 매핑 + 공간 배분 + 글자 수 가이드 DA-13b: 3단계 텍스트 편집자 — 글자 수 가이드 참고, 의미 우선 편집 + 자세히보기(요약+상세) DA-14: 4단계 실무자(AI+코드) + 5단계 팀장 재검토 (균형 점검 → 2차 조정) 문서: - CLAUDE.md: 5단계 프로세스 + 이미지/표/자세히보기 처리 원칙 - PLAN.md: DA-12~14 태스크 전면 재작성 - PROGRESS.md: 동기화 - FIGMA-COMPONENT-EXTRACTION-PLAN.md: 모드 독립 블록, 변환 규칙, image-block/details-block, MCP, 토큰 매핑 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Kei Design Agent
콘텐츠를 시각적으로 구조화된 슬라이드 HTML로 변환하는 독립 에이전트.
개요
텍스트 콘텐츠를 입력하면, AI가 내용을 분석하여 적합한 레이아웃을 결정하고, 핵심 내용을 추출하여 깔끔한 1페이지(또는 다중 페이지) 슬라이드를 생성합니다.
아키텍처
텍스트 입력
↓
[1] Kei 실장 (Opus) — 콘텐츠 유형 분류 + 블록 배치 방향
↓
[2] 디자인 팀장 (Sonnet) — 레이아웃 컨셉 (블록 배치 + 페이지 수)
↓
[3] 텍스트 편집자 (Sonnet) — 슬롯 텍스트 정리 (핵심 유지, 도메인 지식 보존)
↓
[4] CSS Grid 렌더러 — HTML 조립
↓
미리보기 + HTML 다운로드
역할 분리
| 역할 | 담당 | 하는 일 | 안 하는 일 |
|---|---|---|---|
| Kei 실장 | Opus | 콘텐츠 분석, 유형 분류, 배치 방향 | 디자인, 텍스트 편집 |
| 디자인 팀장 | Sonnet | 레이아웃 컨셉, 페이지 수, 블록 선택 | 텍스트 정리 |
| 텍스트 편집자 | Sonnet | 슬롯별 텍스트 정리, 핵심 유지 | 레이아웃 결정 |
| 실무자 | CSS Grid | HTML/CSS 조립 | AI 판단 |
블록 템플릿 (7종)
| 블록 | 용도 | 시각 |
|---|---|---|
comparison |
2단 병렬 비교 (A vs B) | 좌/우 분할, 색상 구분 |
card-grid |
카드 2~4열 배열 | 상단 컬러 라인 + 제목 + 설명 |
relationship |
벤 다이어그램 | 외부 원 + 내부 원 3개 |
process |
단계 흐름 | 번호 원 + 연결선 |
quote-block |
강조 인용 | 좌측 컬러 라인 + 배경 |
conclusion-bar |
결론 한 줄 | 다크 배경 + 흰색 텍스트 |
comparison-table |
다항목 비교 | 테이블 헤더 + 교대 행 |
기술 스택
| 역할 | 도구 |
|---|---|
| 웹 서버 | FastAPI + uvicorn |
| AI | Anthropic Claude API (Opus + Sonnet) |
| 템플릿 | Jinja2 |
| 레이아웃 | CSS Grid (16:9 고정, 1280x720px) |
| 폰트 | Pretendard Variable (한국어 최적화) |
| SSE 스트리밍 | sse-starlette |
설치 및 실행
사전 요구사항
- Python 3.10+
- Anthropic API Key
설치
cd design_agent
python -m venv .venv
.venv/Scripts/activate # Windows
pip install -e .
환경 변수
.env 파일 생성:
ANTHROPIC_API_KEY=sk-ant-...
KEI_API_URL=http://localhost:8000
LOG_LEVEL=DEBUG
실행
# Design Agent 서버
uvicorn src.main:app --reload --host 127.0.0.1 --port 8001
Kei API 연동 (선택)
Kei persona 서버가 localhost:8000에 떠있으면 자동 연동됩니다.
없어도 Anthropic API 직접 호출로 동작합니다.
디자인 원칙
- 여백 > 장식 — 그라데이션, 애니메이션, 그림자 금지
- 색상 3개 — primary(#1e293b), accent(#2563eb), danger(#dc2626)
- 정보 계층 — 위→아래 (문제 제기 → 분석 → 결론)
- 1페이지 4~5파트 — 초과 시 자동 다중 페이지
- 한국어 최적화 —
word-break: keep-all,line-height: 1.7
프로젝트 구조
design_agent/
├── CLAUDE.md # 프로젝트 규칙
├── PLAN.md # 태스크 계획
├── PROGRESS.md # 진행 상황
├── pyproject.toml
├── src/
│ ├── main.py # FastAPI 서버
│ ├── config.py # 설정
│ ├── pipeline.py # 4단계 파이프라인
│ ├── kei_client.py # Opus 분류 (Kei API 또는 직접)
│ ├── design_director.py # 디자인 팀장 (레이아웃 컨셉)
│ ├── content_editor.py # 텍스트 편집자 (슬롯 채우기)
│ └── renderer.py # HTML 렌더러
├── templates/
│ ├── slide-base.html # 슬라이드 베이스
│ └── blocks/ # 블록 템플릿 7종
├── static/
│ ├── index.html # 프론트엔드
│ ├── tokens.css # 디자인 토큰
│ └── base.css # 기본 스타일
├── docs/
│ └── RESEARCH.md # 기술 조사
└── tests/
Kei Persona와의 관계
Kei Persona (본체) — localhost:5173/8000
├ 대화/생성/피드백/실행 모드
└ 독립적으로 동작
Design Agent (이 프로젝트) — localhost:8001
├ 슬라이드 생성 전용
├ Kei API 호출 가능 (선택)
└ 독립적으로 동작
두 프로젝트는 완전히 독립. 코드 공유 없음. API 연동만.