디자인 시스템

토큰 + 기본 컴포넌트. 다크·라이트 양쪽에서 동작합니다.

Button — 위계와 4상태

Form — Input · Select · Textarea · Toggle

워크스페이스 안에서 고유한 이름이어야 합니다.

0 / 300

내용에 맞춰 높이가 자동으로 늘고(최대치 넘으면 스크롤), 글자 수를 표시합니다. 변수를 끼워 넣는 프롬프트 입력은 PromptEditor(예정)로 분리됩니다.

Toast — 색 + 아이콘 + 텍스트

Modal — 포커스 트랩 · Esc · 복귀

EmptyState — 아이콘 + 한 줄 + 다음 행동

아직 Workflow가 없습니다.

자동화할 업무를 말하면 초안을 만들어 드립니다.

Dropdown — 구조화 목록 단일 선택 (그룹·설명·type-ahead)

키보드로 열고(↓/Enter) 글자를 입력해 바로 찾을 수 있습니다.

Combobox — 검색형 단일 선택

긴 목록을 글자로 좁혀 고릅니다.

Menu — 액션 메뉴 (키보드·위험 작업)

Popover — 앵커드 콘텐츠 (Esc·외부 클릭·포커스 복귀)

Slider — 경계 있는 숫자 (기본값은 호출자가 주입)

창의성 (temperature)0.7
비활성 슬라이더1.0

VariableBindingPicker — 이전 단계의 무엇을 쓸까요?

“첨부 파일 목록”(목록)을 고르면 단일 값 슬롯과 맞지 않는다는 안내가 나타납니다.

CollapsibleSection — 접힘 단일 패턴 (§3.4)

SchemaForm — 스키마로 노드 설정 폼 (핵심 + 고급, 기본값=스키마)

워크플로 안에서 알아볼 이름입니다.

이 단계가 사용할 모델.

이전 단계의 값에서 고릅니다.

켜면 토큰을 실시간으로 받습니다.

현재 값 (기본값은 스키마에서 주입, 미설정 키는 없음)
{
  "model": "sonnet",
  "format": "text",
  "streaming": true,
  "temperature": 0.7
}

PromptEditor — 멀티롤 변수 인식 프롬프트 (raw {{ }} 미노출, 칩)

SYSTEM
USER
내부 직렬화 (verbatim 토큰 — 화면엔 칩으로만 보임)
[
  {
    "id": "m1",
    "role": "system",
    "content": "당신은 고객 메일을 분류하는 비서입니다."
  },
  {
    "id": "m2",
    "role": "user",
    "content": "다음 메일을 분류하세요. 보낸 사람: {{ $('trigger').from }}"
  }
]

ModelSelector — 공급자 그룹 모델 선택 (Combobox 어댑터)

기본값 자동 선택 없음 — 값은 레지스트리/DB에서 옵니다 (§3.5).

Tooltip — 아이콘 버튼·잘린 텍스트 라벨 (hover·focus, role=tooltip)

잘린 텍스트에도 사용

ContextMenu — 우클릭 포인트 메뉴 (헤더·구분선·위험 작업)

이 영역을 오른쪽 클릭하세요

CommandPalette — ⌘K 명령 런처 (그룹·검색·키보드)

FieldPreviewPopover — 행 hover 값 미리보기 (raw 경로 미표시)

행에 마우스를 올리거나 포커스하면 값 미리보기가 옆에 뜹니다.

CodeGeneratePopup — AI 코드 생성 (프론트 전용 onGenerate seam)

CaseListBuilder — 조건 분기 편집기 (연산자·AND/OR·ELSE)

Case 1· 출력 분기 1

모든 조건이 일치하지 않으면 ELSE 분기로 이동합니다.

ResponseFormatSelector — LLM 출력 형식 (capability 게이팅·radiogroup)

VersionSelector — 버전 선택/생성 분리 (미저장 변경 전환 확인)

초안

AppEventSelector — 앱→이벤트 2단 (연동방식·폴링주기·가이드)

ScheduleSelector — Schedule 트리거 cron 3모드 (미설정=null)

반복 간격

매일

매주

매월

아직 일정이 설정되지 않았습니다. 위에서 선택하세요.

AgentNode 패널 (조립) — 모델·샘플링·프롬프트·스킬·지식

에이전트 노드agent_a1b2c3
SYSTEM
USER
  • 계산기수식 계산 (설정 불필요)
  • 고객 DBdatabase