AI를 위한 “Designer Flow”: 내가 Google Stitch에 다리를 만든 이유

Source: Dev.to

“컨텍스트” 문제

저는 Google Stitch를 사랑합니다. 멋지고 바로 배포 가능한 화면을 생성하지만, 마치 섬에 홀로 존재하는 것 같습니다. “홈 화면”을 생성하면, 제 AI 에이전트는 이를 알지 못합니다. 다음에 “프로필 화면”을 요청하면 AI가 처음부터 시작해 폰트, 색상, 분위기가 달라집니다. 저는 AI 에이전트가 제가 보는 것을 그대로 볼 수 있길 원했습니다.

그래서, 다리를 만들었습니다

저는 stitch‑mcp라는 오픈소스 커넥터를 만들었습니다. 이 커넥터는 Google Stitch를 직접 여러분의 AI 워크플로와 연결합니다. **Model Context Protocol (MCP)**을 사용해 에이전트가 디자인 프로젝트에 안전하고 직접적으로 접근할 수 있게 합니다. 이 다리는 단순히 파일을 가져오는 것을 넘어, AI가 디자인을 이해하도록 돕습니다.

“디자인 DNA” 기능

가장 멋진 부분은 extract_design_context 도구입니다. 수천 줄의 HTML을 채팅창에 복사해 넣는 대신, 이 도구가 화면을 스캔해 정말 중요한 요소만 추출합니다:

• Colors – 정확한 Tailwind 팔레트.
• Typography – 사용 중인 폰트와 굵기.
• Structure – 헤더, 네비게이션 바, 버튼이 어떻게 구성되어 있는지.

이 “디자인 DNA”를 AI 에이전트에게 전달하면, 다음에 생성되는 화면이 같은 앱에 속한 것처럼 보이게 됩니다.

사용 방법

프로젝트는 완전히 오픈소스이며, 약 2분이면 설정할 수 있습니다:

https://github.com/Kargatharaakash/stitch-mcp

한 번 사용해 보시고, GitHub에 ⭐️ 하나만 눌러 주시면 큰 도움이 됩니다—더 많은 사람들이 찾을 수 있게 도와줍니다.

즐거운 디자인 되세요. 🚀