요청하신 소스 문서(raw/Agentic AI, design systems & Figma. a practical guide-ko.md)를 바탕으로 지정된 스키마, 템플릿 구조, 지표 출처 표기 규칙, 구체적 코드 예시 및 사용 시나리오를 충실히 반영하여 고품질의 위키 노트 에이전틱 디자인 시스템 작성을 자율 완료하였습니다.
📝 생성된 위키 노트 요약 (wiki/에이전틱 디자인 시스템.md)
- Frontmatter:
type:conceptstatus:draftsources:['raw/Agentic AI, design systems & Figma. a practical guide-ko.md']created/updated:2026-08-28- 태그:
llm,agent,design-system,figma,mcp
- 한 줄 정의: AI 에이전트가 디자인 규칙 및 컴포넌트 구조를 자율적으로 해석·조립(Assembling)할 수 있도록 설계된 기계 가독성(Machine Readability) 기반 디자인 아키텍처.
- 핵심 요지:
- 무에서 유를 창조하는 생성(Creating)이 아닌 정제된 파운데이션을 추종하는 조립(Assembling, not creating) 매커니즘.
- MCP(Model Context Protocol) 기반 Figma & Storybook 동기화.
- 의도(Intent) 중심의 시맨틱 토큰(Semantic Tokens) 층 구축.
- 컴포넌트 완전한 상태(Complete States) 및 Variant Matrix 갭 제거.
- Figma Slots(2026년 3월 5일 오픈베타 출시) 기능을 통한 컴포넌트 Detaching 방지.
- Code Connect를 통한 컴포넌트 중복 생성 방지 및 재사용 강제.
- 생성 속도, 토큰 비용, 코드 적합성을 통한 정량적 ROI 입증 및 Uber의 프로덕션 활용 사례.
- 상세 및 6대 구축 수칙:
- 3계층 토큰 아키텍처 (Primitives - Semantic - Component)
- Component Property 및 Code Prop 1:1 명명 동기화 및 PascalCase 규격
- complete states (hover, focus, disabled, skeleton 등) 및 Storybook Story 매핑
- Detaching 방지 및 Named Slot 구조화
- Auto Layout 기반 CSS Flexbox/Grid 변환과 Token Spacing
- Code Connect 매핑
- 예시 섹션:
- React/JSX 기반 Named Slot 활용 코드 예시 (
ReviewCard.Slot name="leading",rating,body) - Storybook Kyle 세션의
CustomerReviewSection자율 생성 시나리오 (Claude 3.5 Sonnet / Figma MCP 연동)
- React/JSX 기반 Named Slot 활용 코드 예시 (
- 충돌 및 연관 개념:
- 전통적 디자인 시스템(인간 관찰용 정적 문서)과의 패러다임 충돌 서술.
[[행동주의적 에이전틱 디자인 시스템]]과의 관점 차이(윤리/접근성/제약 체계 vs 파일 구조화/기계 가독성/MCP 매핑) 서술.
- 관련 위키 노트 연결:
생성된 파일 위치:
scratch/llm-wiki/wiki/에이전틱 디자인 시스템.md