Railly/tinte

해결하는 문제

Tinte는 AI 코딩 에이전트가 특정 브랜드의 디자인 시스템과 일관된 UI를 생성하도록 보장하는 문제를 해결합니다. 에이전트가 스타일을 추측하거나 디자인 토큰을 무시하지 않도록, 브랜드의 정체성, 구성 규칙, CSS 토큰을 포함한 구조적이고 설치 가능한 "에이전트 플러그인"을 제공합니다.

작동 방식

Tinte는 디자인 정체성 구성 정보를 AI 에이전트가 API로 소비할 수 있는 아티팩트 세트로 컴파일합니다. 추출, 컴파일, 강제 적용의 워크플로우를 사용합니다:

1. 추출: Ray를 통해 실시간 페이지나 이미지에서 디자인 정체성을 추출할 수 있습니다.
2. 컴파일: 정체성 구성 정보를 SKILL.md 파일(타입 스케일, 음성, 구성 법칙 포함)과 tokens.css 파일(에이전트의 스타일 API로 사용)로 구성된 에이전트 플러그인으로 변환합니다.
3. 강제 적용: 린트 도구를 통해 코드 내에서 정의된 디자인 토큰을 우회하는 색상이 사용되지 않도록 보장합니다.

또한 Tinte는 세미틱 OKLCH 토큰을 shadcn/ui 프리셋, VS Code 테마, 터미널 설정 등을 포함한 19가지 이상의 형식으로 컴파일할 수 있습니다.

대상 사용자

AI 생성 코드에 디자인 시스템을 자동 적용하고, 다양한 도구 및 환경 간에 브랜드 일관성을 보장하고자 하는 개발자 및 디자이너입니다.

주요 기능

• 에이전트 플러그인 컴파일러: AI 에이전트가 읽고 따를 수 있도록 특별히 설계된 형식으로 디자인 시스템을 변환합니다.
• 다양한 형식 내보내기: VS Code, Zed, Cursor, shadcn/ui 등을 포함한 19가지 이상의 형식을 지원합니다.
• 디자인 추출: 실시간 페이지나 이미지에서 스타일을 추출할 수 있습니다.
• 토큰 린트: 정의된 디자인 토큰을 우회하는 스타일이 사용되었는지 검출하는 CLI 도구입니다.