왜 만들었나
AI 에이전트는 그럴듯해 보이지만 당신의 디자인 시스템을 슬그머니 무시하는 UI를 만들어내요. 잘못된 여백 스케일, 지어낸 색상 역할, 존재한 적 없는 컴포넌트처럼요. 그걸 바로잡아 줄 규칙과 토큰은 에이전트가 읽을 수 없는 Figma 파일과 흩어진 문서에 묻혀 있고요. ODSF는 그 모든 걸 에이전트가 실제로 열어서 따라갈 수 있는 번들 하나에 담아요.
프로젝트 소개
디자인 시스템의 토큰, 컴포넌트, 동작, 규칙, 그리고 실행 가능한 예제까지를 마크다운, HTML, CSS로 이뤄진 하나의 이식 가능한 묶음에 담는 번들 포맷이에요. AI 에이전트가 읽고 실제로 지킬 수 있죠. 토큰은 한 번만 정의하고 두 곳에, 에이전트가 읽는 프런트매터와 동기화된 CSS 변수로 드러나요. 컴포넌트는 스스로 렌더링되는 HTML 예제를 함께 실어, 에이전트가 기본값을 추측하는 대신 그대로 복사하게 해요. 구글의 Open Knowledge Format과 Google Labs의 design.md 위에 만들어졌고, 의존성도 락인도 없으며, Claude, Primer, Geist를 레퍼런스 번들로 함께 제공해요.
기능
마크다운, HTML, CSS로 된 이식 가능한 번들 하나, SDK 없이
한 번 정의한 토큰을 에이전트 프런트매터와 CSS 변수로 함께 노출
에이전트가 그대로 복사하는 실행 가능한 HTML 예제를 담은 컴포넌트
Open Knowledge Format과 design.md 위에 구축, 락인 없이
단일 파일 뷰어와 Node.js 적합성 검증기
Tech Stack