Design Studio
Design Studio는 Elftia에 내장된 AI 디자인 작업대입니다. 디자인 Skill, Design System, Craft 스니펫 세 가지 추상화를 결합하여, AI가 일관된 시각 언어를 바탕으로 웹 페이지, 포스터, Deck, 소셜 그래픽 등 결과물을 생성할 수 있으며, 인라인 미리보기, Lint 검증, 내보내기를 지원합니다.
진입점: 왼쪽 내비게이션의 Design Studio (라우트 /design-studio).
3종 세트의 역할
| 추상화 | 역할 | 출처 |
|---|---|---|
| Skill (디자인 기술) | "무엇을 만들지"를 재사용 가능한 프롬프트 + 입력 스키마로 캡슐화 — 예: "제품 랜딩 페이지", "이벤트 포스터", "팟캐스트 커버". | 내장 70개 이상 + 사용자 정의 |
| Design System (디자인 시스템) | "어떻게 보일지"를 토큰 + 컴포넌트 참조로 캡슐화 — 색상, 타이포그래피, 간격, 테두리 반경, 그림자, 버튼 스타일 등. | 내장 140개 이상 + 사용자 정의 |
| Craft (스니펫 라이브러리) | 조합 가능한 HTML / CSS / SVG 조각 — 장식 요소, 레이아웃 스켈레톤, 차트 템플릿. | 내장 7개 카테고리 + 사용자 정의 |
새 프로젝트를 시작할 때 모드 + Skill + Design System 축을 선택합니다. AI는 이 컨텍스트와 Craft 라이브러리를 결합하여 결과물을 생성합니다.
4가지 모드
새 프로젝트를 만들 때 다음 모드 중 하나를 선택합니다. 모드는 결과물 유형과 편집 흐름을 결정합니다:
| 모드 | 결과물 | 특징 |
|---|---|---|
| Prototype | 단일 페이지 HTML 프로토타입 | 기본 모드; 왼쪽 채팅 + 오른쪽 작업 공간, 댓글 및 부분 편집(surgical edit) 지원 |
| Deck | 다중 페이지 슬라이드 | iframe + 이전/다음 페이지 + 전체화면 + 빠른 개요 + PDF/PPTX 내보내기 |
| Template | 폼 기반 HTML | EJS 서브셋 플레이스홀더 템플릿; 폼을 자동 생성하며 입력 시 오른쪽 패널 미리보기를 실시간 갱신 |
| Design System | DESIGN.md + 예시 페이지 | 2단 뷰 (왼쪽: DESIGN.md 소스 + 토큰 견본 / 오른쪽: 예시 대시보드); <userData>/elftia/design-systems/<slug>/에 저장 |
주요 인터페이스
홈 (/design-studio)
2개의 상단 탭, 전체 너비 레이아웃 (사이드바 없음):
| 탭 | 내용 |
|---|---|
| Examples | Skill별로 사전 제작된 예시 프로젝트 탐색; 클릭 한 번으로 새 세션 포크. |
| Design Systems | 내장 + 사용자 정의 Design System 탐색, 템플릿 효과 미리보기, 기본값 전환. |
과거 Design 프로젝트는 kind='design'인 세션으로 일반 세션 목록에 나타나며 — 채팅 세션과 동일한 기반을 공유하고 브랜칭, 재생성, 첨부파일을 지원합니다.
새 프로젝트 만들기
진입점은 새 세션 페이지의 DesignStudio 페르소나입니다:
- 새 세션 페이지에서 상단의 페르소나 선택기에서 DesignStudio 선택
- Skill (왼쪽) + Design System (오른쪽) 선택
- 요구 사항을 설명하고 전송
- AI가 결과물을 출력 → 미리보기 패널이 자동으로 열림
자세한 내용은 새 세션 & 페르소나를 참조하세요.
결과물 미리보기
AI가 결과물(일반적으로 HTML 문서)을 생성하면 "워크스페이스 열기" 액션이 트리거되어 오른쪽 패널이 미리보기 패널로 전환됩니다:
- Preview — HTML을 라이브 렌더링; 뷰포트 너비 전환 (모바일 / 태블릿 / 데스크탑) 지원
- Source — 결과물 소스 코드 보기 (CodeMirror, 복사 가능)
- Lint — 결과물이 Design System 제약을 준수하는지 자동 검증 (범위 벗어난 색상, 토큰 세트에 없는 폰트 등)
결과물을 생성한 각 메시지에는 별도의 Preview 버튼도 표시되어 — 워크스페이스를 현재 버전으로 되돌리지 않고도 과거 버전을 재생할 수 있습니다.
내보내기
미리보기 패널 상단의 Export 버튼:
| 유형 | 출력 |
|---|---|
| HTML | 단일 파일 HTML (리소스 인라인) |
| PNG / JPG | 지정한 해상도의 뷰포트 스크린샷 |
| 다중 페이지 PDF (포스터, Deck에 적합) | |
| Deck | Reveal.js 스타일의 다중 페이지 슬라이드 패키지 |
내장 에셋의 출처
design-skills/, design-systems/, craft/ 세 디렉토리는 첫 실행 시 사용자 데이터 디렉토리(<userData>/elftia/)에 구체화되며 — Elftia 설치 디렉토리에는 쓰이지 않습니다.
즉:
- 사용자 디렉토리의 파일을 직접 편집하여 내장 Skill / DS / Craft를 커스터마이즈할 수 있습니다
- 편집 내용은 Elftia 업그레이드 시 덮어쓰이지 않습니다 (업그레이드는 새 파일만 추가하고 기존 파일은 건드리지 않음)
- 내장 에셋의 원본은 업스트림 오픈소스 프로젝트
nexu-io/open-design이며 커밋 스냅샷으로 고정됩니다
최신 업스트림 버전으로 업그레이드하려면 (개발자 작업) 개발자 문서를 참조하세요: 내장 리소스 동기화 프로세스.
채팅 시스템과의 관계
Design 프로젝트는 내부적으로 일반 chat_sessions 행(kind='design')이므로:
- 동일한 LLM 설정, 프로바이더 전환, API Key 풀을 지원합니다
- 메시지 브랜칭과 재생성을 지원합니다 (각 재생성 = 새로운 결과물 버전)
- 첨부파일 업로드를 지원합니다 (참고 이미지, 브랜드 에셋)
- 기록 사이드바에서 일반 채팅 세션과 혼합 표시되며; 폴더 / 태그 추가 가능
차이점:
- 반드시 Skill + Design System에 바인딩되어야 하며, 세션 생성 시 결정되고 도중에 변경할 수 없습니다
- 엔진 계층은 Design 어댑터를 통과하며 — 모든 엔진이 이를 지원하는 것은 아닙니다.
claude-sdk/tinyelf/chat등은 Prompt Injection 전략을 통해 직접 사용 가능하고;cli(Claude Code, Codex CLI)는 FilePlaced 전략을 사용하며; 순수api엔진은 지원되지 않아 플레이스홀더가 표시됩니다
0.1.7+ Always-on (실험적 플래그 불필요)
0.1.7부터 Design Studio는 기본적으로 활성화되어 있습니다 — 설정 → 시스템 → Experimental Features에서 토글할 필요가 없습니다. 내비게이션 바에 Design Studio 항목이 바로 나타납니다.
유일하게 남은 요구 사항: 현재 LLM 프로바이더의 엔진이 Design 어댑터를 지원해야 합니다.
지원 매트릭스:
| 엔진 유형 | 지원 여부 | 주입 방식 |
|---|---|---|
claude-sdk | ✅ | 네이티브 Skill 로딩; surgical-edit 댓글 및 로컬 편집 지원 |
tinyelf | ✅ | Prompt Injection — SKILL.md + DESIGN.md를 시스템 프롬프트에 인라인 |
chat | ✅ | Prompt Injection (오버플로 방지를 위해 >16k 토큰이면 거부) |
cli (Claude Code, Codex) | ✅ | FilePlaced — .cursorrules / .aider.conf.yml 등에 기록 |
api | ❌ | 미지원; "Adapter unavailable" 플레이스홀더 표시 |
FAQ
| 문제 | 해결 방법 |
|---|---|
| Design Studio 페이지에 "Adapter unavailable" 표시 | 현재 LLM 프로바이더가 Design 어댑터를 지원하지 않는 엔진을 사용 중입니다 (주로 api); Claude SDK / TinyElf / Chat / 지원되는 CLI 백엔드로 전환하세요 |
| 사용자 정의 Design System이 표시되지 않음 | <userData>/elftia/design-systems/<your-ds>/에 유효한 스키마를 가진 manifest.json이 있는지 확인하고; Design Systems 탭에서 "Rescan"을 클릭하세요 |
| Elftia 업그레이드 후 내장 Skill / DS가 업데이트되지 않음 | 이는 의도된 동작입니다 — 기존 파일은 덮어쓰이지 않습니다 (사용자 편집은 SHA-1로 감지). 파일을 초기화하려면 사용자 디렉토리의 해당 파일을 삭제하면 재시작 시 다시 구체화됩니다 |
| 결과물 미리보기에서 Lint가 "color out of range" 보고 | 결과물이 디자인 토큰에 없는 색상 값을 사용 중입니다; 결과물을 수정하여 토큰을 사용하거나 Design System의 토큰 표를 확장하세요 |
| Surgical-edit (댓글 / Send to chat) 사용 불가 | claude-sdk 엔진에서만 활성화됩니다. 다른 엔진에서는 Comments 드로어를 볼 수만 있고 채팅으로 보낼 수 없습니다 |
관련 링크
- Skill 시스템 — Design Studio의 Skill은 Agent 시스템의 Skill 추상화를 재사용합니다
- LLM 프로바이더 — Design Studio에서 사용하는 모델 설정
- 개발자: Design Studio 아키텍처
- 개발자: 내장 리소스 동기화 프로세스