최고의 디자인-코드 변환 AI 도구, 출발점별로 정리

Figma 커뮤니티 포럼의 한 게시물에 따르면, Figma Make에서 컴포넌트 및 변수 라이브러리를 선택했더니 “대비가 거의 없는 색상과 말도 안 되는 글꼴 크기”가 나왔다고 합니다. 같은 사용자는 라이브러리를 아예 선택하지 않았을 때 결과가 약 90% 더 좋았다고 전합니다. 어떤 도구든 바로 이 실패를 기준으로 평가해야 합니다. 팀의 기존 컴포넌트로 만드느냐, 아니면 나중에 맞춰야 할 별도의 UI를 따로 만드느냐입니다.

최고의 디자인-코드 변환 AI 도구들은 하나의 순위표에서 경쟁하지 않습니다. 출발하는 입력이 서로 다르기 때문입니다. 스크린샷, Figma 파일, 글로 쓴 프롬프트, 기존 코드베이스는 담고 있는 구조의 양이 크게 다릅니다.

손에 쥔 것을 기준으로 고르세요. Figma 파일은 Figma 내장 코드 생성, Anima, Builder.io Visual Copilot 같은 변환 도구로 보냅니다. 스크린샷은 screenshot-to-code로 보냅니다. 프롬프트는 v0, Lovable, Bolt로 보냅니다. 기존 코드베이스는 Model Context Protocol(MCP)로 디자인 시스템을 읽는 코딩 에이전트로 보냅니다.

요약

• Figma 유료 사용자라면 Figma 내장 코드 생성을 쓰세요. screenshot-to-code는 디자인 파일이 없을 때만 씁니다. v0, Lovable, bolt.diy는 배포 대상, 과금 방식, 모델 키 요구 사항에 따라 고릅니다. 코드베이스와 디자인 시스템이 있다면 Code Connect 매핑을 갖춘 Figma MCP를 쓰세요.
• 어떤 도구든 도입하기 전에, 이미 컴포넌트가 있는 화면 하나를 생성해 보고 출력에 하드코딩된 hex 색상과 픽셀 값이 있는지, 라이브러리에서 import해야 할 자리에 컴포넌트를 새로 선언하지는 않았는지 확인하세요.
• bolt.diy, screenshot-to-code, Penpot은 직접 관리하는 서버에서 실행할 수 있지만 각각 주의할 점이 있습니다. bolt.diy는 2026년 2월부터 10월까지 커밋이 멈췄고 마지막 태그 릴리스는 2025년 5월 것입니다. screenshot-to-code는 모델 API 키가 필요하고, 셀프 호스팅 Penpot은 클라우드 릴리스보다 늦게 따라옵니다.
• 컴포넌트 재사용은 Code Connect를 쓴 Figma MCP나 Builder.io의 디자인 시스템 인덱싱처럼 명시적 매핑을 갖춘 도구에서 가장 잘 됩니다. 그래도 생성된 출력은 검토가 필요하니, 어떤 경로든 정리할 시간을 따로 잡아 두세요.

출발점에 맞는 도구 고르기

스크린샷에는 픽셀밖에 없습니다. Figma 파일에는 컴포넌트 이름, 변수, 레이아웃 규칙이 더해지고, 코드베이스에는 컴포넌트 자체가 들어 있습니다. 그래서 어떤 종류의 도구가 활용할 정보를 갖게 될지는 입력이 결정합니다.

컴포넌트와 토큰 재사용을 확인하는 화면 하나 테스트

라이브러리를 선택하지 않았을 때 결과가 더 좋았던 Make 사용자는 문제를 찾는 데 일주일이나 쓸 필요가 없었습니다. 문제는 처음 생성된 페이지에서 바로 드러났습니다. 그래서 어떤 후보든 화면 하나면 충분히 테스트할 수 있습니다.

1. 설정 폼이나 요금 카드처럼 팀이 기존 컴포넌트로 만든 화면을 하나 고릅니다.
2. 검토 중인 도구로 그 화면을 생성합니다. 입력은 새 작업에 쓸 것과 같은 종류를 사용합니다.
3. 출력에서 하드코딩된 값을 찾습니다. #3B82F6 같은 날것의 hex 색상, font-size: 14px 같은 픽셀 단위 글꼴 크기, 고정된 간격입니다. 이를 토큰 이름, CSS 변수, 테마 클래스를 얼마나 자주 쓰는지와 비교합니다.
4. import를 확인합니다. 컴포넌트 라이브러리에서 기존 것을 import하지 않고 Button이나 Card를 새로 선언한 출력은 별도의 UI를 만든 것입니다.
5. 프레임워크와 스타일링 방식이 저장소와 맞는지 확인합니다. 인라인 스타일을 쓴 일반 HTML은 미리보기가 어떻게 보이든 다시 작성해야 합니다.

2025 Stack Overflow 개발자 설문조사에서 개발자의 66%가 “거의 맞지만 완전히 맞지는 않는 AI 솔루션”을 AI 관련 가장 큰 불만으로 꼽았습니다. 이는 디자인-코드 변환 연구가 아니라 AI 코딩 도구 전반에 대한 결과입니다. 하지만 겉보기엔 맞는데 모든 색상을 하드코딩한 화면은 정확히 그런 의미에서 “거의 맞는” 상태입니다.

참고: 도구를 팀 전체에 도입하기 전에 이 점검을 하세요. 생성한 화면 하나는 몇 분이면 되지만, 하드코딩된 값이 섞인 출력을 한 달 동안 머지하면 정리에 스프린트 하나가 듭니다.

이 점검은 코드를 읽습니다. 렌더링된 화면이 여전히 디자인과 일치하는지는 별개의 문제이며, 시각적 회귀 검사를 수행하는 BackstopJS 같은 셀프 호스팅 도구로 확인합니다.

완성된 Figma 파일이 있다면

이 그룹의 Figma-코드 변환 AI 도구는 모두 같은 파일에서 출발합니다. 실질적인 차이는 코드가 어디에 도착하느냐입니다. 캔버스 위인지, 호스팅된 프로토타입인지, 서드파티 내보내기인지입니다.

Figma 내장 코드 생성

Figma Design에서 프레임, 컴포넌트, 섹션을 선택하고 에이전트를 연 다음 HTML과 CSS, React 컴포넌트, 또는 특정 프레임워크 코드를 요청합니다. Figma에 따르면 에이전트가 디자인 시스템을 참조하도록 지정할 수 있어, 출력이 일반적인 자리표시자 대신 토큰, 변수, 컴포넌트 구조를 참조하게 됩니다. 같은 페이지에는 모든 Figma 유료 플랜에서 사용할 수 있다고 나와 있습니다. 2026년 10월 기준으로 오픈 베타 단계이므로 크레딧 사용량과 한도는 바뀔 수 있습니다.

출력은 파일 안에 스레드로 남아 개발자가 열어 볼 수 있습니다. 호스팅이나 배포 단계는 없습니다. 실행되는 프로토타입을 원했다면 한계이고, 저장소에 붙여 넣을 코드를 원했다면 오히려 장점입니다.

Figma Make

Figma Make는 프롬프트로 움직이는 별도의 작업 공간입니다. Figma에 따르면 Make는 HTML, CSS, JavaScript를 출력해 프론트엔드 프로토타입을 만들고, 수정용 내장 편집기도 갖추고 있습니다. 무료 Starter 플랜에서 써 볼 수 있으며, 실시간 데이터를 시뮬레이션하는 Supabase 연동도 지원합니다.

Figma의 자체 기능들은 하는 일이 다릅니다. Make는 프롬프트와 프레임으로 동작하는 프로토타입을 만듭니다. 캔버스 내 생성기는 파일의 라이브러리를 사용해 선택한 프레임을 코드로 바꿉니다. Figma MCP는 저장소 안의 코딩 에이전트가 컴포넌트와 변수를 직접 읽게 해 줍니다.

Anima, Builder.io Visual Copilot, Locofy

Builder.io의 Visual Copilot은 React, Qwik, Angular 출력에 더해 모바일용 Kotlin과 Flutter를 지원 목록에 올려 두었고, 스타일은 Tailwind CSS나 CSS Modules로 입힙니다. 재사용과 관련해서는 같은 페이지에서 Custom Component Mapping을 소개하는데, Figma 컴포넌트를 코드베이스의 컴포넌트에 연결해 주는 기능입니다. Builder 문서는 이제 수동 컴포넌트 매핑을 컴포넌트 인덱싱으로 대체된 지원 중단(deprecated) 기능으로 표시하고 Enterprise 플랜 기능으로 분류하므로, 먼저 최신 문서와 사용 중인 플랜을 확인하세요.

Anima 무료 플랜은 Figma 플러그인에서 코드 생성 5회를 허용하고, AI Playground에서 하루 5개의 채팅 메시지와 Figma 가져오기 5회를 제공합니다. 2026년 10월 기준으로 Enterprise 요금은 연간 결제 기준 월 $500부터 시작합니다.

Anima는 MCP 서버도 운영하며, 이를 통해 생성한 코드도 같은 코드 생성 한도에서 차감됩니다. Locofy도 이 범주에 속하는 Figma 파일 변환 도구입니다.

어떤 Figma 변환 도구부터 시작할까

팀이 Figma 유료 플랜을 쓰고 있다면 Figma 내장 코드 생성부터 시작하세요. 내보내기 단계 없이 파일의 라이브러리를 읽고, 유료 플랜이라면 화면 하나 테스트에 새 구독이 필요 없습니다. 코드베이스 컴포넌트를 import하는 출력을 원하거나(매핑이나 컴포넌트 인덱싱이 사용 중인 플랜에 어떻게 적용되는지는 문서에서 확인하세요), 이름을 명시해 지원하는 Kotlin 또는 Flutter 모바일 출력을 원한다면 Builder.io Visual Copilot으로 바꾸세요.

다른 사람에게 보여 줄 클릭 가능한 프로토타입에는 Figma Make를 쓰세요. 머지할 코드는 Figma의 캔버스 내 코드 생성이나 Builder.io Visual Copilot으로 만들어야 합니다.

스크린샷만 있다면

screenshot-to-code는 이 경우의 기본 오픈소스 선택지입니다. MIT 라이선스이고, GitHub 스타가 약 80,000개이며, 2026년에도 커밋이 이어지고 있습니다. 이미지를 넣으면 Tailwind나 CSS를 쓴 HTML, React, Vue 등 여러 스택의 코드를 돌려줍니다. 직접 아무것도 실행하고 싶지 않다면 screenshottocode.com에 호스팅 버전이 있습니다.

screenshot-to-code AI는 이미지에 보이는 것만 다룰 수 있으니, 한계는 입력에 있습니다. 스크린샷에는 컴포넌트 정체성도, 변수도, 호버나 포커스 상태도, 반응형 브레이크포인트도 없습니다. 돌아오는 결과는 한 가지 너비에서 정적인 프레임 하나를 재구성한 것이고, 모든 토큰은 픽셀 색상으로 추측해야 합니다.

screenshot-to-code는 디자인 파일이 없을 때 알맞은 도구입니다. 참고 레이아웃을 맞추거나, 아무도 Figma 파일을 갖고 있지 않은 레거시 페이지를 다시 만들 때가 그렇습니다. Figma 파일이 있다면 그 파일에서 시작하세요. 스크린샷이 버리는 정보를 파일이 담고 있기 때문입니다.

프롬프트만 있다면

맞춰야 할 디자인 시스템이 없으면 장단점은 다른 세 곳으로 옮겨 갑니다. 도구가 어떻게 과금하는지, 코드를 얼마나 편집할 수 있는지, 생성된 앱이 어디까지 커질 수 있는지입니다.

v0

v0 무료 플랜에는 하루 7개 메시지 한도가 있고, Vercel 배포, GitHub 동기화, 시각적 Design Mode가 포함됩니다. 유료 사용량은 토큰 단위로 과금되며, v0 모델 토큰 요금은 v0 Mini부터 v0 Max Fast까지 네 가지 모델 등급마다 다릅니다. 세션 비용은 어떤 등급을 고르는지, 대화가 얼마나 길어지는지에 따라 달라집니다.

Lovable

Lovable은 크레딧으로 과금합니다. Default Mode에서는 작업 복잡도에 따라 비용이 달라지고, Plan Mode는 메시지당 1크레딧입니다. 무료 플랜에는 하루 5개의 빌드 크레딧이 지급되며, 월 30개가 상한입니다.

Bolt와 Lovable을 비교한 Reddit 스레드의 한 댓글 작성자는 Bolt가 코드에 대해 “거의 완전한 통제권”을 줬지만 Lovable은 코드 diff만 보여 줄 뿐 “편집 권한이 없는” 것 같았다고 썼습니다. 한 사용자의 경험담이니, 지금도 그렇다고 단정하기 전에 현재 편집기를 확인하세요.

Bolt.new와 bolt.diy

Bolt.new는 호스팅 제품입니다. bolt.diy는 그 오픈소스 버전으로, Ollama를 통한 로컬 모델을 포함해 21개 이상의 제공업체 가운데서 프롬프트마다 LLM을 고를 수 있습니다. 데이터베이스는 필수가 아니며 Supabase는 선택적 연동입니다. 그 위에 무언가를 만들기 전에 커밋 기록과 라이선스 조건을 확인하세요.

Google Stitch

리디자인에 관한 Winbuzzer 보도에 따르면, Google은 2026년 3월 무한 캔버스, 음성 상호작용, 디자인 에이전트를 갖춘 Stitch를 다시 출시했습니다. 같은 보도는 디자인을 Figma 형식이나 React 같은 코드 프레임워크로 내보낼 수 있고, MCP 서버가 Stitch를 Claude Code, Gemini CLI, Cursor, Antigravity에 연결한다고 전합니다. 그래서 Stitch는 프롬프트 경로와 코드베이스 경로 사이에 놓입니다. 프롬프트에서 시작하지만, 저장소에서 작업하는 에이전트에게 디자인을 넘길 수 있습니다.

어떤 프롬프트 도구부터 시작할까

Lovable과 Bolt에 관한 Hacker News 토론에서 한 댓글 작성자는 백엔드를 Supabase에 맡기는 한 이 두 도구로 쓸모 있는 소프트웨어를 만들 수 있는 상한이 “믿기 어려울 만큼 낮다”고 주장했습니다. 이 작성자는 경쟁 제품을 만들고 있다고 밝혔으니, 측정값이 아니라 이해관계가 걸린 정통한 의견으로 읽으세요.

Figma 파일이 있다고 해서 이 경로가 자동으로 배제되는 것도 아닙니다. Bolt와 Lovable에 관한 같은 Reddit 스레드에서 또 다른 댓글 작성자는 원하는 디자인을 만드는 데 Figma를 가져오는 것이 “그냥 프롬프트를 쓰는 것보다 더 어렵고 귀찮아” 보여서 한 번도 쓰지 않았다고 했습니다.

팀이 Vercel에 배포하고 첫날부터 GitHub 동기화를 원한다면 v0를 고르세요. 빌드 크레딧을 쓰기 전에 비용이 고정된 Plan Mode 메시지로 빌드를 계획하고 싶다면 Lovable을 고르고, 코드를 직접 고칠 생각이라면 편집기부터 확인하세요.

자체 모델 키를 쓰거나 로컬 모델을 돌려야 한다면 bolt.diy를 고르되, 다시 살아난 활동이 계속 이어지는지 확인될 때까지는 프로토타이핑 도구로 다루세요. 프롬프트로 생성한 디자인을 나중에 MCP 서버를 통해 저장소의 코딩 에이전트에게 넘기고 싶다면 Stitch를 써 보세요.

코드베이스와 디자인 시스템이 이미 있다면

이 경로는 에이전트가 컴포넌트 자체를 읽는 저장소 안에서 동작합니다. 대가는 설정 작업이고, 그렇게 해도 문서화된 메커니즘은 재사용 가능성을 높여 줄 뿐입니다. 재사용을 보장한다고 문서화된 메커니즘은 하나도 없습니다.

Figma MCP

Figma 고객 센터에 따르면 Figma MCP 서버는 컴포넌트, 변수, 레이아웃 데이터, FigJam 콘텐츠, Make 리소스를 읽은 뒤 선택한 프레임에서 코드를 생성할 수 있습니다. Code Connect를 사용해 그 코드를 컴포넌트와 맞추며, 원격 서버는 캔버스에 다시 쓸 수도 있습니다.

두 가지 버전이 있습니다. Figma가 대부분의 사용자에게 권장하는 원격 서버와, 특정 조직 및 엔터프라이즈 상황을 위한 데스크톱 서버입니다.

작동 방식으로 보면, MCP는 코딩 에이전트에게 디자인을 구조화된 데이터로 전달합니다. 에이전트가 프레임을 살펴보면 서버가 해당 프레임의 컴포넌트, 스타일, 변수를 보냅니다. Figma 블로그에 따르면 이 요소들이 Code Connect로 코드에 매핑되어 있으면 에이전트가 코드 리소스에서 가져올 수 있습니다. 매핑이 없으면 스타일 컨텍스트는 여전히 받지만 컴포넌트를 처음부터 작성합니다.

에이전트는 직접 고르면 됩니다. Figma 설정 가이드는 Claude Code 기준으로 작성되어 있고, OpenCode의 MCP 문서는 로컬과 원격 서버를 모두 다룹니다. Claude Code와 OpenCode 중 무엇을 고를지는 관리형의 편리함과 제공업체에 대한 통제권 중 무엇을 중시하느냐의 문제이며, 디자인 작업에만 해당하는 부분은 없습니다.

Penpot MCP

Penpot은 이에 해당하는 오픈소스 도구로, 문서에서는 세 가지 핵심 구성 요소를 설명합니다. MCP 서버, Penpot 안에서 실행되며 열려 있는 파일을 연결하는 MCP 플러그인, 그리고 프롬프트를 작성하는 MCP 클라이언트입니다. 설정은 Penpot 계정의 Integrations 페이지에서 개인 MCP 키로 합니다. 이를 통해 에이전트는 컴포넌트, 스타일, 토큰, 레이어를 읽고 수정할 수 있습니다.

프로젝트 구조가 최근 바뀌었습니다. 독립된 penpot-mcp 저장소에는 2026년 2월에 아카이브되었다는 공지가 있으며, 내용은 메인 Penpot 저장소로 통합되었습니다. 옛 저장소를 기준으로 쓴 가이드는 다른 설정 방법을 설명하고 있을 수 있습니다.

Claude Design

Anthropic은 2026년 4월 Pro, Max, Team, Enterprise 구독자를 대상으로 Anthropic Labs 리서치 프리뷰로 Claude Design을 출시했습니다. 온보딩 중에 Claude는 코드베이스와 디자인 파일을 읽어 팀의 디자인 시스템을 만들고, 이후 프로젝트에 적용하며, 완성된 디자인을 Claude Code용 핸드오프 번들로 묶어 줍니다.

자체 디자인 도구를 판매하는 UXPin은 출시 주간에 이렇게 썼습니다:

“이번 주에 Claude Design을 테스트한 디자이너들은 처음 몇 세션 만에 잘못된 글꼴, 틀린 버튼 색상, 일관성 없는 간격을 보고했습니다.”

어떤 코드베이스 구성부터 시작할까

디자인 시스템이 Figma에 있고 Code Connect 매핑 작업을 할 의향이 있다면 코딩 에이전트와 함께 Figma MCP를 쓰세요. import된 컴포넌트와 스타일만 다시 입힌 사본을 가르는 것이 바로 그 매핑이기 때문입니다.

에이전트가 읽고 편집할 수 있는 오픈소스 디자인 도구를 원한다면 Penpot MCP를 쓰세요. Penpot 자체는 셀프 호스팅이 되지만 MCP 문서는 Penpot 계정을 통한 설정을 설명하므로, 의존하기 전에 자체 인스턴스에서 그 흐름을 확인하세요.

팀이 Claude를 유료로 쓰고 있고 설정을 최소화하고 싶다면 Claude Design을 쓰되, 그것이 만든 디자인 시스템을 믿기 전에 화면 하나 테스트를 돌려 보세요.

오픈소스 도구를 자체 서버에서 실행하기

이 도구들 중 세 가지는 직접 관리하는 서버에서 실행할 수 있습니다. 업체의 호스팅 대신 직접 유지보수를 떠안고, bolt.diy와 screenshot-to-code의 경우 크레딧 과금 대신 자체 모델 키를 쓰게 됩니다. 2026년 10월 현재 각각 장단점이 있습니다.

bolt.diy. 저장소의 커밋 기록에 따르면 이 프로젝트는 2026년 2월 7일부터 10월 4일까지 커밋이 없었고, 마지막 태그 릴리스인 v1.0.0은 2025년 5월에 나왔습니다. 프로젝트는 MIT 라이선스지만, 이 프로젝트가 의존하는 WebContainers API(생성된 코드를 실행하는 브라우저 내 런타임)는 영리 목적의 상업 환경에서 프로덕션으로 사용하려면 라이선스가 필요합니다.

프로토타입과 개념 증명에는 그 라이선스가 필요 없습니다. 실제로 bolt.diy는 자체 키로 프로토타이핑하기에 무난한 선택입니다. 그 위에 제품을 만들기 전에는 활동 상황을 다시 확인하세요.

screenshot-to-code. 직접 실행하려면 OpenAI, Anthropic, Gemini 중 최소 하나의 모델 제공업체 키가 필요하고, 직접 유지보수하는 서버도 있어야 합니다. 운영 비용은 생성할 때마다 드는 모델 사용료이며, 설정한 키의 제공업체가 청구합니다.

Penpot. Penpot은 Docker Compose로, 또는 Kubernetes, OpenShift, Rancher에서 공식 Helm 차트로 셀프 호스팅할 수 있습니다. 문서에 따르면 셀프 호스팅용 Docker 이미지는 SaaS 업데이트 직후에 게시되므로, 클라우드의 새 기능은 시차를 두고 자체 인스턴스에 도착합니다.

어디서 실행할지는 누가 쓰느냐에 달려 있습니다. bolt.diy나 screenshot-to-code를 혼자 써 보는 데는 노트북이면 충분합니다. 팀이 Penpot 인스턴스를 공유하거나, 노트북을 덮어 둔 동안에도 도구에 접속할 수 있어야 한다면 서버가 맞습니다.

bolt.diy에는 공식 최소 사양이 없으므로, 이런 단일 Node 앱이라면 NVMe 스토리지에 4 GB RAM과 2 vCPU 정도를 출발점으로 삼으세요. Penpot 고객 센터에 따르면 4 CPU와 16 GB RAM으로 충분하다고 하며, 이 사양으로 수천 명의 사용자를 지원할 수 있고 리소스는 보수적으로 할당해도 된다고 합니다. 소규모 팀의 인스턴스와 코딩 에이전트를 같은 서버에서 함께 돌린다면 8~12 GB RAM 가까이에서 시작하는 것이 적당합니다. 에이전트를 그 머신의 브라우저 IDE에서도 실행한다면, Claude Code를 위한 Code Server 사양 산정은 따로 계산해야 합니다.

셀프 호스팅이란 서버 운영, 업데이트 적용, 모델 키 보안 관리를 직접 한다는 뜻입니다. 설치 단계를 건너뛰고 싶다면, 저희는 root 권한이 있는 Linux VPS에 프로토타이핑 환경을 띄우는 bolt.diy와 공유 디자인 작업 공간용 Penpot의 원클릭 배포를 제공합니다. Claude Code, OpenCode 같은 코딩 에이전트도 별도 앱으로 같은 방식으로 배포됩니다. 유지보수는 여전히 직접 해야 하지만, 설정은 그렇지 않습니다.

자주 묻는 질문

Figma Make와 v0 중 어느 쪽이 더 나을까요?

출발점이 결정합니다. Figma Make는 Figma 안에서 동작하며, 프레임과 프롬프트를 받아 프론트엔드 프로토타입용 HTML, CSS, JavaScript를 출력합니다. v0는 프롬프트만으로 시작해 Vercel에 배포하고 GitHub와 동기화합니다. 디자인이 Figma에 있다면 Make를, 설명에서 시작한다면 v0를 고르세요.

AI가 스크린샷을 동작하는 코드로 바꿀 수 있나요?

네. 오픈소스 screenshot-to-code 프로젝트는 OpenAI, Anthropic, Gemini API 키를 사용해 스크린샷을 HTML, React, Vue 코드로 바꿉니다. 다만 결과는 정적인 프레임 하나를 재구성한 것이라 컴포넌트 정체성, 상호작용 상태, 반응형 브레이크포인트가 없습니다. 그러니 Figma 파일이 있다면 그것이 더 좋은 입력입니다.

v0, Bolt, Lovable의 오픈소스 대안이 있나요?

네. bolt.diy는 Bolt.new의 오픈소스 버전이며, 여기서 다룬 프롬프트-앱 도구 중 셀프 호스팅이 가능한 선택지입니다. MIT 라이선스이고, Ollama를 통한 로컬 모델을 포함해 자체 모델 키로 동작합니다. 커밋은 2026년 2월부터 10월까지 멈췄고, 의존하는 WebContainers는 영리 목적의 프로덕션 사용에 상업 라이선스가 필요합니다. 그러니 그 위에 제품을 만들기 전에 활동 상황과 라이선스를 모두 확인하세요.

AI가 생성한 코드는 왜 디자인 시스템을 무시할까요?

많은 도구는 디자인을 픽셀이나 평면화된 프레임으로 보고, 거기서 색상, 글꼴, 간격을 근사합니다. Figma MCP처럼 변수와 컴포넌트 구조를 직접 읽는 도구는 Code Connect로 코드에 매핑되어 있으면 실제 컴포넌트를 import할 수 있습니다. 매핑이 없으면 에이전트는 스타일을 컨텍스트로 삼아 새 컴포넌트를 작성합니다.