@croquiscom/mcp-tools

MCP Tools

제공하는 툴

• PDS 기반으로 만들어진 피그마 디자인을 @croquiscom/pds 기반의 리액트 코드로 제너레이션 해주는 툴
• GraphQL schema 기반으로 client graphql과 fixture를 생성해주는 툴

사용법은 여기에서 확인하세요.

Getting Started

아래 사용하시는 코드 에디터에 맞게 세팅 후 사용하시면 됩니다.

피그마 Personal Access Token 발급

피그마 Personal Access Token 발급 가이드를 참고해 토큰을 발급받으세요. 아래 권한이 포함되어야 합니다.

에디터 세팅

Cursor

Shift + CMD + p -> Cursor Settings -> MCP -> Add new global MCP server 클릭 -> 아래 코드 복붙 -> 저장 -> 스위치 토글

{
  "mcpServers": {
    "ks-mcp-tools": {
      "command": "npx",
      "args": ["-y", "@croquiscom/mcp-tools", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

위 세팅이 완료 되었다면 Cursor의 챗 모드를 Agent 모드로 변경합니다.

VSCode

Shift + CMD + p -> Preferences: Open User Settings (JSON) -> 아래 코드 붙붙 -> Start 클릭

"mcp": {
  "servers": {
    "ks-mcp-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@croquiscom/mcp-tools",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

위 세팅이 완료 되었다면 VSCode의 챗 모드를 Agent 모드로 변경합니다.

사용법

PDS 기반으로 만들어진 피그마 디자인을 @croquiscom/pds 기반의 리액트 코드로 제너레이션 해주는 툴 사용 예제

피그마에서 원하는 영역을 선택 후 오른쪽 마우스 클릭 -> Copy link to Selection 클릭 -> 챗에 복사된 피그마 링크 삽입 후 적용 요청과 함께 실행합니다.

예제 프롬프트)

https://www.figma.com/design/XXX?node-id=4041-64485&m=dev 

이 피그마 링크 pds 사용해서 만들어줘

GraphQL schema 기반으로 client graphql과 fixture를 생성해주는 툴 툴 사용 예제

예제 프롬프트)

graphql api interfaces 변경된 코드 기반 예시

api diff에 대한 graphql, fixture 만들어줘

graphql schema string 첨부 기반 예시

sample_query(param1: String, param2: Int): String!

createSampleMutation(input: SomeInput!): Boolean!

input SomeInput {
  arg1: String
  arg2: Int
}

이 graphql schema 기반으로 graphql, fixture 만들어줘