Claude Code

Figma MCP가 캔버스에 편집 가능한 결과물을 만듭니다

AI 에이전트가 Figma 캔버스에 직접 디자인을 만들 수 있게 됐습니다. 읽기만 하던 MCP가 이제 쓰기까지 맡습니다.

12강에서는 MCP로 외부 서비스의 자료를 Claude Code 안으로 가져오는 방법을 봤습니다. 노션 페이지를 읽고 슬랙 대화를 요약했고, 웹페이지에서 정보를 뽑아 처리했습니다. 지금까지의 공통점은 MCP가 외부 자료를 읽는 데 쓰였다는 것입니다.

그런데 3월 24일 Figma MCP 서버에 use_figma라는 도구가 추가됐습니다. 이제 AI 에이전트가 Figma 캔버스에 직접 결과물을 씁니다. 프레임을 만들고, 디자인 시스템의 컴포넌트를 배치한 뒤 변수를 설정하고, 오토 레이아웃까지 잡습니다. 스크린샷을 보고 코드로 비슷하게 흉내 내는 방식이 아닙니다. 실제 Figma 파일 안에 편집 가능한 요소를 만듭니다.

이번 발표에서 달라진 점은 MCP의 역할이 "읽기 도구"에서 "작업 도구"로 넓어졌다는 것입니다. 12강에서 MCP를 "Claude Code의 눈과 귀를 넓히는 도구"라고 설명했다면, Figma에서는 "Claude Code의 손"으로도 쓸 수 있게 됐습니다. 노션에 페이지를 만들거나 구글 시트에 데이터를 쓰는 일도 이 흐름에 들어옵니다. 노션 MCP는 이미 "데이터를 읽어오는" 단계를 지나 "외부 도구에 결과물을 직접 만드는" 쓰기를 지원하고 있고, Figma MCP 서버에도 쓰기 기능이 추가됐습니다.

AI가 만든 결과물을 디자이너가 이어받아 다듬는 워크플로우. 디자인 영역에서도 이게 가능해졌습니다.

use_figma는 디자인 시스템이 있는 팀에서 더 잘 작동합니다

Figma MCP 서버가 처음 나온 것은 아닙니다. 이전 서버는 디자인 파일의 구조를 읽어 코드 생성에 참고하는 읽기 전용 방식이었습니다. 이번에 추가된 use_figma는 그 결과물을 캔버스에 직접 만드는 쓰기 도구입니다.

  • 프레임을 만들고 배치

  • 팀의 디자인 시스템에서 컴포넌트를 가져와 사용

  • 변수(색상, 간격 등)를 적용

  • 오토 레이아웃으로 반응형 구조 설정

use_figma를 빈 캔버스에 무엇이든 새로 그리는 도구로 이해하면 핵심을 놓치기 쉽습니다. 팀이 이미 만들어 둔 디자인 시스템에서 버튼 컴포넌트나 색상 변수를 가져와 화면에 쓰는 도구에 가깝습니다.

그렇다면 컴포넌트 없이 빈 캔버스에 "로그인 화면 만들어줘"라고 할 때는 어떨까요. 쓸 수 있는 재료가 없으면 결과를 기대하기 어렵습니다. 그래서 디자인 시스템이 잘 갖춰진 팀일수록 효과가 큽니다. 버튼, 카드, 인풋 필드가 정리되어 있다면 "이 컴포넌트들로 설정 페이지 만들어줘"라는 요청도 구체적인 결과로 이어질 수 있습니다.

v0이나 Bolt처럼 AI가 디자인과 비슷한 것을 만들어 주는 도구와는 결과물의 종류가 다릅니다. 그런 도구는 코드를 만들지만 use_figma는 Figma 파일 자체를 만듭니다. 디자이너가 파일을 열어 바로 수정할 수 있는 결과물입니다. 따라서 이 기능은 개발자만 쓰는 도구가 아니라 디자이너의 작업 도구로도 쓰일 수 있습니다.

Figma Skills는 마크다운으로 작업 규칙을 정합니다

새소식52개 새소식
New
AI 코딩 에이전트의 화면을 디자이너의 기준으로 설계하는 Hallmark

Hallmark는 Claude Code·Cursor·Codex가 만든 웹 화면의 반복 패턴을 점검하는 스킬입니다. 기본 동작과 세 가지 명령의 쓰임, 설치 방법, 테스트 폴더에서 확인할 항목을 정리합니다.

Octigen, 매달 바뀌는 데이터만 넣어 PowerPoint 보고서를 다시 만듭니다

Octigen은 기존 PowerPoint 템플릿과 월별 Excel 파일을 연결해 반복 보고서를 만듭니다. 연결 구조를 만들 때는 AI가 변환 단계를 만들고, 다음 달부터는 같은 규칙으로 데이터를 채워 담당자가 숫자와 문구를 검토하는 흐름입니다.

AI에게 일반 사용자처럼 화면을 보게 하는 UX 피드백봇

ChatGPT 프로젝트에 일반 사용자 관점의 지침을 저장하고, Claude Design에서 여러 페르소나의 반응을 비교해 배포 전 화면의 혼란 지점을 찾는 흐름을 소개합니다.

Slack Workflow Builder로 채널의 반복 요청을 폼으로 받기

Slack Workflow Builder로 반복 요청을 정해진 질문으로 받고, 응답을 채널 메시지와 Google Sheets에 연결하는 흐름을 정리합니다.

Markdown 폴더는 그대로 두고 위키 화면만 얹는 LeafWiki

문서를 옮기지 않고 찾는 화면만 얹고 싶은 팀을 위해, LeafWiki 도입 전에 링크 변경·리싱크·로그인 모드에서 확인할 지점을 정리했습니다.

nanobot, 채팅에서 파일과 예약 작업을 처리하는 개인 AI 에이전트

nanobot은 채팅 요청을 파일 작업과 예약 실행으로 이어 주는 개인 AI 에이전트입니다. 회의록 정리와 알림을 예로, 맡길 범위와 확인할 항목을 살펴봅니다.

Meetily, 회의를 전사하고 요약하는 로컬 AI 회의록 도구

Meetily는 녹음과 전사를 기기에서 처리하고, 요약에는 로컬 AI나 사용자가 고른 API를 연결할 수 있는 회의록 도구입니다.

Codex 사용 분석: AI에게 질문하던 사람들이 일을 맡기기 시작했습니다

OpenAI의 Codex 사용 분석에서 비개발자 사용 급증과 위임 시간의 변화를 읽습니다. 수치의 전제를 확인하고, 내 업무에서 맡길 일을 고르는 기준까지 정리했습니다.

OfficeCLI, 매달 고치는 보고서 파일을 AI에게 맡기기

OfficeCLI는 Word, Excel, PowerPoint 파일을 AI 에이전트가 읽고 고치게 하는 단일 바이너리 도구입니다. 보고서 파일 한 건으로 시작해 결과물을 화면에서 확인합니다.

문서를 열기 전에, 먼저 ‘어디로 보낼지’ 정합니다

Document Classify는 문서 양식 대신 팀이 정한 분류 설명을 읽어 PDF·스캔본·이미지를 나눕니다. 문서 20건을 작은 표본으로 시험한 뒤, 어느 결과까지 자동으로 넘길지 정합니다.

Claude Tag, Slack 채널에서 팀의 일을 이어받다

Claude Tag는 Slack 채널의 대화를 이어서 읽고 팀의 반복 업무를 맡습니다. 어떤 업무부터 시작할지, 권한과 비용을 어떻게 관리할지 정리했습니다.

Pagecast로 보고서 파일을 링크로 공유하기

Pagecast는 AI 코딩 에이전트가 만든 HTML·Markdown 보고서를 Cloudflare Pages 링크로 발행해 공유하는 도구입니다. 파일 첨부 대신 웹 링크로 넘기는 절차와 주의점을 정리했습니다.

Ponytail: AI가 일을 크게 벌이지 않게 하기

Ponytail은 Claude Code나 Codex가 작은 수정까지 과하게 키우지 않도록 ‘덜 만들고 덜 건드리는’ 기준을 붙이는 스킬입니다. lite/full/ultra 모드와 Hooks 확인 기준을 함께 봅니다.

agent-handoff로 Claude Code와 Codex 사이에서 작업 넘기기

agent-handoff는 Claude Code와 Codex 사이에서 세션 맥락을 손으로 요약하지 않고 넘기는 도구입니다. 넘길 대화와 이어갈 에이전트만 고르면 작업 전환이 쉬워집니다.

Headroom: 긴 출력물을 Claude Code에 가볍게 넘기는 도구

Headroom은 Claude Code가 긴 로그나 실행 결과를 읽기 전에 먼저 압축해 넘기는 도구입니다. /compact와 달리 입력 단계의 컨텍스트 부담을 줄이는 선택지입니다.

Claude가 우리 사이트를 알고 있는지 확인하기

Claude나 Perplexity 같은 AI 답변에서 우리 사이트가 어떻게 읽히는지 Claude Code로 점검하는 geo-seo-claude 스킬입니다. SEO 점수보다 답변 원문과 인용 가능성을 확인하는 흐름입니다.