채팅으로 쓰기 (MCP)

터미널 명령어 대신, Cursor·Claude 같은 AI에 ids-use를 도구로 연결(MCP) 해 자연어로 요청할 수 있습니다. "이 시안 코드로 뽑아줘"처럼 요청하면, AI가 알맞은 ids-use 명령을 골라 대신 실행합니다.

이 문서는 ids-use를 AI(채팅)로 사용하는 방법입니다.
터미널에서 명령어로 직접 사용하려면 Figma 시안 → 코드 또는 코드 → Figma 시안을 참고하세요.

1. CLI와 채팅 비교

2. 시작하기

1. ids-use를 AI에 연결하기

   AI 클라이언트의 MCP 설정 파일에 아래 mcpServers 항목을 추가한 뒤 AI를 재시작하면 figma_export·create·list 등 11개 도구가 연결됩니다. 예시는 Claude Code의 .mcp.json 기준이며, 파일 위치는 클라이언트마다 다릅니다(아래 접힌 항목 참고).

   json

   {
     "mcpServers": {
       "ids-use": { "command": "npx", "args": ["-y", "@mildang/ids-use", "mcp"] }
     }
   }

   연결된 도구는 AI 클라이언트의 MCP 설정 화면에서 확인할 수 있습니다. 도구가 보이지 않으면 AI를 완전히 종료한 뒤 다시 켜세요. .mcp.json은 실행 중에는 다시 읽히지 않아, 재시작해야 반영됩니다.

   
   
   클라이언트별 설정 파일 · 연결 확인 위치

   mcpServers 구조는 어느 클라이언트든 동일하고, 넣는 파일 위치만 다릅니다.

   클라이언트	설정 파일	연결 확인
   Claude Code	프로젝트 루트 .mcp.json	채팅에 /mcp
   Cursor	.cursor/mcp.json	Settings → MCP (서버 옆 초록 점)
   Claude Desktop	claude_desktop_config.json	입력창 도구 아이콘 · Settings → Developer
   Windsurf	~/.codeium/windsurf/mcp_config.json	설정의 MCP 패널
   VS Code	.vscode/mcp.json	MCP 패널

   목록에 ids-use 서버와 그 아래 도구들이 보이면 연결 성공입니다.

2. 채팅에서 자연어로 요청하기

   Figma가 ids-use launch로 켜져 있어야 합니다(설치의 준비 단계와 동일). 준비됐다면 아래처럼 요청합니다.

   • Figma → 코드: "이 시안 뽑아서 src/components/MyForm.tsx에 저장해줘" (경로를 주면 파일·이미지까지 저장)
   • 코드 → Figma: "체크박스를 '약관 동의' 라벨로 시안에 만들어줘"

   

   AI가 ids_use_guide로 ids-use의 기능을 이미 알고 있어, 따로 설명할 필요 없이 바로 요청하면 됩니다.

3. 유의사항