프롬프트 실전 예시

Figma MCP와 AI 협업 시 즉시 복붙해서 쓸 수 있는 프롬프트 예시 모음이다. 업데이트: 2026-03-10

핵심 요약

구분	내용
📖 구성	프레임워크 지정 / 컴포넌트 재사용 / 토큰 추출 / 반응형 / 접근성 / 역방향 / 다이어그램
💡 공통 팁	URL은 `node-id` 포함 선택 링크 사용. 금지 사항은 명시적으로 기술
🎯 재사용 극대화	src/components/ui 경로 + Code Connect 설정 조합이 가장 효과적
⚠️ 주의	대형 파일은 섹션별로 분할 요청. 전체 페이지 URL 한 번에 입력 금지

1. 프레임워크 지정

기본값은 React + Tailwind이므로 다른 스택을 사용할 경우 반드시 명시한다.

현재 Figma 선택 항목을 Vue 3 Composition API로 생성해줘.

Generate my Figma selection in plain HTML + CSS.

Generate my Figma selection in iOS SwiftUI.

이 Figma 프레임을 Next.js App Router 구조에 맞게 구현해줘.
Server Component와 Client Component를 적절히 분리해줘:
https://www.figma.com/design/xxx?node-id=yyy

이 Figma 컴포넌트를 Angular + Angular Material로 구현해줘.
Tailwind는 사용하지 마:
https://www.figma.com/design/xxx?node-id=yyy

2. 컴포넌트 재사용

기존 컴포넌트 경로를 명시하면 AI가 새 컴포넌트를 만들지 않고 재사용한다.

Generate my Figma selection using components from src/components/ui.

Use components from src/components/ui and style with Tailwind.

이 Figma 컴포넌트를 우리 프로젝트의 기존 Button 컴포넌트 스타일로 구현해줘.
기존 컴포넌트는 src/components/Button.tsx에 있고,
cn() 유틸리티 함수와 cva()를 사용하고 있어:
https://www.figma.com/design/xxx?node-id=yyy

이 디자인을 src/components/marketing/PricingCard.tsx에 추가해줘.
기존 Button, Card 컴포넌트를 재사용하고 새로운 컴포넌트는 만들지 마.

기대 출력: AI가 기존 import 경로를 사용하고, 새로운 styled-component 또는 새 파일을 생성하지 않는다.

3. 디자인 토큰 추출

get_variable_defs 도구로 Figma 변수를 코드 토큰으로 변환한다.

내 Figma 선택 항목에 사용된 변수를 모두 가져와줘.

이 Figma 파일의 색상·간격·타이포그래피 변수를 CSS Custom Properties로 정의해줘.
다크 모드 토큰도 포함해줘:
https://www.figma.com/design/xxx

이 Figma 디자인 시스템의 색상·폰트·간격을 tailwind.config.js의 theme.extend로 변환해줘:
https://www.figma.com/design/xxx

이 Figma 파일의 디자인 토큰을 W3C Design Token Community Group 형식 JSON으로 추출해줘:
https://www.figma.com/design/xxx

기대 출력 (CSS Variables):

:root {
  --color-primary-50: #EFF6FF;
  --color-primary-500: #3B82F6;
  --spacing-1: 4px;
  --spacing-4: 16px;
  --font-size-sm: 14px;
  --font-weight-semibold: 600;
}
 
[data-theme="dark"] {
  --color-primary-500: #60A5FA;
}

4. 반응형 구현

이 Figma 프레임을 모바일(375px), 태블릿(768px), 데스크톱(1440px) 반응형으로 구현해줘:
https://www.figma.com/design/xxx?node-id=yyy

Figma 주석에 있는 반응형 동작 설명을 코드에 반영해줘.

이 Figma 프레임을 반응형으로 구현해줘:
- 모바일(< 768px): 1열 그리드
- 태블릿(768px ~ 1024px): 2열 그리드
- 데스크톱(> 1024px): 4열 그리드
https://www.figma.com/design/xxx?node-id=yyy

기대 출력:

<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
  {items.map((item) => (
    <ItemCard key={item.id} {...item} />
  ))}
</div>

5. 접근성 적용

이 Figma 폼 컴포넌트를 WCAG 2.1 AA 기준에 맞게 구현해줘.
aria-label, role, focusable 요소를 모두 포함해줘:
https://www.figma.com/design/xxx?node-id=yyy

이 Figma 선택 항목을 접근성을 고려해서 구현해줘.
- ARIA 레이블 추가
- 키보드 내비게이션 지원
- 색상 대비 WCAG AA 기준 준수
- 포커스 상태 처리

기대 출력 (일부):

<form role="form" aria-label="로그인 폼">
  <div className="form-group">
    <label htmlFor="email" className="block text-sm font-medium">
      이메일
    </label>
    <input
      id="email"
      type="email"
      aria-required="true"
      aria-describedby="email-error"
      className="mt-1 block w-full rounded-md border"
    />
    <p id="email-error" role="alert" aria-live="polite" className="text-red-600 text-sm" />
  </div>
</form>

6. 대규모 페이지 구현

큰 페이지는 섹션별로 분할해서 순차 요청한다.

이 Figma 페이지 전체를 구현해야 해:
https://www.figma.com/design/xxx?node-id=yyy

먼저 get_metadata로 전체 구조를 파악하고,
섹션별로 나눠서 get_design_context를 호출해줘.
각 섹션을 별도 컴포넌트로 분리해서 구현해.

섹션 순서: Hero → Features → Pricing → Footer

이 Figma 대시보드 페이지를 React + Tailwind로 구현해줘.
사이드바, 헤더, 메인 콘텐츠 영역 구조를 유지해줘.
각 영역은 별도 컴포넌트 파일로 분리해줘:
https://www.figma.com/design/xxx?node-id=yyy

7. 코드 → Figma 역변환

실행 중인 웹 앱 화면을 Figma 레이어로 역변환한다. Claude Code, VS Code 원격 서버 전용 기능이다.

내 앱의 로컬 서버를 시작하고 UI를 새 Figma 파일로 캡처해줘.

Start a local server for my app and capture the UI in [Figma URL].

현재 localhost:3000의 메인 페이지를 Figma로 변환해줘.

활용 시나리오	프롬프트
기존 앱 UI를 Figma로 가져오기	”localhost:3000 메인 페이지를 Figma로 변환해줘”
구현 결과 디자인 검토	”구현된 컴포넌트가 Figma 원본과 일치하는지 비교해줘”
레거시 UI 리디자인 준비	”기존 UI를 Figma로 가져온 뒤 리디자인 초안을 잡아줘”

8. 다이어그램 생성

generate_diagram 도구로 Mermaid 문법을 FigJam 다이어그램으로 변환한다.

유저 인증 플로우에 대한 플로우차트를 Figma MCP generate_diagram 도구로 생성해줘.

flowchart TD
    A[사용자] --> B[로그인]
    B --> C{인증 성공?}
    C -->|예| D[대시보드]
    C -->|아니오| E[오류 메시지]

이 ERD를 Mermaid로 작성했는데 FigJam 다이어그램으로 만들어줘:
erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ ITEM : contains

이 FigJam 다이어그램을 분석하고 구현 순서를 제안해줘:
https://www.figma.com/board/xxx

9. 디자인 시스템 규칙 생성

팀 전체에 일관된 기준을 적용하는 규칙 파일을 자동으로 생성한다.

내 코드베이스를 분석해서 Figma MCP용 디자인 시스템 규칙을 생성해줘.
언어: TypeScript, 프레임워크: React
결과를 CLAUDE.md에 저장해줘.

create design system rules for my project.
clientLanguages: typescript
clientFrameworks: react

자동 생성 시 포함 항목:

항목	예시
컴포넌트 위치 및 import 규칙	`src/components/ui` 사용
디자인 토큰 사용 방식	CSS Variables / Tailwind tokens
스타일링 방법론	Tailwind CSS, CSS Modules 등
반응형 브레이크포인트	sm: 375px, md: 768px, lg: 1440px
접근성 기준	WCAG 2.1 AA 준수

문서 탐색

이전	다음
2.3.2 AI 협업 가이드	—

참고 자료

출처	URL	신뢰도
Figma MCP 도구 및 프롬프트 공식 문서	https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/	★★★★★
Design System Rules 스킬 공식 문서	https://developers.figma.com/docs/figma-mcp-server/skill-create-design-system-rules/	★★★★★
Figma MCP GitHub 가이드	https://github.com/figma/mcp-server-guide	★★★★★
LogRocket — Design to Code with Figma MCP	https://blog.logrocket.com/ux-design/design-to-code-with-figma-mcp/	★★★★☆
Seamgen — Figma MCP Complete Guide	https://www.seamgen.com/blog/figma-mcp-complete-guide-to-design-to-code-automation	★★★★☆

JW's AI_Stash

Explorer

2.3.3 프롬프트 실전 예시