Kyeongmin/C.E.L_Slide_test2

Files

kyeongmin 9a780828df Add README.md — 프로젝트 개요, 아키텍처, 설치 방법

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-24 17:29:55 +09:00

4.5 KiB

Raw Blame History

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

접속: http://localhost: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 연동만.

4.5 KiB Raw Blame History