Frame0 MCP Server

Frame0 MCP 서버

Frame0는 최신 앱을 위한 Balsamiq 대체 와이어프레임 도구입니다. Frame0 MCP 서버를 사용하면 Frame0에서 프롬프트를 통해 와이어프레임을 생성하고 수정할 수 있습니다.

설정

필수 조건:

• Frame0 v1.0.0-beta.17 이상.
• Node.js v22 이상.

아래와 같이 claude_desktop_config.json 에서 Claude Desktop을 설정합니다.

지엑스피1

--api-port=<port> 선택적 매개변수를 사용하면 Frame0의 API 서버에 다른 포트 번호를 사용할 수 있습니다.

예시 프롬프트

• “Frame0에 Phone 로그인 화면 만들기”
• "Frame0에서 휴대폰용 Instagram 홈 화면 만들기"
• “Frame0에서 TV용 Netflix 홈 화면 만들기”
• “로그인 버튼 색상 변경”
• “트위터 소셜 로그인 제거”
• “이모지를 아이콘으로 바꿔주세요”
• "Google 로그인 버튼에서 Google 웹사이트로의 링크를 설정하세요"

도구

• create_frame
• create_rectangle
• create_ellipse
• create_text
• create_line
• create_connector
• create_icon
• create_image
• update_shape
• duplicate_shape
• delete_shape
• get_available_icons
• move_shape
• align_shapes
• group
• ungroup
• set_link
• export_shape_as_image
• add_page
• update_page
• duplicate_page
• delete_page
• get_current_page_id
• set_current_page_by_id
• get_page
• get_all_pages
• export_page_as_image

개발

1. 이 저장소를 복제합니다.
2. npm run build 로 빌드합니다.
3. 아래와 같이 Claude Desktop에서 claude_desktop_config.json 업데이트합니다.
4. Claude Desktop을 다시 시작합니다.