0.2.4 • Published 5 months ago
@croquiscom/mcp-tools v0.2.4
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 만들어줘