AnxForever/stylekit

해결하는 문제

AI가 생성한 웹사이트는 "더 보기 좋게 만들어줘"라는 지시가 모델에게 너무 모호하기 때문에 흔히 평범해 보입니다. StyleKit은 디자인 토큰, 컴포넌트 레시피, 엄격한 제약을 포함한 구조화된 시각 스타일 라이브러리를 제공하여, AI 에이전트가 이를 따르면서 "스타일 드리프트" 없이 일관되고 높은 품질의 시각 디자인을 만들어내도록 해결합니다.

작동 방식

StyleKit은 추상적인 시각 방향을 기계가 읽을 수 있는 명세로 변환합니다. 10개 카테고리(Cyberpunk, Brutalism, Stripe나 Apple 같은 브랜드에서 영감을 받은 스타일 등)에 걸쳐 148개의 엄선된 스타일을 제공합니다. 이러한 스타일은 세 가지 주요 방식으로 AI 도구에 전달됩니다:

1. shadcn Registry: CLI 명령으로 기존 프로젝트에 스타일을 추가하여 CSS 변수를 업데이트할 수 있습니다.
2. Agent Skills: 전용 스킬을 통해 코딩 에이전트(Cursor, Claude Code, Windsurf 등)가 특정 스타일과 규칙을 코드에 직접 적용할 수 있습니다.
3. MCP (Model Context Protocol): MCP 서버가 스타일 검색, 디자인 토큰, 그리고 생성된 UI 코드가 선택한 스타일의 규칙을 준수하는지 검증하는 lint 도구를 제공합니다.

누구를 위한 것인가

AI 코딩 에이전트를 사용해 프런트엔드 인터페이스를 구축하면서, 흔한 AI 미학을 넘어 구체적이고 전문적인 시각 정체성을 구현하려는 개발자와 디자이너.

하이라이트

• 방대한 라이브러리: 148개의 엄선된 스타일, 60개의 애니메이션, 36개의 페이지 템플릿.
• 에이전트 네이티브: MCP와 Agent Skills를 통한 AI 에이전트와의 깊은 통합으로 자동 스타일링.
• 다중 내보내기: Tailwind 프리셋, shadcn 테마, Figma 토큰 지원.
• 기계 판독 가능: /llms.txt와 AI가 사용하기 쉬운 HTTP API 제공.
• 검증: AI가 생성한 코드가 스타일 제약을 따르는지 확인하는 stylekit_lint_code 도구 포함.