Locofy.ai

Locofy는 디자인 파일을 읽고 프런트엔드 코드 생성 도구로 동작해 React, React Native, HTML/CSS, Flutter, Next.js, Angular, Vue, Gatsby 코드를 낸다. 이미지 기반의 평평한 페이지를 내놓는 대신 스타일과 레이아웃, 반응형을 유지한다. 프로젝트 전체나 레이어 하나를 변환할 수 있고, 다시 생성되는 건 편집한 레이어뿐이다.

변환은 Locofy의 Large Design Models 위에서 돌아간다. 수백만 개 디자인으로 학습해 텍스트가 아니라 구조와 레이아웃을 이해한다. 시각에 무게를 두기 때문에, Locofy에 따르면 외부 언어 모델을 쓰는 비중은 작업의 5% 미만이다. 일반 텍스트 모델보다 프레임의 여백과 제약에 더 가까운 코드가 나온다.

Locofy는 Cursor, GitHub Copilot, Windsurf, Claude, Gemini CLI 같은 코딩 어시스턴트에 붙는 MCP 서버를 제공한다. 에이전트가 정확한 프런트엔드 코드에서 출발하니, 레이아웃을 추측하는 대신 로직에 힘을 쓴다. 이미 에이전트를 일상적으로 쓰는 팀을 겨냥한다.

조작 요소에 태그를 붙여 무엇이 버튼이고 입력창이고 목록인지 Locofy에 알려 주면 생성되는 마크업이 좋아진다. 자체 디자인 시스템과 커스텀 컴포넌트는 CLI나 GitHub에서 가져올 수 있고, Locofy가 대응하는 Figma 부품에 연결한다. 이미 가진 컴포넌트는 props를 채운 채 재사용되니, 결과물이 기존 코드베이스에 맞물린다.

완성된 코드는 여러 경로로 Locofy를 떠난다. ZIP 다운로드, VS Code 확장, GitHub로의 직접 푸시다. 복사 붙여넣기 없이 에디터나 저장소로 가져올 수 있고, 생성은 그 자리에서 이뤄지며 Locofy 쪽에 코드를 저장하지 않는다. Figma Dev Mode를 쓰는 팀은 기존 습관을 유지한다.

Enterprise 플랜은 전용 프라이빗 클라우드나 자체 서버, 온프레미스 선택지를 더하고 인증에 SAML SSO도 준다. Locofy는 SOC 2와 ISO 인증을 받았고, Pro와 Enterprise 플랜은 콘텐츠가 플랫폼 학습이나 개선에 쓰이지 않는다고 보장한다. 디자인을 공유 클라우드로 보낼 수 없는 기업에는 중요한 부분이다.