운영 중인 제품 기준으로
디자인 작업을 다시 시작
오래된 파일이나 문서 대신, AI가 실제 배포된 서비스 웹을 탐색해 수정 가능한 Figma 구조로 복원합니다.
UI 변경을 코드 PR로 연결합니다.
Figma에서 수정한 디자인의 코드를 찾아 수정하고, GitHub PR 생성까지 이어지는 흐름을 직접 확인해보세요.
Legacy checkout UI exported from production.
디자인과 일치하도록 코드 변경 사항을 제안합니다.
gridi는 기존 코드를 직접 수정하지 않고,
변경 내용은 안전하게 검토 후 반영할 수 있어요.
오래된 파일이나 문서 대신, AI가 실제 배포된 서비스 웹을 탐색해 수정 가능한 Figma 구조로 복원합니다.
Figma에서 수정한 컴포넌트를 기준으로 해당 코드 위치를 찾아 연결합니다.
디자인 변경사항을 코드로 변환하고, GitHub PR 형태로 전달합니다.
AI가 서비스를 직접 탐색하고, 프로덕트 맵을 생성합니다. 현재 배포된 UI를 기준으로 화면과 컴포넌트 구조를 Figma로 가져옵니다 언제 바뀐건지 모르는 hot-fix도, 레거시 화면도, 언제나 최신버전으로 유지해보세요
디자이너가 바꾼 디테일을 AI가 수정하고, 엔지니어에게 검토 가능한 PR로 전달합니다 백로그에서 먼지만 쌓여 가던 디자인 개선사항들을 이제 직접 수정해보세요
디자인 QA가 말로 오면 놓치기 쉬웠는데, diff랑 같이 오니까 리뷰가 훨씬 빨라졌어요.
레거시 화면이 Figma에 제대로 정리돼 있지 않았는데, 실제 운영 UI 기준으로 시작할 수 있어서 좋았습니다.
작은 수정이 개발 우선순위에서 계속 밀렸는데, PR 단위로 오니까 처리 흐름이 훨씬 가벼워졌어요.
어떤 컴포넌트를 수정해야 하는지 찾는 시간이 줄었어요. 검토 가능한 형태로 오는 게 정말 편해요.
디자인 QA가 말로 오면 놓치기 쉬웠는데, diff랑 같이 오니까 리뷰가 훨씬 빨라졌어요.
레거시 화면이 Figma에 제대로 정리돼 있지 않았는데, 실제 운영 UI 기준으로 시작할 수 있어서 좋았습니다.
작은 수정이 개발 우선순위에서 계속 밀렸는데, PR 단위로 오니까 처리 흐름이 훨씬 가벼워졌어요.
어떤 컴포넌트를 수정해야 하는지 찾는 시간이 줄었어요. 검토 가능한 형태로 오는 게 정말 편해요.
운영 중인 제품 구조를 탐색하고
gridi를 가볍게 체험하는 플랜
디자인 변경을 코드 PR까지
연결하는 시작 플랜
다수의 제품과 빠른 반복 사이클을
다루는 팀을 위한 플랜
레거시 제품팀을 위한
맞춤형 플랜
서비스에 대해 더 궁금한 점이 있으시다면,
사이트 내 채널톡을 통해 문의주세요.
Figma export와 디자인 변경 정리는 디자이너가 먼저 시작할 수 있습니다.
다만 GitHub repo 연결과 PR 생성은 코드 접근 권한이 필요하므로 엔지니어 또는 팀 관리자의 동의가 필요합니다.
gridi는 디자이너가 직접 반영 가능한 제안을 만들고, 엔지니어가 검토하는 흐름을 제안합니다.
gridi는 운영 중인 웹 제품을 AI가 탐색해 UI 구조를 이해하고, Figma에서 수정하면 Github로 반영해주는 도구입니다.
Figma 파일이 없거나 오래된 레거시 화면은 수정 가능한 Figma 파일로 내보낼 수 있습니다.
이후 Figma에서 변경한 컴포넌트를 선택하면 관련 코드 위치를 찾아 수정안을 만들고 GitHub PR을 생성합니다.
아니요. gridi는 본인이 소유하거나 정당한 권한을 가진 제품만 탐색합니다.
도메인 인증을 통해 본인 제품임을 확인하며, 타사 서비스 무단 탐색은 엄격히 금지됩니다.
이를 위반하여 타사 제품을 무단으로 탐색하는 행위에 대해 gridi는 어떠한 책임도 지지 않습니다.
많은 팀에서 Figma와 실제 배포 UI는 시간이 지나며 달라집니다.
gridi는 지금 운영 중인 제품을 기준으로 Figma를 최신화하고, Figma의 변경사항이 코드에 반영될 수 있도록 연결합니다.
아니요. gridi는 코드를 직접 배포하지 않습니다.
수정안을 만들고 GitHub PR을 생성하며, 엔지니어가 리뷰하고 승인해야 실제 코드에 반영됩니다.
각 직군의 권한을 유지하면서 반복적인 디자인 반영 작업을 줄이는 방식입니다.
가능합니다.
AI 탐색화면에서 내 테스트 계정으로 로그인해 로그인 이후 화면과 플로우까지 탐색합니다.
보안 정책 또는 OTP 환경으로 인해 탐색이 제한될 수 있습니다.
초기에는 웹 프론트엔드 코드베이스를 우선 지원합니다.
React, Next.js 기반 프로젝트부터 앱 서비스까지 안정적으로 지원 범위를 넓혀갈 예정입니다.
초기에는 버튼, 카드, 폼, 레이아웃 간격, 색상, radius, 텍스트 스타일처럼 비교적 명확한 UI 변경을 중심으로 지원합니다.
복잡한 비즈니스 로직이나 데이터 흐름 변경은 아직 지원하지 않습니다.
코드 변경사항 요약, Figma 변경사항 요약, 수정 대상 파일, 코드 diff, 검토 포인트가 포함됩니다.
본인 제품의 화면을 수정 가능한 형태로 Figma에 내보내는 기능을 제공합니다.
완벽한 디자인 시스템을 한 번에 만드는 것보다, 실제 운영 UI를 기반으로 수정 가능한 출발점을 제공하는 데 초점을 둡니다.
추후 디자인 시스템을 생성하거나, 기존 디자인 시스템을 기반으로 내보내는 기능도 추가될 예정입니다.
Enterprise 플랜에서 팀 워크스페이스와 멤버 관리를 지원합니다.
도입은 gridi 채널톡으로 별도 문의해주세요.
구독 결제 후 실제 탐색 사용 이력이 없는 경우 환불이 가능합니다.
이미 탐색을 사용한 경우 사용된 크레딧 기준으로 환불이 제한될 수 있습니다.
서비스 우측 하단의 채널톡으로 문의해주세요.
Design Sync
버튼의 배경색을 Figma 디자인 토큰(
--color-primary)과 일치하도록 수정했습니다.#111111하드코드 값을 토큰 변수로 교체했습니다..buttonglobal.css수정 파일
이 PR은 gridi Design Sync에 의해 자동 생성되었습니다.global.css: replace (line 6)