AgnosticUI/agnosticui

소스 코드를 복사하세요 · 코드를 소유하세요 · 프레임워크에 구애받지 않음 (Framework-agnostic) · 인간과 AI 에이전트를 위해 구축됨

하나의 컴포넌트 라이브러리. 모든 프레임워크를 위해.

문서 (Documentation) · 로그인 AI 플레이북 (Login AI Playbook) · 온보딩 AI 플레이북 (Onboarding AI Playbook) · 대시보드 AI 플레이북 (Dashboard AI Playbook) · 컴포넌트 (Components) · 빠른 시작 (Quick Start)

AgnosticUI 컴포넌트는 설치 시점에 귀하의 프로젝트로 복사됩니다.

컴포넌트는 귀하의 저장소(repo) 내에 존재하며 (node_modules 내부에 숨겨져 있지 않습니다):

• 소스 코드에 대한 완전한 제어 권한
• 귀하의 프레임워크와의 네이티브 통합 (Native integration)
• AI가 읽을 수 있는 고충실도 컨텍스트 (AI-readable, high-fidelity context)

cd your-project
npx agnosticui-cli init --framework vue # 또는 react, lit, svelte
npx agnosticui-cli add Button Card Input

컴포넌트 소스는 귀하의 프로젝트에 직접 들어옵니다. 읽을 수 있고, 편집할 수 있으며, 귀하의 것입니다.

src/
components/
ag/
...

컴포넌트는 기본적으로 src/components/ag/ 아래에 위치합니다. 이는 AgnosticUI 컴포넌트를 귀하의 자체 컴포넌트와 분리하여 유지하는 전용 네임스페이스 (namespace)입니다. 원하신다면 설정을 통해 변경할 수 있습니다.

코드가 로컬에 있기 때문에, node_modules 내부에 숨겨져 있는 전통적인 라이브러리들의

스키마 기반 레이어(schema-driven layer)에는 세 가지 동반 문서가 포함되어 있습니다:

v2/docs/sdui-architecture.md

— 전체 시스템 아키텍처 (system architecture): 코드 생성 파이프라인 (codegen pipeline), 노드 그래프 모델 (node graph model), 렌더러 (renderers), CI 게이트 (CI gates) 및 주요 설계 결정 사항

v2/docs/llm-prompt-guide.md

— 유효한 AgNode[] 그래프를 생성하기 위한 복사-붙여넣기용 시스템 프롬프트 템플릿 및 퓨샷 예시 (few-shot examples)

v2/docs/schema-coverage.md

— 컴포넌트별 SDUI 커버리지 레지스트리 (coverage registry), 렌더러 패리티 상태 (renderer parity status) 및 누락 사유

AgnosticUI의 컴포넌트는 네이티브 커스텀 엘리먼트 (Custom Elements) 상의 표준 기반 레이어인 Lit Web Components로 작성되었습니다. CLI는 복사 시점에 사용자의 프레임워크에 맞춰 이를 래핑 (wrap) 합니다.

기술 스택이 변경되어도 디자인 시스템을 포크 (fork) 할 필요가 없습니다. Playbooks로부터 직접 에이전트 생성 UI 워크플로우 (agent-generated UI workflows)를 지원합니다.

...

AgnosticUI	일반적인 컴포넌트 라이브러리
리포지토리 내 소스 코드	✅	❌
...

Playbooks (로그인 폼 (Login Form), 온보딩 위저드 (Onboarding Wizard), 디스커버리 대시보드 (Discovery Dashboard), 고객 지원 센터 (Support Center), 데이터 그리드 (Data Grid), 블로그 / 기사 리더 (Blog / Article Reader), 랜딩 / 마케팅 페이지 (Landing / Marketing Page))는 **모듈형, 프롬프트 기반 UI 컴포넌트 (modular, prompt-driven UI components)**를 보여줍니다. 각 Playbook은 에이전트 시스템 (agent systems), 컨텍스트 인식 애플리케이션 (context-aware applications), 또는 **생성형 UI 패턴 (generative UI patterns)**을 만드는 데 사용할 수 있습니다.

Playbook	구축 내용
로그인 폼 (Login Form)	반응형 로그인: 모바일, 플로팅 카드, 2열 데스크톱; AI 프롬프트 기반 생성과 연동됨
...

문서 사이트의 각 Playbook에는 React, Vue, Lit을 위한 실시간 StackBlitz 예제가 포함되어 있으며, 다음을 제공합니다:

: 세 가지 프레임워크 모두에서 패턴을 생성할 수 있는 하나의 프롬프트 PROMPT-3-FRAMEWORKS.md

스킨 스위처 (Skin switcher): 테마 토큰 (theme tokens)을 즉시 미리 볼 수 있음

에이전트 주도 UI 생성 (agent-driven UI generation)을 위해 완전히 프롬프트 준비 완료. Playbook 프롬프트를 Cursor, Claude Code 또는 Copilot에 넣으면 Input, Button, Card, FormGroup이 첫 시도에 정확하게 조립되는 것을 확인할 수 있습니다. 이는 단순한 컴포넌트 참조가 아니라 전체 레시피 (recipe)를 가지고 있기 때문입니다.

프롬프트(prompts)는 여러분이 원하는 대로 조정할 수 있습니다. AgnosticUI의 패턴을 익히기 위한 속성 과정 (crash course)으로 LLM에 입력하거나, 여러분의 스택에 맞춰 포크(fork)하거나, 혹은 여러분만의 UI 패턴을 중심으로 플레이북 (Playbooks)을 작성하기 위한 청사진 (blueprint)으로 사용하세요.

AgnosticUI 컴포넌트는 CSS 사용자 정의 속성 (CSS custom properties)을 통해 전체 시각적 표면을 노출합니다. 스킨 (skin)을 교체하면 모든 컴포넌트가 업데이트됩니다. 코드 변경이나 찾아 바꾸기 (find-and-replace) 작업은 필요 없습니다.

/* 기본 토큰 (Base tokens)이 필요하며, 그 위에 스킨을 레이어링합니다 */
@import "./components/ag/styles/ag-tokens.css";
@import "./components/ag/styles/ag-tokens-dark.css";
...

디자이너에게 전달하세요. 그러면 토큰 파일 (token file)을 돌려받게 됩니다. 그것을 임포트 (import)하기만 하면 끝입니다.

React

cd my-react-app
npx agnosticui-cli init --framework react
npx agnosticui-cli add Button Card Input

Vue

cd my-vue-app
npx agnosticui-cli init --framework vue
npx agnosticui-cli add Button Card Input

Svelte

cd my-svelte-app
npx agnosticui-cli init --framework svelte
npx agnosticui-cli add Button Card Input

Lit / Web Components 직접 사용

cd my-lit-app
npx agnosticui-cli init --framework lit
npx agnosticui-cli add Button Card Input

add 명령어를 실행한 후에는,

터미널에 프로젝트를 위한 정확한 임포트 경로 (import path)가 출력됩니다. 추측할 필요가 없습니다. 에이전트 주도형 (agent-driven) 및 프롬프트 준비 완료 (prompt-ready) UI 워크플로우를 지원합니다.

• 시맨틱 HTML (Semantic HTML)
• 검증된 WAI-ARIA 패턴
• 모든 대화형 컴포넌트에 걸친 키보드 네비게이션 (Keyboard navigation)
• AA 등급으로 검증된 색상 대비
• 동작 감소 (Reduced motion) 지원
• 내장된 포커스 관리 (Focus management)

Accordion (아코디언)

· Alerts (알림)

· AspectRatio (종횡비)

· Avatar (아바타)

· Badge (배지)

· Breadcrumb (브레드크럼)

· Button (버튼)

· Card (카드)

· Checkbox (체크박스)

· Collapsible (접기/펴기)

· Combobox (콤보박스)

· CopyButton (복사 버튼)

· Dialog (다이얼로그)

· Divider (구분선)

· Drawer (드로어)

· EmptyState (빈 상태)

Fieldset (필드셋)

· Input (입력)

· Radio (라디오)

· Rating (별점/평점)

· Select (선택)

· SelectionButtonGroup (선택 버튼 그룹)

· SelectionCardGroup (선택 카드 그룹)

· Slider (슬라이더)

· Toggle (토글)

Header (헤더)

· Menu (메뉴)

· Pagination (페이지네이션)

· Tabs (탭)

Loader (로더)

· Progress (진행률)

· ProgressRing (프로그레스 링)

· ScrollProgress (스크롤 진행률)

· Skeleton Loader (스켈레톤 로더)

· Spinner (스피너)

· Toast (토스트)

Icon (아이콘)

· Icon Button (아이콘 버튼)

· Image (이미지)

· IntlFormatter (국제화 포맷터)

· Kbd (키보드)

· Link (링크)

· Mark (마크)

· MessageBubble (메시지 버블)

· Popover (팝오버)

· ScrollToButton (스크롤 투 버튼)

· Table (테이블)

· Tag (태그)

· Timeline (타임라인)

· Tooltip (툴팁)

· VisuallyHidden (시각적으로 숨김)

BadgeFx (배지 효과)

· ButtonFx (버튼 효과)

· Flex (플렉스)

· IconButtonFx (아이콘 버튼 효과)

AgnosticUI는 오픈 소스이며 기여를 환영합니다. 컴포넌트 작성 가이드라인, 토큰 시스템(token system), 그리고 Playbook 항목 작성 방법에 대해서는 CONTRIBUTING.md를 참조하세요.

Apache License 2.0 © AgnosticUI

AgnosticUI v2는 완전히 새로 작성되었으며 v1과 호환되지 않습니다. v1이 필요한 경우, git 태그(git tags)를 통해 계속 사용할 수 있습니다:

• 패키지 (Packages):
  agnostic-angular
  , agnostic-react
  , agnostic-vue
  , agnostic-svelte
  , 등
• 태그 (Tag):
  v1-legacy