AI 도구 · 디자인
AI와 함께 사용하기 좋은 UI 도구
AI가 만든 초안을 직접 고치고, 팀의 디자인 규칙과 개발 흐름으로 이어 가는 10개 도구 비교.
Qttie가 공개 자료를 바탕으로 작성하고, 사용자가 Notion 원고 버전 3을 검토한 AI 아티클입니다.
AI의 디자인이 10% 부족할 때, UI툴은 뭘써야할까?
AI와 함께 사용하기 좋은 UI 도구를 정리했습니다. AI가 디자인을 썩 잘하는 건 아니지만 분명 어느 단계까지 저점을 올려주었는데요, 그럼에도 불구하고 디자이너라면 10% 이상 부족한 부분을 손수 만지고 싶거나 잘 다듬고 싶을 겁니다. 그럴 때 사용하기 좋은 도구를 소개합니다.
확인일: 2026-09-13
10개 도구를 한 줄로 보면
- Figma — AI가 만든 초안을 기존 컴포넌트와 변수에 맞춰 팀이 계속 편집하는 작업 공간입니다.
- pen.dev —
.pen디자인 파일을 코드 옆에 두고 내장 AI나 외부 코딩 에이전트와 함께 고칩니다. - Framer — AI로 페이지를 만든 뒤 캔버스, CMS, 호스팅까지 한곳에서 이어 갑니다.
- Claude Design — Claude와 대화하며 UI 초안을 만들고 캔버스 검토와 Claude Code 구현으로 넘깁니다.
- Google Stitch — 참고 자료에서 여러 화면 후보를 만들고
DESIGN.md, MCP, SDK로 개발 도구에 전달합니다. - OpenDesign — 이미 쓰는 코딩 에이전트와 디자인 규칙을 연결해 UI와 시각 자료를 만듭니다.
- Penpot — 오픈소스 디자인 파일을 AI가 MCP로 읽고 수정할 수 있는 캔버스입니다.
- UXPin Merge — 실제 React 컴포넌트를 디자인 편집기에 연결해 AI 화면을 구성합니다.
- Uizard — 설명이나 손그림을 여러 화면의 편집 가능한 프로토타입으로 바꿉니다.
- Visily — 비디자이너의 화면 초안을 만들고 MCP나 코드 내보내기로 개발 환경에 전달합니다.
장점과 단점
| 도구 | 장점 | 단점과 먼저 볼 제약 |
|---|---|---|
| Figma | 기존 컴포넌트와 변수를 활용하고 외부 AI도 MCP로 캔버스를 수정합니다. | 외부 AI 쓰기에는 Full seat가 필요합니다. 이미지와 사용자 지정 글꼴, Make 복사본의 상호작용에 제약이 있습니다. |
| pen.dev | Figma 가져오기, HTML 내보내기, .pen 파일의 Git 관리를 지원합니다. | 외부 연결에는 앱과 대상 문서가 열려 있어야 하며 Figma 이미지 레이어 복사는 지원하지 않습니다. |
| Framer | 편집 가능한 페이지, CMS, 호스팅을 한 제품에서 처리합니다. | 완성 사이트를 독립 HTML 묶음으로 내보낼 수 없고 외부 agent가 다루지 못하는 설정이 있습니다. |
| Claude Design | 댓글과 직접 편집, 디자인 시스템 활용, Claude Code 연결을 한 흐름으로 제공합니다. | 유료 Claude 요금제의 베타 기능이며 채팅, Claude Code, Cowork와 사용 한도를 공유합니다. |
| Google Stitch | 이미지, 텍스트, 코드에서 화면 후보를 만들고 DESIGN.md, MCP, SDK로 넘깁니다. | 최신 공식 요금표와 다인 동시 편집 권한 체계는 이번 조사에서 확인하지 못했습니다. |
| OpenDesign | Claude Code, Codex 등 기존 에이전트에 같은 디자인 규칙을 적용할 수 있습니다. | 설치와 인증 관리가 필요하고 Team에서는 작성자만 편집합니다. 연결한 모델 비용은 별도입니다. |
| Penpot | 공개 MCP와 직접 호스팅 선택지가 있고 선택 요소의 SVG, HTML, CSS를 확인할 수 있습니다. | MCP는 활성 페이지에서 작동하며 탭이 잠들면 중단될 수 있습니다. 코드 확인이 앱 완성을 뜻하지는 않습니다. |
| UXPin Merge | 실제 React 라이브러리를 써서 디자인과 구현의 컴포넌트를 맞출 수 있습니다. | Forge는 프로토타입 안의 UI를 만듭니다. 일반 HTML 내보내기는 운영용 앱 코드와 다릅니다. |
| Uizard | 다중 화면 생성, 손그림 변환, 대화형 수정과 드래그 편집을 지원합니다. | 전체 프로젝트를 HTML이나 JavaScript로 내보내지 못하며 외부 MCP 연동은 확인하지 못했습니다. |
| Visily | 글과 스크린샷에서 시작해 편집하고 React, Vue, HTML로 내보낼 수 있습니다. | MCP는 디자인 정보 읽기이며 캔버스 쓰기는 확인되지 않았습니다. MCP와 코드 내보내기는 유료 조건입니다. |
사용 방법과 사용하기 좋은 상황
| 도구 | 기본 사용 방법 | 사용하기 좋은 상황 |
|---|---|---|
| Figma | 디자인 파일 준비 → agent나 MCP에 수정 요청 → 캔버스 검토 | 팀의 디자인 규칙을 유지하며 화면을 추가할 때 |
| pen.dev | .pen 문서 열기 → 내장 AI 또는 MCP 연결 → 수정 후 HTML·이미지 내보내기 | 디자인 변경과 코드 변경을 함께 관리할 때 |
| Framer | AI로 페이지 생성 → 캔버스 수정 → CMS 입력 → 미리보기와 게시 | 블로그나 소개 사이트의 제작과 운영을 함께 맡을 때 |
| Claude Design | 화면 설명 → 대화·댓글·직접 편집 → 공유하거나 Claude Code로 전달 | 비개발자, 디자이너, 개발자가 화면을 놓고 의견을 모을 때 |
| Google Stitch | 요구와 참고 자료 입력 → 후보 비교와 수정 → HTML 또는 개발 도구로 전달 | 아이디어의 여러 방향을 비교하고 구현 후보를 고를 때 |
| OpenDesign | 기존 에이전트 연결 → 디자인 규칙 선택 → 생성과 수정 → HTML·PDF 등 내보내기 | UI와 발표 자료에 같은 브랜드 기준을 적용할 때 |
| Penpot | AI 클라이언트와 MCP 연결 → 페이지 열기 → 수정 요청 → Inspect 확인 | 운영 환경을 선택하면서 기존 디자인 규칙을 AI와 다룰 때 |
| UXPin Merge | 라이브러리 선택 → Forge에 글·이미지·JSX 입력 → Preview와 코드 확인 | 디자이너와 개발자가 같은 React 컴포넌트를 써야 할 때 |
| Uizard | 설명이나 손그림 입력 → 화면 생성 → 문구와 배치 수정 → 공유 | 초기 아이디어나 신청·예약 흐름을 회의에서 설명할 때 |
| Visily | 글이나 스크린샷 입력 → 캔버스 수정 → MCP 또는 코드로 전달 | 기획자가 만든 화면을 개발자나 AI 코딩 도구에 넘길 때 |
지금 하는 일에 따라 좁히기
- 기존 디자인 시스템을 계속 쓴다면: Figma를 먼저 보고, 실제 React 컴포넌트가 기준이라면 UXPin Merge를 함께 비교합니다.
- 여러 방향을 빠르게 펼친다면: Google Stitch, Uizard, Visily, Claude Design에서 시작점과 전달 방식을 비교합니다.
- 디자인 파일을 코드 가까이에 둔다면: pen.dev, OpenDesign, Penpot의 파일 구조와 외부 AI 연결 방식을 살펴봅니다.
- 웹사이트 운영까지 한곳에서 맡긴다면: Framer의 CMS와 게시 흐름이 맞는지, HTML 자체 호스팅이 필요하지 않은지 먼저 확인합니다.
가격은 숫자 하나만 비교하지 않았습니다. 좌석, AI 크레딧, 외부 모델 비용, 내보내기 기능의 유료 조건이 서로 다르므로 최종 후보를 정한 뒤 공식 요금표를 다시 확인하는 편이 안전합니다.
연결한 WIQI 노트
- 큐티클 — AI와 함께 사용하기 좋은 UI 도구
공개 자료의 원문 링크는 본문에 함께 남겼습니다.