메인 콘텐츠로 건너뛰기
MCP 서버

AI 환각을 중지하세요.
AI 편집자는 Tailwind CSS를 알고 있습니다.

Cherry는 AI 코딩 도우미에게 필요한 정확한 Tailwind CSS 구성 요소 사양, 테마, 문서 및 블록을 요청 시 환각 없이 제공하는 무료 MCP 서버(모델 컨텍스트 프로토콜)입니다.

AI 보조자가 Tailwind CSS를 잘못 이해하는 이유와 Cherry가 이를 수정하는 방법

체리 없이

  • AI는 Frutjam에 존재하지 않는 클래스 이름을 환각시킵니다.
  • 모든 프롬프트에 문서를 복사하여 붙여넣어 토큰을 낭비합니다.
  • llms.txt가 모든 것을 덤프합니다. AI가 압도당합니다.
  • AI가 오래된 구성 요소 API를 사용했기 때문에 UI 중단이 생성되었습니다.

체리와 함께

  • AI는 필요한 각 구성 요소에 대한 정확한 사양을 가져옵니다.
  • 적시에 적절한 컨텍스트 — 토큰 낭비 없음
  • 항상 최신 Frutjam 버전과 동기화됩니다.
  • 출력은 정확하고 의미론적이며 생산 준비가 되어 있습니다.

체리가 할 수 있는 일

원하는 것을 설명하면 됩니다. Cherry는 AI를 올바르게 구축하는 데 필요한 정확한 지식을 AI에 제공합니다.

AI에게 물어보세요... 체리가 실현시켜요
"이 페이지에 가격 섹션 추가" 실제 가격 블록 HTML을 가져와서 놓습니다.
"Frutjam에는 어떤 배지 변형이 있나요?" 클래스, 크기, 상태, 예시 등 전체 배지 사양을 가져옵니다.
"이 레이아웃에 블루베리 테마를 적용합니다" 해당 테마에 대한 정확한 디자인 토큰을 로드합니다.
"이 Bootstrap navbar를 Frutjam으로 변환하세요" Frutjam 클래스를 수정하기 위해 마크업을 마이그레이션합니다.
"이 Figma 디자인을 Frutjam HTML로 변환하세요" Figma 링크를 읽고 Frutjam 구성요소로 재현합니다.
"이 일반 Tailwind 카드를 Frutjam으로 마이그레이션하세요." Tailwind 유틸리티를 올바른 Frutjam 구성 요소 클래스로 대체합니다.
프로/팀

내장된 AI 슬래시 명령

Cherry에는 가장 일반적인 Frutjam 작업에 대한 미리 만들어진 프롬프트가 포함되어 있습니다. AI 편집기에 명령을 입력하고 입력을 제공하면 정확한 Frutjam 코드를 얻을 수 있습니다. 수동으로 메시지를 표시할 필요가 없습니다.

/figma_to_frutjam

Figma → 프루트잠

Figma 디자인 설명이나 내보낸 JSON을 붙여넣으세요. Cherry는 이를 정확하고 복사하여 붙여넣을 수 있는 Frutjam HTML로 변환합니다.

/image_to_frutjam

스크린샷 → Frutjam

UI 스크린샷을 설명하거나 이미지 URL을 공유하세요. Cherry는 가장 가까운 Frutjam 구성 요소로 이를 재현합니다.

/tailwind_to_frutjam

순풍 → Frutjam

원시 Tailwind HTML을 붙여넣습니다. Cherry는 손으로 만든 유틸리티를 올바른 Frutjam 구성 요소 클래스로 대체합니다.

/bootstrap_to_frutjam

부트스트랩 → Frutjam

부트스트랩 마크업을 붙여넣습니다. Cherry는 모든 Bootstrap 클래스를 Frutjam에 상응하는 클래스로 매핑하고 깨끗한 HTML을 출력합니다.

/generate_theme

테마 생성

분위기, 브랜드 또는 색상 팔레트를 설명합니다. Cherry는 필요한 모든 CSS 변수를 사용하여 완전한 Frutjam 테마를 생성합니다.

각 업데이트마다 더 많은 메시지가 추가되었습니다.

모든 슬래시 명령은 Claude Code, Cursor, VS Code 및 모든 MCP 호환 편집기에서 사용할 수 있습니다.

Cherry가 비교되는 방식

모든 AI 컨텍스트가 동일한 것은 아닙니다.

Cherry MCP llms.txt No context
정확한 클래스 이름 부분
주문형 — 필요한 것만 ✗ 모든 것을 버려라
토큰 효율성
항상 최신 상태
테마 및 디자인 토큰 부분
기성품 페이지 블록
Figma / 이미지 → 코드
프레임워크 마이그레이션 ✓ 순풍, 부트스트랩
Tailwind CSS v4 정확한 클래스 이름 부분

1분 안에 설정

시작하는 데 계정이 필요하지 않습니다. 무료 등급은 즉시 사용할 수 있습니다. 편집기에 Cherry를 추가하기만 하면 됩니다. 라이선스 키와 이메일은 Pro 및 Team 플랜에만 필요합니다.

Claude Code

무료 등급 계정이 필요하지 않습니다

claude mcp add frutjam-cherry -- npx -y frutjam-cherry@latest

프로/팀 라이센스 필요

claude mcp add frutjam-cherry \
  --env LICENSE=your-license-key \
  --env EMAIL=your@email.com \
  -- npx -y frutjam-cherry@latest
Cursor

커서 설정 → MCP를 열고 다음을 추가합니다.

무료 등급 계정이 필요하지 않습니다

{
  "frutjam-cherry": {
    "command": "npx",
    "args": ["-y", "frutjam-cherry@latest"]
  }
}

프로/팀 라이센스 필요

{
  "frutjam-cherry": {
    "command": "npx",
    "args": ["-y", "frutjam-cherry@latest"],
    "env": {
      "LICENSE": "your-license-key",
      "EMAIL": "your@email.com"
    }
  }
}
VS Code

Ctrl+Shift+P → MCP: 사용자 구성을 열고 다음을 추가합니다.

무료 등급 계정이 필요하지 않습니다

{
  "servers": {
    "frutjam-cherry": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "frutjam-cherry@latest"]
    }
  }
}

프로/팀 라이센스 필요

{
  "servers": {
    "frutjam-cherry": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "frutjam-cherry@latest"],
      "env": {
        "LICENSE": "your-license-key",
        "EMAIL": "your@email.com"
      }
    }
  }
}
Other editors

무료 등급 계정이 필요하지 않습니다

{
  "mcpServers": {
    "frutjam-cherry": {
      "command": "npx",
      "args": ["-y", "frutjam-cherry@latest"]
    }
  }
}

프로/팀 라이센스 필요

{
  "mcpServers": {
    "frutjam-cherry": {
      "command": "npx",
      "args": ["-y", "frutjam-cherry@latest"],
      "env": {
        "LICENSE": "your-license-key",
        "EMAIL": "your@email.com"
      }
    }
  }
}

설정 후 — 처음 60초

Cherry가 작동하는지 확인하고 구축을 시작하는 3단계입니다.

1단계

실행 중인지 확인하세요.

VS Code

Ctrl+Shift+U → 출력 드롭다운에서 MCP를 선택합니다. frutjam-cherry: Running을 찾으세요.

Cursor

설정 → MCP. 서버는 frutjam-cherry 옆에 녹색 연결 상태를 표시해야 합니다.

Claude Code

터미널에서 claude mcp list를 실행하세요. frutjam-cherry가 연결된 것으로 표시되어야 합니다.

2단계

첫 번째 테스트 실행

AI 채팅 패널을 열고 다음을 입력하세요.

List all available Frutjam components

Cherry가 활성화된 경우 AI는 list_comComponents를 호출하고 구성 요소 이름 목록을 반환합니다. 그게 다입니다. 작동 중입니다.

3단계

구축 시작 - 예시 프롬프트

AI에게 이렇게 말해보세요 체리가 하는 일
"Show me how to use the Frutjam button component" get_comComponent를 호출하고 전체 사양을 반환합니다.
"Build me a pricing card using Frutjam" 카드 구성요소를 찾아보고 정확한 코드를 작성합니다.
"Show me the darkberry theme tokens" get_theme를 호출하고 모든 CSS 변수를 반환합니다.
"Get me the hero block" get_block을 호출하고 HTML 복사-붙여넣기를 반환합니다.
"How do I install Frutjam?" get_docs를 호출하고 설치 가이드를 반환합니다.

Cherry에 대해 언급할 필요는 없습니다. 원하는 것이 무엇인지 설명하면 됩니다. AI가 자동으로 올바른 도구를 호출합니다.

Cherry는 Pro와 Team에 포함되어 있습니다.

무료 등급 사용 가능 - 일일 요청이 제한되어 있으며 계정이 필요하지 않습니다.

무제한 요청과 프리미엄 블록 및 AI 슬래시 명령에 액세스하려면 Pro 또는 Team으로 업그레이드하세요.

FAQ

MCP 서버란 무엇입니까?

MCP(Model Context Protocol)는 AI 보조자가 런타임에 외부 도구를 호출할 수 있게 해주는 개방형 표준입니다. Cherry는 도구 서버 역할을 합니다. AI 편집자는 훈련 데이터에서 추측하는 대신 요청에 따라 Frutjam 사양을 가져오기 위해 이를 호출합니다.

AI 보조자가 Tailwind CSS 클래스 이름을 환각하는 이유는 무엇입니까?

AI 모델은 웹 스냅샷을 기반으로 훈련됩니다. 특히 최신 라이브러리나 Tailwind CSS v4 API의 경우 특정 구성 요소 라이브러리의 정확한 클래스 이름을 알지 못합니다. 라이브 컨텍스트가 없으면 그럴듯하게 들리지만 존재하지 않는 클래스를 만들어냅니다. Cherry는 AI가 필요한 순간에 실제 최신 Frutjam 구성 요소 문서를 제공하여 환각을 완전히 제거함으로써 이 문제를 해결합니다.

Cherry는 어떤 편집기를 지원하나요?

MCP를 지원하는 모든 편집기: Claude Code, Cursor, VS Code, Windsurf, Zed, Cline 및 MCP 표준을 구현하는 기타 편집기.

무료와 Pro/Team의 차이점은 무엇입니까?

무료는 제한된 일일 요청과 구성 요소 문서 및 무료 블록에 대한 액세스를 제공합니다. Pro 및 Team은 무제한 요청, 프리미엄 블록, 템플릿 및 모든 AI 슬래시 명령을 잠금 해제합니다.

라이센스 키를 어떻게 받나요?

라이센스 키는 구독 후 즉시 이메일로 전송됩니다. 계정 대시보드에서 구독과 시트를 관리할 수도 있습니다.

Cherry를 오프라인으로 사용할 수 있나요?

Cherry는 처음 사용할 때 온라인으로 라이센스를 확인한 다음 7일 동안 로컬로 캐시합니다. 그 후에는 다시 유효성을 검사합니다. 짧은 인터넷 연결만 있으면 됩니다.

언제든지 취소할 수 있나요?

예. 언제든지 취소하세요. 귀하의 액세스는 청구 기간이 끝날 때까지 계속됩니다.

더 빠르게 구축할 준비가 되셨나요?

첫 번째 프롬프트에서 AI가 정확한 Frutjam 코드로 작동하도록 하세요.